@carbon/ibm-products-styles 2.74.0 → 2.75.0-rc.0

package/scss/components/Tearsheet/_tearsheet_next.scss

@@ -0,0 +1,408 @@
+/**
+ * Copyright IBM Corp. 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 '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/colors' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/motion' as *;
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/utilities';
+@use '../../global/styles/project-settings' as *;
+@use '../../global/styles/mixins' as *;
+
+$block-class__next: #{$pkg-prefix}--tearsheet__next;
+$motion-duration: $duration-moderate-02;
+
+/// Experimental tearsheet styles
+@include block-wrap($block-class__next) {
+  // ──────────────────────────────────────────────────────────────
+  // Container
+  // ──────────────────────────────────────────────────────────────
+  .#{$block-class__next}__container {
+    align-self: flex-end;
+    block-size: 100%;
+    inset-block-start: auto;
+    max-block-size: calc(100% - #{$spacing-09});
+    transform: translate3d(0, calc(min(95vh, 500px)), 0);
+    @include breakpoint-down(md) {
+      max-block-size: none;
+    }
+  }
+
+  &.#{$block-class__next}.#{$block-class__next}--has-ai-label
+    .#{$block-class__next}__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 4px 10px 2px $ai-drop-shadow;
+  }
+
+  // Extra specificity to override Carbon default transition
+  &.#{$block-class__next}.#{$block-class__next}
+    .#{$block-class__next}__container {
+    transition:
+      transform $motion-duration motion(entrance, expressive),
+      max-height $motion-duration motion(entrance, expressive);
+  }
+
+  // Wide variant at medium breakpoint
+  @include breakpoint(md) {
+    &.#{$block-class__next}--wide .#{$block-class__next}__container {
+      inline-size: calc(100% - (2 * #{$spacing-10}));
+    }
+  }
+
+  // ──────────────────────────────────────────────────────────────
+  // Header
+  // ──────────────────────────────────────────────────────────────
+  .#{$block-class__next}__header {
+    display: flex;
+    flex-wrap: wrap;
+    align-content: space-between;
+    border-block-end: 1px solid $border-subtle-01;
+    margin-block: 0;
+    max-block-size: 50vh;
+    padding-block-end: 0;
+    padding-block-start: $spacing-06;
+    padding-inline: $spacing-07;
+
+    > * {
+      flex-basis: 100%;
+    }
+    // change if carbon provide flexible close button
+    > *:not(
+        .#{$block-class__next}__navigation-bar,
+        .#{$block-class__next}__header-content-wrapper,
+        .#{$carbon-prefix}--modal-close-button
+      ) {
+      margin-block-end: $spacing-06;
+    }
+
+    @include breakpoint-down(md) {
+      padding-inline: $spacing-05;
+    }
+  }
+  .#{$carbon-prefix}--modal-container--sm .#{$carbon-prefix}--modal-header {
+    padding-inline-end: $spacing-07;
+  }
+
+  // ──────────────────────────────────────────────────────────────
+  // Header content wrapper (grid on desktop → flex on mobile)
+  // ──────────────────────────────────────────────────────────────
+  .#{$block-class__next}__header-content-wrapper {
+    display: grid;
+    flex-basis: unset;
+    gap: $spacing-05;
+    grid-template-columns:
+      auto
+      minmax(var(--tearsheet-header-title-grid-width, 0), 1fr);
+    inline-size: calc(100% - var(--tearsheet-header-action-offset));
+
+    @include breakpoint-down(md) {
+      display: flex;
+      flex-direction: column;
+    }
+  }
+
+  // Header content and actions
+  .#{$block-class__next}__header-content,
+  .#{$block-class__next}__header-actions {
+    margin-block-end: $spacing-06;
+  }
+
+  // Label, title, description styles
+  .#{$block-class__next}__header-label {
+    @include type.type-style('label-01');
+
+    margin-block-end: $spacing-02;
+  }
+
+  .#{$block-class__next}__header-title {
+    @include type.type-style('heading-04');
+
+    @include breakpoint-down(md) {
+      @include type.type-style('heading-03');
+    }
+
+    display: flex;
+    align-items: flex-start;
+    margin-block-end: $spacing-03;
+
+    svg {
+      flex-shrink: 0;
+    }
+
+    &.#{$block-class__next}__leading-icon {
+      flex-direction: row;
+
+      svg {
+        margin-inline-end: $spacing-05;
+      }
+    }
+
+    &.#{$block-class__next}__trailing-icon {
+      flex-direction: row-reverse;
+      justify-content: flex-end;
+
+      svg {
+        margin-inline-start: $spacing-05;
+      }
+    }
+  }
+
+  .#{$block-class__next}__header-description {
+    @include type.type-style('body-compact-01');
+  }
+
+  .#{$block-class__next}__header--no-close-icon {
+    display: none;
+  }
+
+  .#{$block-class__next}__header-content {
+    max-inline-size: 40rem;
+  }
+
+  // ──────────────────────────────────────────────────────────────
+  // Navigation bar inside header
+  // ──────────────────────────────────────────────────────────────
+  .#{$block-class__next}__navigation-bar {
+    position: relative;
+    // margin: $spacing-04 0 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: $spacing-10;
+    max-inline-size: 100%;
+    min-block-size: $spacing-08;
+
+    .#{$block-class__next}__scroller-container {
+      position: absolute;
+      inset-inline-end: -$spacing-07;
+      margin-inline-end: 1px;
+      @include breakpoint-down(md) {
+        inset-inline-end: -$spacing-05;
+      }
+
+      .#{$block-class__next}__scroller-button-icon-collapsed {
+        transform: rotate(-180deg);
+      }
+    }
+
+    .#{$carbon-prefix}--tabs {
+      margin-inline-start: -$spacing-05;
+    }
+  }
+
+  // ──────────────────────────────────────────────────────────────
+  // Header actions
+  // ──────────────────────────────────────────────────────────────
+  .#{$block-class__next}__header-actions {
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  .#{$block-class__next}__content__header-actions {
+    display: flex;
+    overflow: hidden;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: flex-end;
+    block-size: $spacing-07;
+    inline-size: 100%;
+    margin-block-start: -14px;
+
+    // apply spacing only between two visible items
+    > *:not([hidden]) + *:not([hidden]) {
+      padding-inline-start: $spacing-03;
+    }
+
+    > * {
+      flex-shrink: 0;
+    }
+    @include breakpoint-down(md) {
+      justify-content: flex-start;
+      margin-inline-end: 0;
+    }
+  }
+
+  // ──────────────────────────────────────────────────────────────
+  // Header (default vs collapsed)
+  // ──────────────────────────────────────────────────────────────
+  .#{$block-class__next}__header {
+    opacity: 1;
+
+    // Default visible: hide everything except nav-bar, header-content-wrapper & close button
+    > *:not(
+        .#{$block-class__next}__navigation-bar,
+        .#{$block-class__next}__header-content-wrapper,
+        .#{$carbon-prefix}--modal-close-button
+      ),
+    .#{$block-class__next}__header-content-wrapper
+      .#{$block-class__next}__header-content
+      > *:not(.#{$block-class__next}__content__title-wrapper) {
+      overflow: hidden;
+      max-block-size: 50vh;
+      opacity: 1;
+      transition: all $motion-duration motion(entrance, expressive);
+    }
+  }
+
+  .#{$block-class__next}__header-collapsed {
+    // Hide everything except navigation bar, header-content-wrapper & close button
+    > *:not(
+        .#{$block-class__next}__navigation-bar,
+        .#{$block-class__next}__header-content-wrapper,
+        .#{$carbon-prefix}--modal-close-button,
+        .excludeFromCollapse
+      ),
+    .#{$block-class__next}__header-actions
+      > *:not(.#{$block-class__next}__content__header-actions),
+    .#{$block-class__next}__header-content-wrapper
+      .#{$block-class__next}__header-content
+      > *:not(.#{$block-class__next}__content__title-wrapper),
+    > *:not(
+        .#{$block-class__next}__navigation-bar,
+        .#{$block-class__next}__header-content-wrapper,
+        .#{$carbon-prefix}--modal-close-button,
+        .excludeFromCollapse
+      )
+      * {
+      overflow: hidden;
+      padding: 0;
+      margin: 0;
+      max-block-size: 0;
+      min-block-size: 0;
+      opacity: 0;
+      transition: all $motion-duration ease;
+      visibility: hidden;
+    }
+
+    // Reset margins and transitions on always-visible items
+    .#{$block-class__next}__header-content-wrapper,
+    .#{$block-class__next}__header-content,
+    .#{$block-class__next}__content__title-wrapper,
+    .#{$block-class__next}__header-actions
+      .#{$block-class__next}__header-title {
+      margin-block: 0;
+      transition: all $motion-duration ease;
+    }
+  }
+
+  // ──────────────────────────────────────────────────────────────
+  // Body layout grid
+  // ──────────────────────────────────────────────────────────────
+  .#{$block-class__next}__body-layout {
+    display: grid;
+    grid-template-areas:
+      'influencer body'
+      'influencer footer';
+    grid-template-columns:
+      var(--tearsheet-influencer-width, calc($spacing-10 * 4))
+      1fr;
+    grid-template-rows: 1fr auto;
+    padding-block: 0;
+    padding-inline-end: 0;
+
+    /* Redefine grid when influencer is absent */
+    &:not(:has(> .#{$block-class__next}__influencer)) {
+      grid-template-areas:
+        'body'
+        'footer';
+      grid-template-columns: 1fr;
+    }
+  }
+
+  /* Assign components to their named grid areas */
+  .#{$block-class__next}__influencer {
+    grid-area: influencer;
+  }
+
+  .#{$block-class__next}__body {
+    position: relative;
+    display: grid;
+    overflow: hidden;
+    grid-area: body;
+    grid-template-columns: 1fr var(
+        --tearsheet-summary-content-width,
+        calc($spacing-10 * 4)
+      );
+    @include breakpoint-down(md) {
+      grid-template-columns: 1fr 0;
+    }
+
+    > *:only-child {
+      grid-column: 1 / -1;
+    }
+  }
+
+  .#{$block-class__next}__footer {
+    border-block-start: 1px solid $border-subtle-01;
+    grid-area: footer;
+  }
+
+  .#{$block-class__next}__influencer,
+  .#{$block-class__next}__main-content,
+  .#{$block-class__next}__summary-content {
+    overflow: auto;
+    padding-inline: $spacing-07;
+    @include breakpoint-down(md) {
+      padding-inline: $spacing-05;
+    }
+  }
+
+  .#{$block-class__next}__main-content {
+    position: relative;
+    @include utilities.ai-popover-gradient('default', 0, 'background');
+
+    box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow;
+  }
+  .#{$pkg-prefix}--side-panel {
+    position: absolute;
+    z-index: 9999;
+    block-size: 100%;
+    inline-size: 100%;
+    inset-block-start: 0;
+    max-inline-size: none;
+    .#{$pkg-prefix}--side-panel__header {
+      min-block-size: 0;
+    }
+  }
+}
+.#{$block-class__next}--narrow {
+  .#{$block-class__next}__header {
+    padding-inline: $spacing-05;
+  }
+  .#{$block-class__next}__header-content-wrapper {
+    display: flex;
+    flex-direction: column;
+  }
+  .#{$block-class__next}__header-title {
+    @include type.type-style('heading-03');
+  }
+  .#{$block-class__next}__content__header-actions {
+    justify-content: flex-start;
+    margin-inline-end: 0;
+  }
+  .#{$block-class__next}__body {
+    grid-template-columns: 1fr 0;
+  }
+  .#{$block-class__next}__influencer,
+  .#{$block-class__next}__main-content,
+  .#{$block-class__next}__summary-content {
+    padding-inline: $spacing-05;
+  }
+}