@carbon/ibm-products-web-components 0.1.0 → 0.1.1-canary.3605

package/scss/components/tearsheet/tearsheet.scss

@@ -0,0 +1,318 @@
+/*
+* 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;
+  }
+}
+
+:host(#{$prefix}-tearsheet[open]) {
+  --overlay-color: #{$overlay};
+  --overlay-opacity: 1;
+
+  z-index: utilities.z('modal');
+  align-items: flex-end;
+  background: initial;
+  opacity: 1;
+
+  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]) {
+  --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) {
+  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;
+    background-color: $layer;
+    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: $layer;
+  }
+}
+
+: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] {
+    padding-inline-end: $spacing-11;
+  }
+
+  .#{$block-class}__header[has-close-icon][has-slug] {
+    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;
+}

package/src/components/side-panel/side-panel.ts

@@ -337,10 +337,11 @@ class CDSSidePanel extends HostListenerMixin(LitElement) {
             newValues.marginInlineEnd = `${this?._sidePanel?.offsetWidth}px`;
           }
         }
-
-        Object.keys(newValues).forEach((key) => {
-          pageContentEl.style[key] = newValues[key];
-        });
+        if (this.slideIn) {
+          Object.keys(newValues).forEach((key) => {
+            pageContentEl.style[key] = newValues[key];
+          });
+        }
       }
     }
   };
@@ -680,7 +681,6 @@ class CDSSidePanel extends HostListenerMixin(LitElement) {
     const actionsMultiple = ['', 'single', 'double', 'triple'][
       this._actionsCount
     ];
-
     const titleTemplate = html`<div
       class=${`${blockClass}__title`}
       ?no-label=${!!labelText}

package/src/components/tearsheet/defs.ts

@@ -0,0 +1,30 @@
+/**
+ * @license
+ *
+ * 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.
+ */
+
+export enum TEARSHEET_INFLUENCER_PLACEMENT {
+  /** right / default */
+  RIGHT = 'right',
+
+  /** left  */
+  LEFT = 'left',
+}
+
+export enum TEARSHEET_INFLUENCER_WIDTH {
+  /** narrow /default */
+  NARROW = 'narrow',
+  /** wide  */
+  WIDE = 'wide',
+}
+
+export enum TEARSHEET_WIDTH {
+  /** narrow  */
+  NARROW = 'narrow',
+  /** wide  */
+  WIDE = 'wide',
+}

package/src/components/tearsheet/index.ts

@@ -0,0 +1,10 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2024, 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.
+ */
+
+import './tearsheet';

package/src/components/tearsheet/story-styles.scss

@@ -0,0 +1,23 @@
+/*
+* 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.
+*/
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/config' as *;
+
+$story-prefix: 'tearsheet-stories';
+
+@use '@carbon/styles/scss/spacing' as *;
+
+#page-content-selector {
+  position: absolute;
+  z-index: 9999;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+}
+
+.#{$story-prefix}__tabs .#{$prefix}--tab-content {
+  display: none;
+}

package/src/components/tearsheet/tearsheet.mdx

@@ -0,0 +1,101 @@
+import { ArgTypes, Markdown, Meta } from '@storybook/blocks';
+import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
+import * as TearsheetStories from './tearsheet.stories';
+
+<Meta of={TearsheetStories} />
+
+# Tearsheet
+
+> 💡 Check our
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon/tree/main/packages/web-components/examples/components/tearsheet)
+> example implementation.
+
+[![Edit carbon-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon/tree/main/packages/web-components/examples/components/tearsheet)
+
+Tearsheets keep users in-context of a page while performing tasks like
+navigating, editing, viewing details, or configuring something new.
+
+## Getting started
+
+Here's a quick example to get you started.
+
+### JS (via import)
+
+```javascript
+import '@carbon/web-components/es/components/tearsheet/index.js';
+// The following are used for slotted fields
+import '@carbon/web-components/es/components/text-input/index.js';
+import '@carbon/web-components/es/components/textarea/index.js';
+import '@carbon/web-components/es/components/button/index.js';
+```
+
+<Markdown>{`${cdnJs({ components: ['tearsheet'] })}`}</Markdown>
+<Markdown>{`${cdnCss()}`}</Markdown>
+
+### HTML
+
+```html
+<c4p-tearsheet>
+  <!-- Content -->
+  <h5>Tearsheet content</h5>
+  <div class="${storyPrefix}text-inputs">
+    <cds-text-input
+      label="Input A"
+      id="tearsheet-story-text-input-a"></cds-text-input>
+    <cds-text-input
+      label="Input B"
+      id="tearsheet-story-text-input-b"></cds-text-input>
+  </div>
+  <div class="${storyPrefix}text-inputs">
+    <cds-text-input
+      label="Input C"
+      id="tearsheet-story-text-input-c"></cds-text-input>
+    <cds-text-input
+      label="Input D"
+      id="tearsheet-story-text-input-d"></cds-text-input>
+  </div>
+  <div class="${storyPrefix}textarea-container">
+    <cds-textarea label="Notes" value="This is a text area"></cds-textarea>
+    <cds-textarea label="Notes" value="This is a text area"></cds-textarea>
+    <cds-textarea label="Notes" value="This is a text area"></cds-textarea>
+  </div>
+
+  <!-- subtitle optional -->
+  <div slot="subtitle">
+    Subtitle text which can provide more detail on the content being displayed.
+  </div>
+
+  <!-- Action toolbar optional -->
+  <cds-button slot="action-toolbar">Copy</cds-button>
+  <cds-button
+    slot="action-toolbar"
+    aria-label="Settings"
+    has-icon-only="true"
+    kind="${BUTTON_KIND.GHOST}"
+    size="sm"
+    tooltip-text="Settings">
+    ${Settings({ slot: 'icon' })}
+  </cds-button>
+  <cds-button
+    slot="action-toolbar"
+    aria-label="Delete"
+    has-icon-only="true"
+    kind="${BUTTON_KIND.GHOST}"
+    size="sm"
+    tooltip-text="Delete">
+    ${Trashcan({ slot: 'icon' })}
+  </cds-button>
+
+  <!-- Tearsheet actions optional -->
+  <cds-button slot="actions" kind="${BUTTON_KIND.GHOST}">Ghost</cds-button>
+  <cds-button slot="actions" kind="${BUTTON_KIND.PRIMARY}"></cds-button>
+</c4p-tearsheet>
+```
+
+## `<c4p-tearsheet>` attributes, properties and events
+
+Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
+`<c4p-tearsheet open>`) and `false` means not setting the attribute (e.g.
+`<c4p-tearsheet>` without `open` attribute).
+
+<ArgTypes of="c4p-tearsheet" />