From 14f4bcf1e7632f2a7991d60de172ba7f173f3d97 Mon Sep 17 00:00:00 2001 From: Gerardo Rodriguez Date: Thu, 2 Sep 2021 09:12:36 -0700 Subject: [PATCH 1/7] Remove aria-pressed from CSS --- src/mixins/_button.scss | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/mixins/_button.scss b/src/mixins/_button.scss index ae2a5980f..1ff640329 100644 --- a/src/mixins/_button.scss +++ b/src/mixins/_button.scss @@ -109,11 +109,9 @@ } /** - * Toggling button - * This adds a slash across the icon to visually show the state has changed - * when `aria-pressed` is `'true'`. + * Adds a slash across the "extra" content (most times "extra" content is an icon). */ - &[aria-pressed='true'] { + &.c-button--slashed { .c-button__extra { &::after { background: currentColor; From f6c07adf6d18563fa233d2ff36db308bee982b30 Mon Sep 17 00:00:00 2001 From: Gerardo Rodriguez Date: Thu, 2 Sep 2021 09:12:59 -0700 Subject: [PATCH 2/7] Refactor template to remove aria-pressed logic --- src/components/button/button.twig | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/src/components/button/button.twig b/src/components/button/button.twig index af98aa9c2..f5e90fa3b 100644 --- a/src/components/button/button.twig +++ b/src/components/button/button.twig @@ -1,12 +1,12 @@ {% set tag_name = tag_name|default(href ? 'a' : 'button') %} -{# aria_pressed only accepts 'true' or 'false' (string) values #} -{% set is_aria_pressed_valid = aria_pressed == 'true' or aria_pressed == 'false' %} +{# Check if the 'slashed' modifier exists #} +{% set is_slashed = 'c-button--slashed' in class %} {# Check for 'content_start' and 'content_end' content #} {% set _content_start = block('content_start') %} {% set _content_end = block('content_end') %} -{# Set a default icon if aria-pressed is set and no icon (or block content) was supplied #} +{# Set a default icon if is_slashed is set and no icon (or block content) was supplied #} {% if - is_aria_pressed_valid and + is_slashed and content_start_icon is empty and content_end_icon is empty and _content_start|trim is empty and @@ -20,9 +20,6 @@ {% if aria_expanded %} aria-expanded="{{ aria_expanded }}" {% endif %} - {% if is_aria_pressed_valid %} - aria-pressed="{{ aria_pressed }}" - {% endif %} {% if tag_name == 'a' %} href="{{ href|default('#') }}" {% elseif tag_name == 'button' %} From b4967626f8cd042824aca2e3cfb2bab010e79f45 Mon Sep 17 00:00:00 2001 From: Gerardo Rodriguez Date: Thu, 2 Sep 2021 09:13:23 -0700 Subject: [PATCH 3/7] Refactor custom icon demo to show slashed icon --- src/components/button/demo/icon-button-custom-demo.twig | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/button/demo/icon-button-custom-demo.twig b/src/components/button/demo/icon-button-custom-demo.twig index 4a3332b95..03af04976 100644 --- a/src/components/button/demo/icon-button-custom-demo.twig +++ b/src/components/button/demo/icon-button-custom-demo.twig @@ -1,4 +1,6 @@ -{% embed '@cloudfour/components/button/button.twig' %} +{% embed '@cloudfour/components/button/button.twig' with { + class: 'c-button--slashed' +} only %} {% block content %}Button with a custom icon{% endblock %} {% block content_end %} From 17508a8b6b633b5542e61ad1f3e6c4129025d081 Mon Sep 17 00:00:00 2001 From: Gerardo Rodriguez Date: Thu, 2 Sep 2021 09:13:37 -0700 Subject: [PATCH 4/7] Refactor docs to remove aria-pressed --- src/components/button/button.stories.mdx | 28 ++++++++++++++---------- 1 file changed, 16 insertions(+), 12 deletions(-) diff --git a/src/components/button/button.stories.mdx b/src/components/button/button.stories.mdx index eacd03c96..cd39e438c 100644 --- a/src/components/button/button.stories.mdx +++ b/src/components/button/button.stories.mdx @@ -142,40 +142,45 @@ The `content_start`/`content_end` blocks override the -## Toggling button +## Icon with slash -Pass an `aria_pressed` value (`'true'` or `'false'`) to enable a toggling button. If no `content_start_icon`/`content_end_icon` or `content_start`/`content_end` block content is passed in, the `'bell'` icon will be used by default as the `content_start_icon` value. +To add a slash across the icon(s), use the `c-button--slashed` modifier. + +If no `content_start_icon`/`content_end_icon` or `content_start`/`content_end` block content is passed in, the `'bell'` icon will be used by default as the `content_start_icon` value. You can override the `content_start_icon` value to a different icon. {(args) => buttonStory(args)} {(args) => buttonStory(args)} {(args) => buttonStory(args)} - + {(args) => iconButtonCustomDemo(args)} @@ -183,7 +188,6 @@ You can override the `content_start_icon` value to a different icon. ## Template Properties - `aria_expanded` (string, `'true'`/`'false'`): Sets the button's `aria-expanded` attribute. -- `aria_pressed` (string, `'true'`/`'false'`): Sets the button's `aria-pressed` attribute. - `class` (string): Append a class to the root element. - `content_start_icon` (string): The name of the [icon](/docs/design-icons--page) to render in the `content_start` block. - `content_end_icon` (string): The name of the [icon](/docs/design-icons--page) to render in the `content_end` block. From f4e67a813632c0e477f962f664d4965e9255eb61 Mon Sep 17 00:00:00 2001 From: Gerardo Rodriguez Date: Thu, 2 Sep 2021 09:27:44 -0700 Subject: [PATCH 5/7] Add changeset --- .changeset/famous-peaches-punch.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/famous-peaches-punch.md diff --git a/.changeset/famous-peaches-punch.md b/.changeset/famous-peaches-punch.md new file mode 100644 index 000000000..2c27848ec --- /dev/null +++ b/.changeset/famous-peaches-punch.md @@ -0,0 +1,5 @@ +--- +'@cloudfour/patterns': minor +--- + +Introduce `c-button--slashed` modifier, remove `aria-pressed` logic From b56660ffc2ba9589d45fdd8d2b73983cf8863db0 Mon Sep 17 00:00:00 2001 From: Gerardo Rodriguez Date: Thu, 2 Sep 2021 09:40:34 -0700 Subject: [PATCH 6/7] Remove aria_pressed setting in controls --- src/components/button/button.stories.mdx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/components/button/button.stories.mdx b/src/components/button/button.stories.mdx index cd39e438c..010c7313f 100644 --- a/src/components/button/button.stories.mdx +++ b/src/components/button/button.stories.mdx @@ -57,10 +57,6 @@ const buttonStory = (args) => { disabled: { type: { name: 'boolean' }, defaultValue: false }, content_start_icon: iconControlConfig, content_end_icon: iconControlConfig, - aria_pressed: { - type: { name: 'enum' }, - control: { type: 'inline-radio', options: ['true', 'false'] }, - }, }} /> From 3d6fbe3abff61720a5f7af96a6c70d35f843a747 Mon Sep 17 00:00:00 2001 From: Gerardo Rodriguez Date: Thu, 2 Sep 2021 09:57:53 -0700 Subject: [PATCH 7/7] PR feedback, use CSS state modifier class --- .changeset/famous-peaches-punch.md | 2 +- src/components/button/button.stories.mdx | 15 +++++++++------ src/components/button/button.twig | 6 ++---- .../button/demo/icon-button-custom-demo.twig | 4 +--- .../demo/slashed-icon-button-custom-demo.twig | 10 ++++++++++ src/mixins/_button.scss | 2 +- 6 files changed, 24 insertions(+), 15 deletions(-) create mode 100644 src/components/button/demo/slashed-icon-button-custom-demo.twig diff --git a/.changeset/famous-peaches-punch.md b/.changeset/famous-peaches-punch.md index 2c27848ec..78d5bc1c6 100644 --- a/.changeset/famous-peaches-punch.md +++ b/.changeset/famous-peaches-punch.md @@ -2,4 +2,4 @@ '@cloudfour/patterns': minor --- -Introduce `c-button--slashed` modifier, remove `aria-pressed` logic +Introduce `is-slashed` CSS state class, remove `aria-pressed` logic diff --git a/src/components/button/button.stories.mdx b/src/components/button/button.stories.mdx index 010c7313f..82f3e262b 100644 --- a/src/components/button/button.stories.mdx +++ b/src/components/button/button.stories.mdx @@ -12,6 +12,9 @@ import stylesDemo from './demo/styles.twig'; // eslint-disable-next-line @cloudfour/import/no-webpack-loader-syntax import iconButtonCustomDemoSource from '!!raw-loader!./demo/icon-button-custom-demo.twig'; import iconButtonCustomDemo from './demo/icon-button-custom-demo.twig'; +// eslint-disable-next-line @cloudfour/import/no-webpack-loader-syntax +import slashedIconButtonCustomDemoSource from '!!raw-loader!./demo/slashed-icon-button-custom-demo.twig'; +import slashedIconButtonCustomDemo from './demo/slashed-icon-button-custom-demo.twig'; import button from './button.twig'; const iconControlConfig = { type: { name: 'string' }, @@ -140,7 +143,7 @@ The `content_start`/`content_end` blocks override the ## Icon with slash -To add a slash across the icon(s), use the `c-button--slashed` modifier. +To add a slash across the icon(s), use the `is-slashed` state modifier CSS class. If no `content_start_icon`/`content_end_icon` or `content_start`/`content_end` block content is passed in, the `'bell'` icon will be used by default as the `content_start_icon` value. @@ -150,7 +153,7 @@ You can override the `content_start_icon` value to a different icon. {(args) => buttonStory(args)} @@ -158,7 +161,7 @@ You can override the `content_start_icon` value to a different icon. {(args) => buttonStory(args)} @@ -166,7 +169,7 @@ You can override the `content_start_icon` value to a different icon. {(args) => buttonStory(args)} @@ -174,10 +177,10 @@ You can override the `content_start_icon` value to a different icon. - {(args) => iconButtonCustomDemo(args)} + {(args) => slashedIconButtonCustomDemo(args)} diff --git a/src/components/button/button.twig b/src/components/button/button.twig index f5e90fa3b..920c7aaef 100644 --- a/src/components/button/button.twig +++ b/src/components/button/button.twig @@ -1,12 +1,10 @@ {% set tag_name = tag_name|default(href ? 'a' : 'button') %} -{# Check if the 'slashed' modifier exists #} -{% set is_slashed = 'c-button--slashed' in class %} {# Check for 'content_start' and 'content_end' content #} {% set _content_start = block('content_start') %} {% set _content_end = block('content_end') %} -{# Set a default icon if is_slashed is set and no icon (or block content) was supplied #} +{# Set a default icon if `is-slashed` exists and no icon (or block content) was supplied #} {% if - is_slashed and + 'is-slashed' in class and content_start_icon is empty and content_end_icon is empty and _content_start|trim is empty and diff --git a/src/components/button/demo/icon-button-custom-demo.twig b/src/components/button/demo/icon-button-custom-demo.twig index 03af04976..e8a7d07e4 100644 --- a/src/components/button/demo/icon-button-custom-demo.twig +++ b/src/components/button/demo/icon-button-custom-demo.twig @@ -1,6 +1,4 @@ -{% embed '@cloudfour/components/button/button.twig' with { - class: 'c-button--slashed' -} only %} +{% embed '@cloudfour/components/button/button.twig' only %} {% block content %}Button with a custom icon{% endblock %} {% block content_end %} diff --git a/src/components/button/demo/slashed-icon-button-custom-demo.twig b/src/components/button/demo/slashed-icon-button-custom-demo.twig new file mode 100644 index 000000000..1a0c69908 --- /dev/null +++ b/src/components/button/demo/slashed-icon-button-custom-demo.twig @@ -0,0 +1,10 @@ +{% embed '@cloudfour/components/button/button.twig' with { + class: 'is-slashed' +} only %} + {% block content %}Button with a custom icon{% endblock %} + {% block content_end %} + + + + {% endblock %} +{% endembed %} diff --git a/src/mixins/_button.scss b/src/mixins/_button.scss index 1ff640329..379da1ba5 100644 --- a/src/mixins/_button.scss +++ b/src/mixins/_button.scss @@ -111,7 +111,7 @@ /** * Adds a slash across the "extra" content (most times "extra" content is an icon). */ - &.c-button--slashed { + &.is-slashed { .c-button__extra { &::after { background: currentColor;