From cfe54e859057994325b9e683fb914f35736a12ae Mon Sep 17 00:00:00 2001 From: TJ Egan Date: Fri, 9 Feb 2024 09:53:50 -0500 Subject: [PATCH 1/5] feat(Modal): update Modal styles to phase 2 AI spec --- .../styles/scss/components/modal/_modal.scss | 20 +++++++++---------- .../styles/scss/utilities/_ai-gradient.scss | 15 ++++++++++++++ packages/themes/src/g10.js | 4 ++++ packages/themes/src/g100.js | 4 ++++ packages/themes/src/g90.js | 4 ++++ packages/themes/src/tokens/v11TokenGroup.js | 1 + packages/themes/src/white.js | 4 ++++ 7 files changed, 41 insertions(+), 11 deletions(-) diff --git a/packages/styles/scss/components/modal/_modal.scss b/packages/styles/scss/components/modal/_modal.scss index 3deba95eb14e..e7df66da3bbc 100644 --- a/packages/styles/scss/components/modal/_modal.scss +++ b/packages/styles/scss/components/modal/_modal.scss @@ -488,21 +488,19 @@ } // Slug styles - .#{$prefix}--modal--slug .#{$prefix}--modal-container { - @include callout-gradient(); - - background-color: $layer; + .#{$prefix}--modal--slug.#{$prefix}--modal { + background-color: $ai-overlay; } - // Start the gradient 64px from bottom only when two buttons are present - .#{$prefix}--modal--slug - .#{$prefix}--modal-container:has( - .#{$prefix}--btn-set:not(.#{$prefix}--modal-footer--three-button) - > button:not(:only-child) - ) { - @include callout-gradient('default', 64px); + .#{$prefix}--modal--slug .#{$prefix}--modal-container { + @include callout-gradient('default', 64px, 'layer'); + border: 1px solid transparent; background-color: $layer; + box-shadow: inset 0 -80px 0 -16px $layer, + inset 0 -160px 70px -65px $ai-inner-shadow, + -40px 30px 100px -25px $slug-callout-shadow-outer-01, + -60px 80px 60px -45px $slug-callout-shadow-outer-02; } .#{$prefix}--modal--slug .#{$prefix}--slug { diff --git a/packages/styles/scss/utilities/_ai-gradient.scss b/packages/styles/scss/utilities/_ai-gradient.scss index 2d05b8b0d16d..3e392b671a34 100644 --- a/packages/styles/scss/utilities/_ai-gradient.scss +++ b/packages/styles/scss/utilities/_ai-gradient.scss @@ -65,6 +65,20 @@ } } +@mixin ai-modal-gradient($type: 'default', $offset: 50%) { + $start: 0%; + @if $offset != 0 { + $start: calc(0% + #{$offset}); + } + + background: linear-gradient( + to top, + theme.$layer $start, + theme.$ai-aura-start $start, + theme.$ai-aura-end 50% + ); +} + /// Experimental - name and structure subject to change. Use at your own risk! /// Adds callout gradient styles to a component /// @access private @@ -124,6 +138,7 @@ } @else { background: linear-gradient( to top, + $background $start, theme.$ai-aura-start $start, theme.$ai-aura-end 50% ) diff --git a/packages/themes/src/g10.js b/packages/themes/src/g10.js index 0830cbf09691..57010fe81d56 100644 --- a/packages/themes/src/g10.js +++ b/packages/themes/src/g10.js @@ -13,6 +13,7 @@ import { blue40, blue60, blue70, + blue100, // CoolGray coolGray10, @@ -232,6 +233,9 @@ export const aiAuraHoverEnd = rgba(white, 0); export const slugCalloutShadowOuter01 = rgba(blue70, 0.25); export const slugCalloutShadowOuter02 = rgba(black, 0.1); +// AI Modal tokens +export const aiOverlay = rgba(blue100, 0.5); + //// Not used in phase 2 / possibly remove? export const slugCalloutGradientTop = rgba(gray10, 0.85); export const slugCalloutGradientBottom = rgba(gray20, 0.85); diff --git a/packages/themes/src/g100.js b/packages/themes/src/g100.js index abf390e880f3..a4cd52fdbdf7 100644 --- a/packages/themes/src/g100.js +++ b/packages/themes/src/g100.js @@ -13,6 +13,7 @@ import { blue60, blue70, blue80, + blue100, // Gray gray10, @@ -237,6 +238,9 @@ export const aiAuraHoverEnd = rgba(black, 0); export const slugCalloutShadowOuter01 = rgba(blue80, 0.25); export const slugCalloutShadowOuter02 = rgba(black, 0.65); +// AI Modal tokens +export const aiOverlay = rgba(blue100, 0.5); + //// Not used in phase 2 / possibly remove? export const slugCalloutGradientTop = rgba(gray100, 0.85); export const slugCalloutGradientBottom = rgba(gray90, 0.85); diff --git a/packages/themes/src/g90.js b/packages/themes/src/g90.js index 1b4203d03387..d394fac245a7 100644 --- a/packages/themes/src/g90.js +++ b/packages/themes/src/g90.js @@ -13,6 +13,7 @@ import { blue60, blue70, blue80, + blue100, // Gray gray10, @@ -238,6 +239,9 @@ export const aiAuraHoverEnd = rgba(black, 0); export const slugCalloutShadowOuter01 = rgba(blue80, 0.25); export const slugCalloutShadowOuter02 = rgba(black, 0.65); +// AI Modal tokens +export const aiOverlay = rgba(blue100, 0.5); + //// Not used in phase 2 / possibly remove? export const slugCalloutGradientTop = rgba(gray100, 0.85); export const slugCalloutGradientBottom = rgba(gray90, 0.85); diff --git a/packages/themes/src/tokens/v11TokenGroup.js b/packages/themes/src/tokens/v11TokenGroup.js index facd291d30e7..08c1bfefcfe2 100644 --- a/packages/themes/src/tokens/v11TokenGroup.js +++ b/packages/themes/src/tokens/v11TokenGroup.js @@ -382,6 +382,7 @@ export const ai = TokenGroup.create({ 'ai-border-start', 'ai-border-end', 'ai-drop-shadow', + 'ai-overlay', // Caret tokens 'slug-callout-caret-center', 'slug-callout-caret-bottom', diff --git a/packages/themes/src/white.js b/packages/themes/src/white.js index e50c676ec9b4..bb2a67c55432 100644 --- a/packages/themes/src/white.js +++ b/packages/themes/src/white.js @@ -13,6 +13,7 @@ import { blue40, blue60, blue70, + blue100, // CoolGray coolGray10, @@ -232,6 +233,9 @@ export const aiAuraHoverEnd = rgba(white, 0); export const slugCalloutShadowOuter01 = rgba(blue70, 0.25); export const slugCalloutShadowOuter02 = rgba(black, 0.1); +// AI Modal tokens +export const aiOverlay = rgba(blue100, 0.5); + //// Not used in phase 2 / possibly remove? export const slugCalloutGradientTop = rgba(gray10, 0.85); export const slugCalloutGradientBottom = rgba(gray20, 0.85); From 3f172950bf8486e6b1e1ae52ee9bddb80fb76f95 Mon Sep 17 00:00:00 2001 From: TJ Egan Date: Fri, 9 Feb 2024 09:56:31 -0500 Subject: [PATCH 2/5] test(snapshot): update snapshots --- .../__tests__/__snapshots__/PublicAPI-test.js.snap | 1 + packages/styles/scss/__tests__/theme-test.js | 1 + packages/styles/scss/utilities/_ai-gradient.scss | 14 -------------- .../__tests__/__snapshots__/v11-test.js.snap | 1 + .../themes/src/tokens/__tests__/metadata-test.js | 4 ++++ 5 files changed, 7 insertions(+), 14 deletions(-) diff --git a/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap index de34dd015ec2..013b80199dae 100644 --- a/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap +++ b/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap @@ -16,6 +16,7 @@ Array [ "aiGradientStart01", "aiGradientStart02", "aiInnerShadow", + "aiOverlay", "background", "backgroundActive", "backgroundBrand", diff --git a/packages/styles/scss/__tests__/theme-test.js b/packages/styles/scss/__tests__/theme-test.js index 579ab1f076ba..0e166aed8762 100644 --- a/packages/styles/scss/__tests__/theme-test.js +++ b/packages/styles/scss/__tests__/theme-test.js @@ -162,6 +162,7 @@ describe('@carbon/styles/scss/theme', () => { "ai-border-start", "ai-border-end", "ai-drop-shadow", + "ai-overlay", "slug-callout-caret-center", "slug-callout-caret-bottom", "slug-callout-caret-bottom-background", diff --git a/packages/styles/scss/utilities/_ai-gradient.scss b/packages/styles/scss/utilities/_ai-gradient.scss index 3e392b671a34..87ec673a9efe 100644 --- a/packages/styles/scss/utilities/_ai-gradient.scss +++ b/packages/styles/scss/utilities/_ai-gradient.scss @@ -65,20 +65,6 @@ } } -@mixin ai-modal-gradient($type: 'default', $offset: 50%) { - $start: 0%; - @if $offset != 0 { - $start: calc(0% + #{$offset}); - } - - background: linear-gradient( - to top, - theme.$layer $start, - theme.$ai-aura-start $start, - theme.$ai-aura-end 50% - ); -} - /// Experimental - name and structure subject to change. Use at your own risk! /// Adds callout gradient styles to a component /// @access private diff --git a/packages/themes/src/tokens/__tests__/__snapshots__/v11-test.js.snap b/packages/themes/src/tokens/__tests__/__snapshots__/v11-test.js.snap index 81c969f3e0e8..991d6d77023c 100644 --- a/packages/themes/src/tokens/__tests__/__snapshots__/v11-test.js.snap +++ b/packages/themes/src/tokens/__tests__/__snapshots__/v11-test.js.snap @@ -273,6 +273,7 @@ Array [ "ai-border-start", "ai-border-end", "ai-drop-shadow", + "ai-overlay", "slug-callout-caret-center", "slug-callout-caret-bottom", "slug-callout-caret-bottom-background", diff --git a/packages/themes/src/tokens/__tests__/metadata-test.js b/packages/themes/src/tokens/__tests__/metadata-test.js index ea1e0b007b14..e27f2ccaab98 100644 --- a/packages/themes/src/tokens/__tests__/metadata-test.js +++ b/packages/themes/src/tokens/__tests__/metadata-test.js @@ -1065,6 +1065,10 @@ test('metadata', () => { "name": "ai-drop-shadow", "type": "color", }, + Object { + "name": "ai-overlay", + "type": "color", + }, Object { "name": "slug-callout-caret-center", "type": "color", From 9ee603e67432a76182754f0ae7babe724ef1ba6d Mon Sep 17 00:00:00 2001 From: TJ Egan Date: Fri, 9 Feb 2024 12:52:00 -0500 Subject: [PATCH 3/5] feat(Modal): add overflow effect --- .../components/Slug/Slug-examples.stories.js | 88 ++++++++++++++++--- .../styles/scss/components/modal/_modal.scss | 34 +++++-- 2 files changed, 105 insertions(+), 17 deletions(-) diff --git a/packages/react/src/components/Slug/Slug-examples.stories.js b/packages/react/src/components/Slug/Slug-examples.stories.js index 8e8e92a506a6..aa8cd3d98e24 100644 --- a/packages/react/src/components/Slug/Slug-examples.stories.js +++ b/packages/react/src/components/Slug/Slug-examples.stories.js @@ -276,22 +276,47 @@ export const _Combobox = { }; export const _ComposedModal = { + args: { + showButtons: true, + hasScrollingContent: true, + }, argTypes: { slug: { description: '**Experimental**: Provide a `Slug` component to be rendered inside the component', }, + hasScrollingContent: { + description: 'Add scrolling content indicator', + }, + showButtons: { + description: 'Show or hide the Modal buttons', + }, }, - render: () => ( + render: (args) => (
- +

Custom domains direct requests for your apps in this Cloud Foundry organization to a URL that you own. A custom domain can be a shared domain, a shared subdomain, or a shared domain and host.

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus + eu nibh odio. Nunc a consequat est, id porttitor sapien. Proin vitae + leo vitae orci tincidunt auctor eget eget libero. Ut tincidunt + ultricies fringilla. Aliquam erat volutpat. Aenean arcu odio, + elementum vel vehicula vitae, porttitor ac lorem. Sed viverra elit + ac risus tincidunt fermentum. Ut sollicitudin nibh id risus ornare + ornare. Etiam gravida orci ut lectus dictum, quis ultricies felis + mollis. Mauris nec commodo est, nec faucibus nibh. Nunc commodo ante + quis pretium consectetur. Ut ac nisl vitae mi mattis vulputate a at + elit. Nullam porttitor ex eget mi feugiat mattis. Nunc non sodales + magna. Proin ornare tellus quis hendrerit egestas. Donec pharetra + leo nec molestie sollicitudin. +

+ +

+ Custom domains direct requests for your apps in this Cloud Foundry + organization to a URL that you own. A custom domain can be a shared + domain, a shared subdomain, or a shared domain and host. +

+ - + + {args.showButtons && ( + + )}
), @@ -376,26 +416,52 @@ export const _FilterableMultiselect = { }; export const _Modal = { + args: { + showButtons: true, + hasScrollingContent: true, + }, argTypes: { slug: { description: '**Experimental**: Provide a `Slug` component to be rendered inside the component', }, + hasScrollingContent: { + description: 'Add scrolling content indicator', + }, + showButtons: { + description: 'Show or hide the Modal buttons', + }, }, - render: () => ( + render: (args) => (
-

+

Custom domains direct requests for your apps in this Cloud Foundry organization to a URL that you own. A custom domain can be a shared domain, a shared subdomain, or a shared domain and host.

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu + nibh odio. Nunc a consequat est, id porttitor sapien. Proin vitae leo + vitae orci tincidunt auctor eget eget libero. Ut tincidunt ultricies + fringilla. Aliquam erat volutpat. Aenean arcu odio, elementum vel + vehicula vitae, porttitor ac lorem. Sed viverra elit ac risus + tincidunt fermentum. Ut sollicitudin nibh id risus ornare ornare. + Etiam gravida orci ut lectus dictum, quis ultricies felis mollis. + Mauris nec commodo est, nec faucibus nibh. Nunc commodo ante quis + pretium consectetur. Ut ac nisl vitae mi mattis vulputate a at elit. + Nullam porttitor ex eget mi feugiat mattis. Nunc non sodales magna. + Proin ornare tellus quis hendrerit egestas. Donec pharetra leo nec + molestie sollicitudin. +

.#{$prefix}--slug:has(+ .#{$prefix}--modal-close-button), .#{$prefix}--modal-header @@ -520,8 +536,14 @@ inset-inline-end: convert.to-rem(48px); } + .#{$prefix}--modal--slug + .#{$prefix}--modal-content--overflow-indicator::before, + .#{$prefix}--modal--slug .#{$prefix}--modal-content--overflow-indicator { + display: none; + } + // Windows HCM fix - /* stylelint-disable */ + /* stylelint-disable no-duplicate-selectors */ .#{$prefix}--modal-close__icon { @include high-contrast-mode('icon-fill'); } @@ -529,5 +551,5 @@ .#{$prefix}--modal-close:focus { @include high-contrast-mode('focus'); } - /* stylelint-enable */ + /* stylelint-enable no-duplicate-selectors */ } From c551c4f717b8b2834ba26770c9b72c8fe9ed90db Mon Sep 17 00:00:00 2001 From: TJ Egan Date: Mon, 12 Feb 2024 11:13:53 -0500 Subject: [PATCH 4/5] refactor(Modal): adjust mask so that focus, scroll bar are not masked --- packages/styles/scss/components/modal/_modal.scss | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/packages/styles/scss/components/modal/_modal.scss b/packages/styles/scss/components/modal/_modal.scss index c9579d0d8112..b38084cf06c0 100644 --- a/packages/styles/scss/components/modal/_modal.scss +++ b/packages/styles/scss/components/modal/_modal.scss @@ -518,11 +518,14 @@ .#{$prefix}--modal--slug .#{$prefix}--modal-content.#{$prefix}--modal-scroll-content { mask-image: linear-gradient( - to bottom, - $layer calc(100% - 80px), - transparent calc(100% - 48px), - transparent 100% - ); + to bottom, + $layer calc(100% - 80px), + transparent calc(100% - 48px), + transparent 100% + ), + linear-gradient(to left, $layer 0, transparent 16px), + linear-gradient(to right, $layer 0, transparent 4px), + linear-gradient(to top, $layer 0, transparent 4px); } .#{$prefix}--modal-header From 9436bace2e160ff71a117fa9e3588f3968e84ad4 Mon Sep 17 00:00:00 2001 From: TJ Egan Date: Tue, 13 Feb 2024 10:12:18 -0500 Subject: [PATCH 5/5] chore(Modal): fix storybook control, adjust mask-image values --- packages/react/src/components/Slug/Slug-examples.stories.js | 2 +- packages/styles/scss/components/modal/_modal.scss | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/react/src/components/Slug/Slug-examples.stories.js b/packages/react/src/components/Slug/Slug-examples.stories.js index aa8cd3d98e24..d15ec160f0d4 100644 --- a/packages/react/src/components/Slug/Slug-examples.stories.js +++ b/packages/react/src/components/Slug/Slug-examples.stories.js @@ -438,7 +438,7 @@ export const _Modal = { open modalHeading="Add a custom domain" modalLabel="Account resources" - passiveModal={args.showButtons} + passiveModal={!args.showButtons} primaryButtonText="Add" secondaryButtonText="Cancel" hasScrollingContent={args.hasScrollingContent} diff --git a/packages/styles/scss/components/modal/_modal.scss b/packages/styles/scss/components/modal/_modal.scss index b38084cf06c0..aca46c280e71 100644 --- a/packages/styles/scss/components/modal/_modal.scss +++ b/packages/styles/scss/components/modal/_modal.scss @@ -523,9 +523,9 @@ transparent calc(100% - 48px), transparent 100% ), - linear-gradient(to left, $layer 0, transparent 16px), - linear-gradient(to right, $layer 0, transparent 4px), - linear-gradient(to top, $layer 0, transparent 4px); + linear-gradient(to left, $layer 0, 16px, transparent 16px), + linear-gradient(to right, $layer 0, 2px, transparent 2px), + linear-gradient(to top, $layer 0, 2px, transparent 2px); } .#{$prefix}--modal-header