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

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

@@ -1,85 +0,0 @@
-/**
- * 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

@@ -1,72 +0,0 @@
-/**
- * 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

@@ -1,10 +0,0 @@
-//
-// 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

@@ -1,77 +0,0 @@
-//
-// 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

@@ -1,110 +0,0 @@
-//
-// 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

@@ -1,218 +0,0 @@
-//
-// 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

@@ -1,94 +0,0 @@
-/**
- * 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;
-}