@carbon/ibm-products 2.0.0-rc.2 → 2.0.0-rc.21

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

@@ -1,13 +1,13 @@
-/*
-* 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.
-*/
+/**
+ * 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 {
@@ -20,38 +20,57 @@
     width: 100%;
     height: 100%;
   }
-  .#{c4p-settings.$carbon-prefix}--table-header-label button:focus,
-  .#{c4p-settings.$carbon-prefix}--table-header-label button:active,
+  .#{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 svg {
     /* stylelint-disable-next-line declaration-no-important */
     background: none !important;
     /* stylelint-disable-next-line declaration-no-important */
     color: $text-primary !important;
-    /* stylelint-disable-next-line declaration-no-important */
-    outline: none !important;
   }
-  .#{c4p-settings.$carbon-prefix}--table-header-label button {
+
+  .#{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 {
     width: 100%;
     min-width: 100%;
-    min-height: 0;
-    padding: 0;
+    padding: 0 $spacing-05;
     border: none;
     /* stylelint-disable-next-line declaration-no-important */
     background: none !important;
-    box-shadow: none;
     /* stylelint-disable-next-line declaration-no-important */
     color: $text-primary !important;
     font: inherit;
   }
-  .#{c4p-settings.$carbon-prefix}--table-header-label button svg {
+  .#{c4p-settings.$carbon-prefix}--table-header-label
+    .#{c4p-settings.$carbon-prefix}--table-sort
+    svg {
     fill: $text-primary;
+    opacity: 0;
     visibility: hidden;
   }
+
+  .#{c4p-settings.$carbon-prefix}--table-sort.#{$block-class}--table-sort {
+    width: calc(100% + #{$spacing-07}); // offset due to inner label
+    margin: 0 calc(-1 * #{$spacing-05}); // fill width of parent table column header
+  }
 }
 
 .#{$block-class}__sortableColumn:hover,
+.#{$block-class}__sortableColumn:focus-within,
 .#{$block-class}__sortableColumn.#{$block-class}__isSorted {
   .#{c4p-settings.$carbon-prefix}--table-header-label svg {
+    opacity: 1;
     visibility: visible;
   }
 }

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

@@ -7,20 +7,43 @@
 */
 
 @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;
   right: 0;
-  box-shadow: -2px 1px 3px $overlay;
+  display: flex;
+  align-items: center;
+  border-left: 1px solid $layer-accent-01;
 }
 
 .#{variables.$block-class}__right-sticky-column-header {
   /* stylelint-disable-next-line declaration-no-important */
   position: sticky !important;
   right: 0;
-  box-shadow: -2px 1px 3px $overlay;
+}
+
+.#{variables.$block-class}__left-sticky-column-cell {
+  /* stylelint-disable-next-line declaration-no-important */
+  position: sticky !important;
+  left: 0;
+  display: flex;
+  align-items: center;
+  border-right: 1px solid $layer-accent-01;
+}
+
+.#{variables.$block-class}__left-sticky-column-header {
+  /* stylelint-disable-next-line declaration-no-important */
+  position: sticky !important;
+  z-index: 1;
+  left: 0;
+}
+
+.#{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 {
+  left: $spacing-08;
 }
 
 .#{variables.$block-class}__sticky-noShadow {
@@ -37,3 +60,9 @@
   /* stylelint-disable-next-line */
   right: 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: 1;
+  left: 0;
+}

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

@@ -0,0 +1,69 @@
+//
+// 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 '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '@carbon/type/scss/font-family';
+@use '@carbon/layout' as *;
+
+@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'] {
+  height: $spacing-09;
+  padding-left: $spacing-09;
+  border-bottom: 1px solid $background-active;
+}
+
+.#{variables.$block-class}__customize-columns-checkbox-wrapper {
+  display: flex;
+  justify-content: center;
+  padding-left: $spacing-02;
+}
+
+.#{variables.$block-class}__customize-columns-column-list
+  .#{variables.$block-class}__customize-columns-checkbox-wrapper.#{c4p-settings.$carbon-prefix}--form-item {
+  margin-bottom: 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,
+.#{variables.$block-class}__customize-columns-select-all--selected {
+  position: sticky;
+  z-index: 1;
+  top: 0;
+  display: flex;
+  height: $spacing-09;
+  padding-left: $spacing-08;
+  border-bottom: 1px solid $layer-active;
+  background-color: $layer;
+
+  .#{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,87 @@
+/*
+* 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.
+*/
+
+// stylelint-disable carbon/layout-token-use
+
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '@carbon/layout' as *;
+
+@use '../../../../global/styles/project-settings' as c4p-settings;
+@use '../variables';
+
+$action-set-height: rem(64px);
+
+.#{variables.$block-class}-filter-flyout__container {
+  position: relative;
+}
+
+.#{variables.$block-class}-filter-flyout {
+  position: absolute;
+  top: $spacing-09;
+  right: 0;
+  display: none;
+  width: rem(642px);
+  background-color: $layer-02;
+  box-shadow: 0 1px rem(8px) 0 rgba(0, 0, 0, 0.25);
+}
+
+.#{variables.$block-class}-filter-flyout--open {
+  display: grid;
+}
+
+.#{variables.$block-class}-filter-flyout--batch {
+  min-height: rem(346px);
+  grid-template-rows: 1fr rem(48px);
+}
+
+.#{variables.$block-class}-filter-flyout--instant {
+  min-height: rem(282px);
+  grid-template-rows: 1fr;
+}
+
+.#{variables.$block-class}-filter-flyout__inner-container {
+  padding: $spacing-05 $spacing-05 $spacing-09 $spacing-05;
+}
+
+.#{variables.$block-class}-filter-flyout__inner-container::before {
+  position: absolute;
+  top: rem(-7px);
+  right: 1px;
+  display: block;
+  width: rem(46px);
+  height: rem(15px);
+  background-color: $layer-02;
+  content: '';
+}
+
+.#{variables.$block-class}-filter-flyout__title {
+  display: block;
+  @include type-style('heading-compact-01');
+
+  margin-bottom: $spacing-06;
+}
+
+.#{variables.$block-class}-filter-flyout__filters {
+  display: grid;
+  gap: rem(16px) rem(32px);
+  grid-template-columns: 1fr 1fr;
+}
+
+// Carbon overrides
+.#{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;
+  box-shadow: 0 1px rem(8px) 0 rgba(0, 0, 0, 0.25);
+}
+
+.#{variables.$block-class}-filter-flyout
+  .#{c4p-settings.$carbon-prefix}--fieldset {
+  margin-bottom: 0;
+}

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

@@ -0,0 +1,129 @@
+/*
+* 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 '../variables' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '../../../../global/styles/project-settings' as c4p-settings;
+
+.#{$block-class}-filter-panel__container {
+  position: relative;
+  width: rem(320px);
+  height: clamp(var(--filter-panel-min-height), 100%, 100vh);
+  border-top: 1px $layer-accent-01 solid;
+  background-color: $layer-01;
+}
+
+.#{$block-class}-filter-panel--open {
+  border-right: 1px $layer-accent-01 solid;
+}
+
+.#{$block-class}-filter-panel__container::before {
+  position: absolute;
+  top: -1px; // stylelint-disable-line
+  left: 0;
+  display: block;
+  width: rem(47px); // size of filter panel button
+  height: 1px;
+  background-color: $layer-01;
+  content: '';
+}
+
+.#{$block-class}-filter-panel__inner-container {
+  position: relative;
+  z-index: 0;
+  overflow: auto;
+  padding: 0 $spacing-05;
+  overscroll-behavior: contain;
+}
+
+// Adds extra space to the last category so the scroll shows everything visible when you reach the bottom
+.#{$block-class}-filter-panel__inner-container
+  .#{$block-class}-filter-panel__category:last-of-type {
+  padding-bottom: $spacing-11;
+}
+
+.#{$block-class}-filter-panel {
+  position: sticky;
+  top: 0;
+}
+
+.#{$block-class}-filter-panel__heading {
+  display: flex;
+  justify-content: space-between;
+  padding-left: $spacing-05;
+  border-bottom: 1px solid transparent;
+}
+
+.#{$block-class}-filter-panel__heading--with-divider {
+  border-bottom: 1px solid $layer-accent-01;
+}
+
+.#{$block-class}-filter-panel__title {
+  padding: $spacing-05 0;
+  @include type-style('heading-compact-02');
+}
+
+.#{$block-class}-filter-panel__search {
+  padding: 0 $spacing-05 $spacing-06;
+}
+
+.#{$block-class}-filter-panel__category-title {
+  @include type-style('heading-compact-01');
+
+  margin-bottom: $spacing-05;
+  color: $text-secondary;
+}
+
+.#{$block-class}-filter-panel__category {
+  padding-bottom: $spacing-06;
+}
+
+// This selects all filter elements inside of categories and give them 16px margin bottom
+.#{$block-class}-filter-panel__category
+  > *:not(.c4p--datagrid-filter-panel__category-title, .bx--accordion) {
+  margin-bottom: $spacing-05;
+}
+
+.#{$block-class}-filter-panel__action-set {
+  position: sticky;
+  z-index: 1; // To layer action set on top of content behind when sticky
+  bottom: 0;
+  height: rem(64px);
+  margin-top: auto;
+}
+
+// Overrides
+.#{$block-class}-filter-panel__container
+  .#{c4p-settings.$carbon-prefix}--accordion__title {
+  margin: 0;
+}
+
+.#{$block-class}-filter-panel__container
+  .#{c4p-settings.$carbon-prefix}--accordion__arrow {
+  margin: $spacing-01 0 0;
+}
+
+.#{$block-class}-filter-panel__container
+  .#{c4p-settings.$carbon-prefix}--accordion__content {
+  padding-right: 0;
+  padding-left: 0;
+}
+
+// Makes sure every child (filter) inside the accordion content has space in between
+.#{$block-class}-filter-panel__container
+  .#{c4p-settings.$carbon-prefix}--accordion__content
+  > *:not(:last-child) {
+  margin-bottom: $spacing-05;
+}
+
+.#{c4p-settings.$carbon-prefix}--btn.c4p--datagrid-filter-panel-open-button {
+  border-right: 1px solid $layer-accent-01;
+  border-bottom: none;
+}

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

@@ -8,18 +8,26 @@
 
 @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}__row-size-dropdown {
-  position: absolute;
   padding: $spacing-05;
-  background-color: $background;
+  background-color: $layer-02;
 
   box-shadow: 1px 4px 8px -3px $overlay, -1px 6px 8px -5px $overlay;
 }
 
-.#{variables.$block-class}__row-size-button--open {
-  background-color: $background;
+.#{c4p-settings.$carbon-prefix}--btn--ghost.#{variables.$block-class}__row-size-button--open {
+  background-color: $layer-02;
 
   box-shadow: 1px 4px 8px -3px $overlay, -1px 6px 8px -5px $overlay;
 }
+
+.#{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
+  /* stylelint-disable-next-line carbon/layout-token-use */
+  left: -4px;
+}

package/scss/components/EditUpdateCards/_carbon-imports.scss

@@ -0,0 +1,9 @@
+//
+// 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.
+//
+
+// Import any Carbon component styles used from EditUpdateCards in this file.
+// EditUpdateCards uses the following Carbon components:

package/scss/components/EditUpdateCards/_edit-update-cards.scss

@@ -0,0 +1,85 @@
+//
+// 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.
+//
+
+// Standard imports.
+
+// Other Carbon settings.
+// TODO: @import 'carbon-components/scss/globals/grid/grid'; if needed
+@use '@carbon/colors/' as *;
+@use '@carbon/motion/' as *;
+@use '../../global/styles/project-settings' as c4p-settings;
+
+// EditUpdateCards uses the following Carbon components:
+// TODO: @import(s) of Carbon component styles used by EditUpdateCards
+
+// EditUpdateCards uses the following Carbon for IBM Products components:
+// TODO: @import(s) of IBM Products component styles used by EditUpdateCards
+
+// Define all component styles in a mixin which is then exported using
+// the Carbon import-once mechanism.
+/* stylelint-disable max-nesting-depth */
+$block-class: #{c4p-settings.$pkg-prefix}--edit-update-cards;
+
+.#{$block-class} {
+  &##{$block-class}--edit {
+    /* Used id for overriding the SVG path fill */
+
+    .#{c4p-settings.$pkg-prefix}--card__header,
+    .#{c4p-settings.$pkg-prefix}--card__footer {
+      button {
+        &:hover {
+          // stylelint-disable-next-line carbon/theme-token-use
+          background-color: $blue-60-hover;
+        }
+
+        &:focus {
+          box-shadow: none;
+        }
+
+        svg {
+          path {
+            // stylelint-disable-next-line carbon/theme-token-use
+            fill: $white-0;
+          }
+        }
+
+        &.#{c4p-settings.$pkg-prefix}--loading {
+          &:hover {
+            background-color: transparent;
+          }
+        }
+      }
+    }
+    .#{c4p-settings.$pkg-prefix}--card__footer {
+      // stylelint-disable-next-line carbon/theme-token-use
+      background-color: $blue-60;
+      // stylelint-disable-next-line carbon/theme-token-use
+      color: $white-0;
+    }
+    .#{c4p-settings.$pkg-prefix}--loading {
+      animation-duration: $duration-slow-02;
+      animation-fill-mode: forwards;
+      animation-iteration-count: infinite;
+      animation-name: rotate;
+      animation-timing-function: motion(standard, productive);
+
+      &:hover {
+        background-color: transparent;
+      }
+    }
+  }
+  &:not(.#{$block-class}__actions-bottom) {
+    &##{$block-class}--edit {
+      .#{c4p-settings.$pkg-prefix}--card__header {
+        // stylelint-disable-next-line carbon/theme-token-use
+        background-color: $blue-60;
+        // stylelint-disable-next-line carbon/theme-token-use
+        color: $white-0;
+      }
+    }
+  }
+}

package/scss/components/EditUpdateCards/_index-with-carbon.scss

@@ -0,0 +1,9 @@
+//
+// 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 './carbon-imports';
+@use './edit-update-cards';

package/scss/components/EditUpdateCards/_index.scss

@@ -0,0 +1,8 @@
+//
+// 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 './edit-update-cards';

package/scss/components/EditUpdateCards/_storybook-styles.scss

@@ -0,0 +1,55 @@
+//
+// 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 '@carbon/colors/' as *;
+@use '@carbon/type/' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '../../global/styles/project-settings' as c4p-settings;
+
+// make the root full width to get a better idea of how the cards
+// look in a real grid situation
+/* stylelint-disable max-nesting-depth */
+#root {
+  width: 100%;
+}
+
+$block-class: #{c4p-settings.$pkg-prefix}--edit-update-cards;
+
+.#{$block-class} {
+  textarea,
+  input,
+  select {
+    width: 100%;
+    height: auto;
+    padding: 0;
+    // stylelint-disable-next-line
+    font-size: type-scale(3);
+    letter-spacing: 0;
+    // stylelint-disable-next-line carbon/type-token-use
+    line-height: 1.5;
+  }
+}
+.#{$block-class}--items {
+  margin-bottom: $spacing-06;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+.#{$block-class}--icon-text {
+  display: flex;
+  align-items: center;
+
+  svg {
+    margin-right: $spacing-01;
+
+    path {
+      // stylelint-disable-next-line carbon/theme-token-use
+      fill: $green-50;
+    }
+  }
+}

package/scss/components/FilterSummary/_filter-summary.scss

@@ -0,0 +1,21 @@
+//
+// Copyright IBM Corp. 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' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+
+$block-class: #{$pkg-prefix}--filter-summary;
+
+.#{$block-class} {
+  display: flex;
+  width: 100%;
+  height: rem(48px);
+  align-items: center;
+  padding: $spacing-03;
+  border-top: 1px solid $border-subtle-01;
+  background: $layer-01;
+}

package/scss/components/FilterSummary/_index.scss

@@ -0,0 +1,10 @@
+//
+// Copyright IBM Corp. 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.
+//
+
+// An index file is most useful when you have multiple components
+
+@use './filter-summary';

package/scss/components/FilterSummary/_storybook-styles.scss

@@ -0,0 +1,14 @@
+//
+// 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.
+//
+#root {
+  width: 100%;
+}
+
+.preview-position-fix {
+  max-width: 700px;
+  margin: 0 auto;
+}

package/scss/components/{InlineEdit → InlineEditV1}/_index-with-carbon.scss

@@ -6,4 +6,4 @@
 //
 
 @use './carbon-imports';
-@use './inline-edit';
+@use './inline-edit-v1';