From 162944c57c14da637045d3cee15f714d6504369a Mon Sep 17 00:00:00 2001 From: Andrew Holloway Date: Wed, 12 Feb 2025 14:56:10 -0600 Subject: [PATCH 1/3] fix(Button): update button sizes in icon only to have a minimum width --- .gitignore | 1 + src/components/Button/Button.module.css | 22 +++++++++++----------- 2 files changed, 12 insertions(+), 11 deletions(-) diff --git a/.gitignore b/.gitignore index 6039b1798..50746f085 100644 --- a/.gitignore +++ b/.gitignore @@ -27,6 +27,7 @@ storybook-components .env.production.local .cache .idea +.edsrc.json npm-debug.log* yarn-debug.log* diff --git a/src/components/Button/Button.module.css b/src/components/Button/Button.module.css index 7b8af21c0..15b472c30 100644 --- a/src/components/Button/Button.module.css +++ b/src/components/Button/Button.module.css @@ -6,7 +6,7 @@ /** * TODO: Icon inherits color from the surrounding text, but should use the matching -icon- tokens from below */ - + .button { position: relative; border-radius: calc(var(--eds-border-radius-full) * 1px); @@ -83,13 +83,14 @@ } .button--size-lg { - min-width:calc(var(--eds-size-9) / 16 * 1rem); - max-width:calc(var(--eds-size-40) / 16 * 1rem); + min-width: calc(var(--eds-size-9) / 16 * 1rem); + max-width: calc(var(--eds-size-40) / 16 * 1rem); max-height: calc(var(--eds-size-5) / 16 * 1rem); } .button--size-md { - min-width: 3.75rem; /* TODO: missing size token */ + min-width: 3.75rem; + /* TODO: missing size token */ max-width: calc(var(--eds-size-32) / 16 * 1rem); max-height: calc(var(--eds-size-4) / 16 * 1rem); } @@ -108,10 +109,6 @@ * Anatomy and iconLayout (w/ size) * lg=40, md=32, sm=24 when layout is icon-only */ -.button--layout-icon-only { - min-width: unset; -} - .button--lg.button--layout-left { padding-left: calc(var(--eds-size-2) / 16 * 1rem); } @@ -123,16 +120,19 @@ .button--lg.button--layout-icon-only { padding: calc(var(--eds-size-1) / 16 * 1rem); width: calc(var(--eds-size-5) / 16 * 1rem); + min-width: calc(var(--eds-size-5) / 16 * 1rem); } .button--md.button--layout-icon-only { padding: calc(var(--eds-size-1) / 16 * 1rem); width: calc(var(--eds-size-4) / 16 * 1rem); + min-width: calc(var(--eds-size-4) / 16 * 1rem); } .button--sm.button--layout-icon-only { padding: calc(var(--eds-size-half) / 16 * 1rem); width: calc(var(--eds-size-3) / 16 * 1rem); + min-width: calc(var(--eds-size-3) / 16 * 1rem); } .button:focus-visible { @@ -188,7 +188,7 @@ .button--tertiary.button--variant-critical { color: var(--eds-theme-color-background-utility-critical-high-emphasis); - border-color: var(--eds-theme-color-background-utility-inverse-high-emphasis); + border-color: var(--eds-theme-color-background-utility-inverse-high-emphasis); } .button--primary.button--variant-neutral { @@ -276,7 +276,7 @@ &.button--primary.button--variant-neutral { color: var(--eds-theme-color-text-utility-disabled-primary); border-color: var(--eds-theme-color-background-utility-disabled-medium-emphasis); - background-color: var(--eds-theme-color-background-utility-disabled-medium-emphasis); + background-color: var(--eds-theme-color-background-utility-disabled-medium-emphasis); } &.button--primary.button--variant-inverse { @@ -327,7 +327,7 @@ * States */ - /* Hover */ +/* Hover */ .button--variant-default:hover { background-color: var(--eds-theme-color-border-utility-interactive-hover); border-color: var(--eds-theme-color-border-utility-interactive-hover); From 849fa7d7bf77b33995425fb3294ee36d43d11df1 Mon Sep 17 00:00:00 2001 From: Andrew Holloway Date: Wed, 12 Feb 2025 15:43:37 -0600 Subject: [PATCH 2/3] fix(Button): re-add handler for unsetting the style --- src/components/Button/Button.module.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/Button/Button.module.css b/src/components/Button/Button.module.css index 15b472c30..debfeb227 100644 --- a/src/components/Button/Button.module.css +++ b/src/components/Button/Button.module.css @@ -109,6 +109,10 @@ * Anatomy and iconLayout (w/ size) * lg=40, md=32, sm=24 when layout is icon-only */ +.button--layout-icon-only { + min-width: unset; +} + .button--lg.button--layout-left { padding-left: calc(var(--eds-size-2) / 16 * 1rem); } From a38aca4d7c20964714630a7ba814a967bbc38755 Mon Sep 17 00:00:00 2001 From: Andrew Holloway Date: Wed, 12 Feb 2025 18:33:34 -0600 Subject: [PATCH 3/3] docs(Button): address PR comments re gitignor and code comment --- .gitignore | 1 - src/components/Button/Button.module.css | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/.gitignore b/.gitignore index 50746f085..6039b1798 100644 --- a/.gitignore +++ b/.gitignore @@ -27,7 +27,6 @@ storybook-components .env.production.local .cache .idea -.edsrc.json npm-debug.log* yarn-debug.log* diff --git a/src/components/Button/Button.module.css b/src/components/Button/Button.module.css index debfeb227..ae8c1a221 100644 --- a/src/components/Button/Button.module.css +++ b/src/components/Button/Button.module.css @@ -89,8 +89,8 @@ } .button--size-md { + /* TODO: missing size token needs to be added to EDS */ min-width: 3.75rem; - /* TODO: missing size token */ max-width: calc(var(--eds-size-32) / 16 * 1rem); max-height: calc(var(--eds-size-4) / 16 * 1rem); }