@carbon/ibm-products-styles 2.77.0-rc.0 → 2.78.0-rc.0

package/scss/components/SidePanel/_side-panel.scss

@@ -0,0 +1,626 @@
+//cspell: disable
+//
+// Copyright IBM Corp. 2020, 2025
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use 'sass:map';
+
+// Other Carbon settings.
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/grid' as *;
+@use '@carbon/styles/scss/motion' as *;
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/utilities';
+@use '@carbon-labs/react-resizer/scss/resizer';
+@use '@carbon/styles/scss/components/button/tokens' as *;
+
+// Standard imports.
+@use '../../global/styles/project-settings' as c4p-settings;
+@use '../../global/styles/mixins' as *;
+@use './side-panel-variables' as *;
+@use './animations' as *;
+
+// SidePanel uses the following IBM Products components:
+// ActionSet
+@use '../ActionSet/action-set';
+
+$block-class: #{c4p-settings.$pkg-prefix}--side-panel;
+$action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
+$clabs-prefix: 'clabs';
+
+@property --panel-transform {
+  inherits: true;
+  initial-value: 320px;
+  syntax: '<length>';
+}
+
+@mixin setPanelSize($size: map.get($side-panel-sizes, md)) {
+  inline-size: clamp(16rem, var(--c4p-side-panel-modified-size, $size), 100%);
+}
+
+@mixin setDividerStyles() {
+  position: absolute;
+  background-color: $border-subtle-01;
+  block-size: 1px;
+  content: '';
+  inline-size: 100%;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+  opacity: var(--#{$block-class}--scroll-animation-progress);
+}
+
+@mixin setCommonTitleStyles() {
+  /* stylelint-disable-next-line carbon/layout-use -- custom css property set below */
+  padding-inline-end: var(--#{$block-class}--title-padding-right);
+}
+
+.#{$block-class}--scrolls {
+  overflow: auto;
+  overflow-x: hidden;
+  @supports (overflow-inline: hidden) {
+    /* stylelint-disable-next-line declaration-property-value-disallowed-list */
+    overflow-inline: hidden;
+  }
+}
+
+.#{$block-class} {
+  --panel-transform: 320px;
+  --#{$block-class}--title-stop: #{$spacing-05};
+  --#{$block-class}--scroll-animation-progress: 0;
+  --#{$block-class}--title-padding-right: #{$spacing-07};
+  --#{$block-class}--actions-height: #{$spacing-10};
+
+  position: fixed;
+  z-index: utilities.z('modal');
+  display: grid;
+  box-sizing: border-box;
+  background-color: $layer-01;
+  block-size: calc(100% - 3rem);
+  color: $text-primary;
+
+  /* if the title does not scroll then we have a child scrolling section. */
+  grid-template-rows: auto 1fr auto; /* titles content and actions */
+  inset-block-start: $spacing-09;
+  max-inline-size: 100%;
+  min-inline-size: map.get($side-panel-sizes, xs);
+
+  transform: translateX(0);
+  transition-behavior: allow-discrete;
+  transition-duration: $duration-moderate-01;
+  transition-property: display, opacity, transform;
+  &:not(.#{$block-class}--slide-in) {
+    // enableSidepanelResizer flag class
+    &.#{$block-class}--enable-sidepanel-resizer {
+      grid-template-columns: 0 1fr;
+      @media (prefers-reduced-motion: no-preference) {
+        transition: all $duration-moderate-01 linear;
+      }
+    }
+  }
+
+  @starting-style {
+    opacity: 0;
+    /* stylelint-disable-next-line carbon/layout-use */
+    transform: translateX(var(--panel-transform));
+  }
+
+  @include breakpoint(md) {
+    max-inline-size: 75vw;
+  }
+
+  @each $size, $size_value in $side-panel-sizes {
+    &.#{$block-class}--#{$size} {
+      @include setPanelSize($size_value);
+    }
+  }
+
+  &.#{$block-class}--open.#{$block-class}--right-placement {
+    animation: side-panel-entrance-right $duration-moderate-01
+      motion(entrance, productive) forwards;
+  }
+
+  // animation only set for older browsers that do not support `transition-behavior: allow-discrete;`
+  &.#{$block-class}--open.#{$block-class}--left-placement {
+    animation: side-panel-entrance-left $duration-moderate-01
+      motion(entrance, productive) forwards;
+  }
+
+  // animation only set for older browsers that do not support `transition-behavior: allow-discrete;`
+  &.#{$block-class}--closing.#{$block-class}--right-placement {
+    animation: side-panel-exit-right $duration-moderate-01
+      motion(exit, productive) forwards;
+  }
+
+  &.#{$block-class}--closing.#{$block-class}--left-placement {
+    animation: side-panel-exit-left $duration-moderate-01
+      motion(exit, productive) forwards;
+  }
+
+  @supports (transition-behavior: allow-discrete) {
+    &.#{$block-class}--closing {
+      opacity: 0;
+      /* stylelint-disable-next-line carbon/layout-use */
+      transform: translateX(var(--panel-transform, 320px));
+      transition-duration: $duration-moderate-01;
+    }
+    &.#{$block-class}--closing.#{$block-class}--left-placement {
+      /* stylelint-disable-next-line carbon/layout-use */
+      transform: translateX(calc(-1 * var(--panel-transform, 320px)));
+    }
+  }
+
+  @media (prefers-reduced-motion) {
+    /* styles to apply if a user's device settings are set to reduced motion */
+    &.#{$block-class}--open.#{$block-class}--right-placement,
+    &.#{$block-class}--open.#{$block-class}--left-placement {
+      animation: side-panel-entrance-reduced $duration-moderate-01
+        motion(exit, productive) forwards;
+      @starting-style {
+        opacity: 0;
+        transform: translateX(0);
+      }
+    }
+    &.#{$block-class}--closing.#{$block-class}--left-placement,
+    &.#{$block-class}--closing.#{$block-class}--right-placement {
+      animation: side-panel-exit-reduced $duration-moderate-01
+        motion(exit, productive) forwards;
+      @starting-style {
+        opacity: 1;
+        transform: translateX(0);
+      }
+    }
+  }
+
+  &.#{$block-class}--animated-title {
+    grid-template-rows: 1fr auto; /* titles and content (actions are external to this element) */
+  }
+
+  &.#{$block-class}--condensed-actions {
+    --#{$block-class}--actions-height: #{$spacing-09};
+  }
+
+  &:not(.#{$block-class}--has-overlay) {
+    box-shadow: 0 $spacing-01 $spacing-02 $overlay;
+  }
+
+  // Slide-in panels should use border not shadows since they don’t layer
+  &.#{$block-class}--slide-in,
+  &.#{$block-class}--slide-in:not(.#{$block-class}--has-overlay) {
+    box-shadow: none;
+  }
+
+  .#{$block-class}__actions-container {
+    inline-size: 100%;
+  }
+  &.#{$block-class}--right-placement {
+    border-inline-start: 1px solid $border-subtle-01;
+    inset-inline-end: 0;
+  }
+  &.#{$block-class}--left-placement {
+    .#{$clabs-prefix}__resizer {
+      grid-column: 2;
+      inset-inline-start: 0;
+
+      &::before {
+        inset-inline-start: 0;
+      }
+    }
+    &:not(.#{$block-class}--slide-in) {
+      // enableSidepanelResizer FeatureFlag class
+      &.#{$block-class}--enable-sidepanel-resizer {
+        grid-template-columns: 1fr 0;
+
+        @media (prefers-reduced-motion: no-preference) {
+          transition: all $duration-moderate-01 linear;
+        }
+      }
+    }
+
+    border-inline-end: 1px solid $border-subtle-01;
+    inset-inline-start: 0;
+  }
+  &.#{$block-class}.#{$block-class}--has-slug,
+  &.#{$block-class}.#{$block-class}--has-ai-label,
+  &.#{$block-class}.#{$block-class}--has-decorator {
+    border-color: transparent;
+    box-shadow:
+      inset 0 -80px 70px -65px $ai-inner-shadow,
+      0 4px 10px 2px $ai-drop-shadow;
+  }
+
+  .#{$clabs-prefix}__resizer--vertical::before {
+    position: absolute;
+    z-index: -1;
+    background-color: transparent;
+    block-size: 100%;
+    content: '';
+    inline-size: $spacing-01;
+    inset-block-end: 0;
+    inset-inline-end: 0;
+    transition: background-color $duration-moderate-01
+      motion(standard, productive);
+  }
+
+  &:hover {
+    .#{$clabs-prefix}__resizer--vertical::before {
+      background-color: $button-secondary-hover;
+    }
+  }
+
+  .#{$clabs-prefix}__resizer {
+    background-color: transparent;
+    grid-row: span 4 / span 3;
+    inset-inline-start: -$spacing-02;
+
+    &--vertical::after {
+      position: absolute;
+      z-index: 10;
+      block-size: 100%;
+      content: '';
+      inline-size: $spacing-03;
+      inset-inline-start: -$spacing-01;
+    }
+
+    &:hover,
+    &:focus {
+      background-color: $border-interactive;
+    }
+  }
+
+  .#{$block-class}__header {
+    --#{$block-class}--title-padding-bottom: #{$spacing-05};
+
+    position: sticky;
+    z-index: 4;
+    padding: $spacing-05;
+    background-color: $layer-01;
+    /* stylelint-disable-next-line carbon/layout-use */
+    inset-block-start: calc(
+      -1px * var(--#{$block-class}--scroll-animation-distance)
+    );
+    min-block-size: $spacing-08;
+    padding-block-end: 0;
+
+    &.#{$block-class}__header--has-title {
+      min-block-size: auto;
+    }
+
+    &:has(.#{$block-class}__subtitle-text),
+    &.#{$block-class}__header--has-subtitle {
+      --#{$block-class}--title-padding-bottom: #{$spacing-03};
+    }
+
+    &:has(.#{$block-class}__navigation-back-button),
+    &.#{$block-class}__header--has-navigation-back {
+      padding-block-start: $spacing-07;
+    }
+
+    &:has(
+        .#{$block-class}__navigation-back-button.#{c4p-settings.$carbon-prefix}--btn--md
+      ),
+    &.#{$block-class}__header--has-navigation-back.#{c4p-settings.$carbon-prefix}--btn--md {
+      padding-block-start: $spacing-08;
+    }
+
+    /* stylelint-disable-next-line max-nesting-depth */
+    &::before {
+      @include setDividerStyles();
+
+      z-index: 9;
+    }
+
+    &.#{$block-class}__header--no-title-animation {
+      position: relative;
+      inset-block-start: 0;
+    }
+
+    &.#{$block-class}__header--no-title-animation::before {
+      opacity: 1;
+    }
+
+    &.#{$block-class}__header--reduced-motion {
+      z-index: 5;
+      border-block-end: 1px solid $border-subtle-01;
+      margin-block-end: $spacing-05;
+    }
+
+    &.#{$block-class}__header--reduced-motion.#{$block-class}__header--no-title-animation {
+      border-block-end: 0;
+      margin-block-end: 0;
+    }
+
+    &.#{$block-class}__header--on-detail-step
+      .#{$block-class}__navigation-back-button.#{c4p-settings.$carbon-prefix}--btn--md
+      ~ .#{$block-class}__collapsed-title-text {
+      inset-block-start: $spacing-06;
+    }
+
+    &.#{$block-class}__header--on-detail-step:not(
+        .#{$block-class}__header--has-title
+      ) {
+      padding: $spacing-05 $spacing-05 $spacing-03 $spacing-05;
+      block-size: calc(#{$spacing-08} + #{$spacing-02});
+    }
+
+    &:not(.#{$block-class}__header--has-title)::before {
+      background-color: transparent;
+    }
+  }
+
+  // Remove min‑block‑size when the header contains no child elements to prevent unnecessary blank space
+  .#{$block-class}__header:empty {
+    min-block-size: unset;
+  }
+
+  &.#{$block-class}:has(.#{$block-class}__action-toolbar),
+  &.#{$block-class}--has-action-toolbar,
+  &.#{$block-class}--has-slug,
+  &.#{$block-class}--has-ai-label,
+  &.#{$block-class}--has-decorator {
+    --#{$block-class}--title-padding-right: #{$spacing-10};
+  }
+
+  &.#{$block-class}:has(.#{$block-class}__action-toolbar),
+  &.#{$block-class}--has-action-toolbar {
+    &.#{$block-class}--has-slug,
+    &.#{$block-class}--has-ai-label,
+    &.#{$block-class}--has-decorator {
+      --#{$block-class}--title-padding-right: #{$spacing-11};
+    }
+  }
+
+  .#{$block-class}__animated-scroll-wrapper {
+    display: grid;
+    grid-template-rows: auto 1fr;
+  }
+
+  .#{$block-class}__title {
+    position: sticky;
+    z-index: 4;
+    background-color: $layer-01;
+
+    /* border-bottom used instead of padding which wrapped text shows through */
+    border-block-end: var(--#{$block-class}--title-padding-bottom) solid
+      transparent;
+    /* stylelint-disable-next-line carbon/layout-use */
+    inset-block-start: var(--#{$block-class}--title-stop);
+  }
+
+  .#{$block-class}__title-text {
+    @include type.type-style('heading-03');
+    @include setCommonTitleStyles();
+
+    opacity: calc(1 - var(--#{$block-class}--scroll-animation-progress));
+  }
+
+  .#{$block-class}__title--no-label .#{$block-class}__title-text {
+    /* stylelint-disable-next-line carbon/layout-use */
+    transform: translateY(
+      calc(
+        -1 * #{$spacing-05} * var(--#{$block-class}--scroll-animation-progress)
+      )
+    );
+  }
+
+  .#{$block-class}__header--no-title-animation .#{$block-class}__title-text {
+    position: static;
+  }
+
+  .#{$block-class}__label-text {
+    @include type.type-style('label-01');
+
+    opacity: calc(1 - var(--#{$block-class}--scroll-animation-progress));
+    padding-inline-end: var(--#{$block-class}--title-padding-right);
+  }
+
+  .#{$block-class}__collapsed-title-text {
+    @include type.type-style('heading-compact-02');
+    @include setCommonTitleStyles();
+
+    position: absolute;
+    inset-block-start: 0;
+    opacity: var(--#{$block-class}--scroll-animation-progress);
+  }
+
+  .#{$block-class}__title--no-label .#{$block-class}__collapsed-title-text {
+    /* stylelint-disable-next-line carbon/layout-use */
+    transform: translateY(
+      calc(
+        #{$spacing-05} * (1 - var(--#{$block-class}--scroll-animation-progress))
+      )
+    );
+  }
+
+  .#{$block-class}__subtitle-text {
+    @include type.type-style('body-compact-01');
+
+    opacity: calc(1 - var(--#{$block-class}--scroll-animation-progress));
+    padding-block-end: $spacing-05;
+    padding-inline-end: var(--#{$block-class}--title-padding-right);
+  }
+
+  .#{$block-class}__header--no-title-animation .#{$block-class}__subtitle-text {
+    z-index: 2;
+    background-color: $layer-01;
+  }
+
+  .#{$block-class}__title-text + .#{$block-class}__subtitle-text {
+    padding-block-start: $spacing-05;
+  }
+  .#{$block-class}__inner-content {
+    padding: 0 $spacing-05 $spacing-05;
+  }
+
+  .#{$block-class}__inner-content--no-animated-title {
+    padding-block-start: $spacing-05;
+  }
+
+  .#{$block-class}__header:has(.#{$block-class}__action-toolbar)
+    + .#{$block-class}__inner-content,
+  .#{$block-class}__header--has-action-toolbar
+    + .#{$block-class}__inner-content {
+    padding-block-start: $spacing-03;
+  }
+
+  &.#{$block-class}--has-slug .#{$block-class}--scrolls,
+  &.#{$block-class}--has-ai-label .#{$block-class}--scrolls,
+  &.#{$block-class}--has-decorator .#{$block-class}--scrolls {
+    @include utilities.ai-popover-gradient('default', 0, 'layer');
+
+    box-shadow:
+      inset 0 -80px 70px -65px $ai-inner-shadow,
+      0 4px 10px 2px $ai-drop-shadow;
+  }
+
+  .#{$block-class}__action-toolbar {
+    position: sticky;
+    z-index: 4;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    background-color: $layer-01;
+  }
+
+  .#{$block-class}__action-toolbar-leading-button {
+    margin-inline-end: $spacing-03;
+  }
+
+  .#{c4p-settings.$carbon-prefix}--btn.#{$block-class}__navigation-back-button {
+    position: fixed;
+    z-index: 5;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+  }
+  .#{c4p-settings.$carbon-prefix}--btn.#{$block-class}__navigation-back-button,
+  .#{c4p-settings.$carbon-prefix}--btn.#{$block-class}__close-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    /* stylelint-disable-next-line declaration-property-value-disallowed-list */
+    background-color: unset;
+    block-size: $spacing-07;
+    color: $text-primary;
+    inline-size: $spacing-07;
+    min-block-size: 0;
+
+    /* stylelint-disable-next-line max-nesting-depth */
+    &:hover {
+      background-color: $background-hover;
+    }
+    .#{$block-class}--btn__icon {
+      margin: 0;
+    }
+  }
+
+  .#{c4p-settings.$carbon-prefix}--btn--md.#{$block-class}__navigation-back-button,
+  .#{c4p-settings.$carbon-prefix}--btn--md.#{$block-class}__close-button {
+    block-size: $spacing-08;
+    inline-size: $spacing-08;
+  }
+
+  .#{$block-class}__slug-and-close,
+  .#{$block-class}__ai-label-and-close,
+  .#{$block-class}__decorator-and-close {
+    position: absolute;
+    z-index: 10; /* must be higher than title container border bottom */
+    display: flex;
+    block-size: $spacing-07;
+    inset-block-start: 0;
+    inset-inline-end: 0;
+    /* stylelint-disable-next-line max-nesting-depth */
+    @media (prefers-reduced-motion) {
+      position: absolute;
+    }
+  }
+
+  .#{$block-class}__actions-container {
+    position: sticky; // stick to bottom
+    background-color: $layer-01;
+    border-block-start: 1px solid $border-subtle-01;
+    inset-block-end: 0;
+
+    &.#{$action-set-block-class}--2xl {
+      .#{$action-set-block-class}__action-button {
+        inline-size: 100%;
+        max-inline-size: 100%;
+      }
+
+      @include breakpoint(md) {
+        flex-direction: row;
+        .#{$action-set-block-class}__action-button {
+          inline-size: 25%;
+        }
+      }
+
+      flex-direction: column;
+    }
+
+    .#{$action-set-block-class}__action-button.#{$action-set-block-class}__action-button {
+      // extra class needed to override default size
+      block-size: var(--#{$block-class}--actions-height);
+    }
+  }
+}
+
+@keyframes side-panel-overlay-entrance {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes side-panel-overlay-exit {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
+.#{$block-class}__visually-hidden {
+  position: absolute;
+  overflow: hidden;
+  padding: 0;
+  border: 0;
+  // stylelint-disable-next-line carbon/layout-use
+  margin: -1px;
+  block-size: 1px;
+  clip: rect(0, 0, 0, 0);
+  inline-size: 1px;
+  visibility: inherit;
+  white-space: nowrap;
+}
+
+.#{$block-class}__overlay {
+  position: fixed;
+  z-index: utilities.z('overlay');
+  animation: side-panel-overlay-entrance $duration-moderate-01
+    motion(entrance, productive) forwards;
+  background-color: $overlay;
+  block-size: 100%;
+  inline-size: 100%;
+  inset: 0;
+}
+
+.#{$block-class}__overlay--closing {
+  animation: side-panel-overlay-exit $duration-moderate-01
+    motion(exit, productive) forwards;
+}
+
+/* stylelint-disable-next-line carbon/theme-token-use */
+.#{$block-class}--has-slug + .#{$block-class}__overlay,
+.#{$block-class}--has-ai-label + .#{$block-class}__overlay,
+.#{$block-class}--has-decorator + .#{$block-class}__overlay {
+  background-color: $ai-overlay;
+}

package/scss/components/SimpleHeader/_carbon-imports.scss

@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2023, 2023
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+// SimpleHeader uses the following Carbon components:
+// Breadcrumb, BreadcrumbItem
+
+@use '@carbon/styles/scss/components/breadcrumb';

package/scss/components/SimpleHeader/_index-with-carbon.scss

@@ -0,0 +1,9 @@
+//
+// Copyright IBM Corp. 2023, 2023
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use './carbon-imports';
+@use './simple-header';

package/scss/components/SimpleHeader/_index.scss

@@ -0,0 +1,10 @@
+//
+// Copyright IBM Corp. 2023, 2023
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+// An index file is most useful when you have multiple components
+
+@use './simple-header';

package/scss/components/SimpleHeader/_simple-header.scss

@@ -0,0 +1,37 @@
+//
+// Copyright IBM Corp. 2023, 2023
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/type';
+
+@use '../../global/styles/project-settings' as *;
+
+$block-class: #{$pkg-prefix}--simple-header;
+
+.#{$block-class} {
+  padding: $spacing-04 $spacing-07;
+  background-color: $layer-01;
+  border-block-end: 1px solid $border-subtle-01;
+  inline-size: 100%;
+}
+
+.#{$block-class}__title {
+  @include type.type-style('heading-04');
+}
+
+.#{$block-class}__breadcrumbs + .#{$block-class}__title {
+  // add margin top to the title if breadcrumbs exist
+  margin-block-start: $spacing-02;
+}
+
+.#{$block-class}__breadcrumbs .#{$carbon-prefix}--breadcrumb-item,
+.#{$block-class}__breadcrumbs
+  .#{$carbon-prefix}--breadcrumb-item
+  .#{$carbon-prefix}--link {
+  @include type.type-style('label-01');
+}

package/scss/components/SingleAddSelect/_carbon-imports.scss

@@ -0,0 +1,6 @@
+//
+// Copyright IBM Corp. 2022
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//

package/scss/components/SingleAddSelect/_index-with-carbon.scss

@@ -0,0 +1,9 @@
+//
+// Copyright IBM Corp. 2022
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use './carbon-imports';
+@use './single-add-select';