@carbon/ibm-products-web-components 0.29.0 → 0.30.0-rc.0

package/scss/components/side-panel/side-panel.scss

@@ -1,307 +0,0 @@
-/*
-* Copyright IBM Corp. 2023, 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.
-*/
-
-$css--plex: true !default;
-@use 'sass:map';
-
-/* Other Carbon settings. */
-@use '@carbon/styles/scss/reset';
-@use '@carbon/styles/scss/config' as *;
-@use '@carbon/styles/scss/motion' as *;
-@use '@carbon/styles/scss/spacing' as *;
-@use '@carbon/styles/scss/theme' as *;
-@use '@carbon/styles/scss/utilities/ai-gradient' as *;
-@use '@carbon/styles/scss/utilities/convert' as *;
-
-$prefix: 'c4p';
-$carbon-prefix: 'cds';
-@use '@carbon/ibm-products-styles/scss/components/ActionSet/index' as *;
-@use '@carbon/ibm-products-styles/scss/components/SidePanel/index' as *;
-@use '@carbon/ibm-products-styles/scss/components/SidePanel/side-panel-variables'
-  as spv;
-
-$block-class: #{$prefix}--side-panel;
-$block-class-action-set: #{$prefix}--action-set;
-
-:host(#{$prefix}-side-panel) {
-  /* Replaces use of Framer for slide in / out animation */
-  --#{$block-class}--displaced: 100%;
-
-  * {
-    /* not sure why things are coming out as content-box */
-    box-sizing: border-box;
-  }
-
-  .#{$block-class} {
-    @extend .#{$block-class};
-
-    /* for actions container query - note this changes the size calculation */
-    container-name: side-panel;
-    container-type: inline-size;
-
-    &[placement='left'] {
-      --#{$block-class}--displaced: -100%;
-    }
-
-    &[opening] {
-      transform: translateX(var(--#{$block-class}--displaced));
-    }
-
-    &[open] {
-      transform: translateX(0);
-      transition: all $duration-moderate-02 motion(standard, productive);
-    }
-
-    @media screen and (prefers-reduced-motion: reduce) {
-      &[open] {
-        transition: none;
-      }
-    }
-
-    &[closing] {
-      transform: translateX(var(--#{$block-class}--displaced));
-      transition: all $duration-moderate-01 motion(exit, productive);
-    }
-
-    @media screen and (prefers-reduced-motion: reduce) {
-      &[closing] {
-        transition: none;
-      }
-    }
-
-    &[placement='right'] {
-      @extend .#{$block-class}--right-placement;
-
-      /* remove if https://github.com/carbon-design-system/ibm-products/pull/3983 merged */
-      border-inline-end: 1px solid $border-subtle-02;
-      inset-inline-end: 0;
-    }
-
-    /* stylelint-disable-next-line no-duplicate-selectors -- disabled to keep close to 'right' setting */
-    &[placement='left'] {
-      @extend .#{$block-class}--left-placement;
-
-      /* remove if https://github.com/carbon-design-system/ibm-products/pull/3983 merged */
-      border-inline-end: 1px solid $border-subtle-02;
-      inset-inline-start: 0;
-    }
-
-    @each $size, $size_value in spv.$side-panel-sizes {
-      &[size='#{$size}'] {
-        @extend .#{$block-class}--#{$size};
-      }
-    }
-
-    &[condensed-actions] {
-      @extend .#{$block-class}--condensed-actions;
-    }
-  }
-
-  #{$prefix}-layer {
-    display: contents;
-  }
-
-  .#{$block-class}__overlay {
-    &[opening] {
-      opacity: 0;
-    }
-
-    @media screen and (prefers-reduced-motion: reduce) {
-      &[open] {
-        opacity: 1;
-        transition: none;
-      }
-    }
-
-    &[open] {
-      opacity: 1;
-      transition: all $duration-moderate-02 motion(standard, productive);
-    }
-    @media screen and (prefers-reduced-motion: reduce) {
-      &[closing] {
-        opacity: 0;
-        transition: none;
-      }
-    }
-
-    &[closing] {
-      opacity: 0;
-      transition: all $duration-moderate-01 motion(exit, productive);
-    }
-  }
-
-  // Slide-in panels should use border not shadows since they don’t layer
-  .#{$block-class}[slide-in]:not(.#{$block-class}__overlay) {
-    box-shadow: none;
-  }
-
-  .#{$block-class}__header {
-    &::before {
-      z-index: 99; /* must be higher than action toolbar */
-    }
-
-    &[detail-step] {
-      @extend .#{$block-class}__header--on-detail-step;
-    }
-
-    &[no-title-animation] {
-      @extend .#{$block-class}__header--no-title-animation;
-      // inset-block-start: 0;
-    }
-
-    &[reduced-motion] {
-      @extend .#{$block-class}__header--reduced-motion;
-    }
-
-    &[has-action-toolbar] {
-      margin-block-end: $spacing-03;
-      padding-block-end: 0;
-    }
-  }
-
-  .#{$block-class} .#{$block-class}__header[has-action-toolbar]::before {
-    content: initial; /* remove border below */
-  }
-
-  .#{$block-class}__subtitle-text {
-    &[hidden] {
-      @extend .#{$carbon-prefix}--visually-hidden !optional;
-    }
-  }
-
-  .#{$block-class}__action-toolbar {
-    margin-block-end: 0;
-    padding-inline-start: 0;
-
-    &[hidden] {
-      @extend .#{$carbon-prefix}--visually-hidden !optional;
-    }
-  }
-
-  .#{$block-class} .#{$block-class}__action-toolbar[hidden] {
-    @extend .#{$carbon-prefix}--visually-hidden !optional;
-  }
-
-  .#{$block-class}[has-slug] {
-    @extend .#{$block-class}--has-slug;
-  }
-
-  [scrolls] {
-    @extend .#{$block-class}--scrolls;
-  }
-
-  .#{$block-class}__body-content {
-    @extend .#{$block-class}__body-content;
-  }
-
-  @mixin actions-placement() {
-    --flex-direction: row;
-    /* non carbon for IBM Products adjustment */
-    flex-direction: var(--flex-direction);
-
-    ::slotted(#{$prefix}-button) {
-      flex: 0 1 25%;
-      max-inline-size: to-rem(232px);
-    }
-
-    ::slotted(#{$prefix}-button[kind='ghost']) {
-      flex: 1 1 25%;
-      max-inline-size: none;
-    }
-
-    ::slotted(#{$prefix}-button[hidden]) {
-      @extend .#{$carbon-prefix}--visually-hidden !optional;
-
-      display: none;
-    }
-
-    // -1 in @container query is for 1px left border
-    @container (width <= #{map.get(spv.$side-panel-sizes, lg)}) {
-      &:not([actions-multiple='triple']) ::slotted(#{$carbon-prefix}-button) {
-        // double and single on lg use 50%
-        flex: 0 1 50%;
-        max-inline-size: none;
-      }
-    }
-
-    // -1 in @container query is for 1px left border
-    @container (width <= #{map.get(spv.$side-panel-sizes, md)}) {
-      // md is 50% for two and 100% for one
-      // column for triple
-      &[actions-multiple] ::slotted(#{$carbon-prefix}-button) {
-        flex: 0 0 100%;
-        max-inline-size: none;
-      }
-
-      &[actions-multiple='double'] ::slotted(#{$carbon-prefix}-button) {
-        flex: 0 1 50%;
-        max-inline-size: none;
-      }
-
-      &[actions-multiple='triple'] {
-        --flex-direction: column;
-
-        ::slotted(#{$carbon-prefix}-button) {
-          flex: initial;
-          inline-size: 100%;
-          max-inline-size: none;
-        }
-      }
-    }
-
-    // -1 in @container query is for 1px left border
-    @container (width <= #{map.get(spv.$side-panel-sizes, sm)}) {
-      --flex-direction: column;
-
-      ::slotted(#{$carbon-prefix}-button) {
-        flex: initial;
-        inline-size: 100%;
-        max-inline-size: none;
-      }
-    }
-  }
-
-  .#{$block-class}__actions-container {
-    @extend .#{$block-class-action-set};
-    @include actions-placement();
-
-    display: flex;
-    inline-size: 100%;
-
-    ::slotted(#{$carbon-prefix}-button) {
-      @extend .#{$block-class-action-set}__action-button;
-    }
-
-    &[hidden] {
-      @extend .#{$carbon-prefix}--visually-hidden !optional;
-
-      display: none;
-    }
-
-    $multiples: 'single' 'double' 'triple';
-    @each $m in $multiples {
-      &[actions-multiple='#{$m}'] {
-        @extend .#{$carbon-prefix}--action-set--row-#{$m} !optional;
-      }
-    }
-
-    $sizes: 'xs' 'sm';
-    @each $s in $sizes {
-      &[size='#{$s}'] {
-        @extend .#{$block-class-action-set}--#{$s} !optional;
-      }
-    }
-  }
-
-  .sentinel {
-    @extend .#{$carbon-prefix}--visually-hidden !optional;
-  }
-
-  .#{$block-class}__close-button {
-    inline-size: 2rem;
-  }
-}

package/scss/components/tearsheet/tearsheet.scss

@@ -1,343 +0,0 @@
-/*
-* Copyright IBM Corp. 2023, 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.
-*/
-
-$css--plex: true !default;
-
-/* Other Carbon settings. */
-@use '@carbon/styles/scss/reset';
-@use '@carbon/styles/scss/breakpoint' as *;
-@use '@carbon/styles/scss/config' as *;
-@use '@carbon/styles/scss/motion' as *;
-@use '@carbon/styles/scss/spacing' as *;
-@use '@carbon/styles/scss/theme' as *;
-@use '@carbon/styles/scss/type';
-@use '@carbon/styles/scss/utilities';
-@use '@carbon/styles/scss/utilities/ai-gradient' as *;
-@use '@carbon/styles/scss/components/modal' as *;
-@use '@carbon/styles/scss/utilities/convert' as *;
-@use 'sass:map';
-
-$prefix: 'c4p';
-$carbon-prefix: 'cds';
-
-@use '@carbon/ibm-products-styles/scss/components/Tearsheet/index' as *;
-@use '@carbon/ibm-products-styles/scss/components/ActionSet/index' as *;
-
-$block-class: #{$prefix}--tearsheet;
-$block-class-action-set: #{$prefix}--action-set;
-$motion-duration: $duration-moderate-02;
-
-:host(#{$prefix}-tearsheet) {
-  --content-padding: #{$spacing-05};
-
-  @extend .#{$carbon-prefix}--modal;
-  @extend .#{$prefix}--tearsheet;
-
-  .#{$block-class}__header,
-  .#{$block-class}__content,
-  .#{$block-class}__influencer {
-    padding: var(--content-padding);
-  }
-
-  .#{$block-class}__container {
-    /* lower prop is deprecated but the default in ibm products */
-    @extend .#{$block-class}__container--lower;
-
-    max-block-size: calc(100% - (#{$spacing-09} + #{$spacing-08}));
-  }
-
-  .#{$block-class}__container[stack-position='1'][stack-depth='2'],
-  .#{$block-class}__container[stack-position='2'][stack-depth='3'] {
-    max-block-size: calc(
-      100% - (#{$spacing-09} + #{$spacing-08}) + #{$spacing-05}
-    );
-    transform: scale(var(--#{$block-class}--stacking-scale-factor-single));
-  }
-
-  .#{$block-class}__container[stack-position='1'][stack-depth='3'] {
-    max-block-size: calc(
-      100% - (#{$spacing-09} + #{$spacing-08}) + (2 * #{$spacing-05})
-    );
-    transform: scale(var(--#{$block-class}--stacking-scale-factor-double));
-  }
-
-  .#{$block-class}__buttons {
-    @extend .#{$block-class}__button-container;
-    @extend .#{$block-class-action-set};
-
-    display: flex;
-    background: $background;
-    inline-size: 100%;
-  }
-
-  .#{$block-class}__buttons[hidden] {
-    @extend .#{$carbon-prefix}--visually-hidden;
-
-    display: none;
-  }
-
-  .#{$block-class}__buttons ::slotted(#{$carbon-prefix}-button) {
-    @extend .#{$block-class-action-set}__action-button;
-
-    flex: 0 1 25%;
-    block-size: $spacing-11;
-    max-inline-size: to-rem(232px);
-  }
-
-  .#{$block-class}__buttons ::slotted(#{$carbon-prefix}-button[kind='ghost']) {
-    flex: 1 1 25%;
-    max-inline-size: none;
-  }
-
-  .#{$block-class}__buttons ::slotted(#{$carbon-prefix}-button[hidden]) {
-    @extend .#{$carbon-prefix}--visually-hidden;
-
-    display: none;
-  }
-
-  .#{$block-class}__influencer[wide] {
-    @extend .#{$block-class}__influencer--wide;
-  }
-  ::slotted([slot='decorator']),
-  ::slotted(#{$carbon-prefix}-slug) {
-    position: absolute;
-    display: flex;
-    inset-block-start: to-rem(10px);
-    inset-inline-end: 0;
-    /* stylelint-disable-next-line carbon/layout-use */
-    margin-block: 6px;
-    margin-inline-end: $spacing-05;
-  }
-}
-
-:host(#{$prefix}-tearsheet[open]) {
-  --overlay-color: #{$overlay};
-  --overlay-opacity: 1;
-
-  z-index: utilities.z('modal');
-  align-items: flex-end;
-  background: initial;
-  opacity: 1;
-  /* stylelint-disable-next-line */
-  transition: visibility 0s linear;
-  visibility: inherit;
-
-  .#{$prefix}--tearsheet__container {
-    transform: translate3d(0, 0, 0);
-    transition: transform $duration-moderate-02 motion(entrance, expressive);
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    transition: none;
-  }
-
-  &::before {
-    position: absolute;
-    display: block;
-    background: var(--overlay-color);
-    content: '';
-    inset: 0;
-    opacity: var(--overlay-opacity);
-
-    transition:
-      background-color $motion-duration motion(exit, expressive),
-      opacity $motion-duration motion(exit, expressive);
-
-    @media (prefers-reduced-motion: reduce) {
-      transition: none;
-    }
-
-    &[stack-position='1'][stack-depth='2'] {
-      --overlay-opacity: 0.67;
-    }
-
-    &[stack-position='1'][stack-depth='3'] {
-      --overlay-opacity: 0.22;
-    }
-
-    &[stack-position='2'][stack-depth='3'] {
-      --overlay-opacity: 0.5;
-    }
-
-    &[stack-position='2'][stack-depth='2'],
-    &[stack-position='3'][stack-depth='3'] {
-      --overlay-opacity: 0.5;
-    }
-  }
-}
-
-:host(#{$prefix}-tearsheet[hidden]) {
-  @extend .#{$carbon-prefix}--visually-hidden;
-}
-
-:host(#{$prefix}-tearsheet[slug]),
-:host(#{$prefix}-tearsheet[ai-label]) {
-  --overlay-color: #{$ai-overlay};
-
-  .#{$block-class}__container {
-    border: 1px solid transparent;
-
-    /* override carbon ai removing background gradient */
-    background:
-      linear-gradient(to top, var(--cds-layer), var(--cds-layer)) padding-box,
-      linear-gradient(
-          to bottom,
-          var(--cds-ai-border-start, #78a9ff),
-          var(--cds-ai-border-end, #d0e2ff)
-        )
-        border-box,
-      linear-gradient(to top, var(--cds-layer), var(--cds-layer)) border-box;
-    border-block-end: 0;
-    box-shadow: 0 24px 40px -24px $ai-drop-shadow;
-  }
-
-  .#{$block-class}__content {
-    @include utilities.ai-popover-gradient('default', 0);
-
-    box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow;
-  }
-}
-
-:host(#{$prefix}-tearsheet[slug])
-  .#{$prefix}--tearsheet__header[has-actions]
-  ::slotted(#{$prefix}-slug),
-:host(#{$prefix}-tearsheet[ai-label])
-  .#{$prefix}--tearsheet__header[has-actions]
-  ::slotted(#{$prefix}-ai-label),
-:host(#{$prefix}-tearsheet[decorator])
-  .#{$prefix}--tearsheet__header[has-actions]
-  ::slotted([slot='decorator']) {
-  inset-inline-end: 0;
-}
-
-:host(#{$prefix}-tearsheet[stack-position='1'][stack-depth='2']),
-:host(#{$prefix}-tearsheet[stack-position='2'][stack-depth='3']) {
-  z-index: utilities.z('modal') - 1;
-}
-
-:host(#{$prefix}-tearsheet[stack-position='1'][stack-depth='3']) {
-  z-index: utilities.z('modal') - 2;
-}
-
-:host(#{$prefix}-tearsheet[width='narrow']) {
-  .#{$block-class}__header {
-    margin: 0;
-    border-block-end: 1px solid $border-subtle-01;
-  }
-
-  .#{$block-class}__header-description {
-    margin-block-start: $spacing-03;
-    max-inline-size: 80%;
-  }
-
-  .#{$block-class}__main {
-    background-color: unset;
-  }
-}
-
-:host(#{$prefix}-tearsheet[width='wide']) {
-  --content-padding: #{$spacing-06 $spacing-07};
-
-  .#{$block-class}__header {
-    margin: 0;
-    background-color: $layer;
-    border-block-end: 1px solid $border-subtle-01;
-  }
-
-  .#{$block-class}__header[has-navigation] {
-    padding-block-end: 0;
-  }
-
-  .#{$block-class}__container {
-    inline-size: 100%;
-
-    @include breakpoint(md) {
-      inline-size: calc(100% - (2 * #{$spacing-10}));
-    }
-  }
-
-  .#{$carbon-prefix}--modal-header__heading.#{$block-class}__heading {
-    @include type.type-style('heading-04');
-  }
-
-  .#{$block-class}__header[has-close-icon],
-  .#{$block-class}__header[has-slug],
-  .#{$block-class}__header[has-decorator] {
-    padding-inline-end: $spacing-11;
-  }
-
-  .#{$block-class}__header[has-close-icon][has-slug],
-  .#{$block-class}__header[has-close-icon][has-decorator] {
-    /* stylelint-disable-next-line carbon/layout-use */
-    padding-inline-end: calc(#{$spacing-11 + $spacing-09});
-  }
-
-  .#{$block-class}__header-navigation {
-    margin-inline-start: calc(-1 * #{$spacing-05});
-    max-block-size: $spacing-08; /* #{$prefix}-tabs too tall */
-  }
-
-  .#{$block-class}__content {
-    // Revert background color overridden by Carbon's modal - https://github.com/carbon-design-system/carbon/blob/main/packages/styles/scss/components/modal/_modal.scss#L54
-    .#{$carbon-prefix}--pagination,
-    .#{$carbon-prefix}--pagination__control-buttons,
-    .#{$carbon-prefix}--text-input,
-    .#{$carbon-prefix}--text-area,
-    .#{$carbon-prefix}--search-input,
-    .#{$carbon-prefix}--select-input,
-    .#{$carbon-prefix}--dropdown,
-    .#{$carbon-prefix}--dropdown-list,
-    .#{$carbon-prefix}--number input[type='number'],
-    .#{$carbon-prefix}--date-picker__input {
-      background-color: $field;
-    }
-
-    .#{$carbon-prefix}--select--inline .#{$carbon-prefix}--select-input {
-      background-color: transparent;
-    }
-
-    // and restore the 'light' prop in case light fields are wanted
-    .#{$carbon-prefix}--text-input--light,
-  .#{$carbon-prefix}--text-area--light,
-  .#{$carbon-prefix}--search--light .#{$carbon-prefix}--search-input,
-  .#{$carbon-prefix}--select--light .#{$carbon-prefix}--select-input,
-  .#{$carbon-prefix}--dropdown--light,
-  .#{$carbon-prefix}--dropdown--light .#{$carbon-prefix}--dropdown-list,
-  /* stylelint-disable-next-line prettier/prettier */
-  .#{$carbon-prefix}--number--light input[type='number'],
-  .#{$carbon-prefix}--date-picker--light
-    .#{$carbon-prefix}--date-picker__input {
-      background-color: $field-02;
-    }
-  }
-  .#{$prefix}--action-set
-    .#{$prefix}--action-set__action-button.#{$prefix}--action-set__action-button--expressive {
-    block-size: $spacing-11;
-  }
-}
-
-:host(#{$prefix}-tearsheet[width='narrow'])
-  .#{$block-class}__buttons[actions-multiple='single']
-  ::slotted(#{$carbon-prefix}-button),
-:host(#{$prefix}-tearsheet[width='narrow'])
-  .#{$block-class}__buttons[actions-multiple='double']
-  ::slotted(#{$carbon-prefix}-button) {
-  // double and single on lg use 50%
-  flex: 0 1 50%;
-  max-inline-size: none;
-}
-
-:host(#{$prefix}-tearsheet[width='narrow'])
-  .#{$block-class}__buttons
-  ::slotted(#{$carbon-prefix}-button) {
-  block-size: $spacing-10;
-}
-:host(#{$prefix}-tearsheet[width='narrow']) {
-  .#{$block-class}__buttons {
-    background-color: unset;
-  }
-}