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/react/src/components/Slug/Slug-examples.stories.js b/packages/react/src/components/Slug/Slug-examples.stories.js
index 9a56b41354b0..764fc82ea31b 100644
--- a/packages/react/src/components/Slug/Slug-examples.stories.js
+++ b/packages/react/src/components/Slug/Slug-examples.stories.js
@@ -276,25 +276,50 @@ export const _Combobox = {
};
export const _ComposedModal = {
+ args: {
+ showButtons: true,
+ hasScrollingContent: false,
+ },
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) => {
const [open, setOpen] = useState(true); // eslint-disable-line
return (
setOpen(true)}>Launch composed modal
setOpen(false)} slug={slug}>
-
+
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 && (
+
+ )}
);
@@ -380,13 +420,23 @@ export const _FilterableMultiselect = {
};
export const _Modal = {
+ args: {
+ showButtons: true,
+ hasScrollingContent: false,
+ },
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) => {
const [open, setOpen] = useState(true); // eslint-disable-line
return (
@@ -398,12 +448,28 @@ export const _Modal = {
modalLabel="Account resources"
primaryButtonText="Add"
secondaryButtonText="Cancel"
+ passiveModal={!args.showButtons}
+ hasScrollingContent={args.hasScrollingContent}
slug={slug}>
-
+
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.
+
{
"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/components/modal/_modal.scss b/packages/styles/scss/components/modal/_modal.scss
index f9194d6a7575..f5f32d349cce 100644
--- a/packages/styles/scss/components/modal/_modal.scss
+++ b/packages/styles/scss/components/modal/_modal.scss
@@ -450,21 +450,25 @@
}
// Slug styles
+ .#{$prefix}--modal--slug.#{$prefix}--modal {
+ background-color: $ai-overlay;
+ }
+
.#{$prefix}--modal--slug .#{$prefix}--modal-container {
- @include callout-gradient();
+ @include callout-gradient('default', 0, 'layer');
+ border: 1px solid transparent;
background-color: $layer;
+ box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow,
+ 0 4px 10px 2px $ai-drop-shadow;
}
- // 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-container:has(.#{$prefix}--modal-footer) {
+ @include callout-gradient('default', 64px, 'layer');
- background-color: $layer;
+ box-shadow: inset 0 -80px 0 -16px $layer,
+ inset 0 -160px 70px -65px $ai-inner-shadow, 0 4px 10px 2px $ai-drop-shadow;
}
.#{$prefix}--modal--slug .#{$prefix}--slug {
@@ -473,6 +477,19 @@
inset-inline-end: 0;
}
+ .#{$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%
+ ),
+ 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
> .#{$prefix}--slug:has(+ .#{$prefix}--modal-close-button),
.#{$prefix}--modal-header
@@ -484,8 +501,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');
}
@@ -493,5 +516,5 @@
.#{$prefix}--modal-close:focus {
@include high-contrast-mode('focus');
}
- /* stylelint-enable */
+ /* stylelint-enable no-duplicate-selectors */
}
diff --git a/packages/styles/scss/utilities/_ai-gradient.scss b/packages/styles/scss/utilities/_ai-gradient.scss
index 2d05b8b0d16d..87ec673a9efe 100644
--- a/packages/styles/scss/utilities/_ai-gradient.scss
+++ b/packages/styles/scss/utilities/_ai-gradient.scss
@@ -124,6 +124,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/__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",
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);