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

package/scss/components/Datagrid/styles/_useSortableColumns.scss

@@ -0,0 +1,85 @@
+/**
+ * Copyright IBM Corp. 2020, 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/theme' as *;
+@use '../../../global/styles/project-settings' as c4p-settings;
+@use '@carbon/styles/scss/spacing' as *;
+@use './variables' as *;
+
+.#{$block-class}__sortableColumn {
+  /* stylelint-disable-next-line declaration-no-important */
+  padding-inline: $spacing-05 !important;
+
+  .#{c4p-settings.$carbon-prefix}--table-header-label .header-title {
+    display: inline-block;
+    inline-size: auto;
+  }
+  .#{c4p-settings.$carbon-prefix}--table-header-label {
+    display: block;
+    block-size: 100%;
+    inline-size: 100%;
+  }
+  .#{c4p-settings.$carbon-prefix}--table-header-label
+    .#{c4p-settings.$carbon-prefix}--table-sort:focus,
+  .#{c4p-settings.$carbon-prefix}--table-header-label
+    .#{c4p-settings.$carbon-prefix}--table-sort:active,
+  .#{c4p-settings.$carbon-prefix}--table-header-label
+    button:focus
+    .#{$block-class}__sortable-icon {
+    /* stylelint-disable-next-line declaration-no-important */
+    background: none !important;
+    /* stylelint-disable-next-line declaration-no-important */
+    color: $text-primary !important;
+  }
+
+  .#{c4p-settings.$carbon-prefix}--table-header-label
+    .#{c4p-settings.$carbon-prefix}--table-sort:focus,
+  .#{c4p-settings.$carbon-prefix}--table-header-label
+    .#{c4p-settings.$carbon-prefix}--table-sort:active {
+    + .#{$block-class}__resizer {
+      z-index: -1;
+    }
+  }
+
+  .#{c4p-settings.$carbon-prefix}--table-header-label
+    .#{c4p-settings.$carbon-prefix}--table-sort {
+    padding: 0 $spacing-05;
+    border: none;
+    /* stylelint-disable-next-line declaration-no-important */
+    background: none !important;
+    /* stylelint-disable-next-line declaration-no-important */
+    color: $text-primary !important;
+    font: inherit;
+    inline-size: 100%;
+    min-inline-size: 100%;
+  }
+  .#{c4p-settings.$carbon-prefix}--table-header-label
+    .#{c4p-settings.$carbon-prefix}--table-sort
+    .#{$block-class}__sortable-icon {
+    fill: $text-primary;
+    opacity: 0;
+    visibility: hidden;
+  }
+
+  .#{c4p-settings.$carbon-prefix}--table-sort.#{$block-class}--table-sort {
+    align-items: inherit;
+    margin: 0 calc(-1 * #{$spacing-05}); // fill width of parent table column header
+    inline-size: calc(100% + #{$spacing-07}); // offset due to inner label
+  }
+}
+
+.#{$block-class}__sortableColumn:hover,
+.#{$block-class}__sortableColumn:focus-within,
+.#{$block-class}__sortableColumn.#{$block-class}__isSorted {
+  .#{c4p-settings.$carbon-prefix}--table-header-label
+    .#{$block-class}__sortable-icon {
+    opacity: 1;
+    visibility: visible;
+  }
+
+  background-color: $layer-selected-hover-01;
+}

package/scss/components/Datagrid/styles/_useStickyColumn.scss

@@ -0,0 +1,72 @@
+/**
+ * Copyright IBM Corp. 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/theme' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use './variables';
+
+.#{variables.$block-class}__right-sticky-column-cell {
+  /* stylelint-disable-next-line declaration-no-important */
+  position: sticky !important;
+  display: flex;
+  align-items: center;
+  border-inline-start: 1px solid $border-subtle;
+  inset-inline-end: 0;
+}
+
+.#{variables.$block-class}__right-sticky-column-header {
+  /* stylelint-disable-next-line declaration-no-important */
+  position: sticky !important;
+  inset-inline-end: 0;
+}
+
+.#{variables.$block-class}__left-sticky-column-cell {
+  /* stylelint-disable-next-line declaration-no-important */
+  position: sticky !important;
+  display: flex;
+  align-items: center;
+  border-inline-end: 1px solid $border-subtle;
+  inset-inline-start: 0;
+}
+
+.#{variables.$block-class}__left-sticky-column-header {
+  /* stylelint-disable-next-line declaration-no-important */
+  position: sticky !important;
+  z-index: 10;
+  border-inline-end: 1px solid $border-subtle;
+  inset-inline-start: 0;
+}
+
+.#{variables.$block-class}__right-sticky-column-header {
+  border-inline-start: 1px solid $border-subtle;
+}
+
+.#{variables.$block-class}__left-sticky-column-cell.#{variables.$block-class}__left-sticky-column-cell--with-extra-select-column,
+.#{variables.$block-class}__left-sticky-column-header.#{variables.$block-class}__left-sticky-column-header--with-extra-select-column {
+  inset-inline-start: $spacing-09;
+}
+
+.#{variables.$block-class}__sticky-noShadow {
+  box-shadow: none;
+}
+
+.#{variables.$block-class}__sticky-column-noShadow {
+  .#{variables.$block-class}__right-sticky-column-cell {
+    box-shadow: none;
+  }
+}
+
+.#{variables.$block-class}__right-sticky-column-offset-scroll {
+  /* stylelint-disable-next-line */
+  inset-inline-end: 6px !important; // offset the vertical scroll bar in the table body
+}
+
+.#{variables.$block-class}__select-all-toggle-on.#{variables.$block-class}__select-all-sticky-left {
+  position: sticky;
+  z-index: 10;
+  inset-inline-start: 0;
+}

package/scss/components/Datagrid/styles/_variables.scss

@@ -0,0 +1,10 @@
+//
+// Copyright IBM Corp. 2022, 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 '../../../global/styles/project-settings';
+
+$block-class: #{project-settings.$pkg-prefix}--datagrid;

package/scss/components/Datagrid/styles/addons/_CustomizeColumnsTearsheet.scss

@@ -0,0 +1,77 @@
+//
+// Copyright IBM Corp. 2022, 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.
+//
+
+// stylelint-disable carbon/layout-use
+
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type' as *;
+@use '@carbon/type/scss/font-family';
+@use '@carbon/layout' as *;
+@use '@carbon/layout/scss/convert';
+
+@use '../../../../global/styles/project-settings' as c4p-settings;
+@use '../variables';
+
+.#{variables.$block-class}__customize-columns-tearsheet {
+  .#{c4p-settings.$pkg-prefix}--tearsheet__content {
+    display: flex;
+    flex-flow: column;
+  }
+}
+
+.#{variables.$block-class}__customize-columns-tearsheet--actions
+  input[role='searchbox'] {
+  block-size: spacing.$spacing-09;
+  border-block-end: 1px solid $background-active;
+  padding-inline-start: spacing.$spacing-09;
+}
+
+.#{c4p-settings.$carbon-prefix}--form-item.#{c4p-settings.$carbon-prefix}--checkbox-wrapper.#{variables.$block-class}__customize-columns-checkbox {
+  display: flex;
+  flex: initial;
+  align-items: center;
+  justify-content: center;
+}
+
+.#{variables.$block-class}__customize-columns-column-list
+  .#{variables.$block-class}__customize-columns-checkbox-wrapper.#{c4p-settings.$carbon-prefix}--form-item {
+  margin-block-end: 0;
+}
+
+.#{variables.$block-class}__customize-columns-column-list {
+  position: relative; // needed for the react-dnd, otherwise the drag preview will not work correctly
+  overflow: auto;
+}
+
+.#{variables.$block-class}__customize-columns-select-all {
+  align-items: center;
+}
+
+.#{variables.$block-class}__customize-columns-select-all,
+.#{variables.$block-class}__customize-columns-select-all--selected {
+  position: sticky;
+  z-index: 1;
+  display: flex;
+  background-color: $layer;
+  block-size: spacing.$spacing-09;
+  border-block-end: 1px solid $layer-active;
+  inset-block-start: 0;
+  padding-inline-start: spacing.$spacing-08;
+
+  .#{c4p-settings.$carbon-prefix}--checkbox-label-text {
+    @include font-family.font-weight('semibold');
+  }
+}
+
+.#{variables.$block-class}__customize-columns-select-all:hover {
+  background-color: $layer-hover;
+}
+
+.#{variables.$block-class}__customize-columns-select-all--selected {
+  background-color: $layer-selected;
+}

package/scss/components/Datagrid/styles/addons/_FilterFlyout.scss

@@ -0,0 +1,110 @@
+//
+// Copyright IBM Corp. 2022, 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.
+//
+
+// stylelint-disable carbon/layout-use
+
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/layout/scss/convert' as *;
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type' as *;
+@use '@carbon/layout' as *;
+
+@use '../../../../global/styles/project-settings' as c4p-settings;
+@use '../variables';
+
+/* stylelint-disable-next-line -- to-rem carbon replacement for rem */
+$action-set-height: to-rem(64px);
+
+.#{variables.$block-class}-filter-flyout__container {
+  position: relative;
+}
+
+.#{variables.$block-class}-filter-flyout {
+  position: absolute;
+  display: none;
+  background-color: $layer-02;
+  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
+  box-shadow: 0 1px to-rem(8px) 0 rgba(0, 0, 0, 0.25);
+  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
+  inline-size: to-rem(642px);
+  inset-block-start: spacing.$spacing-09;
+  inset-inline-end: 0;
+}
+
+.#{variables.$block-class}-filter-flyout--open {
+  display: grid;
+}
+
+.#{variables.$block-class}-filter-flyout--batch {
+  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
+  grid-template-rows: 1fr to-rem(48px);
+  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
+  min-block-size: to-rem(346px);
+}
+
+.#{variables.$block-class}-filter-flyout--instant {
+  grid-template-rows: 1fr;
+  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
+  min-block-size: to-rem(282px);
+}
+
+.#{variables.$block-class}-filter-flyout__inner-container {
+  padding: spacing.$spacing-05 spacing.$spacing-05 spacing.$spacing-09
+    spacing.$spacing-05;
+}
+
+.#{variables.$block-class}-filter-flyout__inner-container::before {
+  position: absolute;
+  display: block;
+  background-color: $layer-02;
+  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
+  block-size: to-rem(15px);
+  content: '';
+  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
+  inline-size: to-rem(46px);
+  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
+  inset-block-start: to-rem(-7px);
+  inset-inline-end: 1px;
+}
+
+.#{variables.$block-class}-filter-flyout__title {
+  display: block;
+  @include type-style('heading-compact-01');
+
+  margin-block-end: spacing.$spacing-06;
+}
+
+.#{variables.$block-class}-filter-flyout__filters {
+  display: grid;
+  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
+  gap: to-rem(16px) rem(32px);
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+}
+
+// Carbon overrides
+.#{variables.$block-class}-filter-flyout__trigger.#{c4p-settings.$carbon-prefix}--btn {
+  display: flex;
+  justify-content: center;
+  block-size: 3rem;
+  inline-size: 3rem;
+}
+
+.#{variables.$block-class}-filter-flyout__trigger--open.#{c4p-settings.$carbon-prefix}--btn.#{c4p-settings.$carbon-prefix}--btn--icon-only {
+  position: relative;
+  background-color: $layer-02;
+  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
+  box-shadow: 0 1px to-rem(8px) 0 rgba(0, 0, 0, 0.25);
+}
+
+.#{variables.$block-class}-filter-flyout
+  .#{c4p-settings.$carbon-prefix}--fieldset {
+  margin-block-end: 0;
+}
+
+.#{variables.$block-class}-filter-flyout__stacked {
+  grid-template-columns: 1fr;
+}

package/scss/components/Datagrid/styles/addons/_FilterPanel.scss

@@ -0,0 +1,218 @@
+//
+// Copyright IBM Corp. 2022, 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 '../variables' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/layout/scss/convert' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/motion' as *;
+@use '../../../../global/styles/project-settings' as c4p-settings;
+@use './animations' as *;
+
+@property --panel-transform {
+  inherits: true;
+  initial-value: 320px;
+  syntax: '<length>';
+}
+$block-class-component: #{$block-class}-filter-panel;
+
+.#{$block-class-component} {
+  --panel-transform: 320px;
+
+  transform: translateX(0);
+  transition-behavior: allow-discrete;
+  transition-duration: $duration-moderate-01;
+  transition-property: display, opacity, transform;
+
+  @starting-style {
+    opacity: 0;
+    /* stylelint-disable-next-line carbon/layout-use */
+    transform: translateX(var(--panel-transform));
+  }
+
+  // animation only set for older browsers that do not support `transition-behavior: allow-discrete;`
+  &.#{$block-class-component}--open.#{$block-class-component}--left-placement {
+    animation: filter-panel-entrance-left $duration-moderate-01
+      motion(entrance, productive) forwards;
+  }
+
+  &.#{$block-class-component}--closing.#{$block-class-component}--left-placement {
+    animation: filter-panel-exit-left $duration-moderate-01
+      motion(exit, productive) forwards;
+  }
+
+  @supports (transition-behavior: allow-discrete) {
+    &.#{$block-class-component}--closing {
+      opacity: 0;
+      /* stylelint-disable-next-line carbon/layout-use */
+      transform: translateX(var(--panel-transform, 320px));
+      transition-duration: $duration-moderate-01;
+    }
+    &.#{$block-class-component}--closing.#{$block-class-component}--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-component}--open.#{$block-class-component}--left-placement {
+      animation: filter-panel-entrance-reduced $duration-moderate-01
+        motion(exit, productive) forwards;
+      @starting-style {
+        opacity: 0;
+        transform: translateX(0);
+      }
+    }
+    &.#{$block-class-component}--closing.#{$block-class-component}--left-placement {
+      animation: filter-panel-exit-reduced $duration-moderate-01
+        motion(exit, productive) forwards;
+      @starting-style {
+        opacity: 1;
+        transform: translateX(0);
+      }
+    }
+  }
+}
+
+.#{$block-class-component}__container {
+  position: relative;
+  background-color: $layer-01;
+  block-size: clamp(var(--filter-panel-min-height), 100%, 100vh);
+  border-block-start: 1px $layer-accent-01 solid;
+  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
+  inline-size: to-rem(320px);
+}
+
+.#{$block-class-component}--open {
+  border-inline-end: 1px $layer-accent-01 solid;
+}
+
+.#{$block-class-component}__container::before {
+  position: absolute;
+  display: block;
+  background-color: $layer-01;
+  block-size: 1px;
+  content: '';
+  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
+  inline-size: to-rem(47px); // size of filter panel button
+  inset-block-start: -1px; // stylelint-disable-line
+  inset-inline-start: 0;
+}
+
+.#{$block-class-component}__inner-container {
+  position: relative;
+  z-index: 0;
+  overflow: auto;
+  padding: 0 $spacing-05 $spacing-10;
+  overscroll-behavior: contain;
+}
+
+// Adds extra space to the last category so the scroll shows everything visible when you reach the bottom
+.#{$block-class-component}__inner-container
+  .#{$block-class-component}__category:last-of-type {
+  padding-block-end: $spacing-11;
+}
+
+.#{$block-class-component} {
+  position: sticky;
+  inset-block-start: 0;
+}
+
+.#{$block-class-component}__heading {
+  display: flex;
+  justify-content: space-between;
+  border-block-end: 1px solid transparent;
+  padding-inline-start: $spacing-05;
+}
+
+.#{$block-class-component}__heading--with-divider {
+  border-block-end: 1px solid $layer-accent-01;
+}
+
+.#{$block-class-component}__title {
+  padding: $spacing-05 0;
+  @include type-style('heading-compact-02');
+}
+
+.#{$block-class-component}__search {
+  padding: 0 $spacing-05 $spacing-06;
+}
+
+.#{$block-class-component}__category-title {
+  @include type-style('heading-compact-01');
+
+  color: $text-secondary;
+
+  margin-block-end: $spacing-05;
+}
+
+.#{$block-class-component}__category {
+  padding-block-end: $spacing-06;
+}
+
+// This selects all filter elements inside of categories and give them 16px margin bottom
+.#{$block-class-component}__category
+  > *:not(.c4p--datagrid-filter-panel__category-title, .bx--accordion) {
+  margin-block-end: $spacing-05;
+}
+
+.#{$block-class-component}__action-set {
+  position: sticky;
+  z-index: 1; // To layer action set on top of content behind when sticky
+  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
+  block-size: to-rem(64px);
+  inset-block-end: 0;
+  margin-block-start: auto;
+
+  opacity: 1;
+  transform: translateY(64px) translateZ(0);
+
+  &.#{$block-class-component}__animationComplete {
+    transform: none;
+    transition-behavior: allow-discrete;
+    transition-duration: $duration-moderate-01;
+    transition-property: display, opacity, transform;
+  }
+}
+
+// Overrides
+.#{$block-class-component}__container
+  .#{c4p-settings.$carbon-prefix}--accordion__title {
+  margin: 0;
+}
+
+.#{$block-class-component}__container
+  .#{c4p-settings.$carbon-prefix}--accordion__arrow {
+  margin: $spacing-01 0 0;
+}
+
+.#{$block-class-component}__container
+  .#{c4p-settings.$carbon-prefix}--accordion__content {
+  padding-inline: 0;
+}
+
+// Makes sure every child (filter) inside the accordion content has space in between
+.#{$block-class-component}__container
+  .#{c4p-settings.$carbon-prefix}--accordion__content
+  > *:not(:last-child) {
+  margin-block-end: $spacing-05;
+}
+
+.#{c4p-settings.$carbon-prefix}--btn.#{$block-class-component}-open-button {
+  display: flex;
+  justify-content: center;
+  block-size: 3rem;
+  border-block-end: none;
+  border-inline-end: 1px solid $layer-accent-01;
+  inline-size: 3rem;
+}
+
+.#{c4p-settings.$carbon-prefix}--btn.#{$block-class-component}__view-all-button {
+  margin-inline-start: -$spacing-05;
+}

package/scss/components/Datagrid/styles/addons/_RowSizeDropdown.scss

@@ -0,0 +1,94 @@
+/**
+ * Copyright IBM Corp. 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/theme' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '../../../../global/styles/project-settings' as c4p-settings;
+@use '../variables';
+
+.#{variables.$block-class}
+  .#{variables.$block-class}__row-size-toggle-tip-content {
+  background-color: $layer-02;
+  box-shadow:
+    1px 4px 8px -3px $overlay,
+    -1px 6px 8px -5px $overlay;
+}
+
+.#{variables.$block-class}
+  .#{variables.$block-class}__row-size-radio-button
+  .#{c4p-settings.$carbon-prefix}--radio-button__label {
+  color: $text-primary;
+}
+
+.#{variables.$block-class}
+  .#{variables.$block-class}__row-size-toggle-tip
+  .#{c4p-settings.$carbon-prefix}--popover-caret {
+  background-color: $layer-02;
+}
+
+.#{variables.$block-class}
+  .#{c4p-settings.$carbon-prefix}--popover--bottom-right.#{variables.$block-class}__row-height-settings-popover
+  .#{c4p-settings.$carbon-prefix}--popover-caret {
+  // Used to fix layout issue with IconButton caret inside of Popover component
+  inset-inline-start: -$spacing-02;
+}
+
+.#{variables.$block-class}__row-size-toggle-tip-button.#{c4p-settings.$carbon-prefix}--toggletip-button {
+  display: flex;
+  justify-content: center;
+  block-size: $spacing-09;
+  inline-size: $spacing-09;
+}
+
+// Top align cell content for xl row size
+.#{variables.$block-class}
+  table.#{c4p-settings.$carbon-prefix}--data-table--xl.#{variables.$block-class}__vertical-align-center
+  td,
+.#{variables.$block-class}
+  table.#{c4p-settings.$carbon-prefix}--data-table--xl.#{variables.$block-class}__vertical-align-top
+  td {
+  align-items: flex-start;
+  padding-block: $spacing-05;
+
+  &.#{variables.$block-class}__actions-column-cell {
+    padding-inline-start: $spacing-03;
+  }
+}
+
+// Top align header content for xl row size
+.#{variables.$block-class}
+  table.#{c4p-settings.$carbon-prefix}--data-table--xl.#{variables.$block-class}__vertical-align-center
+  th,
+.#{variables.$block-class}
+  table.#{c4p-settings.$carbon-prefix}--data-table--xl.#{variables.$block-class}__vertical-align-top
+  th {
+  .#{c4p-settings.$carbon-prefix}--table-header-label {
+    align-items: flex-start;
+  }
+}
+
+// Top align checkbox row header for xl row size
+.#{variables.$block-class}
+  table.#{c4p-settings.$carbon-prefix}--data-table--xl.#{variables.$block-class}__vertical-align-center
+  .#{variables.$block-class}__checkbox-cell
+  th.cds--table-column-checkbox {
+  align-items: flex-start;
+  padding-block-start: $spacing-04;
+}
+
+.#{variables.$block-class}__row-size__row-settings-trigger--open.#{c4p-settings.$carbon-prefix}--btn--ghost {
+  background-color: $layer-02;
+}
+
+.#{variables.$block-class}
+  table.#{c4p-settings.$carbon-prefix}--data-table--xl.#{variables.$block-class}__vertical-align-center
+  td.#{variables.$block-class}__expandable-row-cell,
+.#{variables.$block-class}
+  table.#{c4p-settings.$carbon-prefix}--data-table--xl.#{variables.$block-class}__vertical-align-top
+  td.#{variables.$block-class}__expandable-row-cell {
+  padding-block-start: $spacing-03;
+}