Merge pull request #874 from Infineon/352-fullwidth-prop-on-button

Added fullWidth prop on button component
Infineon · Jan 17, 2024 · 67b26e5 · 67b26e5
2 parents 48a14ee + e5c80e0
commit 67b26e5
Show file tree

Hide file tree

Showing 9 changed files with 113 additions and 50 deletions.
diff --git a/examples/stencil-components/vanilla-cdn/index.html b/examples/stencil-components/vanilla-cdn/index.html
@@ -109,6 +109,9 @@ <h2>Button</h2>
     <ifx-button variant="primary" href="" target="_blank" theme="default" size="m" disabled="true" icon="false">
       Not clickable when disabled
     </ifx-button>
+    <div style="background-color: grey">
+      <ifx-button id="btn-in-div" theme='danger' onClick="toggleButtonWidth()">  I'm a button in a div. Click to toggle full width</ifx-button>
+    </div>
     <br />
 
     <h2>Checkbox</h2>
@@ -580,7 +583,11 @@ <h5 slot="title">Title</h5>
 
   updateValues();
 
-
+  function toggleButtonWidth(){
+    const btn = document.getElementById('btn-in-div');
+    btn.fullWidth = !btn.fullWidth;
+    console.log(btn.fullWidth);
+  }
 
 
 </script>

diff --git a/examples/wrapper-components/react-javascript/src/components/Button/button.js b/examples/wrapper-components/react-javascript/src/components/Button/button.js
@@ -1,13 +1,15 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { IfxButton } from '@infineon/infineon-design-system-react';
 
 function Button() {
+  const [fullWidth, setFullWidth] = useState(false);
+
   return (
     <div >
       <IfxButton theme='default'>Click me</IfxButton>
       <IfxButton theme='default' disabled='true'>Not clickable when disabled</IfxButton>
       <div style={{ backgroundColor: 'grey' }}>
-        <IfxButton theme='danger'>  I'm a button in a div</IfxButton>
+        <IfxButton fullWidth = {fullWidth} theme='danger' onClick={() => {setFullWidth(!fullWidth)}}>  I'm a button in a div. Click to toggle full width</IfxButton>
       </div>
     </div>
   )

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/components-vue/lib/components.ts b/packages/components-vue/lib/components.ts
@@ -64,7 +64,8 @@ export const IfxButton = /*@__PURE__*/ defineContainer<JSX.IfxButton>('ifx-butto
   'disabled',
   'href',
   'target',
-  'type'
+  'type',
+  'fullWidth'
 ]);
 
 

diff --git a/packages/components/src/components/button/button.scss b/packages/components/src/components/button/button.scss
@@ -4,6 +4,7 @@
 :host {
   vertical-align: bottom;
   display: inline-flex;
+  width: var(--bw, fit-content);
 }
 
 .btn {
@@ -24,6 +25,7 @@
   user-select: none;
   font-size: tokens.$ifxFontSizeM;
   transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+  width: var(--bw, fit-content);
 }
 
 .btn:not(.disabled) {

diff --git a/packages/components/src/components/button/button.stories.ts b/packages/components/src/components/button/button.stories.ts
@@ -11,6 +11,7 @@ export default {
     theme: "default",
     type: "button",
     size: "m",
+    fullWidth: false,
     disabled: false,
     iconPosition: 'left',
     href: false,
@@ -40,6 +41,9 @@ export default {
       options: ['xs', 's', 'm', 'l'],
       control: { type: 'radio' },
     },
+    fullWidth: {
+      control: {type: 'boolean'}
+    },
     iconPosition: {
       options: ['left', 'right'],
       control: { type: 'radio' }
@@ -55,12 +59,9 @@ export default {
 
 
 const DefaultTemplate = (args) =>
-  `<ifx-button type="${args.type}" disabled="${args.disabled}" variant="${args.variant}" size="${args.size}" target="${args.target}" theme="${args.theme}" ${args.href ? `href="${args.url}"` : ""}>
+  `<ifx-button type="${args.type}" disabled="${args.disabled}" variant="${args.variant}" size="${args.size}" target="${args.target}" theme="${args.theme}" ${args.href ? `href="${args.url}"` : ""} full-width="${args.fullWidth}">
   ${args.icon && args.iconPosition.toUpperCase() === "LEFT" ? `<ifx-icon icon="${args.icon}"></ifx-icon>` : ""}${args.label}${args.icon && args.iconPosition.toUpperCase() === "RIGHT" ? `<ifx-icon icon="${args.icon}"></ifx-icon>` : ""} 
 </ifx-button>`;
 
 
 export const Default = DefaultTemplate.bind({});
-
-
-
diff --git a/packages/components/src/components/button/button.tsx b/packages/components/src/components/button/button.tsx
@@ -16,6 +16,7 @@ export class Button {
   @Prop() href: string;
   @Prop() target: string = '_self';
   @Prop() type: "button" | "submit" | "reset" = "button";
+  @Prop() fullWidth: boolean = false;
   @Element() el;
 
   private focusableElement: HTMLElement;
@@ -49,9 +50,21 @@ export class Button {
     }
   }
 
+  handleButtonWidth(){
+    if(this.fullWidth){
+      this.el.style.setProperty('--bw', '100%');
+    }else{
+      this.el.style.setProperty('--bw', 'fit-content');
+    }
+  }
+
   componentWillLoad() {
    this.handleFormAndInternalHref()
   }
+
+  componentWillRender(){  
+    this.handleButtonWidth()
+  }
 
   handleClick() {
     if (!this.disabled) {
@@ -135,8 +148,7 @@ export class Button {
       'btn',
       this.size && `btn-${this.getSizeClass()}`,
       `btn-${this.getVariantClass()}`,
-      this.disabled ? 'disabled' : '',
-
+      this.disabled ? 'disabled' : ''
     );
   }
 }
diff --git a/packages/components/src/components/button/readme.md b/packages/components/src/components/button/readme.md
@@ -7,15 +7,16 @@
 
 ## Properties
 
-| Property   | Attribute  | Description | Type                                     | Default     |
-| ---------- | ---------- | ----------- | ---------------------------------------- | ----------- |
-| `disabled` | `disabled` |             | `boolean`                                | `false`     |
-| `href`     | `href`     |             | `string`                                 | `undefined` |
-| `size`     | `size`     |             | `string`                                 | `'m'`       |
-| `target`   | `target`   |             | `string`                                 | `'_self'`   |
-| `theme`    | `theme`    |             | `"danger" \| "default" \| "inverse"`     | `'default'` |
-| `type`     | `type`     |             | `"button" \| "reset" \| "submit"`        | `"button"`  |
-| `variant`  | `variant`  |             | `"primary" \| "secondary" \| "tertiary"` | `'primary'` |
+| Property    | Attribute    | Description | Type                                     | Default     |
+| ----------- | ------------ | ----------- | ---------------------------------------- | ----------- |
+| `disabled`  | `disabled`   |             | `boolean`                                | `false`     |
+| `fullWidth` | `full-width` |             | `boolean`                                | `false`     |
+| `href`      | `href`       |             | `string`                                 | `undefined` |
+| `size`      | `size`       |             | `string`                                 | `'m'`       |
+| `target`    | `target`     |             | `string`                                 | `'_self'`   |
+| `theme`     | `theme`      |             | `"danger" \| "default" \| "inverse"`     | `'default'` |
+| `type`      | `type`       |             | `"button" \| "reset" \| "submit"`        | `"button"`  |
+| `variant`   | `variant`    |             | `"primary" \| "secondary" \| "tertiary"` | `'primary'` |
 
 
 ## Methods

diff --git a/packages/components/src/index.html b/packages/components/src/index.html
@@ -11,6 +11,16 @@
 
   <style defer>
 
+    #wrapper { 
+      width: 500px;
+      border: 1px solid;
+      padding: 10px;
+    }
+
+    #myButton { 
+      margin: 10px;
+    }
+
   </style>
 
   <script defer>
@@ -21,6 +31,33 @@
 
 <body>
 
+  <div id="wrapper">
+    <ifx-button
+    type="button"
+    disabled="false"
+    variant="primary"
+    size="m"
+    target="_blank"
+    theme="default"
+    full-width="false"
+  >
+    Button
+  </ifx-button>
+
+    <ifx-button
+    type="button"
+    disabled="false"
+    variant="primary"
+    size="m"
+    target="_blank"
+    theme="default"
+    id="myButton"
+    full-width="true"
+  >
+    Button
+  </ifx-button>
+  </div>
+
 </body>
 
 </html>