diff --git a/.changeset/few-doors-smile.md b/.changeset/few-doors-smile.md new file mode 100644 index 00000000000..872a7c98e6d --- /dev/null +++ b/.changeset/few-doors-smile.md @@ -0,0 +1,5 @@ +--- +"@spectrum-css/buttongroup": patch +--- + +Adds a new `--mod-buttongroup-flex-wrap` custom property to leverage if a user wishes to customize the `flex-wrap` property. diff --git a/.changeset/loud-vans-brush.md b/.changeset/loud-vans-brush.md new file mode 100644 index 00000000000..9853d5c122e --- /dev/null +++ b/.changeset/loud-vans-brush.md @@ -0,0 +1,5 @@ +--- +"@spectrum-css/tokens": patch +--- + +Adds `--spectrum-standard-dialog-spacing-edge-to-content` to properly adjust the spacing for desktop/mobile dialog styles. diff --git a/.changeset/metal-fireants-switch.md b/.changeset/metal-fireants-switch.md new file mode 100644 index 00000000000..97acf890c52 --- /dev/null +++ b/.changeset/metal-fireants-switch.md @@ -0,0 +1,52 @@ +--- +"@spectrum-css/dialog": major +"@spectrum-css/modal": patch +"@spectrum-css/underlay": patch +--- + +Spectrum 2 Standard Dialog Migration + +This is the migration for standard dialog. The Divider component is no longer supported in S2 dialogs. In addition, some new and updated tokens are in place to update dialog corner rounding, font treatments, spacing/padding, and maximum/minimum widths. There were several new elements implemented as well, including optional header and footer content, hero/cover images, checkbox and text-only options in the footer content area. + +The `.spectrum-Dialog--small`, `.spectrum-Dialog--medium`, and `.spectrum-Dialog--large` sizing classes were deprecated and removed from the CSS in favor of the t-shirt sizes. Additionally, the spelling of the `.spectrum-Dialog--dismissable` class was corrected to `.spectrum-Dialog--dismissible`. + +Mod properties are either "new," have been renamed to reflect the respective dialog language, or were removed: + +_New Mods_ +`--mod-standard-dialog-spacing-title-to-header-content` +`--mod-standard-dialog-spacing-title-to-description` +`--mod-standard-dialog-header-content-font-size` + +_Renamed Mods_ +`--mod-dialog-confirm-small-width` > `--mod-standard-dialog-max-width-small` +`--mod-dialog-confirm-medium-width` > `--mod-standard-dialog-max-width` +`--mod-dialog-confirm-large-width` > `--mod-standard-dialog-max-width-large` +`--mod-dialog-confirm-border-radius` > `--mod-standard-dialog-border-radius` +`--mod-dialog-confirm-description-text-size` > `--mod-standard-dialog-description-font-size` +`--mod-dialog-confirm-description-text-line-height` > `--mod-standard-dialog-description-line-height` +`--mod-dialog-confirm-description-text-color` > `--mod-standard-dialog-description-text-color` +`--mod-dialog-confirm-description-font-weight` > `--mod-standard-dialog-description-font-weight` +`--mod-dialog-heading-font-weight` > `--mod-standard-dialog-heading-font-weight` +`--mod-dialog-confirm-title-text-line-height` > `--mod-standard-dialog-heading-line-height` +`--mod-dialog-confirm-title-text-color` > `--mod-standard-dialog-heading-text-color` +`--mod-dialog-confirm-title-text-size` > `--mod-standard-dialog-heading-font-size` +`--mod-dialog-confirm-hero-height` > `--mod-standard-dialog-hero-block-size` +`--mod-dialog-min-inline-size` > `--mod-standard-dialog-min-inline-size` +`--mod-dialog-confirm-padding-grid` > `--mod-standard-dialog-spacing-grid-padding` +`--mod-dialog-confirm-footer-padding-top` > `--mod-standard-dialog-spacing-description-to-footer` +`--mod-dialog-confirm-close-button-padding` > `--mod-standard-dialog-spacing-edge-to-close-button` +`--mod-dialog-confirm-gap-size` > `--mod-standard-dialog-spacing-footer-to-button-group` + +_Removed Mods_ +`--mod-dialog-confirm-buttongroup-padding-top` +`--mod-dialog-confirm-close-button-size` +`--mod-dialog-confirm-description-margin` +`--mod-dialog-confirm-description-padding` +`--mod-dialog-confirm-divider-block-spacing-end` +`--mod-dialog-confirm-divider-block-spacing-start` +`--mod-dialog-confirm-divider-height` + +Modal and underlay updates + +- Modal component now uses the updated corner rounding. +- Underlay has an updated comment that addresses the overlay-color/overlay-opacity tokens. diff --git a/components/buttongroup/index.css b/components/buttongroup/index.css index 666239f687b..3ad6e09afa0 100644 --- a/components/buttongroup/index.css +++ b/components/buttongroup/index.css @@ -30,7 +30,7 @@ .spectrum-ButtonGroup { display: var(--spectrum-buttongroup-display); flex-direction: var(--spectrum-buttongroup-flex-direction); - flex-wrap: wrap; + flex-wrap: var(--mod-buttongroup-flex-wrap, wrap); gap: var(--spectrum-buttongroup-spacing); justify-content: var(--spectrum-buttongroup-justify-content); diff --git a/components/buttongroup/metadata/metadata.json b/components/buttongroup/metadata/metadata.json index 523a464c6df..c4aeea970fe 100644 --- a/components/buttongroup/metadata/metadata.json +++ b/components/buttongroup/metadata/metadata.json @@ -7,6 +7,7 @@ ".spectrum-ButtonGroup-item" ], "modifiers": [ + "--mod-buttongroup-flex-wrap", "--mod-buttongroup-justify-content", "--mod-buttongroup-spacing" ], diff --git a/components/buttongroup/metadata/mods.md b/components/buttongroup/metadata/mods.md index 0dd474fab93..4311db3301a 100644 --- a/components/buttongroup/metadata/mods.md +++ b/components/buttongroup/metadata/mods.md @@ -1,4 +1,5 @@ | Modifiable custom properties | | ----------------------------------- | +| `--mod-buttongroup-flex-wrap` | | `--mod-buttongroup-justify-content` | | `--mod-buttongroup-spacing` | diff --git a/components/dialog/index.css b/components/dialog/index.css index 542d6cd2165..d83c7920258 100644 --- a/components/dialog/index.css +++ b/components/dialog/index.css @@ -12,199 +12,227 @@ */ .spectrum-Dialog { - --spectrum-dialog-confirm-divider-block-spacing-start: var(--spectrum-spacing-300); - --spectrum-dialog-confirm-divider-block-spacing-end: var(--spectrum-spacing-200); - --spectrum-dialog-confirm-description-text-color: var(--spectrum-gray-800); - --spectrum-dialog-confirm-description-padding: var(--spectrum-spacing-50); - --spectrum-dialog-confirm-gap-size: var(--spectrum-component-pill-edge-to-text-100); - --spectrum-dialog-confirm-buttongroup-padding-top: var(--spectrum-spacing-600); - --spectrum-dialog-confirm-close-button-size: var(--spectrum-component-height-100); - --spectrum-dialog-confirm-close-button-padding: calc(26px - var(--spectrum-component-bottom-to-text-300)); + --spectrum-standard-dialog-max-width: var(--spectrum-standard-dialog-maximum-width-medium); + --spectrum-standard-dialog-min-inline-size: var(--spectrum-standard-dialog-minimum-width); + --spectrum-standard-dialog-border-radius: var(--spectrum-corner-radius-extra-large-default); + + /* Fonts */ + --spectrum-standard-dialog-heading-font-weight: var(--spectrum-title-sans-serif-font-weight); + --spectrum-standard-dialog-heading-font-size: var(--spectrum-standard-dialog-title-font-size); + --spectrum-standard-dialog-heading-font-style: var(--spectrum-title-sans-serif-font-style); + --spectrum-standard-dialog-heading-font-family: var(--spectrum-sans-font-family-stack); + --spectrum-standard-dialog-description-font-weight: var(--spectrum-body-sans-serif-font-weight); + --spectrum-standard-dialog-description-font-size: var(--spectrum-standard-dialog-body-font-size); + --spectrum-standard-dialog-description-font-style: var(--spectrum-body-sans-serif-font-style); + --spectrum-standard-dialog-description-font-family: var(--spectrum-sans-font-family-stack); + --spectrum-standard-dialog-header-content-font-size: var(--spectrum-standard-dialog-body-font-size); + + --spectrum-standard-dialog-heading-line-height: var(--spectrum-title-line-height); + --spectrum-standard-dialog-description-line-height: var(--spectrum-line-height-200); + + /* Colors */ + --spectrum-standard-dialog-heading-text-color: var(--spectrum-heading-color); + --spectrum-standard-dialog-description-text-color: var(--spectrum-body-color); + --spectrum-standard-dialog-background-color: var(--spectrum-background-layer-2-color); + + /* Spacing */ + --spectrum-standard-dialog-padding: var(--spectrum-standard-dialog-spacing-edge-to-content); + --spectrum-standard-dialog-spacing-title-to-description: var(--spectrum-spacing-300); + --spectrum-standard-dialog-spacing-description-to-footer: var(--spectrum-spacing-500); + --spectrum-standard-dialog-spacing-title-to-header-content: var(--spectrum-spacing-400); + --spectrum-standard-dialog-spacing-edge-to-header-content-inline-end: var(--spectrum-spacing-400); + --spectrum-standard-dialog-spacing-footer-to-button-group: var(--spectrum-spacing-400); + + /* Grid */ + --spectrum-standard-dialog-spacing-grid-padding: var(--spectrum-standard-dialog-padding); + --spectrum-standard-dialog-spacing-edge-to-close-button: var(--spectrum-spacing-200); + + /* Hero */ + --spectrum-standard-dialog-hero-block-size: 140px; + + /* Passthrough for nested component(s) */ + --mod-buttongroup-justify-content: flex-end; + --mod-buttongroup-flex-wrap: nowrap; +} +.spectrum-Dialog { /* Be a flexbox to allow a full sized content area that scrolls */ display: flex; /* Allow 100% width, taking into account padding */ box-sizing: border-box; - /* Be no bigger than max-width, but also be 90% if the viewport is smaller than max-width */ - inline-size: var(--mod-dialog-width, var(--mod-dialog-confirm-medium-width, 480px)); - min-inline-size: var(--mod-dialog-min-inline-size, 288px); + /* Be no bigger than max-width, but also be 90% if the viewport is smaller than max-width */ + inline-size: var(--mod-standard-dialog-max-width, var(--spectrum-standard-dialog-max-width)); + min-inline-size: var(--mod-standard-dialog-min-inline-size, var(--spectrum-standard-dialog-min-inline-size)); max-inline-size: 100%; - max-block-size: inherit; - + background-color: var(--mod-standard-dialog-background-color, var(--spectrum-standard-dialog-background-color)); outline: none; + border-radius: var(--mod-standard-dialog-border-radius, var(--spectrum-standard-dialog-border-radius)); + overflow: hidden; } .spectrum-Dialog--sizeS { - --mod-dialog-width: var(--mod-dialog-confirm-small-width, 400px); + --spectrum-standard-dialog-max-width: var(--spectrum-standard-dialog-maximum-width-small); + inline-size: var(--mod-standard-dialog-max-width-small, var(--spectrum-standard-dialog-max-width)); } .spectrum-Dialog--sizeL { - --mod-dialog-width: var(--mod-dialog-confirm-large-width, 640px); + --spectrum-standard-dialog-max-width: var(--spectrum-standard-dialog-maximum-width-large); + inline-size: var(--mod-standard-dialog-max-width-large, var(--spectrum-standard-dialog-max-width)); } .spectrum-Dialog-hero { grid-area: hero; - block-size: var(--mod-dialog-confirm-hero-height, var(--spectrum-dialog-confirm-hero-height)); - border-start-start-radius: var(--mod-dialog-confirm-border-radius, var(--spectrum-dialog-confirm-border-radius)); - border-start-end-radius: var(--mod-dialog-confirm-border-radius, var(--spectrum-dialog-confirm-border-radius)); + block-size: var(--mod-standard-dialog-hero-block-size, var(--spectrum-standard-dialog-hero-block-size)); background-size: cover; background-position: center center; - overflow: hidden; } -.spectrum-Dialog .spectrum-Dialog-grid { +/* Non-Dismissible Dialog (no close button) */ +.spectrum-Dialog-grid { display: grid; grid-template-columns: - var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto 1fr auto minmax(0, auto) - var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)); + var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)) + auto + 1fr + auto + var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)) + minmax(0, auto) + var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)); + grid-template-rows: + auto + var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)) + auto + 1fr + auto + var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)); grid-template-areas: - "hero hero hero hero hero hero" - ". . . . . ." - ". heading header header header ." - ". divider divider divider divider ." - ". content content content content ." - ". footer footer buttonGroup buttonGroup ." - ". . . . . .";grid-template-rows: auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto auto 1fr auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)); + "hero hero hero hero hero hero hero" + ". . . . . . ." + ". heading header header header header ." + ". content content content content content ." + ". footer footer footer buttonGroup buttonGroup ." + ". . . . . . ."; inline-size: 100%; } +/* the dialog's heading/title */ .spectrum-Dialog-heading { grid-area: heading; - margin: 0; - - font-size: var(--mod-dialog-confirm-title-text-size, var(--spectrum-dialog-confirm-title-text-size)); - font-weight: var(--mod-dialog-heading-font-weight, var(--spectrum-heading-sans-serif-font-weight)); - line-height: var(--mod-dialog-confirm-title-text-line-height, var(--spectrum-line-height-100)); - color: var(--mod-dialog-confirm-title-text-color, var(--spectrum-gray-900)); + margin-block: 0; + font-size: var(--mod-standard-dialog-heading-font-size, var(--spectrum-standard-dialog-heading-font-size)); + font-weight: var(--mod-standard-dialog-heading-font-weight, var(--spectrum-standard-dialog-heading-font-weight)); + font-style: var(--spectrum-standard-dialog-heading-font-style); + font-family: var(--spectrum-standard-dialog-heading-font-family); + line-height: var(--mod-standard-dialog-heading-line-height, var(--spectrum-standard-dialog-heading-line-height)); + color: var(--mod-standard-dialog-heading-text-color, var(--spectrum-standard-dialog-heading-text-color)); outline: none; /* Hide focus outline */ - - padding-inline-end: var(--mod-dialog-confirm-gap-size, var(--spectrum-dialog-confirm-gap-size)); - - &.spectrum-Dialog-heading--noHeader { - grid-area: heading-start / heading-start / header-end / header-end; - padding-inline-end: 0; - } } +/* the container for the heading and any additional header content */ .spectrum-Dialog-header { grid-area: header; display: flex; + max-inline-size: 100%; + margin-block-end: var(--mod-standard-dialog-spacing-title-to-description, var(--spectrum-standard-dialog-spacing-title-to-description)); + gap: var(--mod-standard-dialog-spacing-title-to-header-content, var(--spectrum-standard-dialog-spacing-title-to-header-content)); - /* Without this, buttons will be stretched */ - align-items: center; - justify-content: flex-end; + /* Without this, buttons will be stretched */ + align-items: flex-start; + justify-content: space-between; box-sizing: border-box; outline: none; /* Hide focus outline around header */ -} - -.spectrum-Dialog .spectrum-Dialog-divider { - grid-area: divider; - inline-size: 100%; - margin-block-start: var(--mod-dialog-confirm-divider-block-spacing-end, var(--spectrum-dialog-confirm-divider-block-spacing-end)); - margin-block-end: var(--mod-dialog-confirm-divider-block-spacing-start, var(--spectrum-dialog-confirm-divider-block-spacing-start)); -} -/* remove top vertical padding of spectrum-Dialog-content from bottom margin of first divider after heading */ -.spectrum-Dialog--fullscreen .spectrum-Dialog-heading + .spectrum-Dialog-divider { - margin-block-end: calc(var(--mod-dialog-confirm-divider-block-spacing-start, var(--spectrum-dialog-confirm-divider-block-spacing-start)) - (var(--mod-dialog-confirm-description-padding, var(--spectrum-dialog-confirm-description-padding)) * 2)); -} - -.spectrum-Dialog--noDivider { - .spectrum-Dialog-divider { - display: none; - } - - .spectrum-Dialog-heading { - padding-block-end: calc(var(--mod-dialog-confirm-divider-block-spacing-end, var(--spectrum-dialog-confirm-divider-block-spacing-end)) + var(--mod-dialog-confirm-divider-block-spacing-start, var(--spectrum-dialog-confirm-divider-block-spacing-start)) + var(--mod-dialog-confirm-divider-height, var(--spectrum-spacing-50))); + /* additional header content should grow/shrink with the text, but only until it takes up half of the header */ + > .spectrum-Dialog-header-content { + max-inline-size: fit-content; + flex: 1 1 100%; + font-size: var(--mod-standard-dialog-header-content-font-size, var(--spectrum-standard-dialog-header-content-font-size)); + text-wrap: pretty; } } .spectrum-Dialog-content { grid-area: content; box-sizing: border-box; - - /* - v2 is currently worse, inputs that get focus rings get a slight clipping unless overflow: visible replaces this line - we should think of a better way to handle this, see padding/margin below for fix - */ overflow-y: auto; -webkit-overflow-scrolling: touch; outline: none; /* Hide focus outline */ - - font-size: var(--mod-dialog-confirm-description-text-size, var(--spectrum-dialog-confirm-description-text-size)); - font-weight: var(--mod-dialog-confirm-description-font-weight, var(--spectrum-regular-font-weight)); - line-height: var(--mod-dialog-confirm-description-text-line-height, var(--spectrum-line-height-100)); - color: var(--mod-dialog-confirm-description-text-color, var(--spectrum-dialog-confirm-description-text-color)); - - /* this is kinda dumb, but needed for the keyboard focus rings so they don't get clipped. is there a better way to treat this */ - padding: calc(var(--mod-dialog-confirm-description-padding, var(--spectrum-dialog-confirm-description-padding)) * 2); - margin: 0 var(--mod-dialog-confirm-description-margin, calc(var(--spectrum-spacing-50) * -1)); - + font-size: var(--mod-standard-dialog-description-font-size, var(--spectrum-standard-dialog-description-font-size)); + font-weight: var(--mod-standard-dialog-description-font-weight, var(--spectrum-standard-dialog-description-font-weight)); + font-family: var(--spectrum-standard-dialog-description-font-family); + font-style: var(--spectrum-standard-dialog-description-font-style); + line-height: var(--mod-standard-dialog-description-line-height, var(--spectrum-standard-dialog-description-line-height)); + color: var(--mod-standard-dialog-description-text-color, var(--spectrum-standard-dialog-description-text-color)); } .spectrum-Dialog-footer { - grid-area: footer; + grid-area: footer / footer / buttonGroup / buttonGroup; + max-inline-size: 100%; + display: flex; + align-items: flex-end; - /* this padding isn't built into the grid because it disappears with this footer */ - padding-block-start: var(--mod-dialog-confirm-footer-padding-top, var(--spectrum-spacing-600)); + /* this recreates padding between the footer content and button group. It should be safe as button group is always end aligned */ + gap: var(--mod-standard-dialog-spacing-footer-to-button-group, var(--spectrum-standard-dialog-spacing-footer-to-button-group)); - display: flex; - flex-wrap: wrap; + /* this padding isn't built into the grid because it disappears with this footer */ + padding-block-start: var(--mod-standard-dialog-spacing-description-to-footer, var(--spectrum-standard-dialog-spacing-description-to-footer)); outline: none; /* Hide focus outline */ - /* Both selectors are required to override the button + button rule */ - > *, - > .spectrum-Button + .spectrum-Button { - margin-block-end: 0; + .spectrum-Dialog-footer-content { + /* this attempts to give as much space as possible for the button group, particularly to avoid stacking on mobile. Some sizes still may have to stack. */ + flex: 1 1 100%; + } + + &:has(.spectrum-Dialog-footer-content), + &:has(.spectrum-Dialog-buttonGroup) { + justify-content: space-between; } } .spectrum-Dialog-buttonGroup { grid-area: buttonGroup; +} - /* this padding isn't built into the grid because it disappears with this buttonGroup */ - padding-block-start: var(--mod-dialog-confirm-buttongroup-padding-top, var(--spectrum-dialog-confirm-buttongroup-padding-top)); - display: flex; - justify-content: flex-end; - - /* this padding should be safe as button group is always end aligned */ - padding-inline-start: var(--mod-dialog-confirm-gap-size, var(--spectrum-dialog-confirm-gap-size)); - - &.spectrum-Dialog-buttonGroup--noFooter { - grid-area: footer-start / footer-start / buttonGroup-end / buttonGroup-end; - } +.spectrum-Dialog-buttonGroup--noFooter { + padding-block-start: var(--mod-standard-dialog-spacing-description-to-footer, var(--spectrum-standard-dialog-spacing-description-to-footer)); } -.spectrum-Dialog.spectrum-Dialog--dismissable .spectrum-Dialog-grid { +/* Dismissible Dialog (with close button) */ +.spectrum-Dialog--dismissible .spectrum-Dialog-grid { grid-template-columns: - var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto 1fr auto minmax(0, auto) - minmax(0, var(--mod-dialog-confirm-close-button-size, var(--spectrum-dialog-confirm-close-button-size))) var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)); + var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)) + auto + 1fr + auto + minmax(0, var(--spectrum-standard-dialog-spacing-edge-to-header-content-inline-end)) + var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)); + grid-template-rows: + auto + var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)) + auto + 1fr + auto + var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)); grid-template-areas: - "hero hero hero hero hero hero hero" - ". . . . . closeButton closeButton" - ". heading header header typeIcon closeButton closeButton" - ". divider divider divider divider divider ." - ". content content content content content ." - ". footer footer buttonGroup buttonGroup buttonGroup ." - ". . . . . . .";grid-template-rows: auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto auto 1fr auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)); - - .spectrum-Dialog-buttonGroup { - display: none; - } + "hero hero hero hero hero hero" + ". . . . closeButton closeButton" + ". heading header header closeButton closeButton" + ". content content content content ." + ". footer footer footer footer ." + ". . . . . ."; .spectrum-Dialog-footer { - grid-area: footer / footer/ buttonGroup / buttonGroup; - color: var(--mod-dialog-confirm-description-text-color, var(--spectrum-dialog-confirm-description-text-color)); + grid-area: footer; } } @@ -215,8 +243,8 @@ align-self: start; justify-self: end; - margin-inline-end: var(--mod-dialog-confirm-close-button-padding, var(--spectrum-dialog-confirm-close-button-padding)); - margin-block-start: var(--mod-dialog-confirm-close-button-padding, var(--spectrum-dialog-confirm-close-button-padding)); + margin-block-start: var(--mod-standard-dialog-spacing-edge-to-close-button, var(--spectrum-standard-dialog-spacing-edge-to-close-button)); + margin-inline-end: var(--mod-standard-dialog-spacing-edge-to-close-button, var(--spectrum-standard-dialog-spacing-edge-to-close-button)); } .spectrum-Dialog--fullscreen { @@ -227,7 +255,6 @@ .spectrum-Dialog--fullscreenTakeover { inline-size: 100%; block-size: 100%; - border-radius: 0; } @@ -236,29 +263,36 @@ max-block-size: none; max-inline-size: none; - &.spectrum-Dialog .spectrum-Dialog-grid { + .spectrum-Dialog-grid { display: grid; - grid-template-columns: var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) 1fr auto auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)); - grid-template-rows: var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto auto 1fr var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)); + grid-template-columns: + var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)) + 1fr + auto + auto + var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)); + grid-template-rows: + var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)) + auto + 1fr + var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)); grid-template-areas: ". . . . ." ". heading header buttonGroup ." - ". divider divider divider ." ". content content content ." ". . . . ."; } - .spectrum-Dialog-heading { - font-size: var(--mod-dialog-fullscreen-header-text-size, 28px); + .spectrum-Dialog-header { + grid-area: heading; } - .spectrum-Dialog-content { - max-block-size: none; + .spectrum-Dialog-closeButton { + display: none; } - .spectrum-Dialog-footer, - .spectrum-Dialog-buttonGroup { - padding-block-start: 0; + .spectrum-Dialog-content { + max-block-size: none; } .spectrum-Dialog-footer { @@ -267,73 +301,119 @@ .spectrum-Dialog-buttonGroup { grid-area: buttonGroup; - align-self: start; } } @media screen and (width <= 700px) { - .spectrum-Dialog .spectrum-Dialog-grid { + .spectrum-Dialog-grid { grid-template-columns: - var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto 1fr auto minmax(0, auto) - var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)); - grid-template-rows: auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto auto auto 1fr auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)); + var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)) + auto + 1fr + auto + minmax(0, auto) + var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)); + grid-template-rows: + auto + var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)) + auto + auto + 1fr + auto + var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)); + + /* TODO: investigate if we could refactor the grid to make the footer text/checkbox stack on top of the button group */ grid-template-areas: "hero hero hero hero hero hero" ". . . . . ." - ". heading heading heading heading ." + ". heading heading heading heading ." ". header header header header ." - ". divider divider divider divider ." ". content content content content ." ". footer footer buttonGroup buttonGroup ." ". . . . . ."; } - .spectrum-Dialog.spectrum-Dialog--dismissable .spectrum-Dialog-grid { + .spectrum-Dialog-footer { + flex-direction: column; + } + + .spectrum-Dialog--dismissible .spectrum-Dialog-grid { grid-template-columns: - var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto 1fr auto minmax(0, auto) - minmax(0, var(--mod-dialog-confirm-close-button-size, var(--spectrum-dialog-confirm-close-button-size))) var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)); - grid-template-rows: auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto auto auto 1fr auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)); + var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)) + auto + 1fr + auto + minmax(0, auto) + minmax(0, calc(var(--spectrum-standard-dialog-spacing-edge-to-content) - var(--spectrum-standard-dialog-spacing-edge-to-close-button))) + var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)); + grid-template-rows: + auto + var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)) + auto + auto + 1fr + auto + var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)); grid-template-areas: "hero hero hero hero hero hero hero" ". . . . . closeButton closeButton" - ". heading heading heading heading closeButton closeButton" + ". heading heading heading heading closeButton closeButton" ". header header header header header ." - ". divider divider divider divider divider ." ". content content content content content ." - ". footer footer buttonGroup buttonGroup buttonGroup ." - ". . . . . . .";} + ". footer footer footer footer footer ." + ". . . . . . ."; + } .spectrum-Dialog .spectrum-Dialog-header { + display: flex; + flex-direction: column; + align-items: flex-start; justify-content: flex-start; + gap: 0; } .spectrum-Dialog--fullscreen, .spectrum-Dialog--fullscreenTakeover { &.spectrum-Dialog .spectrum-Dialog-grid { display: grid; - grid-template-columns: var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) 1fr var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)); - grid-template-rows: var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto auto auto 1fr auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)); + grid-template-columns: + var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)) + 1fr + var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)); + grid-template-rows: + var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)) + auto + auto + 1fr + var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)) + auto + var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)); grid-template-areas: ". . ." ". heading ." ". header ." - ". divider ." ". content ." + ". . ." ". buttonGroup ." - ". . .";} + ". . ."; + } - .spectrum-Dialog-buttonGroup { - padding-block-start: var(--mod-dialog-confirm-buttongroup-padding-top, var(--spectrum-dialog-confirm-buttongroup-padding-top)); + .spectrum-Dialog-header { + margin-inline-end: 0; } .spectrum-Dialog-heading { - font-size: var(--mod-dialog-confirm-title-text-size, var(--spectrum-dialog-confirm-title-text-size)); + margin-inline-end: 0; } } + + .spectrum-Dialog-heading { + margin-block-end: var(--spectrum-standard-dialog-spacing-title-to-description); + } } @media (forced-colors: active) { .spectrum-Dialog { - border: solid; + border: 1px solid var(--highcontrast-standard-dialog-border-color, rgba(var(--spectrum-black-rgb), var(--spectrum-overlay-opacity))); } } diff --git a/components/dialog/metadata/metadata.json b/components/dialog/metadata/metadata.json index 812542da227..18c67230d3d 100644 --- a/components/dialog/metadata/metadata.json +++ b/components/dialog/metadata/metadata.json @@ -2,100 +2,124 @@ "sourceFile": "index.css", "selectors": [ ".spectrum-Dialog", - ".spectrum-Dialog .spectrum-Dialog-divider", - ".spectrum-Dialog .spectrum-Dialog-grid", ".spectrum-Dialog .spectrum-Dialog-header", + ".spectrum-Dialog--dismissible .spectrum-Dialog-grid", + ".spectrum-Dialog--dismissible .spectrum-Dialog-grid .spectrum-Dialog-footer", ".spectrum-Dialog--fullscreen", ".spectrum-Dialog--fullscreen .spectrum-Dialog-buttonGroup", + ".spectrum-Dialog--fullscreen .spectrum-Dialog-closeButton", ".spectrum-Dialog--fullscreen .spectrum-Dialog-content", ".spectrum-Dialog--fullscreen .spectrum-Dialog-footer", + ".spectrum-Dialog--fullscreen .spectrum-Dialog-grid", + ".spectrum-Dialog--fullscreen .spectrum-Dialog-header", ".spectrum-Dialog--fullscreen .spectrum-Dialog-heading", - ".spectrum-Dialog--fullscreen .spectrum-Dialog-heading + .spectrum-Dialog-divider", ".spectrum-Dialog--fullscreen.spectrum-Dialog .spectrum-Dialog-grid", ".spectrum-Dialog--fullscreenTakeover", ".spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-buttonGroup", + ".spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-closeButton", ".spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-content", ".spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-footer", + ".spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-grid", + ".spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-header", ".spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-heading", ".spectrum-Dialog--fullscreenTakeover.spectrum-Dialog .spectrum-Dialog-grid", - ".spectrum-Dialog--noDivider .spectrum-Dialog-divider", - ".spectrum-Dialog--noDivider .spectrum-Dialog-heading", ".spectrum-Dialog--sizeL", ".spectrum-Dialog--sizeS", ".spectrum-Dialog-buttonGroup", - ".spectrum-Dialog-buttonGroup.spectrum-Dialog-buttonGroup--noFooter", + ".spectrum-Dialog-buttonGroup--noFooter", ".spectrum-Dialog-closeButton", ".spectrum-Dialog-content", ".spectrum-Dialog-footer", - ".spectrum-Dialog-footer > *", - ".spectrum-Dialog-footer > .spectrum-Button + .spectrum-Button", + ".spectrum-Dialog-footer .spectrum-Dialog-footer-content", + ".spectrum-Dialog-footer:has(.spectrum-Dialog-buttonGroup)", + ".spectrum-Dialog-footer:has(.spectrum-Dialog-footer-content)", + ".spectrum-Dialog-grid", ".spectrum-Dialog-header", + ".spectrum-Dialog-header > .spectrum-Dialog-header-content", ".spectrum-Dialog-heading", - ".spectrum-Dialog-heading.spectrum-Dialog-heading--noHeader", - ".spectrum-Dialog-hero", - ".spectrum-Dialog.spectrum-Dialog--dismissable .spectrum-Dialog-grid", - ".spectrum-Dialog.spectrum-Dialog--dismissable .spectrum-Dialog-grid .spectrum-Dialog-buttonGroup", - ".spectrum-Dialog.spectrum-Dialog--dismissable .spectrum-Dialog-grid .spectrum-Dialog-footer" + ".spectrum-Dialog-hero" ], "modifiers": [ - "--mod-dialog-confirm-border-radius", - "--mod-dialog-confirm-buttongroup-padding-top", - "--mod-dialog-confirm-close-button-padding", - "--mod-dialog-confirm-close-button-size", - "--mod-dialog-confirm-description-font-weight", - "--mod-dialog-confirm-description-margin", - "--mod-dialog-confirm-description-padding", - "--mod-dialog-confirm-description-text-color", - "--mod-dialog-confirm-description-text-line-height", - "--mod-dialog-confirm-description-text-size", - "--mod-dialog-confirm-divider-block-spacing-end", - "--mod-dialog-confirm-divider-block-spacing-start", - "--mod-dialog-confirm-divider-height", - "--mod-dialog-confirm-footer-padding-top", - "--mod-dialog-confirm-gap-size", - "--mod-dialog-confirm-hero-height", - "--mod-dialog-confirm-large-width", - "--mod-dialog-confirm-medium-width", - "--mod-dialog-confirm-padding-grid", - "--mod-dialog-confirm-small-width", - "--mod-dialog-confirm-title-text-color", - "--mod-dialog-confirm-title-text-line-height", - "--mod-dialog-confirm-title-text-size", - "--mod-dialog-fullscreen-header-text-size", - "--mod-dialog-heading-font-weight", - "--mod-dialog-min-inline-size", - "--mod-dialog-width" - ], - "component": [ - "--spectrum-dialog-confirm-border-radius", - "--spectrum-dialog-confirm-buttongroup-padding-top", - "--spectrum-dialog-confirm-close-button-padding", - "--spectrum-dialog-confirm-close-button-size", - "--spectrum-dialog-confirm-description-padding", - "--spectrum-dialog-confirm-description-text-color", - "--spectrum-dialog-confirm-description-text-size", - "--spectrum-dialog-confirm-divider-block-spacing-end", - "--spectrum-dialog-confirm-divider-block-spacing-start", - "--spectrum-dialog-confirm-gap-size", - "--spectrum-dialog-confirm-hero-height", - "--spectrum-dialog-confirm-padding-grid", - "--spectrum-dialog-confirm-title-text-size" + "--mod-standard-dialog-background-color", + "--mod-standard-dialog-border-radius", + "--mod-standard-dialog-description-font-size", + "--mod-standard-dialog-description-font-weight", + "--mod-standard-dialog-description-line-height", + "--mod-standard-dialog-description-text-color", + "--mod-standard-dialog-header-content-font-size", + "--mod-standard-dialog-heading-font-size", + "--mod-standard-dialog-heading-font-weight", + "--mod-standard-dialog-heading-line-height", + "--mod-standard-dialog-heading-text-color", + "--mod-standard-dialog-hero-block-size", + "--mod-standard-dialog-max-width", + "--mod-standard-dialog-max-width-large", + "--mod-standard-dialog-max-width-small", + "--mod-standard-dialog-min-inline-size", + "--mod-standard-dialog-spacing-description-to-footer", + "--mod-standard-dialog-spacing-edge-to-close-button", + "--mod-standard-dialog-spacing-footer-to-button-group", + "--mod-standard-dialog-spacing-grid-padding", + "--mod-standard-dialog-spacing-title-to-description", + "--mod-standard-dialog-spacing-title-to-header-content" ], + "component": [], "global": [ - "--spectrum-component-bottom-to-text-300", - "--spectrum-component-height-100", - "--spectrum-component-pill-edge-to-text-100", - "--spectrum-gray-800", - "--spectrum-gray-900", - "--spectrum-heading-sans-serif-font-weight", - "--spectrum-line-height-100", - "--spectrum-regular-font-weight", + "--spectrum-background-layer-2-color", + "--spectrum-black-rgb", + "--spectrum-body-color", + "--spectrum-body-sans-serif-font-style", + "--spectrum-body-sans-serif-font-weight", + "--spectrum-corner-radius-extra-large-default", + "--spectrum-heading-color", + "--spectrum-line-height-200", + "--spectrum-overlay-opacity", + "--spectrum-sans-font-family-stack", "--spectrum-spacing-200", "--spectrum-spacing-300", - "--spectrum-spacing-50", - "--spectrum-spacing-600" + "--spectrum-spacing-400", + "--spectrum-spacing-500", + "--spectrum-standard-dialog-background-color", + "--spectrum-standard-dialog-body-font-size", + "--spectrum-standard-dialog-border-radius", + "--spectrum-standard-dialog-description-font-family", + "--spectrum-standard-dialog-description-font-size", + "--spectrum-standard-dialog-description-font-style", + "--spectrum-standard-dialog-description-font-weight", + "--spectrum-standard-dialog-description-line-height", + "--spectrum-standard-dialog-description-text-color", + "--spectrum-standard-dialog-header-content-font-size", + "--spectrum-standard-dialog-heading-font-family", + "--spectrum-standard-dialog-heading-font-size", + "--spectrum-standard-dialog-heading-font-style", + "--spectrum-standard-dialog-heading-font-weight", + "--spectrum-standard-dialog-heading-line-height", + "--spectrum-standard-dialog-heading-text-color", + "--spectrum-standard-dialog-hero-block-size", + "--spectrum-standard-dialog-max-width", + "--spectrum-standard-dialog-maximum-width-large", + "--spectrum-standard-dialog-maximum-width-medium", + "--spectrum-standard-dialog-maximum-width-small", + "--spectrum-standard-dialog-min-inline-size", + "--spectrum-standard-dialog-minimum-width", + "--spectrum-standard-dialog-padding", + "--spectrum-standard-dialog-spacing-description-to-footer", + "--spectrum-standard-dialog-spacing-edge-to-close-button", + "--spectrum-standard-dialog-spacing-edge-to-content", + "--spectrum-standard-dialog-spacing-edge-to-header-content-inline-end", + "--spectrum-standard-dialog-spacing-footer-to-button-group", + "--spectrum-standard-dialog-spacing-grid-padding", + "--spectrum-standard-dialog-spacing-title-to-description", + "--spectrum-standard-dialog-spacing-title-to-header-content", + "--spectrum-standard-dialog-title-font-size", + "--spectrum-title-line-height", + "--spectrum-title-sans-serif-font-style", + "--spectrum-title-sans-serif-font-weight" ], "system-theme": [], - "passthroughs": [], - "high-contrast": [] + "passthroughs": [ + "--mod-buttongroup-flex-wrap", + "--mod-buttongroup-justify-content" + ], + "high-contrast": ["--highcontrast-standard-dialog-border-color"] } diff --git a/components/dialog/metadata/mods.md b/components/dialog/metadata/mods.md index 2642a916d3e..76e69f4c916 100644 --- a/components/dialog/metadata/mods.md +++ b/components/dialog/metadata/mods.md @@ -1,29 +1,24 @@ -| Modifiable custom properties | -| --------------------------------------------------- | -| `--mod-dialog-confirm-border-radius` | -| `--mod-dialog-confirm-buttongroup-padding-top` | -| `--mod-dialog-confirm-close-button-padding` | -| `--mod-dialog-confirm-close-button-size` | -| `--mod-dialog-confirm-description-font-weight` | -| `--mod-dialog-confirm-description-margin` | -| `--mod-dialog-confirm-description-padding` | -| `--mod-dialog-confirm-description-text-color` | -| `--mod-dialog-confirm-description-text-line-height` | -| `--mod-dialog-confirm-description-text-size` | -| `--mod-dialog-confirm-divider-block-spacing-end` | -| `--mod-dialog-confirm-divider-block-spacing-start` | -| `--mod-dialog-confirm-divider-height` | -| `--mod-dialog-confirm-footer-padding-top` | -| `--mod-dialog-confirm-gap-size` | -| `--mod-dialog-confirm-hero-height` | -| `--mod-dialog-confirm-large-width` | -| `--mod-dialog-confirm-medium-width` | -| `--mod-dialog-confirm-padding-grid` | -| `--mod-dialog-confirm-small-width` | -| `--mod-dialog-confirm-title-text-color` | -| `--mod-dialog-confirm-title-text-line-height` | -| `--mod-dialog-confirm-title-text-size` | -| `--mod-dialog-fullscreen-header-text-size` | -| `--mod-dialog-heading-font-weight` | -| `--mod-dialog-min-inline-size` | -| `--mod-dialog-width` | +| Modifiable custom properties | +| ------------------------------------------------------- | +| `--mod-standard-dialog-background-color` | +| `--mod-standard-dialog-border-radius` | +| `--mod-standard-dialog-description-font-size` | +| `--mod-standard-dialog-description-font-weight` | +| `--mod-standard-dialog-description-line-height` | +| `--mod-standard-dialog-description-text-color` | +| `--mod-standard-dialog-header-content-font-size` | +| `--mod-standard-dialog-heading-font-size` | +| `--mod-standard-dialog-heading-font-weight` | +| `--mod-standard-dialog-heading-line-height` | +| `--mod-standard-dialog-heading-text-color` | +| `--mod-standard-dialog-hero-block-size` | +| `--mod-standard-dialog-max-width` | +| `--mod-standard-dialog-max-width-large` | +| `--mod-standard-dialog-max-width-small` | +| `--mod-standard-dialog-min-inline-size` | +| `--mod-standard-dialog-spacing-description-to-footer` | +| `--mod-standard-dialog-spacing-edge-to-close-button` | +| `--mod-standard-dialog-spacing-footer-to-button-group` | +| `--mod-standard-dialog-spacing-grid-padding` | +| `--mod-standard-dialog-spacing-title-to-description` | +| `--mod-standard-dialog-spacing-title-to-header-content` | diff --git a/components/dialog/package.json b/components/dialog/package.json index e71b77baf7d..688ebeefdd9 100644 --- a/components/dialog/package.json +++ b/components/dialog/package.json @@ -37,15 +37,22 @@ "@spectrum-css/divider": ">=4.0.0-s2-foundations.0", "@spectrum-css/modal": ">=6.0.0-s2-foundations.0", "@spectrum-css/tokens": ">=14.0.0-next.3", + "@spectrum-css/typography": ">=7.0.0-s2-foundations.0", "@spectrum-css/underlay": ">=5.0.0-s2-foundations.0" }, "peerDependenciesMeta": { - "@spectrum-css/divider": { + "@spectrum-css/checkbox": { + "optional": true + }, + "@spectrum-css/closebutton": { "optional": true }, "@spectrum-css/modal": { "optional": true }, + "@spectrum-css/typography": { + "optional": true + }, "@spectrum-css/underlay": { "optional": true } diff --git a/components/dialog/stories/dialog.stories.js b/components/dialog/stories/dialog.stories.js index 1256f6519ff..64966cec219 100644 --- a/components/dialog/stories/dialog.stories.js +++ b/components/dialog/stories/dialog.stories.js @@ -8,9 +8,12 @@ import { DialogFullscreen, DialogFullscreenTakeover, DialogGroup } from "./dialo import { Template } from "./template.js"; /** - * A dialog displays important information that users need to acknowledge. They appear over the interface and block further interactions. + * A dialog displays important information that users need to acknowledge. They appear over the interface and block further interactions. Standard dialogs are the most frequent type of dialogs. They appear in the center of the screen over the interface and should be used for moderately complex tasks. Takeover dialogs are large types of dialogs. They use the totality of the screen and should be used for modal experiences with complex workflows. * - * The alert variants that were previously a part of Dialog were moved to their own component, [Alert Dialog](/docs/components-alert-dialog--docs). + * ## Usage with modal component + * When a dialog component is used in tandem with a [modal](/docs/components-modal--docs), implementations should set `--mod-modal-background-color` to `transparent`. This will prevent any background color used in the modal from peeking through from behind the dialog at the rounded corners, allowing the dialog's background color to take precedence. + * + * The alert variants that were previously a part of Dialog were moved to their own component, [alert dialog](/docs/components-alert-dialog--docs). */ export default { title: "Dialog", @@ -18,6 +21,17 @@ export default { argTypes: { heading: { name: "Heading", + description: "Title for the dialog.", + type: { name: "string" }, + table: { + type: { summary: "string" }, + category: "Content", + }, + control: { type: "text" }, + }, + header: { + name: "Additional header content", + description: "Controls header content.", type: { name: "string" }, table: { type: { summary: "string" }, @@ -28,6 +42,7 @@ export default { content: { table: { disable: true } }, hasFooter: { name: "Has footer", + description: "Adds a footer to the dialog, containing the button group, checkbox, and footer text. Currently only supported in the default layout.", type: { name: "boolean" }, table: { type: { summary: "boolean" }, @@ -35,7 +50,28 @@ export default { }, control: "boolean", }, - footer: { table: { disable: true } }, + footer: { + name: "Footer text", + description: "Text content of the dialog footer. Represents the checkbox label if a checkbox is present, or stands alone if there is no checkbox. Currently only supported in the default layout.", + type: { name: "string" }, + table: { + type: { summary: "string" }, + category: "Content", + }, + control: { type: "text" }, + if: { arg: "hasFooter", truthy: true, }, + }, + hasCheckbox: { + name: "Has checkbox", + description: "Adds a checkbox to the footer content. Currently only supported in the default layout.", + type: { name: "boolean" }, + table: { + type: { summary: "boolean" }, + category: "Content", + }, + control: { type: "boolean" }, + if: { arg: "hasFooter", truthy: true, }, + }, size: size(["s", "m", "l"]), layout: { name: "Layout", @@ -45,6 +81,7 @@ export default { type: { summary: "string" }, category: "Component", defaultValue: { summary: "Default" }, + disable: true, }, options: ["default", "fullscreen", "fullscreenTakeover"], control: "select", @@ -77,33 +114,46 @@ export default { }, control: "boolean", }, - isOpen, + hasHeroImage: { + name: "Has hero image", + type: { name: "boolean" }, + description: "Adds a cover image to the header of a dialog.", + table: { + type: { summary: "boolean" }, + category: "Content", + }, + control: "boolean", + if: { arg: "layout", eq: "default" }, + }, heroImageUrl: { name: "Hero Image", type: { name: "string" }, - description: "Adds a cover image to the header of a dialog.", + description: "Select a cover image for the hero section of a dialog.", + defaultValue: "example-card-portrait.png", table: { type: { summary: "string" }, category: "Content", + defaultValue: { summary: "example-card-portrait.png" }, }, control: { type: "file", accept: ".svg,.png,.jpg,.jpeg,.webc" }, - if: { arg: "layout", eq: "default" }, + if: { arg: "hasHeroImage", truthy: true }, }, }, args: { rootClass: "spectrum-Dialog", hasFooter: true, + footer: "Do not show this message again.", isDismissible: false, - hasDivider: true, isOpen: true, - showModal: true, + showModal: false, size: "m", layout: "default", + hasCheckbox: true, + hasHeroImage: false, }, parameters: { - layout: "fullscreen", actions: { - handles: ["click .spectrum-Dialog button"], + handles: [], }, docs: { story: { @@ -123,16 +173,18 @@ export default { ], }; -const ExampleContent = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor augue mauris augue neque gravida. Libero volutpat sed ornare arcu. Quisque egestas diam in arcu cursus euismod quis viverra. Posuere ac ut consequat semper viverra nam libero justo laoreet. Enim ut tellus elementum sagittis vitae et leo duis ut. Neque laoreet suspendisse interdum consectetur libero id faucibus nisl. Diam volutpat commodo sed egestas egestas. Dolor magna eget est lorem ipsum dolor. Vitae suscipit tellus mauris a diam maecenas sed. Turpis in eu mi bibendum neque egestas congue. Rhoncus est pellentesque elit ullamcorper dignissim cras lobortis."; +const ExampleContent = "Standard dialog description. This should briefly communicate any additional information or context about the standard dialog title, to help users make one of the decisions offered by the buttons. Make it no more than a few short sentences."; /** - * The default size for dialog is medium. + * The default size for dialog is medium. The default dialog also has a checkbox in the footer. */ export const Default = DialogGroup.bind({}); Default.args = { heading: "Lorem ipsum dolor sit amet, consectetur adipiscing elit", + header: "* Required", + showModal: true, content: [ - (passthroughs, context) => Typography({ + (passthroughs, context) => Typography({ semantics: "body", size: "m", content: [ ExampleContent ], @@ -141,9 +193,13 @@ Default.args = { ], }; +/* TODO: For all dialog stories: the "is-hidden-story" tags in older versions of Storybook. In newer versions, +use "!dev" to remove the stories from the side navigation, reflecting the intended behavior. +Remove "is-hidden-story" in favor of "!dev" tags when possible. +*/ // ********* DOCS ONLY ********* // export const DefaultSmall = Template.bind({}); -DefaultSmall.tags = ["!dev"]; +DefaultSmall.tags = ["is-hidden-story", "!dev"]; DefaultSmall.storyName = "Dialog - small", DefaultSmall.parameters = { chromatic: { disableSnapshot: true }, @@ -154,7 +210,7 @@ DefaultSmall.args = { }; export const DefaultLarge = Template.bind({}); -DefaultLarge.tags = ["!dev"]; +DefaultLarge.tags = ["is-hidden-story", "!dev"]; DefaultLarge.storyName = "Dialog - large", DefaultLarge.parameters = { chromatic: { disableSnapshot: true }, @@ -165,10 +221,10 @@ DefaultLarge.args = { }; /** - * A dialog that can be dismissed without taking an action. Dismissible dialogs should never have buttons. + * A dialog that can be dismissed without taking an action. */ export const Dismissible = Template.bind({}); -Dismissible.tags = ["!dev"]; +Dismissible.tags = ["is-hidden-story", "!dev"]; Dismissible.parameters = { chromatic: { disableSnapshot: true }, }; @@ -177,25 +233,12 @@ Dismissible.args = { isDismissible: true, }; -/** - * Dialogs can forgo the divider if they have content that spans the entire width of the dialog. - */ -export const NoDivider = Template.bind({}); -NoDivider.tags = ["!dev"]; -NoDivider.parameters = { - chromatic: { disableSnapshot: true }, -}; -NoDivider.args = { - ...Default.args, - isDismissible: true, - hasDivider: false, -}; - /** * Dialogs can have a hero or cover image header. */ export const WithHero = Template.bind({}); -WithHero.tags = ["!dev"]; +WithHero.tags = ["is-hidden-story", "!dev"]; +WithHero.storyName = "With hero image"; WithHero.parameters = { docs: { story: { @@ -206,9 +249,7 @@ WithHero.parameters = { }; WithHero.args = { ...Default.args, - isDismissible: true, hasHeroImage: true, - heroImageUrl: "example-card-portrait.png", }; /** @@ -217,59 +258,67 @@ WithHero.args = { export const WithScroll = Template.bind({}); WithScroll.args = { ...Default.args, + content: [ ExampleContent, ExampleContent, ExampleContent, ExampleContent ], customStyles: { "max-block-size": "400px", } }; -WithScroll.tags = ["!dev"]; +WithScroll.storyName = "Scrollable"; +WithScroll.tags = ["is-hidden-story", "!dev"]; WithScroll.parameters = { chromatic: { disableSnapshot: true }, }; +/* TODO: once this gets rebased with `main`, make sure to use the fullscreen and fullscreenTakeover test templates +that are imported above, but commented out. + */ /** - * A fullscreen dialog will automatically fill almost all of the available screen space. A margin is included around the outside of the dialog. + * The full screen variant shows a large dialog background, only revealing a small portion of the page around the outside of the dialog, behind an overlay. The size of the dialog varies with the size of the screen, in both width and height. */ -export const Fullscreen = DialogFullscreen.bind({}); -Fullscreen.parameters = { - chromatic: { disableSnapshot: true }, - design: { - type: "figma", - url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=61935-5399", - }, -}; +export const Fullscreen = Template.bind({}); Fullscreen.args = { ...Default.args, layout: "fullscreen", + hasFooter: false, +}; +Fullscreen.parameters = { + chromatic: { disableSnapshot: true }, +}; + +// TODO: Because storybook doesn't support for multiple conditionals, we've removed the hasFooter +// arg from the control table for the fullscreen and fullscreenTakeover stories only. Ideally, we +// could have some of our controls display when more than one arg is met to avoid custom argTypes. +// For instance, hasCheckbox would appear when layout: "default", AND footer is truthy. +// https://github.com/storybookjs/storybook/discussions/18542 +Fullscreen.argTypes = { + hasFooter: { table: { disable: true, } }, }; /** - * A fullscreen takeover dialog will fill all of the available screen space. + * The full screen takeover variant is similar to the full screen variant except that the background covers the entire screen. The page behind the dialog is not visible. This variant should be reserved for workflows where displaying a second dialog on top of the first one is to be expected. */ -export const FullscreenTakeover = DialogFullscreenTakeover.bind({}); +export const FullscreenTakeover = Template.bind({}); +FullscreenTakeover.storyName = "Fullscreen takeover"; FullscreenTakeover.parameters = { chromatic: { disableSnapshot: true }, - design: { - type: "figma", - url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=61935-5399", - }, }; FullscreenTakeover.args = { ...Default.args, layout: "fullscreenTakeover", - content: [ () => Typography({ - semantics: "body", - size: "m", - content: [ ExampleContent, ExampleContent, ExampleContent, ExampleContent ], - })], + hasFooter: false, + content: [ ExampleContent, ExampleContent, ExampleContent, ExampleContent, ExampleContent, ExampleContent, ExampleContent, ExampleContent ], +}; +FullscreenTakeover.argTypes = { + hasFooter: { table: { disable: true, } }, }; // ********* VRT ONLY ********* // -export const WithForcedColors = DialogGroup.bind({}); +export const WithForcedColors = Default.bind({}); WithForcedColors.args = Default.args; WithForcedColors.tags = ["!autodocs", "!dev"]; WithForcedColors.parameters = { chromatic: { forcedColors: "active", - modes: disableDefaultModes, + modes: disableDefaultModes, }, }; diff --git a/components/dialog/stories/dialog.test.js b/components/dialog/stories/dialog.test.js index a6686207675..dbccfd16d7e 100644 --- a/components/dialog/stories/dialog.test.js +++ b/components/dialog/stories/dialog.test.js @@ -51,40 +51,6 @@ export const DialogGroup = Variants({ "background-color": "var(--spectrum-gray-50)" }, }, - { - testHeading: "No divider", - hasDivider: false, - wrapperStyles: { - "background-color": "var(--spectrum-gray-50)" - }, - }, - { - testHeading: "No divider, dismissible", - hasDivider: false, - isDismissible: true, - hasFooter: false, - wrapperStyles: { - "background-color": "var(--spectrum-gray-50)" - }, - }, - { - testHeading: "With hero/cover image, no divider", - hasDivider: false, - heroImageUrl: "example-card-portrait.png", - wrapperStyles: { - "background-color": "var(--spectrum-gray-50)" - }, - }, - { - testHeading: "With hero/cover image, no divider, dismissible", - hasDivider: false, - isDismissible: true, - hasFooter: false, - heroImageUrl: "example-card-portrait.png", - wrapperStyles: { - "background-color": "var(--spectrum-gray-50)" - }, - }, ], }); @@ -115,4 +81,3 @@ export const DialogFullscreenTakeover = Variants({ }, ], }); - diff --git a/components/dialog/stories/template.js b/components/dialog/stories/template.js index 86d2af5d050..0fe5d0620a8 100644 --- a/components/dialog/stories/template.js +++ b/components/dialog/stories/template.js @@ -1,7 +1,9 @@ import { Template as ButtonGroup } from "@spectrum-css/buttongroup/stories/template.js"; +import { Template as Checkbox } from "@spectrum-css/checkbox/stories/template.js"; import { Template as CloseButton } from "@spectrum-css/closebutton/stories/template.js"; -import { Template as Divider } from "@spectrum-css/divider/stories/template.js"; import { Template as Modal } from "@spectrum-css/modal/stories/template.js"; +import { Template as Typography } from "@spectrum-css/typography/stories/template.js"; +import { Template as Underlay } from "@spectrum-css/underlay/stories/template.js"; import { getRandomId, renderContent } from "@spectrum-css/preview/decorators"; import { html } from "lit"; import { classMap } from "lit/directives/class-map.js"; @@ -14,17 +16,20 @@ import "../index.css"; export const Template = ({ rootClass = "spectrum-Dialog", isDismissible = false, - hasDivider = true, isOpen = true, showModal = false, hasFooter = false, heading, + header, + footer, + hasCheckbox = false, content = [], footer = [], customClasses = [], id = getRandomId("dialog"), size = "m", layout, + hasHeroImage = false, heroImageUrl, customStyles = {}, } = {}, context = {}) => { @@ -38,10 +43,9 @@ export const Template = ({
layout !== l), + [`${rootClass}--dismissible`]: isDismissible && ["fullscreen", "fullscreenTakeover"].every(l => layout !== l), [`${rootClass}--${layout}`]: typeof layout !== "undefined", - [`${rootClass}--size${size?.toUpperCase()}`]: typeof size !== "undefined", - [`${rootClass}--noDivider`]: !hasDivider, + [`${rootClass}--size${size?.toUpperCase()}`]: typeof size !== "undefined", ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}), })} id=${ifDefined(id)} @@ -49,74 +53,137 @@ export const Template = ({ tabindex="-1" aria-modal="true" style=${ifDefined(styleMap(customStyles))} - > + >
- ${when(typeof heroImageUrl !== "undefined", () => + ${when(hasHeroImage, () => html` -
+ style="background-image:url(${heroImageUrl ? heroImageUrl : "example-card-portrait.png"})">
` )} - ${when(heading, () => html` -

${heading}

- `)} - ${when(hasDivider, () => - Divider({ - horizontal: true, - customClasses: [`${rootClass}-divider`], - }, context), +
+ ${when(heading, () => html` +

${heading}

+ `)} + ${when(header, () => html` + + ${Typography({ + semantics: "body", + size: "m", + // @todo: takeover dialogs can accept other components in their headers. could the renderContent function work here? + content: [ header ] + }, context)} + + `, )} -
- ${renderContent(content)} -
- ${when(hasFooter, () => { - return html` -
- ${when(typeof footer !== "undefined" && Array.isArray(footer) && footer.length > 0, - () => renderContent(footer), - )} - ${when(!isDismissible, () => html ` - ${ButtonGroup({ - items: [ - { - label: "Cancel", - treatment: "outline", - variant: "secondary", - }, - { - label: "Save", - treatment: "fill", - variant: "accent" - }, - ], - }, context)} - ` - )} -
- `; - })} - ${when(isDismissible && layout !== "fullscreen" && layout !== "fullscreenTakeover", () => +
+
${content.map((c) => (typeof c === "function" ? c({}) : c))}
+ ${when(isDismissible, () => CloseButton({ customClasses: [`${rootClass}-closeButton`], onclick: toggleOpen, }, context) )} + ${when(layout === "fullscreen" || layout === "fullscreenTakeover", () => html` +
+ ${ButtonGroup({ + items: [ + { + label: "Cancel", + treatment: "outline", + variant: "secondary", + }, + { + label: "Save", + treatment: "fill", + variant: "accent" + }, + ], + onclick: () => { + updateArgs(toggleOpen); + }, + }, context)} +
+ `)} + ${when(hasFooter, () => html` +
+ ${when(typeof footer !== "undefined", () => html` +
+ ${when(hasCheckbox, () => html` + ${Checkbox({ + label: footer, + }, context)} + `, + () => + Typography({ + semantics: "body", + size: "m", + content: [ footer ] + }, context) + )} +
+
+ ${ButtonGroup({ + items: [ + { + label: "Cancel", + treatment: "outline", + variant: "secondary", + }, + { + label: "Save", + treatment: "fill", + variant: "accent" + }, + ], + onclick: () => { + updateArgs(toggleOpen); + }, + }, context)} +
+ `, + () => html` +
+
+ ${ButtonGroup({ + items: [ + { + label: "Cancel", + treatment: "outline", + variant: "secondary", + }, + { + label: "Save", + treatment: "fill", + variant: "accent" + }, + ], + onclick: () => { + updateArgs(toggleOpen); + }, + }, context)} +
+ ` + )} +
+ `, + () => html` +
+ `)}
`; - if (showModal) { - return html` - ${Modal({ - isOpen, - content: [ () => Dialog], - variant: layout, - }, context)} - `; + return Modal({ + isOpen, + content: Dialog, + variant: layout, + customStyles: { + "--mod-modal-background-color": "transparent" + }, + }, context); } else { return Dialog; diff --git a/components/modal/index.css b/components/modal/index.css index 486b6adade6..a7a55c2deb5 100644 --- a/components/modal/index.css +++ b/components/modal/index.css @@ -11,23 +11,22 @@ * governing permissions and limitations under the License. */ -@import "@spectrum-css/commons/overlay.css"; - .spectrum-Modal { --spectrum-modal-confirm-entry-animation-duration: var(--mod-modal-confirm-entry-animation-duration, var(--spectrum-animation-duration-500)); - /* @deprecated --mod-overlay-animation-duration-opened in favor of --mod-modal-confirm-entry-animation-delay */ - --spectrum-modal-confirm-entry-animation-delay: var(--mod-overlay-animation-duration-opened, var(--mod-modal-confirm-entry-animation-delay, var(--spectrum-animation-duration-200))); + --spectrum-modal-confirm-entry-animation-delay: var(--mod-modal-confirm-entry-animation-delay, var(--spectrum-animation-duration-200)); - /* @deprecated --mod-overlay-animation-duration in favor of --mod-modal-confirm-exit-animation-duration */ - --spectrum-modal-confirm-exit-animation-duration: var(--mod-overlay-animation-duration, var(--mod-modal-confirm-exit-animation-duration, var(--spectrum-animation-duration-100))); + --spectrum-modal-confirm-exit-animation-duration: var(--mod-modal-confirm-exit-animation-duration, var(--spectrum-animation-duration-100)); --spectrum-modal-confirm-exit-animation-delay: var(--mod-modal-confirm-exit-animation-delay, var(--spectrum-animation-duration-0)); - --spectrum-modal-background-color: var(--spectrum-gray-75); - --spectrum-modal-confirm-border-radius: var(--spectrum-corner-radius-100); - --spectrum-modal-confirm-exit-animation-duration: var(--spectrum-animation-duration-100); - --spectrum-modal-confirm-entry-animation-duration: var(--spectrum-animation-duration-500); - --spectrum-modal-confirm-entry-animation-delay: var(--spectrum-animation-duration-200); - --spectrum-modal-transition-animation-duration: var(--spectrum-animation-duration-100); + /* Distance between top and bottom of modal and edge of window for fullscreen modal */ + --spectrum-modal-fullscreen-margin: 32px; + --spectrum-modal-max-height: var(--mod-modal-max-height, 90vh); + --spectrum-modal-max-width: var(--mod-modal-max-width, 90%); + + --spectrum-modal-background-color: var(--mod-modal-background-color, var(--spectrum-gray-75)); + --spectrum-modal-confirm-border-radius: var(--mod-modal-confirm-border-radius, var(--spectrum-corner-radius-extra-large-default)); + + --spectrum-modal-transition-animation-duration: var(--mod-modal-transition-animation-duration, var(--spectrum-animation-duration-100)); } /* Used to position the modal */ @@ -49,6 +48,9 @@ * We use the stretch value to counteract this where supported. */ block-size: 100vh; + /* stylelint-disable-next-line value-no-vendor-prefix */ + block-size: -moz-available; + /* stylelint-disable-next-line value-no-vendor-prefix */ block-size: -webkit-fill-available; /* autoprefixer: ignore next -- -moz-available providing inconsistent results; want to fall FF back to 100vh */ @@ -63,7 +65,7 @@ z-index: 2; /* Be invisible by default */ - transition: visibility 0ms linear var(--mod-modal-transition-animation-duration, var(--spectrum-animation-duration-100)); + transition: visibility 0ms linear var(--spectrum-modal-transition-animation-duration); &.is-open { visibility: visible; @@ -75,17 +77,17 @@ opacity: 0; /* Start offset by the animation distance -- @note this is using the global dialog token */ - transform: translateY(var(--mod-modal-confirm-entry-animation-distance, var(--spectrum-dialog-confirm-entry-animation-distance))); + transform: translateY(var(--spectrum-dialog-confirm-entry-animation-distance)); /* Appear above underlay */ z-index: 2; /* Don't be bigger than the screen */ - max-block-size: var(--mod-modal-max-height, 90vh); - max-inline-size: var(--mod-modal-max-width, 90%); + max-block-size: var(--spectrum-modal-max-height); + max-inline-size: var(--spectrum-modal-max-width); - background: var(--mod-modal-background-color, var(--spectrum-modal-background-color)); - border-radius: var(--mod-modal-confirm-border-radius, var(--spectrum-corner-radius-100)); + background: var(--spectrum-modal-background-color); + border-radius: var(--spectrum-modal-confirm-border-radius); overflow: hidden; outline: none; /* Firefox shows outline */ pointer-events: auto; @@ -93,8 +95,8 @@ /* Exit animations */ transition: opacity var(--spectrum-modal-confirm-exit-animation-duration) var(--spectrum-animation-ease-in) var(--spectrum-modal-confirm-exit-animation-delay), - visibility var(--spectrum-animation-duration-0) var(--spectrum-animation-linear) calc(var(--spectrum-modal-confirm-exit-animation-delay) + var(--spectrum-modal-confirm-exit-animation-duration)), - transform var(--spectrum-animation-duration-0) var(--spectrum-animation-linear) calc(var(--spectrum-modal-confirm-exit-animation-delay) + var(--spectrum-modal-confirm-exit-animation-duration)); + visibility 0ms linear calc(var(--spectrum-modal-confirm-exit-animation-delay) + var(--spectrum-modal-confirm-exit-animation-duration)), + transform 0ms linear calc(var(--spectrum-modal-confirm-exit-animation-delay) + var(--spectrum-modal-confirm-exit-animation-duration)); &.is-open { pointer-events: auto; diff --git a/components/modal/metadata/metadata.json b/components/modal/metadata/metadata.json index 7eaa26e4d77..4060ba2d071 100644 --- a/components/modal/metadata/metadata.json +++ b/components/modal/metadata/metadata.json @@ -15,15 +15,12 @@ "--mod-modal-background-color", "--mod-modal-confirm-border-radius", "--mod-modal-confirm-entry-animation-delay", - "--mod-modal-confirm-entry-animation-distance", "--mod-modal-confirm-entry-animation-duration", "--mod-modal-confirm-exit-animation-delay", "--mod-modal-confirm-exit-animation-duration", "--mod-modal-max-height", "--mod-modal-max-width", - "--mod-modal-transition-animation-duration", - "--mod-overlay-animation-duration", - "--mod-overlay-animation-duration-opened" + "--mod-modal-transition-animation-duration" ], "component": [ "--spectrum-modal-background-color", @@ -33,6 +30,8 @@ "--spectrum-modal-confirm-exit-animation-delay", "--spectrum-modal-confirm-exit-animation-duration", "--spectrum-modal-fullscreen-margin", + "--spectrum-modal-max-height", + "--spectrum-modal-max-width", "--spectrum-modal-transition-animation-duration" ], "global": [ @@ -42,8 +41,7 @@ "--spectrum-animation-duration-500", "--spectrum-animation-ease-in", "--spectrum-animation-ease-out", - "--spectrum-animation-linear", - "--spectrum-corner-radius-100", + "--spectrum-corner-radius-extra-large-default", "--spectrum-dialog-confirm-entry-animation-distance", "--spectrum-gray-75" ], diff --git a/components/modal/metadata/mods.md b/components/modal/metadata/mods.md index d07f0c93b07..dbad267bdcf 100644 --- a/components/modal/metadata/mods.md +++ b/components/modal/metadata/mods.md @@ -3,12 +3,9 @@ | `--mod-modal-background-color` | | `--mod-modal-confirm-border-radius` | | `--mod-modal-confirm-entry-animation-delay` | -| `--mod-modal-confirm-entry-animation-distance` | | `--mod-modal-confirm-entry-animation-duration` | | `--mod-modal-confirm-exit-animation-delay` | | `--mod-modal-confirm-exit-animation-duration` | | `--mod-modal-max-height` | | `--mod-modal-max-width` | | `--mod-modal-transition-animation-duration` | -| `--mod-overlay-animation-duration` | -| `--mod-overlay-animation-duration-opened` | diff --git a/components/modal/package.json b/components/modal/package.json index 5998a6e1a10..a7b1d0c6026 100644 --- a/components/modal/package.json +++ b/components/modal/package.json @@ -36,7 +36,6 @@ "@spectrum-css/tokens": ">=14.0.0-next.3" }, "devDependencies": { - "@spectrum-css/commons": "workspace:^", "@spectrum-css/tokens": "workspace:^" }, "keywords": [ diff --git a/tokens/custom/large-vars.css b/tokens/custom/large-vars.css index 4818a73426b..1f134bb7bd8 100644 --- a/tokens/custom/large-vars.css +++ b/tokens/custom/large-vars.css @@ -106,6 +106,8 @@ --spectrum-slider-tick-mark-height: 13px; --spectrum-slider-ramp-track-height: 20px; + --spectrum-standard-dialog-spacing-edge-to-content: var(--spectrum-spacing-400); + --spectrum-treeview-item-indentation-medium: 20px; --spectrum-treeview-item-indentation-small: 15px; --spectrum-treeview-item-indentation-large: 25px; diff --git a/tokens/custom/medium-vars.css b/tokens/custom/medium-vars.css index a8afcb49477..448683fe8b5 100644 --- a/tokens/custom/medium-vars.css +++ b/tokens/custom/medium-vars.css @@ -103,6 +103,8 @@ --spectrum-slider-ramp-track-height: 16px; --spectrum-slider-tick-mark-height: 10px; + --spectrum-standard-dialog-spacing-edge-to-content: var(--spectrum-spacing-500); + --spectrum-treeview-indicator-inset-block-start: 5px; --spectrum-treeview-item-indentation-small: var(--spectrum-spacing-200); --spectrum-treeview-item-indentation-medium: var(--spectrum-spacing-300); diff --git a/tokens/dist/css/large-vars.css b/tokens/dist/css/large-vars.css index e48cf46a799..7a409693b07 100644 --- a/tokens/dist/css/large-vars.css +++ b/tokens/dist/css/large-vars.css @@ -761,6 +761,8 @@ --spectrum-slider-tick-mark-height:13px; --spectrum-slider-ramp-track-height:20px; + --spectrum-standard-dialog-spacing-edge-to-content:var(--spectrum-spacing-400); + --spectrum-treeview-item-indentation-medium:20px; --spectrum-treeview-item-indentation-small:15px; --spectrum-treeview-item-indentation-large:25px; diff --git a/tokens/dist/css/medium-vars.css b/tokens/dist/css/medium-vars.css index 19863365dc2..e141ac0fe8e 100644 --- a/tokens/dist/css/medium-vars.css +++ b/tokens/dist/css/medium-vars.css @@ -758,6 +758,8 @@ --spectrum-slider-ramp-track-height:16px; --spectrum-slider-tick-mark-height:10px; + --spectrum-standard-dialog-spacing-edge-to-content:var(--spectrum-spacing-500); + --spectrum-treeview-indicator-inset-block-start:5px; --spectrum-treeview-item-indentation-small:var(--spectrum-spacing-200); --spectrum-treeview-item-indentation-medium:var(--spectrum-spacing-300); diff --git a/tokens/dist/index.css b/tokens/dist/index.css index 32b0ec53203..2608c6d60e6 100644 --- a/tokens/dist/index.css +++ b/tokens/dist/index.css @@ -2609,6 +2609,8 @@ --spectrum-slider-tick-mark-height: 13px; --spectrum-slider-ramp-track-height: 20px; + --spectrum-standard-dialog-spacing-edge-to-content: var(--spectrum-spacing-400); + --spectrum-treeview-item-indentation-medium: 20px; --spectrum-treeview-item-indentation-small: 15px; --spectrum-treeview-item-indentation-large: 25px; @@ -4198,6 +4200,8 @@ --spectrum-slider-ramp-track-height: 16px; --spectrum-slider-tick-mark-height: 10px; + --spectrum-standard-dialog-spacing-edge-to-content: var(--spectrum-spacing-500); + --spectrum-treeview-indicator-inset-block-start: 5px; --spectrum-treeview-item-indentation-small: var(--spectrum-spacing-200); --spectrum-treeview-item-indentation-medium: var(--spectrum-spacing-300); diff --git a/yarn.lock b/yarn.lock index 0d679be7345..dfe0c4e5851 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3454,12 +3454,17 @@ __metadata: "@spectrum-css/divider": ">=4.0.0-s2-foundations.0" "@spectrum-css/modal": ">=6.0.0-s2-foundations.0" "@spectrum-css/tokens": ">=14.0.0-next.3" + "@spectrum-css/typography": ">=7.0.0-s2-foundations.0" "@spectrum-css/underlay": ">=5.0.0-s2-foundations.0" peerDependenciesMeta: - "@spectrum-css/divider": + "@spectrum-css/checkbox": + optional: true + "@spectrum-css/closebutton": optional: true "@spectrum-css/modal": optional: true + "@spectrum-css/typography": + optional: true "@spectrum-css/underlay": optional: true languageName: unknown @@ -3721,7 +3726,6 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/modal@workspace:components/modal" dependencies: - "@spectrum-css/commons": "workspace:^" "@spectrum-css/tokens": "workspace:^" peerDependencies: "@spectrum-css/tokens": ">=14.0.0-next.3"