diff --git a/cspell.html.txt b/cspell.html.txt index 52ac7b089e..8bae949ef0 100644 --- a/cspell.html.txt +++ b/cspell.html.txt @@ -22,3 +22,4 @@ viewports valign xlink hellip +apos diff --git a/packages/ibm-products-styles/src/components/SidePanel/_side-panel.scss b/packages/ibm-products-styles/src/components/SidePanel/_side-panel.scss index 9fe846e8ca..fb4b3b5624 100644 --- a/packages/ibm-products-styles/src/components/SidePanel/_side-panel.scss +++ b/packages/ibm-products-styles/src/components/SidePanel/_side-panel.scss @@ -45,7 +45,7 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set; @mixin setCommonTitleStyles() { display: -webkit-box; overflow: hidden; - padding-right: $spacing-09; + padding-right: var(--#{$block-class}--title-padding-right); -webkit-box-orient: vertical; -webkit-line-clamp: 2; } @@ -61,6 +61,7 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set; --#{$block-class}--content-bottom-padding: #{$spacing-10}; --#{$block-class}--collapsed-title-y-position: 1rem; --#{$block-class}--label-text-height: 0; + --#{$block-class}--title-padding-right: #{$spacing-09}; position: fixed; // Need to disable stylelint until dart sass namespace support is added @@ -140,6 +141,9 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set; background-color: transparent; } } + &.#{$block-class}__container--has-slug { + --#{$block-class}--title-padding-right: #{$spacing-12}; + } &.#{$block-class}__container-is-animating { pointer-events: none; } @@ -174,7 +178,7 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set; @include type.type-style('label-01'); overflow: hidden; - padding-right: $spacing-05; + padding-right: var(--#{$block-class}--title-padding-right); opacity: var(--#{$block-class}--subtitle-opacity); text-overflow: ellipsis; transform: translateY(var(--#{$block-class}--title-y-position)); @@ -244,6 +248,10 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set; overflow-x: hidden; } + &.#{$block-class}__container--has-slug .#{$block-class}__inner-content { + @include utilities.ai-gradient('bottom'); + } + .#{$block-class}__inner-content-with-actions { height: calc( 100vh - (var(--#{$block-class}--content-bottom-padding) + 2rem) @@ -330,19 +338,26 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set; } .#{c4p-settings.$carbon-prefix}--btn.#{$block-class}__close-button { - position: absolute; - z-index: 5; - top: $spacing-03; - right: $spacing-05; display: flex; align-items: center; justify-content: center; + margin: $spacing-03; + margin-bottom: 0; } .#{c4p-settings.$carbon-prefix}--btn.#{$block-class}__close-button .#{c4p-settings.$carbon-prefix}--btn__icon { margin: 0; } + + .#{$block-class}__slug-and-close { + position: absolute; + z-index: 5; + top: 0; + right: 0; + display: flex; + } + .#{$block-class}__body-content { padding: $spacing-05; padding-top: 0; diff --git a/packages/ibm-products/src/components/SidePanel/SidePanel.js b/packages/ibm-products/src/components/SidePanel/SidePanel.js index 6a026b1381..9d52c023ec 100644 --- a/packages/ibm-products/src/components/SidePanel/SidePanel.js +++ b/packages/ibm-products/src/components/SidePanel/SidePanel.js @@ -73,6 +73,7 @@ export let SidePanel = React.forwardRef( selectorPrimaryFocus, size = defaults.size, slideIn, + slug, subtitle, title, @@ -554,114 +555,130 @@ export let SidePanel = React.forwardRef( [`${blockClass}__container-without-overlay`]: !includeOverlay && !slideIn, [`${blockClass}__container-is-animating`]: !animationComplete || !open, + [`${blockClass}__container--has-slug`]: slug, }, ]); - const renderHeader = () => ( - <> -
0, - [`${blockClass}__on-detail-step-without-title`]: - currentStep > 0 && !title, - [`${blockClass}__title-container--no-title-animation`]: - !animateTitle, - [`${blockClass}__title-container-is-animating`]: - !animationComplete || !open, - [`${blockClass}__title-container-without-title`]: !title, - [`${blockClass}__title-container--reduced-motion`]: - reducedMotion.matches, - })} - > - {currentStep > 0 && ( + const renderHeader = () => { + let normalizedSlug; + if (slug) { + normalizedSlug = React.cloneElement(slug, { + // slug size is sm unless actions and size > md + size: actions.length && /l/.test(size) ? 'md' : 'sm', + }); + } + + return ( + <> +
0, + [`${blockClass}__on-detail-step-without-title`]: + currentStep > 0 && !title, + [`${blockClass}__title-container--no-title-animation`]: + !animateTitle, + [`${blockClass}__title-container-is-animating`]: + !animationComplete || !open, + [`${blockClass}__title-container-without-title`]: !title, + [`${blockClass}__title-container--reduced-motion`]: + reducedMotion.matches, + })} + > + {currentStep > 0 && ( +
+ +
+ {normalizedSlug}
+ {subtitle && ( +

+ {subtitle} +

)} - {title && title.length && labelText && labelText.length && ( -

{labelText}

+ {actionToolbarButtons && actionToolbarButtons.length && ( +
+ {actionToolbarButtons.map( + ({ + label, + kind, + icon, + tooltipPosition, + tooltipAlignment, + leading, + disabled, + className, + onClick, + ...rest + }) => ( + + ) + )} +
)} - {title && title.length && renderTitle()} -
- - ) - )} - - )} - - ); + + ); + }; const renderTitle = () => ( <> @@ -925,6 +942,11 @@ SidePanel.propTypes = { */ slideIn: PropTypes.bool, + /** + * Provide a `Slug` component to be rendered inside the `SidePanel` component + */ + slug: PropTypes.node, + /** * Sets the subtitle text */ diff --git a/packages/ibm-products/src/components/SidePanel/SidePanel.stories.js b/packages/ibm-products/src/components/SidePanel/SidePanel.stories.js index 04511ccdc8..3add98406f 100644 --- a/packages/ibm-products/src/components/SidePanel/SidePanel.stories.js +++ b/packages/ibm-products/src/components/SidePanel/SidePanel.stories.js @@ -25,7 +25,10 @@ import { Header, HeaderContainer, HeaderName, + unstable__Slug as Slug, + unstable__SlugContent as SlugContent, } from '@carbon/react'; + import { Copy, TrashCan, Settings } from '@carbon/react/icons'; import { getStoryTitle, @@ -218,6 +221,26 @@ const actionSets = [ [], ]; +const sampleSlug = ( + + +
+

AI Explained

+

84%

+

Confidence score

+

+ This is not really Lorem Ipsum but the spell checker did not like the + previous text with it's non-words which is why this unwieldy + sentence, should one choose to call it that, here. +

+
+

Model type

+

Foundation model

+
+ + +); + // eslint-disable-next-line react/prop-types const ChildrenContent = () => { const [notesValue, setNotesValue] = useState(''); @@ -381,12 +404,23 @@ docs: { disable: true, }, }, + slug: { + control: { + type: 'select', + labels: { + 0: 'No AI slug', + 1: 'with AI Slug', + }, + default: 0, + }, + options: [0, 1], + }, }, decorators: [sidePanelDecorator(renderUIShellHeader, prefix)], }; // eslint-disable-next-line react/prop-types -const SlideOverTemplate = ({ minimalContent, actions, ...args }) => { +const SlideOverTemplate = ({ minimalContent, actions, slug, ...args }) => { const [open, setOpen] = useState(false); const testRef = useRef(); return ( @@ -400,6 +434,7 @@ const SlideOverTemplate = ({ minimalContent, actions, ...args }) => { onRequestClose={() => setOpen(false)} actions={actionSets[actions]} ref={testRef} + slug={slug && sampleSlug} > {!minimalContent && } @@ -408,7 +443,7 @@ const SlideOverTemplate = ({ minimalContent, actions, ...args }) => { }; // eslint-disable-next-line react/prop-types -const StepTemplate = ({ actions, ...args }) => { +const StepTemplate = ({ actions, slug, ...args }) => { const [open, setOpen] = useState(false); const [currentStep, setCurrentStep] = useState(0); return ( @@ -423,6 +458,7 @@ const StepTemplate = ({ actions, ...args }) => { currentStep={currentStep} onNavigationBack={() => setCurrentStep((prev) => prev - 1)} actions={actionSets[actions]} + slug={slug && sampleSlug} > { }; // eslint-disable-next-line react/prop-types -const SlideInTemplate = ({ actions, ...args }) => { +const SlideInTemplate = ({ actions, slug, ...args }) => { const [open, setOpen] = useState(false); return ( <> @@ -450,6 +486,7 @@ const SlideInTemplate = ({ actions, ...args }) => { open={open} onRequestClose={() => setOpen(false)} actions={actionSets[actions]} + slug={slug && sampleSlug} >