feat: provide the new width property (#2677)

feat: provide a the new width property

Author: mfranzke

packages/db-ui-elements-stencil/src/components/db-button/db-button.tsx

@@ -80,6 +80,11 @@ export class DbButton {
    */
   @Prop({ reflect: true }) value?: string;
 
+  /**
+   * The width attribute let's you overwrite the standard display of the button width.
+   */
+  @Prop({ reflect: true }) width?: 'auto' | 'full';
+
   /**
    * The variant attribute specifies a visual expression of button.
    */
@@ -113,6 +118,7 @@ export class DbButton {
         type={this.type}
         value={this.value}
         data-size={this.size}
+        data-width={this.width}
       >
         {this.icon ? <db-icon icon={this.icon} /> : null}
         <slot />

packages/db-ui-elements-stencil/src/components/db-button/readme.md

@@ -26,6 +26,7 @@
 | `type`           | `type`           | The type attribute specifies the type of button.                                                                                                                                                   | `"button" \| "reset" \| "submit"`                                                              | `'submit'`  |
 | `value`          | `value`          | The value attribute specifies an initial value for the button.                                                                                                                                     | `string`                                                                                       | `undefined` |
 | `variant`        | `variant`        | The variant attribute specifies a visual expression of button.                                                                                                                                     | `"brand-primary" \| "primary" \| "secondary-outline" \| "secondary-solid" \| "tertiary-plain"` | `undefined` |
+| `width`          | `width`          | The width attribute let's you overwrite the standard display of the button width.                                                                                                                  | `"auto" \| "full"`                                                                             | `undefined` |
 
 
 ## Dependencies

packages/db-ui-elements-stencil/src/components/db-button/stories/button.intro.stories.mdx

@@ -46,6 +46,14 @@ You could set the icons position – either before or after the text – by usin
   <db-button variant="secondary-outline" icon="download">Secondary Outline</db-button> <db-button variant="secondary-outline" iconafter="download">Secondary Outline</db-button>
 </Canvas>
 
+<db-headline variant="2">width</db-headline>
+
+Regularly, our buttons shouldn't increase to it's horizontally available space, but only the one determined by it's included textual content. Use `width` property with the value of `full` to overwrite this definition.
+
+<Canvas>
+  <db-button variant="brand-primary">(Default) Auto width</db-button><span style={{display: "inline-block", width: "500px"}}><db-button variant="brand-primary" width="full">Width full</db-button></span>
+</Canvas>
+
 <db-headline variant="2">icononly (only use with care)</db-headline>
 
 If you'd only like to display the icon without any text, you could set the attribute `icononly` on the button component. But please keep in mind that a visual text ensures clarity on the subject of this button as well enables use cases like controlling the page by voice (accessibility).

packages/db-ui-elements-stencil/src/components/db-input/readme.md

@@ -20,9 +20,9 @@
 | `label` _(required)_ | `label`        | The label attribute specifies the caption of the input.                                                                                                                                                                                                                    | `string`                                               | `undefined`         |
 | `labelHidden`        | `label-hidden` | The label-hidden attribute is a boolean attribute. When specified, the elements label gets visually hidden (it's important to still keep it displayed for accessibility reasons).                                                                                          | `string`                                               | `undefined`         |
 | `list`               | `list`         | The list attribute is used to identify an element that lists predefined options suggested to the user.                                                                                                                                                                     | `string`                                               | `undefined`         |
-| `max`                | `max`          | The max attribute specifies the maximum value that is sufficient for this input.                                                                                                                                                                                           | `number \| string`                                      | `undefined`         |
+| `max`                | `max`          | The max attribute specifies the maximum value that is sufficient for this input.                                                                                                                                                                                           | `number \| string`                                     | `undefined`         |
 | `maxlength`          | `maxlength`    | /* The maxlength attribute, controlled by a dirty value flag, declares a limit on the number of characters a user can input.                                                                                                                                               | `number`                                               | `undefined`         |
-| `min`                | `min`          | The min attribute specifies the minimum value that is sufficient for this input.                                                                                                                                                                                           | `number \| string`                                      | `undefined`         |
+| `min`                | `min`          | The min attribute specifies the minimum value that is sufficient for this input.                                                                                                                                                                                           | `number \| string`                                     | `undefined`         |
 | `minlength`          | `minlength`    | /* The minlength attribute, when it applies, is a form control minlength attribute.                                                                                                                                                                                        | `number`                                               | `undefined`         |
 | `name`               | `name`         | The name content attribute gives the name of the form control, as used in form submission and in the form element's elements object. If the attribute is specified, its value must not be the empty string.                                                                | `string`                                               | `undefined`         |
 | `pattern`            | `pattern`      | The pattern attribute specifies a regular expression against which the control's value is to be checked.                                                                                                                                                                   | `string`                                               | `undefined`         |