@carbon/ibm-products 2.0.0-rc.32 → 2.0.0-rc.33

package/scss/components/Datagrid/styles/_index.scss

@@ -1,22 +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 './datagrid';
-@use './useNestedRows';
-@use './useNestedTable';
-@use './useSortableColumns';
-@use './useColumnRightAlign';
-@use './useColumnCenterAlign';
-@use './useStickyColumn';
-@use './useActionsColumn';
-@use './addons/CustomizeColumnsTearsheet';
-@use './addons/RowSizeDropdown';
-@use './addons/FilterFlyout';
-@use './addons/FilterPanel';
-@use './useSelectAllToggle';
-@use './useExpandedRow';
-@use './draggableElement';
-@use './useInlineEdit';

package/scss/components/Datagrid/styles/_useActionsColumn.scss

@@ -1,39 +0,0 @@
-/*
-* Licensed Materials - Property of IBM
-* 5724-Q36
-* (c) Copyright IBM Corp. 2021
-* US Government Users Restricted Rights - Use, duplication or disclosure
-* restricted by GSA ADP Schedule Contract with IBM Corp.
-*/
-
-@use '@carbon/styles/scss/spacing' as *;
-@use '@carbon/styles/scss/theme';
-@use './variables';
-
-.#{variables.$block-class}__actions-column-cell {
-  display: flex;
-  flex-flow: column;
-  justify-content: center;
-}
-
-.#{variables.$block-class}__actions-column-content {
-  display: flex;
-  justify-content: center;
-}
-
-.#{variables.$block-class}__actions-column-loading {
-  margin-bottom: $spacing-03;
-}
-
-.#{variables.$block-class}
-  .#{variables.$block-class}__disabled-row-action-button {
-  cursor: not-allowed;
-}
-
-.#{variables.$block-class} .#{variables.$block-class}__disabled-row-action {
-  pointer-events: none;
-}
-
-.#{variables.$block-class} .#{variables.$block-class}__disabled-row-action svg {
-  fill: theme.$layer-selected-disabled;
-}

package/scss/components/Datagrid/styles/_useColumnCenterAlign.scss

@@ -1,20 +0,0 @@
-/*
-* Licensed Materials - Property of IBM
-* 5724-Q36
-* (c) Copyright IBM Corp. 2020
-* US Government Users Restricted Rights - Use, duplication or disclosure
-* restricted by GSA ADP Schedule Contract with IBM Corp.
-*/
-
-@use '../../../global/styles/project-settings';
-
-$block-class: #{project-settings.$pkg-prefix}--datagrid;
-.#{$block-class}__center-align-header {
-  width: 100%;
-  text-align: center;
-}
-
-.#{$block-class}__center-align-cell-renderer.sortDisabled {
-  margin-right: auto;
-  margin-left: auto;
-}

package/scss/components/Datagrid/styles/_useColumnRightAlign.scss

@@ -1,29 +0,0 @@
-/*
-* Licensed Materials - Property of IBM
-* 5724-Q36
-* (c) Copyright IBM Corp. 2020
-* US Government Users Restricted Rights - Use, duplication or disclosure
-* restricted by GSA ADP Schedule Contract with IBM Corp.
-*/
-
-@use './variables';
-
-.#{variables.$block-class}__right-align-header {
-  width: 100%;
-  text-align: right;
-}
-
-.#{variables.$block-class}__right-align-header button {
-  text-align: right;
-}
-
-.#{variables.$block-class}__right-align-cell-renderer {
-  width: 100%;
-  /* stylelint-disable-next-line carbon/layout-token-use */
-  padding-right: 23px;
-  text-align: right;
-}
-
-.#{variables.$block-class}__right-align-cell-renderer.sortDisabled {
-  padding-right: 0;
-}

package/scss/components/Datagrid/styles/_useExpandedRow.scss

@@ -1,60 +0,0 @@
-/*
-* Licensed Materials - Property of IBM
-* 5724-Q36
-* (c) Copyright IBM Corp. 2022
-* US Government Users Restricted Rights - Use, duplication or disclosure
-* restricted by GSA ADP Schedule Contract with IBM Corp.
-*/
-
-@use '../../../global/styles/project-settings' as c4p-settings;
-@use '@carbon/styles/scss/theme' as *;
-@use '@carbon/styles/scss/spacing' as *;
-@use './variables';
-
-@mixin shared-pseudo-styles() {
-  height: 1px;
-  background-color: $layer-accent;
-  content: '';
-}
-
-.#{variables.$block-class} .#{variables.$block-class}__expanded-row-content {
-  position: relative;
-  padding: $spacing-05 $spacing-05 $spacing-06 $spacing-10;
-}
-
-.#{variables.$block-class}
-  .#{variables.$block-class}__expanded-row-content::before {
-  position: absolute;
-  /* stylelint-disable-next-line carbon/layout-token-use */
-  top: -1px;
-  right: 0;
-  width: calc(100% - #{$spacing-09});
-  @include shared-pseudo-styles();
-}
-
-.#{variables.$block-class}
-  .#{variables.$block-class}__expanded-row-content::after {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  @include shared-pseudo-styles();
-}
-
-.#{variables.$block-class}__carbon-row.#{variables.$block-class}__carbon-row-expandable
-  .#{variables.$block-class}__cell.#{variables.$block-class}__expandable-row-cell {
-  padding: $spacing-03;
-  padding-right: 0;
-}
-
-.#{variables.$block-class}__row-expander.#{c4p-settings.$carbon-prefix}--btn {
-  display: flex;
-  width: $spacing-07;
-  height: $spacing-07;
-  min-height: $spacing-07;
-  justify-content: center;
-  padding: 0;
-  .#{variables.$block-class}__row-expander--icon {
-    fill: $layer-selected-inverse;
-  }
-}

package/scss/components/Datagrid/styles/_useInlineEdit.scss

@@ -1,431 +0,0 @@
-/*
-* Licensed Materials - Property of IBM
-* 5724-Q36
-* (c) Copyright IBM Corp. 2021
-* US Government Users Restricted Rights - Use, duplication or disclosure
-* restricted by GSA ADP Schedule Contract with IBM Corp.
-*/
-
-@use '../../../global/styles/project-settings' as c4p-settings;
-@use '@carbon/styles/scss/spacing' as *;
-@use '@carbon/styles/scss/theme' as *;
-@use '@carbon/styles/scss/components/button/tokens' as *;
-@use '@carbon/type' as *;
-@use './variables';
-
-$row-heights: (
-  xs: 1.5rem,
-  sm: 2rem,
-  md: 2.5rem,
-  lg: 3rem,
-  xl: 4rem,
-);
-
-@each $size, $size-value in $row-heights {
-  .#{variables.$block-class}
-    .#{variables.$block-class}__inline-edit--outer-cell-button--#{$size}
-    .#{c4p-settings.$carbon-prefix}--text-input,
-  .#{variables.$block-class}
-    .#{variables.$block-class}__inline-edit--outer-cell-button--#{$size}
-    .#{c4p-settings.$carbon-prefix}--number
-    input[type='number'],
-  .#{variables.$block-class}
-    .#{variables.$block-class}__inline-edit--outer-cell-button--#{$size}
-    .#{variables.$block-class}__inline-edit--select
-    .#{c4p-settings.$carbon-prefix}--list-box.#{c4p-settings.$carbon-prefix}--dropdown,
-  .#{variables.$block-class}
-    .#{variables.$block-class}__inline-edit--date.#{variables.$block-class}__inline-edit--date-#{$size}
-    .#{c4p-settings.$carbon-prefix}--date-picker__input {
-    height: $size-value;
-  }
-  .#{variables.$block-class}
-    .#{variables.$block-class}__inline-edit--outer-cell-button--#{$size}
-    .#{c4p-settings.$carbon-prefix}--number__control-btn::before,
-  .#{variables.$block-class}
-    .#{variables.$block-class}__inline-edit--outer-cell-button--#{$size}
-    .#{c4p-settings.$carbon-prefix}--number__control-btn::after {
-    height: calc(#{$size-value} - 0.25rem);
-  }
-  .#{variables.$block-class}
-    .#{variables.$block-class}__inline-edit--outer-cell-button--#{$size}
-    .#{variables.$block-class}__inline-edit--select
-    .#{c4p-settings.$carbon-prefix}--list-box {
-    max-height: none;
-  }
-}
-
-@mixin input-outline($color: $focus) {
-  /* stylelint-disable-next-line carbon/theme-token-use */
-  outline: $spacing-01 solid $color;
-  outline-offset: calc(-1 * #{$spacing-01});
-
-  @media screen and (prefers-contrast) {
-    outline-style: dotted;
-  }
-}
-
-.#{variables.$block-class} {
-  --#{variables.$block-class}--grid-header-height: 0;
-}
-
-.#{variables.$block-class}__inline-edit-cell {
-  display: flex;
-  height: 100%;
-  align-items: center;
-}
-
-.#{variables.$block-class}
-  .#{c4p-settings.$pkg-prefix}--inline-edit__after-input-elements {
-  display: flex;
-  align-items: center;
-}
-
-.#{variables.$block-class}__inline-edit--outer-cell-button {
-  width: 100%;
-  height: calc(100% + 2px); // account for borders
-}
-
-.#{variables.$block-class}__inline-edit--outer-cell-button
-  .#{variables.$block-class}__inline-edit-button {
-  position: relative;
-  display: flex;
-  width: 100%;
-  height: 100%;
-  align-items: center;
-  justify-content: space-between;
-  padding-left: $spacing-05;
-  color: $text-secondary;
-  cursor: pointer;
-  outline: 0; // handled by active class
-  .#{variables.$block-class}__label-icon {
-    height: $spacing-05;
-    padding-right: $spacing-05;
-  }
-  &.#{variables.$block-class}__inline-edit-button--non-edit {
-    padding-left: 0;
-    cursor: default;
-  }
-  .#{variables.$block-class}__inline-edit-button-icon {
-    height: $spacing-05;
-    fill: $icon-secondary;
-  }
-  &.#{variables.$block-class}__inline-edit-button--date {
-    @include font-family($name: mono);
-  }
-  &.#{variables.$block-class}__inline-edit-button--selection {
-    justify-content: flex-start;
-  }
-  // Always show renderIcon if inline edit columns are less than half of total columns
-  &:not(
-      .#{variables.$block-class}__inline-edit-button--edit-less-than-half-of-total-cols
-    ) {
-    .#{variables.$block-class}__inline-edit-button-icon {
-      display: none;
-    }
-
-    /* stylelint-disable-next-line */
-    &:hover {
-      .#{variables.$block-class}__inline-edit-button-icon {
-        display: block;
-      }
-    }
-  }
-}
-
-.#{variables.$block-class}__inline-edit--outer-cell-button
-  .#{variables.$block-class}__inline-edit-button:not(
-    [data-disabled='true']
-  ):hover {
-  background-color: $layer-active;
-  color: $text-primary;
-  .#{variables.$block-class}__inline-edit-button-icon {
-    fill: $icon-primary;
-  }
-}
-
-.#{variables.$block-class}__inline-edit--outer-cell-button
-  .#{variables.$block-class}__inline-edit-button.#{variables.$block-class}__inline-edit-button--active:not(
-    [data-disabled='true']
-  ) {
-  background-color: $layer-active;
-  color: $text-primary;
-  cursor: text;
-}
-
-.#{variables.$block-class}__inline-edit--outer-cell-button
-  .#{variables.$block-class}__inline-edit-button.#{variables.$block-class}__inline-edit-button--active {
-  @include input-outline;
-}
-
-.#{variables.$block-class}__inline-edit--outer-cell-button
-  .#{variables.$block-class}__inline-edit-button--disabled:not(
-    .#{variables.$block-class}__inline-edit-button--edit-less-than-half-of-total-cols
-  ) {
-  color: $button-disabled;
-  cursor: not-allowed;
-}
-
-.#{variables.$block-class}__inline-edit--outer-cell-button
-  .#{variables.$block-class}__inline-edit-button
-  .#{variables.$block-class}__inline-edit-button-label {
-  overflow: hidden;
-  padding-right: $spacing-05;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.#{variables.$block-class}__inline-edit--outer-cell-button
-  .#{variables.$block-class}__inline-edit-button
-  .#{variables.$block-class}__inline-edit-button-label.#{variables.$block-class}__inline-edit-button-label-with-icon {
-  padding-right: $spacing-09;
-}
-
-.#{variables.$block-class}__inline-edit--outer-cell-button
-  .#{c4p-settings.$carbon-prefix}--text-input,
-.#{variables.$block-class}__inline-edit--outer-cell-button
-  .#{c4p-settings.$carbon-prefix}--number
-  input[type='number'] {
-  height: $spacing-09;
-}
-
-.#{variables.$block-class}__inline-edit-button-icon {
-  position: absolute;
-  right: $spacing-05;
-}
-
-.#{variables.$block-class}__table-with-inline-edit.#{c4p-settings.$carbon-prefix}--data-table
-  .#{variables.$block-class}__cell-inline-edit {
-  position: relative;
-  padding: 0;
-  .#{variables.$block-class}__inline-edit-button--non-edit {
-    padding-left: $spacing-05;
-  }
-
-  .#{c4p-settings.$carbon-prefix}--number input[type='number'] {
-    min-width: auto;
-    padding-right: $spacing-05;
-  }
-}
-
-.#{variables.$block-class}__inline-edit--select
-  .#{variables.$block-class}__inline-edit--select-item {
-  padding-bottom: $spacing-05;
-  padding-left: $spacing-05;
-}
-
-.#{variables.$block-class}__inline-edit--select.#{c4p-settings.$carbon-prefix}--dropdown,
-.#{variables.$block-class}__inline-edit--date
-  .#{c4p-settings.$carbon-prefix}--date-picker {
-  width: inherit;
-}
-
-.#{variables.$block-class}__inline-edit--select.#{c4p-settings.$carbon-prefix}--dropdown,
-.#{variables.$block-class}__inline-edit--date
-  .#{c4p-settings.$carbon-prefix}--date-picker.#{c4p-settings.$carbon-prefix}--date-picker--single
-  .#{c4p-settings.$carbon-prefix}--date-picker__input {
-  width: 100%;
-  height: $spacing-09; // default row height
-  max-height: none;
-}
-
-.#{variables.$block-class}__inline-edit--date
-  .#{c4p-settings.$carbon-prefix}--date-picker-container {
-  width: inherit;
-}
-
-.#{variables.$block-class}__inline-edit--date.#{c4p-settings.$carbon-prefix}--date-picker.#{c4p-settings.$carbon-prefix}--date-picker--single
-  .#{c4p-settings.$carbon-prefix}--date-picker__input {
-  overflow: hidden;
-  width: 100%;
-  max-width: none;
-  padding-right: $spacing-07;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.#{variables.$block-class}
-  .#{c4p-settings.$carbon-prefix}--data-table
-  .#{variables.$block-class}__carbon-row-hover-active
-  td {
-  border-top-color: $layer-hover;
-  background-color: $layer-hover;
-}
-
-// Custom border/outline for the focus region area, because of the scrolling
-// containers, using default border caused grid area width to be changed and
-// outlines were not present be
-.#{variables.$block-class}
-  .#{variables.$block-class}__grid-container-grid-active::before {
-  position: absolute;
-  z-index: 2;
-  bottom: 0;
-  left: 0;
-  width: 2px;
-  height: calc(
-    100% - 50px - var(--#{variables.$block-class}--grid-header-height)
-  );
-  background-color: $link-inverse;
-  content: '';
-}
-
-.#{variables.$block-class}
-  .#{variables.$block-class}__grid-container-grid-active::after {
-  position: absolute;
-  z-index: 2;
-  right: 0;
-  bottom: 0;
-  width: 2px;
-  height: calc(
-    100% - 50px - var(--#{variables.$block-class}--grid-header-height)
-  );
-  background-color: $link-inverse;
-  content: '';
-}
-
-.#{variables.$block-class}
-  .#{variables.$block-class}__grid-container-grid-active
-  .#{c4p-settings.$carbon-prefix}--data-table-content::before {
-  position: absolute;
-  z-index: 2;
-  top: 0;
-  right: 0;
-  left: 0;
-  width: var(--#{variables.$block-class}--grid-width);
-  height: 2px;
-  background-color: $link-inverse;
-}
-
-.#{variables.$block-class}
-  .#{variables.$block-class}__grid-container-grid-active.#{variables.$block-class}__grid-container-grid-active--without-toolbar::before,
-.#{variables.$block-class}
-  .#{variables.$block-class}__grid-container-grid-active.#{variables.$block-class}__grid-container-grid-active--without-toolbar::after {
-  height: calc(
-    100% - 2px - var(--#{variables.$block-class}--grid-header-height)
-  );
-}
-
-.#{variables.$block-class}
-  .#{variables.$block-class}__grid-container-grid-active
-  .#{variables.$block-class}__table-container {
-  outline: 2px solid $link-inverse;
-  outline-offset: -2px;
-}
-
-.#{variables.$block-class}
-  .#{variables.$block-class}__grid-container-inline-edit
-  .#{variables.$block-class}__table-container {
-  padding-top: $spacing-01;
-}
-
-.#{variables.$block-class}
-  .#{variables.$block-class}__inline-edit--outer-cell-button--invalid
-  [data-invalid]
-  ~ .#{c4p-settings.$carbon-prefix}--form-requirement,
-.#{variables.$block-class}
-  .#{variables.$block-class}__inline-edit--outer-cell-button--invalid
-  [data-invalid]
-  .#{c4p-settings.$carbon-prefix}--form-requirement {
-  position: absolute;
-  z-index: 3;
-  top: calc(100% - #{$spacing-01});
-  width: 100%;
-  padding: $spacing-03 $spacing-06 $spacing-03 $spacing-03;
-  margin: 0;
-  background-color: $layer-01;
-  outline: $spacing-01 solid $support-error;
-  outline-offset: calc(-1 * #{$spacing-01});
-}
-
-.#{variables.$block-class}
-  .#{variables.$block-class}__inline-edit--outer-cell-button--invalid
-  .#{c4p-settings.$carbon-prefix}--list-box[data-invalid]:focus-within
-  ~ .#{c4p-settings.$carbon-prefix}--form-requirement {
-  outline: $spacing-01 solid $focus;
-}
-
-.#{variables.$block-class}
-  .#{variables.$block-class}__inline-edit--outer-cell-button--invalid
-  .#{c4p-settings.$carbon-prefix}--list-box__invalid-icon,
-.#{variables.$block-class}
-  .#{variables.$block-class}__inline-edit--outer-cell-button--invalid
-  .#{c4p-settings.$carbon-prefix}--text-input__invalid-icon,
-.#{variables.$block-class}
-  .#{variables.$block-class}__inline-edit--outer-cell-button--invalid
-  .#{c4p-settings.$carbon-prefix}--number__invalid {
-  z-index: 4;
-  top: calc(100% + #{$spacing-04} + #{$spacing-01});
-  right: $spacing-03;
-}
-
-.#{variables.$block-class}
-  .#{variables.$block-class}__inline-edit--outer-cell-button--invalid
-  .#{c4p-settings.$carbon-prefix}--number__invalid {
-  top: calc(100% + #{$spacing-02} + #{$spacing-01});
-}
-
-.#{variables.$block-class}
-  .#{variables.$block-class}__inline-edit--outer-cell-button--invalid
-  .#{c4p-settings.$carbon-prefix}--form-requirement::before {
-  position: absolute;
-  top: 0;
-  left: $spacing-01;
-  width: calc(100% - (#{$spacing-01} * 2));
-  height: $spacing-01;
-  background-color: $layer-01;
-  content: '';
-}
-
-.#{variables.$block-class}__inline-edit--outer-cell-button--invalid
-  .#{c4p-settings.$carbon-prefix}--form-requirement::after {
-  position: absolute;
-  top: $spacing-01;
-  left: $spacing-03;
-  width: calc(100% - (#{$spacing-03} * 2));
-  height: 1px;
-  background-color: $layer-accent-01;
-  content: '';
-}
-
-.#{variables.$block-class} tbody tr:hover {
-  .#{variables.$block-class}__inline-edit--outer-cell-button--invalid
-    .#{c4p-settings.$carbon-prefix}--form-requirement::before {
-    background-color: $layer-accent-01;
-  }
-  .#{variables.$block-class}__inline-edit--outer-cell-button--invalid
-    .#{c4p-settings.$carbon-prefix}--form-requirement::after {
-    background-color: transparent;
-  }
-}
-
-// Keep input focus states using $support-01 when inline edit cell is invalid
-.#{variables.$block-class}
-  .#{variables.$block-class}__inline-edit--outer-cell-button--invalid
-  .#{c4p-settings.$carbon-prefix}--text-input:focus,
-.#{variables.$block-class}
-  .#{variables.$block-class}__inline-edit--outer-cell-button--invalid
-  .#{c4p-settings.$carbon-prefix}--number
-  input[type='number']:focus,
-.#{variables.$block-class}
-  .#{variables.$block-class}__inline-edit--outer-cell-button--invalid
-  .#{c4p-settings.$carbon-prefix}--number
-  input[type='number']:focus
-  ~ .#{c4p-settings.$carbon-prefix}--number__controls
-  .#{c4p-settings.$carbon-prefix}--number__control-btn:hover,
-.#{variables.$block-class}
-  .#{variables.$block-class}__inline-edit--outer-cell-button--invalid
-  .#{c4p-settings.$carbon-prefix}--number__control-btn:focus {
-  outline-color: $support-error;
-}
-
-.#{variables.$block-class} .#{c4p-settings.$carbon-prefix}--text-input:focus {
-  background: $field-01;
-}
-
-.#{variables.$block-class}
-  .#{variables.$block-class}__inline-edit--outer-cell-button--invalid
-  .#{c4p-settings.$carbon-prefix}--number
-  input[type='number'][data-invalid]:focus
-  ~ .#{c4p-settings.$carbon-prefix}--number__controls
-  .#{c4p-settings.$carbon-prefix}--number__control-btn.up-icon::after {
-  background-color: $support-error;
-}

package/scss/components/Datagrid/styles/_useNestedRows.scss

@@ -1,71 +0,0 @@
-/*
-* Licensed Materials - Property of IBM
-* 5724-Q36
-* (c) Copyright IBM Corp. 2020 - 2022
-* US Government Users Restricted Rights - Use, duplication or disclosure
-* restricted by GSA ADP Schedule Contract with IBM Corp.
-*/
-
-@use '@carbon/styles/scss/theme' as *;
-@use '@carbon/styles/scss/spacing' as *;
-@use '../../../global/styles/project-settings' as c4p-settings;
-@use '@carbon/styles/scss/motion' as *;
-@use './variables' as *;
-
-.#{c4p-settings.$carbon-prefix}--data-table
-  tr.#{$block-class}__carbon-nested-row {
-  border-left: 1px solid transparent;
-
-  .#{$block-class}__cell {
-    border-bottom: 1px solid $layer-accent-01;
-  }
-}
-
-.#{$block-class} .#{$block-class}__expander-icon {
-  transition: transform $duration-fast-01 motion('standard', 'productive');
-}
-
-.#{$block-class} .#{$block-class}__expander-icon--open {
-  transform: rotate(90deg);
-}
-
-.#{$block-class}__expanded-row
-  .#{$block-class}__carbon-row-expanded
-  td:first-child {
-  border-bottom: none;
-}
-
-.#{$block-class} .#{$block-class}__carbon-row-expandable {
-  position: relative;
-}
-
-.#{$block-class}
-  tr.#{$block-class}__carbon-nested-row
-  + :not(tr.#{$block-class}__carbon-nested-row)::before {
-  position: absolute;
-  /* stylelint-disable-next-line carbon/layout-token-use */
-  top: -1px;
-  left: 0;
-  width: 100%;
-  height: 1px;
-  background-color: $border-subtle;
-  content: '';
-}
-
-.#{$block-class} tr.#{$block-class}__carbon-nested-row {
-  td:first-child:empty,
-  .#{$block-class}__expandable-row-cell {
-    border-bottom: none;
-  }
-}
-
-.#{c4p-settings.$carbon-prefix}--data-table
-  td.#{$block-class}__expandable-row-cell {
-  padding-left: $spacing-03;
-}
-
-.#{$block-class}__carbon-row-expanded {
-  .#{$block-class}__expandable-row-cell {
-    border-bottom: none;
-  }
-}