chore: rebase side panel changes (carbon-design-system#3829)

lee-chase · Dec 4, 2023 · e455acf · e455acf
1 parent c596ea2
commit e455acf
Show file tree

Hide file tree

Showing 4 changed files with 183 additions and 108 deletions.
diff --git 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
@@ -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
@@ -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 = () => (
-      <>
-        <div
-          className={cx(`${blockClass}__title-container`, {
-            [`${blockClass}__on-detail-step`]: currentStep > 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 (
+        <>
+          <div
+            className={cx(`${blockClass}__title-container`, {
+              [`${blockClass}__on-detail-step`]: currentStep > 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 && (
+              <Button
+                aria-label={navigationBackIconDescription}
+                kind="ghost"
+                size="sm"
+                disabled={false}
+                renderIcon={(props) => <ArrowLeft size={20} {...props} />}
+                iconDescription={navigationBackIconDescription}
+                className={`${blockClass}__navigation-back-button`}
+                onClick={onNavigationBack}
+              />
+            )}
+            {title && title.length && labelText && labelText.length && (
+              <p className={`${blockClass}__label-text`}>{labelText}</p>
+            )}
+            {title && title.length && renderTitle()}
+          </div>
+
+          <div className={`${blockClass}__slug-and-close`}>
+            {normalizedSlug}
             <Button
-              aria-label={navigationBackIconDescription}
+              aria-label={closeIconDescription}
               kind="ghost"
               size="sm"
-              disabled={false}
-              renderIcon={(props) => <ArrowLeft size={20} {...props} />}
-              iconDescription={navigationBackIconDescription}
-              className={`${blockClass}__navigation-back-button`}
-              onClick={onNavigationBack}
+              renderIcon={(props) => <Close size={20} {...props} />}
+              iconDescription={closeIconDescription}
+              className={`${blockClass}__close-button`}
+              onClick={onRequestClose}
+              ref={sidePanelCloseRef}
             />
+          </div>
+          {subtitle && (
+            <p
+              className={cx(`${blockClass}__subtitle-text`, {
+                [`${blockClass}__subtitle-text-no-animation`]: !animateTitle,
+                [`${blockClass}__subtitle-text-no-animation-no-action-toolbar`]:
+                  !animateTitle &&
+                  (!actionToolbarButtons || !actionToolbarButtons.length),
+                [`${blockClass}__subtitle-text-is-animating`]:
+                  !animationComplete && animateTitle,
+                [`${blockClass}__subtitle-without-title`]: !title,
+              })}
+            >
+              {subtitle}
+            </p>
           )}
-          {title && title.length && labelText && labelText.length && (
-            <p className={`${blockClass}__label-text`}>{labelText}</p>
+          {actionToolbarButtons && actionToolbarButtons.length && (
+            <div
+              className={cx(`${blockClass}__action-toolbar`, {
+                [`${blockClass}__action-toolbar-no-animation`]: !animateTitle,
+              })}
+            >
+              {actionToolbarButtons.map(
+                ({
+                  label,
+                  kind,
+                  icon,
+                  tooltipPosition,
+                  tooltipAlignment,
+                  leading,
+                  disabled,
+                  className,
+                  onClick,
+                  ...rest
+                }) => (
+                  <Button
+                    {...rest}
+                    key={label}
+                    kind={kind || 'ghost'}
+                    size="sm"
+                    renderIcon={icon}
+                    iconDescription={label}
+                    tooltipPosition={tooltipPosition || 'bottom'}
+                    tooltipAlignment={tooltipAlignment || 'start'}
+                    hasIconOnly={!leading}
+                    disabled={disabled}
+                    className={cx([
+                      `${blockClass}__action-toolbar-button`,
+                      className,
+                      {
+                        [`${blockClass}__action-toolbar-leading-button`]:
+                          leading,
+                      },
+                    ])}
+                    onClick={onClick}
+                  >
+                    {leading && label}
+                  </Button>
+                )
+              )}
+            </div>
           )}
-          {title && title.length && renderTitle()}
-        </div>
-        <Button
-          aria-label={closeIconDescription}
-          kind="ghost"
-          size="sm"
-          renderIcon={(props) => <Close size={20} {...props} />}
-          iconDescription={closeIconDescription}
-          className={`${blockClass}__close-button`}
-          onClick={onRequestClose}
-          ref={sidePanelCloseRef}
-        />
-        {subtitle && (
-          <p
-            className={cx(`${blockClass}__subtitle-text`, {
-              [`${blockClass}__subtitle-text-no-animation`]: !animateTitle,
-              [`${blockClass}__subtitle-text-no-animation-no-action-toolbar`]:
-                !animateTitle &&
-                (!actionToolbarButtons || !actionToolbarButtons.length),
-              [`${blockClass}__subtitle-text-is-animating`]:
-                !animationComplete && animateTitle,
-              [`${blockClass}__subtitle-without-title`]: !title,
-            })}
-          >
-            {subtitle}
-          </p>
-        )}
-        {actionToolbarButtons && actionToolbarButtons.length && (
-          <div
-            className={cx(`${blockClass}__action-toolbar`, {
-              [`${blockClass}__action-toolbar-no-animation`]: !animateTitle,
-            })}
-          >
-            {actionToolbarButtons.map(
-              ({
-                label,
-                kind,
-                icon,
-                tooltipPosition,
-                tooltipAlignment,
-                leading,
-                disabled,
-                className,
-                onClick,
-                ...rest
-              }) => (
-                <Button
-                  {...rest}
-                  key={label}
-                  kind={kind || 'ghost'}
-                  size="sm"
-                  renderIcon={icon}
-                  iconDescription={label}
-                  tooltipPosition={tooltipPosition || 'bottom'}
-                  tooltipAlignment={tooltipAlignment || 'start'}
-                  hasIconOnly={!leading}
-                  disabled={disabled}
-                  className={cx([
-                    `${blockClass}__action-toolbar-button`,
-                    className,
-                    {
-                      [`${blockClass}__action-toolbar-leading-button`]: leading,
-                    },
-                  ])}
-                  onClick={onClick}
-                >
-                  {leading && label}
-                </Button>
-              )
-            )}
-          </div>
-        )}
-      </>
-    );
+        </>
+      );
+    };
 
     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
    */
-Original file line number
+Diff line change
@@ Expand Up / @@ -22,3 +22,4 @@ viewports @@
     valign
     xlink
     hellip
+    apos