@carbon/ibm-products-web-components 0.34.0 → 0.35.0

package/scss/components/tearsheet-preview/tearsheet.scss

@@ -0,0 +1,254 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2026
+ *
+ * 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 '@carbon/styles/scss/breakpoint' 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/ibm-products-styles/scss/components/Tearsheet/_tearsheet_next.scss'
+  as *;
+
+$c4p-prefix: 'c4p';
+$carbon-prefix: 'cds';
+
+$block-class__next: #{$c4p-prefix}--tearsheet__next;
+$motion-duration: $duration-moderate-02;
+
+@mixin collapsed-element {
+  overflow: hidden;
+  padding: 0;
+  margin: 0;
+  max-block-size: 0;
+  opacity: 0;
+  pointer-events: none;
+  transition: all $motion-duration motion(entrance, expressive);
+}
+.#{$block-class__next}--has-ai-label::part(dialog) {
+  border: 1px solid transparent !important; /* stylelint-disable-line declaration-no-important */
+
+  /* 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;
+}
+
+.#{$block-class__next}__main-content {
+  position: relative;
+
+  &.#{$block-class__next}__flush {
+    padding-inline: 0;
+  }
+
+  &.#{$block-class__next}__main-content--no-summary {
+    grid-column: 1 / -1;
+  }
+
+  &.#{$block-class__next}__main-content--has-ai-label {
+    @include ai-popover-gradient('default', 0, 'background');
+
+    box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow;
+  }
+}
+
+:host ::slotted([slot='summary-content']) {
+  @extend .#{$block-class__next}__summary-content;
+}
+
+:host ::slotted([slot='summary-content'][is-flush]) {
+  padding-inline: 0;
+}
+:host(#{$c4p-prefix}-preview-tearsheet) {
+  @media screen and (prefers-reduced-motion: reduce) {
+    ::part(dialog) {
+      align-self: flex-end;
+      border: 1px solid $border-subtle-01;
+      block-size: 100%;
+      inset-block-start: auto;
+      max-block-size: calc(
+        100% - var(--tearsheet-vertical-gap, #{$spacing-09})
+      );
+      transform: translate3d(0, min(95vh, 500px), 0);
+      transition: none;
+    }
+  }
+
+  ::part(dialog) {
+    align-self: flex-end;
+    border: 1px solid $border-subtle-01;
+    block-size: 100%;
+    inset-block-start: auto;
+    max-block-size: calc(100% - var(--tearsheet-vertical-gap, #{$spacing-09}));
+    transform: translate3d(0, min(95vh, 500px), 0);
+    transition:
+      transform $motion-duration motion(entrance, expressive),
+      max-block-size $motion-duration motion(entrance, expressive);
+  }
+
+  ::slotted([slot='influencer']) {
+    @extend .#{$block-class__next}__influencer;
+  }
+
+  ::slotted([slot='influencer'][is-flush]) {
+    padding-inline: 0;
+  }
+
+  ::slotted([slot='body']) {
+    @extend .#{$block-class__next}__body;
+  }
+
+  ::slotted([slot='footer']) {
+    @extend .#{$block-class__next}__footer;
+  }
+}
+:host(#{$c4p-prefix}-preview-tearsheet[open]) {
+  ::part(dialog) {
+    transform: translate3d(0, 0, 0);
+    transition: transform $duration-moderate-02 motion(entrance, expressive);
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
+  }
+}
+
+// This will set full screen height for tearsheets in mobile devices
+:host(:not(.#{$block-class__next}--stack-activated.is-visible)) {
+  ::part(dialog) {
+    @include breakpoint-down(md) {
+      max-block-size: none;
+    }
+  }
+}
+
+// Stacking styles
+:host(
+  #{$c4p-prefix}-preview-tearsheet.#{$block-class__next}--stack-activated.is-visible
+) {
+  --overlay-color: #{$overlay};
+  --overlay-alpha: 0.5;
+
+  z-index: calc(#{utilities.z('modal')} - var(--stack-depth, 0));
+
+  &::before {
+    position: fixed;
+    z-index: -1;
+    display: block;
+    background: var(--overlay-color);
+    content: '';
+    inset: 0;
+    opacity: calc(var(--overlay-alpha) - var(--stack-depth) * 0.1);
+    pointer-events: none;
+
+    transition:
+      background-color $motion-duration motion(exit, expressive),
+      opacity $motion-duration motion(exit, expressive);
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
+  }
+
+  #{$carbon-prefix}-modal {
+    background-color: transparent;
+  }
+
+  ::part(dialog) {
+    max-block-size: calc(
+      100% - var(--tearsheet-vertical-gap, #{$spacing-09}) +
+        var(--block-size-change)
+    );
+    transform: scaleX(var(--scale-factor));
+  }
+}
+
+// Narrow variant styles
+:host(#{$c4p-prefix}-preview-tearsheet[variant='narrow']) {
+  .#{$block-class__next}__header {
+    padding-inline: $spacing-05;
+  }
+
+  .#{$block-class__next}__header.#{$block-class__next}__header-collapsed {
+    .#{$block-class__next}__header-actions {
+      display: none;
+    }
+  }
+
+  .#{$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;
+  }
+
+  ::slotted([slot='influencer']),
+  ::slotted([slot='summary-content']) {
+    padding: 0 !important; /* stylelint-disable-line declaration-no-important */
+  }
+}
+
+// Small screen styles
+@include breakpoint-down(md) {
+  :host(#{$c4p-prefix}-preview-tearsheet) {
+    ::slotted([slot='influencer']),
+    ::slotted([slot='summary-content']) {
+      padding: 0 !important; /* stylelint-disable-line declaration-no-important */
+    }
+  }
+}
+
+.#{$block-class__next}__header-label {
+  @extend .#{$block-class__next}__header-label;
+}
+.#{$block-class__next}__header-title {
+  @extend .#{$block-class__next}__header-title;
+}
+
+.#{$block-class__next}__header-description {
+  @extend .#{$block-class__next}__header-description;
+}
+
+:host {
+  #{$c4p-prefix}-side-panel::part(dialog) {
+    @extend .#{$block-class__next}__side-panel; // Extend the side panel styles}
+  }
+}
+
+:host-context(#{$c4p-prefix}-preview-tearsheet[variant='narrow']) {
+  ::slotted([slot='summary-content']) {
+    padding: 0;
+  }
+}
+
+:host ::slotted([slot='footer']) {
+  padding-block: 0;
+}

package/telemetry.yml

@@ -18,7 +18,10 @@ collect:
         - description
         - expand-label
         - expandText
+        - hide-close-button
         - id
+        - influencer-width
+        - is-flush
         - kind
         - label
         - lines
@@ -134,12 +137,20 @@ collect:
         - close-on-activation
         - enter-delay-ms
         - leave-delay-ms
+        # c4p-preview-tearsheet
+        - container-class-name
+        - onc4p-preview-tearsheet-beingclosed
+        - onc4p-preview-tearsheet-closed
+        - selector-primary-focus
+        - selectors-floating-menus
+        - summary-content-width
+        - variant
+        - vertical-gap
         # c4p-side-panel
         - animate-title
         - close-icon-tooltip-alignment
         - condensed-actions
         - current-step
-        - hide-close-button
         - include-overlay
         - label-text
         - navigation-back-icon-description
@@ -153,10 +164,18 @@ collect:
         - aria-label
         - has-close-icon
         - influencer-placement
-        - influencer-width
         - onc4p-tearsheet-beingclosed
         - onc4p-tearsheet-closed
         - width
+        # c4p-tearsheet-header
+        - disable-header-collapse
+        - onc4p-tearsheet-header-close-button-clicked
+        # c4p-tearsheet-influencer
+        - influencer-panel-open
+        - oncds-tearsheet-influencer-closed
+        # c4p-tearsheet-summary-content
+        - oncds-tearsheet-summary-closed
+        - summary-panel-open
         # c4p-user-avatar
         - background-color
         - image
@@ -165,15 +184,22 @@ collect:
         - theme
         - tooltip-alignment
         - tooltip-text
-        # set-of-breadcrumbs
+        # set-of-breadcrumbs-example
         - breadcrumbs-data
         - hiddenItems
-        # set-of-tags
+        # set-of-tags-example
         - tags-data
+        # stacking-tearsheet-demo
+        - tearsheet-type
+        # step-tearsheet-preview
+        - horizontal
       allowedAttributeStringValues:
         # General - boolean attributes
         - "true"
         - "false"
+        # General - influencer-width
+        - narrow
+        - wide
         # General - kind
         - "403"
         - "404"
@@ -198,15 +224,15 @@ collect:
         - success
         - tooltip
         - warning
+        # c4p-preview-tearsheet - variant
+        - narrow
+        - wide
         # c4p-side-panel - placement
         - left
         - right
         # c4p-tearsheet - influencer-placement
         - left
         - right
-        # c4p-tearsheet - influencer-width
-        - narrow
-        - wide
         # c4p-tearsheet - width
         - narrow
         - wide