From e850fdc769f2788438e84450818e20bc3a51b968 Mon Sep 17 00:00:00 2001 From: Melissa Thompson Date: Fri, 2 Feb 2024 11:26:25 -0500 Subject: [PATCH] feat(actiongroup)!: migrate to S2 (#2453) BREAKING CHANGE: migrates `Action Group` to Spectrum 2, Removes some mod properties --- components/actiongroup/index.css | 26 ++----------------- components/actiongroup/metadata/mods.md | 3 --- .../stories/actiongroup.stories.js | 14 ++++++++++ components/actiongroup/themes/express.css | 7 ----- components/actiongroup/themes/spectrum.css | 7 ----- 5 files changed, 16 insertions(+), 41 deletions(-) diff --git a/components/actiongroup/index.css b/components/actiongroup/index.css index 41578f78807..002dec9ddee 100644 --- a/components/actiongroup/index.css +++ b/components/actiongroup/index.css @@ -14,6 +14,7 @@ governing permissions and limitations under the License. --spectrum-actiongroup-button-spacing-reset: 0; --spectrum-actiongroup-border-radius-reset: 0; --spectrum-actiongroup-border-radius: var(--spectrum-corner-radius-100); + --spectrum-actiongroup-gap-size-compact: var(--spectrum-spacing-50); } .spectrum-ActionGroup--sizeXS, @@ -36,7 +37,7 @@ governing permissions and limitations under the License. .spectrum-ActionGroup-item { flex-shrink: 0; - + /* Focus indicator should appear above hovered and selected borders */ &:focus-visible { z-index: 3; @@ -74,15 +75,6 @@ governing permissions and limitations under the License. border-start-start-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)); border-end-start-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)); - margin-inline-start: var(--mod-actiongroup-button-spacing-reset, var(--spectrum-actiongroup-button-spacing-reset)); - } - - & + .spectrum-ActionGroup-item { - /* Action button passthrough styling */ - --mod-actionbutton-focus-indicator-border-radius: 0px; - - margin-inline-start: var(--mod-actiongroup-horizontal-spacing-compact, var(--spectrum-actiongroup-horizontal-spacing-compact)); - margin-inline-end: var(--mod-actiongroup-horizontal-spacing-compact, var(--spectrum-actiongroup-horizontal-spacing-compact)); } &:last-child { @@ -91,8 +83,6 @@ governing permissions and limitations under the License. border-start-end-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)); border-end-end-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)); - margin-inline-start: var(--mod-actiongroup-horizontal-spacing-compact, var(--spectrum-actiongroup-horizontal-spacing-compact)); - margin-inline-end: var(--mod-actiongroup-border-radius-reset, var(--spectrum-actiongroup-border-radius-reset)); } &.is-selected { @@ -126,16 +116,6 @@ governing permissions and limitations under the License. border-start-start-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)); border-start-end-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)); - margin-inline-end: var(--mod-actiongroup-button-spacing-reset, var(--spectrum-actiongroup-button-spacing-reset)); - margin-block-start: var(--mod-actiongroup-vertical-spacing-compact, var(--spectrum-actiongroup-vertical-spacing-compact)); - margin-block-end: var(--mod-actiongroup-vertical-spacing-compact, var(--spectrum-actiongroup-vertical-spacing-compact)); - } - - & + .spectrum-ActionGroup-item { - margin-inline-start: var(--mod-actiongroup-button-spacing-reset, var(--spectrum-actiongroup-button-spacing-reset)); - margin-inline-end: var(--mod-actiongroup-button-spacing-reset, var(--spectrum-actiongroup-button-spacing-reset)); - margin-block-start: var(--mod-actiongroup-button-spacing-reset, var(--spectrum-actiongroup-button-spacing-reset)); - margin-block-end: var(--mod-actiongroup-vertical-spacing-compact, var(--spectrum-actiongroup-vertical-spacing-compact)); } &:last-child { @@ -144,8 +124,6 @@ governing permissions and limitations under the License. border-end-start-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)); border-end-end-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)); - margin-block-start: var(--mod-actiongroup-vertical-spacing-compact, var(--spectrum-actiongroup-vertical-spacing-compact)); - margin-block-end: var(--mod-actiongroup-button-spacing-reset, var(--spectrum-actiongroup-button-spacing-reset)); } } } diff --git a/components/actiongroup/metadata/mods.md b/components/actiongroup/metadata/mods.md index 2fcc384c89f..50e28461152 100644 --- a/components/actiongroup/metadata/mods.md +++ b/components/actiongroup/metadata/mods.md @@ -2,9 +2,6 @@ | ---------------------------------------------- | | `--mod-actiongroup-border-radius` | | `--mod-actiongroup-border-radius-reset` | -| `--mod-actiongroup-button-spacing-reset` | | `--mod-actiongroup-gap-size-compact` | -| `--mod-actiongroup-horizontal-spacing-compact` | | `--mod-actiongroup-horizontal-spacing-regular` | -| `--mod-actiongroup-vertical-spacing-compact` | | `--mod-actiongroup-vertical-spacing-regular` | diff --git a/components/actiongroup/stories/actiongroup.stories.js b/components/actiongroup/stories/actiongroup.stories.js index d967fb38bf2..5f3a0566a13 100644 --- a/components/actiongroup/stories/actiongroup.stories.js +++ b/components/actiongroup/stories/actiongroup.stories.js @@ -119,8 +119,22 @@ Justified.args = { content: items }; +export const JustifiedCompact = Template.bind({}); +JustifiedCompact.args = { + justified: true, + compact: true, + content: items, +}; + export const Quiet = Template.bind({}); Quiet.args = { areQuiet: true, content: items }; + +export const QuietCompact = Template.bind({}); +QuietCompact.args = { + areQuiet: true, + compact: true, + content: items, +}; diff --git a/components/actiongroup/themes/express.css b/components/actiongroup/themes/express.css index c62e104129d..fa1f200fb80 100644 --- a/components/actiongroup/themes/express.css +++ b/components/actiongroup/themes/express.css @@ -11,11 +11,4 @@ governing permissions and limitations under the License. */ @container (--system: express) { - .spectrum-ActionGroup { - --spectrum-actiongroup-gap-size-compact: var(--spectrum-spacing-50); - - /* account for button border */ - --spectrum-actiongroup-horizontal-spacing-compact: calc(-1px * var(--spectrum-spacing-50)); - --spectrum-actiongroup-vertical-spacing-compact: calc(-1px * var(--spectrum-spacing-50)); - } } diff --git a/components/actiongroup/themes/spectrum.css b/components/actiongroup/themes/spectrum.css index 0b606f3f6b3..7507c3c1e64 100644 --- a/components/actiongroup/themes/spectrum.css +++ b/components/actiongroup/themes/spectrum.css @@ -11,11 +11,4 @@ governing permissions and limitations under the License. */ @container (--system: spectrum) { - .spectrum-ActionGroup { - --spectrum-actiongroup-gap-size-compact: 0; - - /* account for button border */ - --spectrum-actiongroup-horizontal-spacing-compact: -1px; - --spectrum-actiongroup-vertical-spacing-compact: -1px; - } }