From d684a0cf0384d55a1d06257d694d79f72016e5b6 Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Wed, 24 Jul 2024 09:17:11 +0200 Subject: [PATCH 1/4] feat: providing auto width for buttons --- .../01-elements/buttons/10-button-width.hbs | 5 +++++ source/_patterns/01-elements/buttons/_buttons.md | 12 ++++++++++++ source/_patterns/01-elements/buttons/button.hbs | 3 ++- source/_patterns/01-elements/buttons/button.scss | 9 +++++++++ 4 files changed, 28 insertions(+), 1 deletion(-) create mode 100644 source/_patterns/01-elements/buttons/10-button-width.hbs diff --git a/source/_patterns/01-elements/buttons/10-button-width.hbs b/source/_patterns/01-elements/buttons/10-button-width.hbs new file mode 100644 index 00000000000..3ea028626d1 --- /dev/null +++ b/source/_patterns/01-elements/buttons/10-button-width.hbs @@ -0,0 +1,5 @@ +{{!-- TODO: let's not use those modifier classes, but inherit their meaning via CSS correctly and introduce sample classes for the styleguide --}} +

+ {{> elements-button variant='brand-primary' value='(Default) Auto width'}} + {{> elements-button variant='brand-primary' value='Width full' width='full' }} +

diff --git a/source/_patterns/01-elements/buttons/_buttons.md b/source/_patterns/01-elements/buttons/_buttons.md index 89cced3a1c1..4ada9e8b910 100644 --- a/source/_patterns/01-elements/buttons/_buttons.md +++ b/source/_patterns/01-elements/buttons/_buttons.md @@ -25,6 +25,18 @@ Extend one of the size SCSS placeholders in case that you don't want the default You could set the different button sizes via the `data-size` attribute, the default is "regular" and in that case is optional. +### Width + +Regularly, our button shouldn't increase to it's horizontally available space, but only the one determined by it's included textual content. + +#### SCSS (recommended) + +Extend the width SCSS placeholders in case that you don't want the default (`auto`): `%width-Full` + +#### HTML attribute + +You could set the button width to increase to it's full available space via the `data-width="full"` attribute, the default is `auto` and in that case is optional. + ## Usability > Buttons should be used in situations where users might need to: diff --git a/source/_patterns/01-elements/buttons/button.hbs b/source/_patterns/01-elements/buttons/button.hbs index 4e8f0b8e7ef..39b2d1ac4aa 100644 --- a/source/_patterns/01-elements/buttons/button.hbs +++ b/source/_patterns/01-elements/buttons/button.hbs @@ -7,6 +7,7 @@ {{#if disabled }} disabled{{/if }} {{#if icon}} data-icon="{{ icon }}"{{/if}} {{#if icon-after}} data-icon-after="{{ icon-after }}"{{/if}} - {{#if label}} aria-label="{{ label }}"{{/if }}> + {{#if label}} aria-label="{{ label }}"{{/if }} + {{#if width }} data-width="{{ width}}"{{/if }}> {{{ value }}} diff --git a/source/_patterns/01-elements/buttons/button.scss b/source/_patterns/01-elements/buttons/button.scss index 42f833cdf61..ac2b83ade46 100644 --- a/source/_patterns/01-elements/buttons/button.scss +++ b/source/_patterns/01-elements/buttons/button.scss @@ -216,4 +216,13 @@ &:disabled { color: unquote($button---color + "80"); } + + // width + &%width-Full { + inline-size: 100%; + } + + &[data-width="full"] { + @extend %width-Full; + } } From 6b6ef3feb24f8e9324d9c901d1a18962984fa035 Mon Sep 17 00:00:00 2001 From: Maximilian Franzke <787658+mfranzke@users.noreply.github.com> Date: Wed, 24 Jul 2024 09:18:21 +0200 Subject: [PATCH 2/4] Update _buttons.md --- source/_patterns/01-elements/buttons/_buttons.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/source/_patterns/01-elements/buttons/_buttons.md b/source/_patterns/01-elements/buttons/_buttons.md index 4ada9e8b910..7cd9c13be85 100644 --- a/source/_patterns/01-elements/buttons/_buttons.md +++ b/source/_patterns/01-elements/buttons/_buttons.md @@ -27,7 +27,7 @@ You could set the different button sizes via the `data-size` attribute, the defa ### Width -Regularly, our button shouldn't increase to it's horizontally available space, but only the one determined by it's included textual content. +Regularly, our buttons shouldn't increase to it's horizontally available space, but only the one determined by it's included textual content. #### SCSS (recommended) From 2c678f10a6902df368505acd8879188b59c4ce1a Mon Sep 17 00:00:00 2001 From: Maximilian Franzke <787658+mfranzke@users.noreply.github.com> Date: Wed, 24 Jul 2024 09:18:46 +0200 Subject: [PATCH 3/4] Update button.hbs --- source/_patterns/01-elements/buttons/button.hbs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/source/_patterns/01-elements/buttons/button.hbs b/source/_patterns/01-elements/buttons/button.hbs index 39b2d1ac4aa..50a40b920b4 100644 --- a/source/_patterns/01-elements/buttons/button.hbs +++ b/source/_patterns/01-elements/buttons/button.hbs @@ -8,6 +8,6 @@ {{#if icon}} data-icon="{{ icon }}"{{/if}} {{#if icon-after}} data-icon-after="{{ icon-after }}"{{/if}} {{#if label}} aria-label="{{ label }}"{{/if }} - {{#if width }} data-width="{{ width}}"{{/if }}> + {{#if width }} data-width="{{ width }}"{{/if }}> {{{ value }}} From 20fb73d2c1f452d62e407f8350e9238cde916098 Mon Sep 17 00:00:00 2001 From: Maximilian Franzke <787658+mfranzke@users.noreply.github.com> Date: Wed, 24 Jul 2024 10:09:37 +0200 Subject: [PATCH 4/4] Update 10-button-width.hbs --- source/_patterns/01-elements/buttons/10-button-width.hbs | 1 + 1 file changed, 1 insertion(+) diff --git a/source/_patterns/01-elements/buttons/10-button-width.hbs b/source/_patterns/01-elements/buttons/10-button-width.hbs index 3ea028626d1..8b1f2e2b801 100644 --- a/source/_patterns/01-elements/buttons/10-button-width.hbs +++ b/source/_patterns/01-elements/buttons/10-button-width.hbs @@ -1,5 +1,6 @@ {{!-- TODO: let's not use those modifier classes, but inherit their meaning via CSS correctly and introduce sample classes for the styleguide --}}

{{> elements-button variant='brand-primary' value='(Default) Auto width'}} + {{> elements-button variant='brand-primary' value='Width full' width='full' }}