Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(dialog): s2 takeover dialog migration #3347

Merged
merged 1 commit into from
Jan 30, 2025
Merged

feat(dialog): s2 takeover dialog migration #3347

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 23 additions & 0 deletions .changeset/modern-chairs-sit.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
---
"@spectrum-css/dialog": major
"@spectrum-css/modal": minor
Comment on lines +2 to +3
Copy link
Collaborator Author

@marissahuysentruyt marissahuysentruyt Oct 31, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we agree with these version bumps? Is it a concern that the dialog component will have undergone 2 major version bumps for S2? I think the changes would be considered breaking changes. And really, the only reason for a second major version is because we split the standard dialog work from this takeover dialog work. Any thoughts there?

Same for modal- is it a minor version bump?

Copy link
Collaborator Author

@marissahuysentruyt marissahuysentruyt Jan 16, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@castastrophe any reservations with the version bumps here? I wasn't sure if 2 major bumps for dialog (we had a major version change for #2860, and I'm proposing a secondary major version bump) was an issue or weird or something.

---

S2 Takeover dialog

This is the migration for the fullscreen/fullscreenTakeover dialog stories (these stories correspond to the "takeover dialog" in Figma). The Divider component support was removed in S2 standard dialog migration ([#2860](https://github.com/adobe/spectrum-css/pull/2860)). New and updated tokens are in place to update fullscreen/fullscreenTakeover dialog sizing, grid spacing, spacing in the header, and font sizes. Fullscreen/fullscreenTakeover dialogs do not support additional footer content or checkboxes (in comparison to the standard dialog).

Takeover dialogs also support replacing text in the header and body areas with other components. This required an additional `.spectrum-Dialog-headerContentWrapper` element that should center whatever component/content within.

Class names updated to match naming convention (remove hyphens and capitalize second word):
`.spectrum-Dialog-header-content` > `.spectrum-Dialog-headerContent`
`.spectrum-Dialog-footer-content` > `.spectrum-Dialog-footerContent`

_New Mods_
`--mod-takeover-dialog-grid-spacing`
`--mod-takeover-dialog-spacing-header-content-gap`
`--mod-takeover-dialog-title-font-size`

Modal updates

- Modal component now uses the updated margin token (`window-to-edge`) found in the takeover dialog design specs. This work also introduced `--spectrum-modal-takeover-window-to-edge`
27 changes: 22 additions & 5 deletions components/dialog/dist/metadata.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
".spectrum-Dialog--fullscreen .spectrum-Dialog-footer",
".spectrum-Dialog--fullscreen .spectrum-Dialog-grid",
".spectrum-Dialog--fullscreen .spectrum-Dialog-header",
".spectrum-Dialog--fullscreen .spectrum-Dialog-header > .spectrum-Dialog-headerContentWrapper",
".spectrum-Dialog--fullscreen .spectrum-Dialog-heading",
".spectrum-Dialog--fullscreen.spectrum-Dialog .spectrum-Dialog-grid",
".spectrum-Dialog--fullscreenTakeover",
Expand All @@ -21,6 +22,7 @@
".spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-footer",
".spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-grid",
".spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-header",
".spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-header > .spectrum-Dialog-headerContentWrapper",
".spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-heading",
".spectrum-Dialog--fullscreenTakeover.spectrum-Dialog .spectrum-Dialog-grid",
".spectrum-Dialog--sizeL",
Expand All @@ -30,12 +32,12 @@
".spectrum-Dialog-closeButton",
".spectrum-Dialog-content",
".spectrum-Dialog-footer",
".spectrum-Dialog-footer .spectrum-Dialog-footer-content",
".spectrum-Dialog-footer .spectrum-Dialog-footerContent",
".spectrum-Dialog-footer:has(.spectrum-Dialog-buttonGroup)",
".spectrum-Dialog-footer:has(.spectrum-Dialog-footer-content)",
".spectrum-Dialog-footer:has(.spectrum-Dialog-footerContent)",
".spectrum-Dialog-grid",
".spectrum-Dialog-header",
".spectrum-Dialog-header > .spectrum-Dialog-header-content",
".spectrum-Dialog-header > .spectrum-Dialog-headerContentWrapper",
".spectrum-Dialog-heading",
".spectrum-Dialog-hero"
],
Expand All @@ -61,7 +63,10 @@
"--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"
"--mod-standard-dialog-spacing-title-to-header-content",
"--mod-takeover-dialog-grid-spacing",
"--mod-takeover-dialog-spacing-header-content-gap",
"--mod-takeover-dialog-title-font-size"
],
"component": [],
"global": [
Expand Down Expand Up @@ -112,9 +117,21 @@
"--spectrum-standard-dialog-spacing-title-to-description",
"--spectrum-standard-dialog-spacing-title-to-header-content",
"--spectrum-standard-dialog-title-font-size",
"--spectrum-takeover-dialog-block-size",
"--spectrum-takeover-dialog-grid-spacing",
"--spectrum-takeover-dialog-height",
"--spectrum-takeover-dialog-inline-size",
"--spectrum-takeover-dialog-spacing-grid-padding",
"--spectrum-takeover-dialog-spacing-header-content-gap",
"--spectrum-takeover-dialog-spacing-header-gap",
"--spectrum-takeover-dialog-spacing-title-to-body",
"--spectrum-takeover-dialog-spacing-title-to-content",
"--spectrum-takeover-dialog-title-font-size",
"--spectrum-takeover-dialog-width",
"--spectrum-title-line-height",
"--spectrum-title-sans-serif-font-style",
"--spectrum-title-sans-serif-font-weight"
"--spectrum-title-sans-serif-font-weight",
"--spectrum-title-size-xxl"
],
"passthroughs": [
"--mod-buttongroup-flex-wrap",
Expand Down
44 changes: 33 additions & 11 deletions components/dialog/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,14 @@
/* Passthrough for nested component(s) */
--mod-buttongroup-justify-content: flex-end;
--mod-buttongroup-flex-wrap: nowrap;

/* Fullscreen/fullscreenTakeover */
--spectrum-takeover-dialog-title-font-size: var(--spectrum-title-size-xxl);
--spectrum-takeover-dialog-grid-spacing: var(--spectrum-takeover-dialog-spacing-grid-padding);
--spectrum-takeover-dialog-spacing-header-content-gap: var(--spectrum-takeover-dialog-spacing-header-gap);
--spectrum-takeover-dialog-spacing-title-to-content: var(--spectrum-takeover-dialog-spacing-title-to-body);
--spectrum-takeover-dialog-inline-size: var(--spectrum-takeover-dialog-width);
--spectrum-takeover-dialog-block-size: var(--spectrum-takeover-dialog-height);
}

.spectrum-Dialog {
Expand Down Expand Up @@ -151,7 +159,7 @@
outline: none; /* Hide focus outline around header */

/* additional header content should grow/shrink with the text, but only until it takes up half of the header */
> .spectrum-Dialog-header-content {
> .spectrum-Dialog-headerContentWrapper {
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));
Expand Down Expand Up @@ -188,12 +196,12 @@

outline: none; /* Hide focus outline */

.spectrum-Dialog-footer-content {
.spectrum-Dialog-footerContent {
/* 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-footerContent),
&:has(.spectrum-Dialog-buttonGroup) {
justify-content: space-between;
}
Expand Down Expand Up @@ -248,13 +256,13 @@
}

.spectrum-Dialog--fullscreen {
inline-size: 100%;
block-size: 100%;
inline-size: var(--spectrum-takeover-dialog-inline-size);
block-size: var(--spectrum-takeover-dialog-block-size);
}

.spectrum-Dialog--fullscreenTakeover {
inline-size: 100%;
block-size: 100%;
inline-size: var(--spectrum-takeover-dialog-inline-size);
block-size: var(--spectrum-takeover-dialog-block-size);
border-radius: 0;
}

Expand All @@ -266,16 +274,16 @@
.spectrum-Dialog-grid {
display: grid;
grid-template-columns:
var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding))
var(--mod-takeover-dialog-grid-spacing, var(--spectrum-takeover-dialog-grid-spacing))
1fr
auto
auto
var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding));
var(--mod-takeover-dialog-grid-spacing, var(--spectrum-takeover-dialog-grid-spacing));
grid-template-rows:
var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding))
var(--mod-takeover-dialog-grid-spacing, var(--spectrum-takeover-dialog-grid-spacing))
auto
1fr
var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding));
var(--mod-takeover-dialog-grid-spacing, var(--spectrum-takeover-dialog-grid-spacing));
grid-template-areas:
". . . . ."
". heading header buttonGroup ."
Expand All @@ -285,6 +293,20 @@

.spectrum-Dialog-header {
grid-area: heading;
gap: var(--mod-takeover-dialog-spacing-header-content-gap, var(--spectrum-takeover-dialog-spacing-header-content-gap));
margin-inline-end: var(--mod-takeover-dialog-spacing-header-content-gap, var(--spectrum-takeover-dialog-spacing-header-content-gap));
margin-block-end: var(--spectrum-takeover-dialog-spacing-title-to-content);

/* components in fullscreen/fullscreenTakeover dialogs are centered in the headerContentWrapper */
> .spectrum-Dialog-headerContentWrapper {
max-inline-size: unset;
display: inline-flex;
justify-content: center;
}
}

.spectrum-Dialog-heading {
font-size: var(--mod-takeover-dialog-title-font-size, var(--spectrum-takeover-dialog-title-font-size));
}

.spectrum-Dialog-closeButton {
Expand Down
81 changes: 69 additions & 12 deletions components/dialog/stories/dialog.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import { withUnderlayWrapper } from "@spectrum-css/preview/decorators";
import { disableDefaultModes } from "@spectrum-css/preview/modes";
import { size } from "@spectrum-css/preview/types";
import { Template as Table } from "@spectrum-css/table/stories/template.js";
import { Template as Steplist } from "@spectrum-css/steplist/stories/template.js";
import { Template as Typography } from "@spectrum-css/typography/stories/template.js";
import metadata from "../dist/metadata.json";
import packageJson from "../package.json";
Expand All @@ -10,10 +12,11 @@ import { Template } from "./template.js";
/**
* 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",
Expand Down Expand Up @@ -96,15 +99,6 @@ export default {
control: "boolean",
if: { arg: "layout", eq: "default" },
},
hasDivider: {
name: "Divider",
type: { name: "boolean" },
table: {
type: { summary: "boolean" },
category: "Component",
},
control: "boolean",
},
showModal: {
name: "Wrap the dialog in a modal",
type: { name: "boolean" },
Expand Down Expand Up @@ -167,6 +161,7 @@ export default {
},
packageJson,
metadata,
layout: "fullscreen",
},
decorators: [
withUnderlayWrapper,
Expand Down Expand Up @@ -267,16 +262,71 @@ WithScroll.parameters = {
};

/**
* 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.
* The fullscreen 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.
*
* Fullscreen dialogs do not support a close button, and are not dismissible.
*
* Implementations may swap out the extra header content and body content for other components, like the [steplist](/docs/components-steplist--docs) and [table](/docs/components-table--docs) seen in this example. Components in the extra header content area will be centered.
*/
export const Fullscreen = DialogFullscreen.bind({});
Fullscreen.args = {
...Default.args,
header:[
(passthroughs, context) => Steplist({
...passthroughs,
items: [
{
label: "Enter records",
isComplete: true,
},
{
label: "Confirmation",
isComplete: true,
},
{
label: "Summary",
isSelected: true,
},
],
}, context),
],
content: [
(passthroughs, context) => Table({
...passthroughs,
showThumbnails: true,
rowItems: [
{
cellContent: ["Table Row Alpha", "Test", "2"],
},
{
cellContent: ["Table Row Bravo", "Test", "28"],
},
{
cellContent: [
"Table Row Charlie. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.",
"Test",
"23",
],
},
{
cellContent: ["Table Row Delta", "Test", "7"],
},
{
cellContent: ["Summary Row", "", "60"],
isSummaryRow: true,
},
],
}, context),
],
layout: "fullscreen",
hasFooter: false,
};
Fullscreen.parameters = {
chromatic: { disableSnapshot: true },
design: {
type: "figma",
url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=61935-5399",
}
};

// TODO: Because storybook doesn't support for multiple conditionals, we've removed the hasFooter
Expand All @@ -286,15 +336,22 @@ Fullscreen.parameters = {
// https://github.com/storybookjs/storybook/discussions/18542
Fullscreen.argTypes = {
hasFooter: { table: { disable: true, } },
header: { table: { disable: true, } },
};

/**
* 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.
* The fullscreen takeover variant is similar to the fullscreen 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.
*
* Fullscreen takeover dialogs do not support a close button, and are not dismissible.
*/
export const FullscreenTakeover = DialogFullscreenTakeover.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,
Expand Down
39 changes: 16 additions & 23 deletions components/dialog/stories/dialog.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,41 +42,34 @@ export const DialogGroup = Variants({
},
{
testHeading: "With hero/cover image",
hasHeroImage: true,
heroImageUrl: "example-card-portrait.png",
},
{
testHeading: "With hero/cover image, dismissible",
hasHeroImage: true,
heroImageUrl: "example-card-portrait.png",
isDismissible: true,
hasFooter: false,
},
{
testHeading: "No divider",
hasDivider: false,
},
{
testHeading: "No divider, dismissible",
hasDivider: false,
isDismissible: true,
hasFooter: false,
},
{
testHeading: "With hero/cover image, no divider",
hasDivider: false,
heroImageUrl: "example-card-portrait.png",
},
{
testHeading: "With hero/cover image, no divider, dismissible",
hasDivider: false,
isDismissible: true,
hasFooter: false,
heroImageUrl: "example-card-portrait.png",
},
],
});

export const DialogFullscreen = Variants({
Template,
Template: (args, context) => {
const { parameters: { showTestingGrid = false } = {} } = context;

return Template({
...args,
/*
* Custom styles were added to make sure the VRTs catch the rounded corners
*/
customStyles: {
margin: showTestingGrid ? "16px" : undefined,
"background-color": showTestingGrid ? "var(--spectrum-gray-100)" : undefined,
},
}, context);
},
withSizes: false,
wrapperStyles: {
"background-color": "var(--spectrum-gray-50)"
Expand Down
Loading
Loading