From 7c2b2cd581d73df784f60b98a96fbc63d589e2fb Mon Sep 17 00:00:00 2001 From: ariellalgilmore Date: Tue, 13 Feb 2024 10:24:34 -0800 Subject: [PATCH 1/4] feat(modal): ai updates --- .../src/components/modal/modal-footer.ts | 21 +++-- .../src/components/modal/modal.scss | 42 +++++++++- .../src/components/modal/modal.ts | 13 +++- .../src/components/slug/slug-example-story.ts | 76 +++++++++++++------ 4 files changed, 109 insertions(+), 43 deletions(-) diff --git a/packages/carbon-web-components/src/components/modal/modal-footer.ts b/packages/carbon-web-components/src/components/modal/modal-footer.ts index 75af05759d6..fb46a1b07ad 100644 --- a/packages/carbon-web-components/src/components/modal/modal-footer.ts +++ b/packages/carbon-web-components/src/components/modal/modal-footer.ts @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2019, 2023 + * Copyright IBM Corp. 2019, 2024 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -31,17 +31,14 @@ class CDSModalFooter extends LitElement { */ private _handleSlotChange(event: Event) { const { selectorButtons } = this.constructor as typeof CDSModalFooter; - const length = (event.target as HTMLSlotElement) - .assignedNodes() - .filter( - (node) => - node.nodeType === Node.ELEMENT_NODE && - (node as Element).matches(selectorButtons) - ).length; - this.hasThreeButtons = length > 2; - length === 2 - ? this.parentElement?.setAttribute('has-two-buttons', '') - : this.parentElement?.removeAttribute('has-two-buttons'); + this.hasThreeButtons = + (event.target as HTMLSlotElement) + .assignedNodes() + .filter( + (node) => + node.nodeType === Node.ELEMENT_NODE && + (node as Element).matches(selectorButtons) + ).length > 2; this.requestUpdate(); } diff --git a/packages/carbon-web-components/src/components/modal/modal.scss b/packages/carbon-web-components/src/components/modal/modal.scss index faf327d3f73..241085af31b 100644 --- a/packages/carbon-web-components/src/components/modal/modal.scss +++ b/packages/carbon-web-components/src/components/modal/modal.scss @@ -46,6 +46,11 @@ } } +:host(#{$prefix}-modal[has-scrolling-content]) + ::slotted(#{$prefix}-modal-body) { + @extend .#{$prefix}--modal-scroll-content; +} + :host(#{$prefix}-modal-header) { @extend .#{$prefix}--modal-header; } @@ -140,16 +145,45 @@ // Slug +:host(#{$prefix}-modal[slug]) { + // TODO: replace with next release of carbon/styles + background-color: var(--cds-ai-overlay, rgba(0, 17, 65, 0.5)); +} + :host(#{$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; } -:host(#{$prefix}-modal[slug][has-two-buttons]) .#{$prefix}--modal-container { - @include callout-gradient('default', 64px); +:host(#{$prefix}-modal[slug][has-footer]) .#{$prefix}--modal-container { + @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; +} + +:host(#{$prefix}-modal[slug][has-scrolling-content]) { + ::slotted(#{$prefix}-modal-body) { + 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); + } +} + +:host(#{$prefix}-modal[slug]) + .#{$prefix}--modal-content--overflow-indicator::before, +:host(#{$prefix}-modal[slug]) .#{$prefix}--modal-content--overflow-indicator { + display: none; } :host(#{$prefix}-modal-header) ::slotted(#{$prefix}-slug) { diff --git a/packages/carbon-web-components/src/components/modal/modal.ts b/packages/carbon-web-components/src/components/modal/modal.ts index f59046637d1..004d2bbffea 100644 --- a/packages/carbon-web-components/src/components/modal/modal.ts +++ b/packages/carbon-web-components/src/components/modal/modal.ts @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2019, 2023 + * Copyright IBM Corp. 2019, 2024 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -216,6 +216,15 @@ class CDSModal extends HostListenerMixin(LitElement) { } } + /** + * Handles `slotchange` event. + */ + private _handleSlotChange() { + this.querySelector(`${prefix}-modal-footer`) + ? this.setAttribute('has-footer', '') + : this.removeAttribute('has-footer'); + } + /** * Specify whether the Modal is displaying an alert, error or warning. * Should go hand in hand with the danger prop. @@ -312,7 +321,7 @@ class CDSModal extends HostListenerMixin(LitElement) { role="${alert ? 'alert' : 'dialog'}" tabindex="-1" @click=${this._handleClickContainer}> - + ${hasScrollingContent ? html`
` : ``} diff --git a/packages/carbon-web-components/src/components/slug/slug-example-story.ts b/packages/carbon-web-components/src/components/slug/slug-example-story.ts index ed5d2eaad3b..0fdeb4cb9dd 100644 --- a/packages/carbon-web-components/src/components/slug/slug-example-story.ts +++ b/packages/carbon-web-components/src/components/slug/slug-example-story.ts @@ -225,12 +225,13 @@ export const _Dropdown = () => { `; }; -export const _Modal = () => { +export const _Modal = (args) => { + const { hasScrollingContent, showButtons } = args?.['cds-modal'] ?? {}; return html` - + ${content}${actions} @@ -239,9 +240,25 @@ export const _Modal = () => { - 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. +

+ 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. +

@@ -254,31 +271,40 @@ export const _Modal = () => { US East - - - One - Two - - - - Option 1 - Option 2 - + + + + - - Cancel - Add - + ${ + showButtons + ? html` + + Cancel + Add + + ` + : `` + } + `; }; +_Modal.parameters = { + knobs: { + [`${prefix}-modal`]: () => ({ + hasScrollingContent: boolean( + 'hasScrollingContent (has-scrolling-content)', + true + ), + showButtons: boolean('Show or hide the modal buttons', true), + }), + }, +}; + export const _Multiselect = () => { return html`