@carbon/ibm-products 1.24.0 → 2.0.0-rc.0

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

@@ -5,10 +5,10 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import '../../global/styles/project-settings';
-@import '../../global/styles/display-box';
+@use '../../global/styles/project-settings' as c4p-settings;
+@use '../../global/styles/display-box' as *;
 
-$block-class: #{$pkg-prefix}--action-set;
+$block-class: #{c4p-settings.$pkg-prefix}--action-set;
 
 .#{$block-class}__story-container {
   width: 96vw;

package/scss/components/AddSelect/_add-select.scss

@@ -6,359 +6,386 @@
 //
 
 // Standard imports.
-@import '../../global/styles/project-settings';
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/type';
+@use '@carbon/type/scss/font-family' as *;
 
-@import 'carbon-components/scss/components/structured-list/structured-list';
-
-@mixin add-select {
-  $block-class: #{$pkg-prefix}--add-select;
-  $tearsheet-class: #{$pkg-prefix}--tearsheet;
-
-  .#{$block-class}__header {
-    padding: $spacing-05;
-    padding-bottom: 0;
-    border-top: 1px solid $ui-03;
-  }
-
-  .#{$block-class}__body {
-    padding: $spacing-05;
-  }
-
-  .#{$block-class}__selections {
-    &.#{$carbon-prefix}--structured-list {
-      border-top: 1px solid $ui-03;
-      margin-bottom: 0;
-    }
-
-    &-wrapper {
-      display: block;
-    }
-
-    &-cell-wrapper {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-    }
-
-    &-cell-title {
-      display: block;
-      color: $text-01;
-    }
+// Standard imports.
+@use '../../global/styles/project-settings' as *;
 
-    &-cell-subtitle {
-      @include carbon--type-style('label-01');
+$block-class: #{$pkg-prefix}--add-select;
+$tearsheet-class: #{$pkg-prefix}--tearsheet;
 
-      display: block;
-      color: $text-02;
-    }
+.#{$block-class}__header {
+  padding: $spacing-05;
+  padding-bottom: 0;
+  border-top: 1px solid $layer-accent-01;
+}
 
-    &-cell:hover .#{$block-class}__selections-hidden-hover {
-      visibility: visible;
-    }
+.#{$block-class}__body {
+  padding: $spacing-05;
+}
 
-    &-hidden-hover {
-      visibility: hidden;
-    }
+/* stylelint-disable max-nesting-depth */
+.#{$block-class}__selections {
+  &.#{$carbon-prefix}--structured-list {
+    border-top: 1px solid $layer-accent-01;
+    margin-bottom: 0;
+  }
 
-    &-row-selected {
-      background: #e5e5e5;
-    }
+  &-wrapper {
+    display: block;
+  }
 
-    &-row-selected .#{$block-class}__selections-hidden-hover {
-      visibility: visible;
-    }
+  &-cell-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
 
-    &-checkbox {
-      display: flex;
-      align-items: center;
-    }
+  &-cell-title {
+    display: block;
+    color: $text-primary;
+  }
 
-    &-checkbox-label-wrapper {
-      display: flex;
-      margin-left: $spacing-03;
-    }
+  &-cell-subtitle {
+    @include type.type-style('label-01');
 
-    &-checkbox-label-text {
-      display: flex;
-      flex-direction: column;
-    }
+    display: block;
+    color: $text-secondary;
+  }
 
-    &-checkbox-wrapper.#{$carbon-prefix}--form-item {
-      flex: 0;
-    }
+  &-cell:hover .#{$block-class}__selections-hidden-hover {
+    visibility: visible;
+  }
 
-    &-checkbox-wrapper .#{$carbon-prefix}--checkbox-label-text {
-      display: none;
-    }
+  &-hidden-hover {
+    visibility: hidden;
+  }
 
-    &-cell-avatar {
-      margin-right: $spacing-03;
-    }
+  &-row-selected {
+    background: #e5e5e5;
+  }
 
-    &-cell-icon {
-      margin-right: $spacing-03;
-    }
+  &-row-selected .#{$block-class}__selections-hidden-hover {
+    visibility: visible;
   }
 
-  .#{$block-class}__sub-header {
+  &-checkbox {
     display: flex;
-    align-items: flex-end;
-    justify-content: space-between;
+    align-items: center;
   }
 
-  // sidebar
+  &-checkbox-label-wrapper {
+    display: flex;
+    margin-left: $spacing-03;
+  }
 
-  .#{$block-class}__sidebar-header {
+  &-checkbox-label-text {
     display: flex;
-    padding: $spacing-06 $spacing-05 $spacing-03 $spacing-05;
-    border-bottom: 1px solid $ui-03;
+    flex-direction: column;
+  }
 
-    .#{$block-class}__sidebar-title {
-      @include carbon--type-style('productive-heading-02');
-    }
+  &-checkbox-wrapper.#{$carbon-prefix}--form-item {
+    flex: 0;
   }
 
-  .#{$block-class}__sidebar-title {
+  &-checkbox-wrapper .#{$carbon-prefix}--checkbox-label-text {
+    display: none;
+  }
+
+  &-cell-avatar {
     margin-right: $spacing-03;
   }
 
-  .#{$block-class}__sidebar-selected-item {
-    &-title {
-      color: $text-01;
-    }
+  &-cell-icon {
+    margin-right: $spacing-03;
+  }
+}
 
-    &-subtitle {
-      @include carbon--type-style('label-01');
+.#{$block-class} .#{$block-class}__selections-row:hover {
+  .#{$block-class}__selections-radio {
+    color: $interactive;
+  }
 
-      color: $text-02;
-    }
+  .#{$block-class}__selections-view-children svg {
+    color: $interactive;
   }
 
-  .#{$block-class}__sidebar-body {
-    padding: $spacing-05;
+  button.#{$block-class}__selections-view-children.#{$carbon-prefix}--btn--ghost.#{$carbon-prefix}--btn--icon-only
+    .#{$carbon-prefix}--btn__icon
+    path {
+    fill: currentColor;
   }
+}
 
-  .#{$block-class} .#{$block-class}__sidebar-item-header {
-    @include carbon--type-style('label-01');
+.#{$block-class}__sub-header {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+}
 
-    margin-bottom: $spacing-03;
-    color: $text-02;
-  }
+// sidebar
 
-  .#{$block-class} .#{$block-class}__sidebar-item-body {
-    @include carbon--type-style('body-long-01');
+.#{$block-class}__sidebar-header {
+  display: flex;
+  padding: $spacing-06 $spacing-05 $spacing-03 $spacing-05;
+  border-bottom: 1px solid $layer-accent-01;
 
-    margin-bottom: $spacing-05;
+  .#{$block-class}__sidebar-title {
+    @include type.type-style('productive-heading-02');
   }
+}
 
-  .#{$block-class} .#{$block-class}__sidebar-item-remove-button:hover {
-    background: $disabled-02;
-  }
+.#{$block-class}__sidebar-title {
+  margin-right: $spacing-03;
+}
 
-  .#{$block-class} .#{$block-class}__sidebar-accordion-title {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
+.#{$block-class}__sidebar-selected-item {
+  &-title {
+    color: $text-primary;
   }
 
-  // columns
+  &-subtitle {
+    @include type.type-style('label-01');
 
-  .#{$block-class}__columns {
-    display: flex;
-    flex-direction: row;
-    overflow-x: auto;
+    color: $text-secondary;
   }
+}
 
-  // table override
-  .#{$block-class}
-    .#{$block-class}__columns
-    .#{$carbon-prefix}--structured-list-td {
-    height: 0;
-    // stylelint-disable-next-line
-    padding: 0 !important;
-  }
+.#{$block-class}__sidebar-body {
+  padding: $spacing-05;
+}
 
-  .#{$block-class}__column {
-    overflow: auto;
-    max-width: 15rem;
-    flex: 1 0 15rem;
-    padding: $spacing-05;
-    border-top: 1px solid $ui-03;
-    border-right: 1px solid $ui-03;
+.#{$block-class} .#{$block-class}__sidebar-item-header {
+  @include type.type-style('label-01');
 
-    &-search-bar {
-      display: flex;
+  margin-bottom: $spacing-03;
+  color: $text-secondary;
+}
 
-      label {
-        display: none;
-      }
-    }
+.#{$block-class} .#{$block-class}__sidebar-item-body {
+  @include type.type-style('body-long-01');
 
-    &-sort-filter {
-      display: flex;
-    }
+  margin-bottom: $spacing-05;
+}
 
-    .#{$carbon-prefix}--overflow-menu {
-      border-bottom: 1px solid $ui-04;
-    }
-  }
+.#{$block-class} .#{$block-class}__sidebar-item-remove-button:hover {
+  background: $text-disabled;
+}
 
-  .#{$block-class}__tag-container {
-    display: flex;
-    align-items: center;
-    margin-top: $spacing-05;
-    margin-bottom: $spacing-03;
+.#{$block-class} .#{$block-class}__sidebar-accordion-title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
 
-    &-label {
-      margin-right: $spacing-03;
-    }
-  }
+// columns
 
-  .#{$block-class}__global-filter {
-    position: absolute;
-    z-index: 6000;
-    right: 0;
-    width: 100%;
-    max-width: 40rem;
-    background: $ui-01;
-    box-shadow: 0 6px 6px 0 rgba(0, 0, 0, 0.2);
-    transform: translate(0, 100%);
-
-    &-search {
-      position: relative;
-      display: flex;
-      align-items: flex-end;
-    }
+.#{$block-class}__columns {
+  display: flex;
+  flex-direction: row;
+  overflow-x: auto;
+}
 
-    &-content {
-      padding: $spacing-05;
-    }
+// table override
+.#{$block-class}
+  .#{$block-class}__columns
+  .#{$carbon-prefix}--structured-list-td {
+  height: 0;
+  // stylelint-disable-next-line
+  padding: 0 !important;
+}
 
-    &-opts {
-      display: grid;
-      grid-gap: $spacing-05 2rem;
-      grid-template-columns: repeat(2, 1fr);
-    }
+.#{$block-class}__column {
+  overflow: auto;
+  max-width: 15rem;
+  flex: 1 0 15rem;
+  padding: $spacing-05;
+  border-top: 1px solid $border-subtle-01;
+  border-right: 1px solid $border-subtle-01;
 
-    &-applied {
-      display: flex;
-      align-items: center;
-      padding: $spacing-03;
-      background: $ui-01;
+  &-search-bar {
+    display: flex;
+
+    label {
+      display: none;
     }
   }
 
-  .#{$block-class}__global-filter-button-set
-    button.#{$block-class}__global-filter-button {
-    max-width: none;
-    flex: 1;
+  &-sort-filter {
+    display: flex;
   }
 
-  button.#{$block-class}__global-filter-toggle {
-    border-bottom-color: $ui-04;
-    background: $field-01;
-
-    &--open {
-      border-bottom: $ui-01;
-      box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
-    }
+  .#{$carbon-prefix}--overflow-menu {
+    border-bottom: 1px solid $border-strong-01;
   }
+}
 
-  // meta panel
-  .#{$block-class}__meta-panel {
-    padding: $spacing-05;
+.#{$block-class}__tag-container {
+  display: flex;
+  align-items: center;
+  margin-top: $spacing-05;
+  margin-bottom: $spacing-03;
 
-    &-header {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      margin-bottom: $spacing-05;
-    }
+  &-label {
+    margin-right: $spacing-03;
+  }
+}
 
-    &-entry {
-      margin-bottom: $spacing-05;
-    }
+.#{$block-class}__global-filter {
+  position: absolute;
+  z-index: 6000;
+  right: 0;
+  width: 100%;
+  max-width: 40rem;
+  background: $layer-01;
+  box-shadow: 0 6px 6px 0 rgba(0, 0, 0, 0.2);
+  transform: translate(0, 100%);
+
+  &-search {
+    position: relative;
+    display: flex;
+    align-items: flex-end;
   }
 
-  .#{$block-class}__meta-panel p.#{$block-class}__meta-panel-title {
-    @include carbon--type-style('productive-heading-03');
+  &-content {
+    padding: $spacing-05;
   }
 
-  .#{$block-class}__meta-panel p.#{$block-class}__meta-panel-entry-title {
-    @include carbon--type-style('productive-heading-01');
+  &-opts {
+    display: grid;
+    grid-gap: $spacing-05 2rem;
+    grid-template-columns: repeat(2, 1fr);
   }
 
-  .#{$block-class}__meta-panel p.#{$block-class}__meta-panel-entry-body {
-    @include carbon--type-style('body-short-01');
+  &-applied {
+    display: flex;
+    align-items: center;
+    padding: $spacing-03;
+    background: $layer-01;
   }
+}
 
-  // overrides
+.#{$block-class}__global-filter-button-set
+  button.#{$block-class}__global-filter-button {
+  max-width: none;
+  flex: 1;
+}
 
-  .#{$block-class}__tag-container .#{$carbon-prefix}--tag {
-    margin: 0;
-  }
+button.#{$block-class}__global-filter-toggle {
+  border-bottom-color: $border-strong-01;
+  background: $field-01;
 
-  // the influencer sidebar needs to be even with the buttons
-  .#{$block-class} .#{$tearsheet-class}__influencer {
-    max-width: 29rem;
-    flex: 0 0 50%;
+  &--open {
+    border-bottom: $border-strong-01;
+    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
   }
+}
 
-  .#{$block-class} .#{$tearsheet-class}__header-description {
-    color: $text-02;
-  }
+// meta panel
+.#{$block-class}__meta-panel {
+  padding: $spacing-05;
 
-  .#{$block-class} .#{$tearsheet-class}__content {
+  &-header {
     display: flex;
-    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: $spacing-05;
   }
 
-  .#{$block-class} .#{$block-class}__items-label {
-    @include carbon--type-style('productive-heading-01');
+  &-entry {
+    margin-bottom: $spacing-05;
   }
+}
 
-  .#{$block-class}
-    .#{$carbon-prefix}--modal-container--sm
-    .#{$carbon-prefix}--modal-content
-    p {
-    padding-right: 0;
-  }
+.#{$block-class}__meta-panel p.#{$block-class}__meta-panel-title {
+  @include type.type-style('productive-heading-03');
+}
 
-  .#{$block-class} .#{$carbon-prefix}--structured-list-td {
-    height: 4rem;
-    padding: $spacing-05;
-    vertical-align: middle;
-  }
+.#{$block-class}__meta-panel p.#{$block-class}__meta-panel-entry-title {
+  @include type.type-style('productive-heading-01');
+}
 
-  .#{$block-class} .#{$carbon-prefix}--radio-button__appearance {
-    margin: 0 $spacing-05 0 0;
-  }
+.#{$block-class} .#{$carbon-prefix}--structured-list-td {
+  height: $spacing-09;
+  padding-top: 0;
+  padding-bottom: 0;
+  vertical-align: middle;
+}
 
-  .#{$block-class}
-    .#{$carbon-prefix}--radio-button-wrapper
-    .#{$carbon-prefix}--radio-button__label {
-    justify-content: left;
-  }
+.#{$block-class}__meta-panel p.#{$block-class}__meta-panel-entry-body {
+  @include type.type-style('body-short-01');
+}
 
-  .#{$block-class} .#{$carbon-prefix}--breadcrumb .#{$carbon-prefix}--link {
-    cursor: pointer;
-  }
+// overrides
 
-  .#{$block-class} .#{$carbon-prefix}--accordion__item {
-    &:hover .#{$block-class}__sidebar-accordion-title button {
-      opacity: 1;
-    }
+.#{$block-class}__tag-container .#{$carbon-prefix}--tag {
+  margin: 0;
+}
 
-    .#{$block-class}__sidebar-accordion-title button {
-      opacity: 0;
-    }
+// the influencer sidebar needs to be even with the buttons
+.#{$block-class}.#{$tearsheet-class} .#{$tearsheet-class}__influencer {
+  max-width: 29rem;
+  flex: 0 0 50%;
+}
+
+.#{$block-class}.#{$tearsheet-class} .#{$tearsheet-class}__header-description {
+  color: $text-secondary;
+}
+
+.#{$block-class}.#{$tearsheet-class} .#{$tearsheet-class}__content {
+  display: flex;
+  flex-direction: column;
+}
+
+.#{$block-class} .#{$block-class}__items-label {
+  @include type.type-style('productive-heading-01');
+}
+
+.#{$block-class}
+  .#{$carbon-prefix}--modal-container--sm
+  .#{$carbon-prefix}--modal-content
+  p {
+  padding-right: 0;
+}
+
+.#{$block-class} .#{$carbon-prefix}--structured-list-td {
+  height: 4rem;
+  padding: $spacing-05;
+  vertical-align: middle;
+}
+
+.#{$block-class} .#{$carbon-prefix}--radio-button__appearance {
+  margin: 0 $spacing-05 0 0;
+}
+
+.#{$block-class}
+  .#{$carbon-prefix}--radio-button-wrapper
+  .#{$carbon-prefix}--radio-button__label {
+  justify-content: left;
+}
+
+.#{$block-class} .#{$carbon-prefix}--breadcrumb .#{$carbon-prefix}--link {
+  cursor: pointer;
+}
+
+.#{$block-class} .#{$carbon-prefix}--accordion__item {
+  &:hover .#{$block-class}__sidebar-accordion-title button {
+    opacity: 1;
   }
 
-  .#{$block-class} .#{$carbon-prefix}--checkbox-label-text {
-    padding-left: $spacing-03;
+  .#{$block-class}__sidebar-accordion-title button {
+    opacity: 0;
   }
 }
 
-@include exports('add-select') {
-  @include add-select;
+.#{$block-class} .#{$carbon-prefix}--checkbox-label-text {
+  padding-left: $spacing-03;
+}
+
+.#{$carbon-prefix}--tooltip,
+.#{$carbon-prefix}--overflow-menu-options {
+  z-index: 9000;
 }

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

@@ -0,0 +1,19 @@
+//
+// 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.
+//
+
+// AddSelect uses the following Carbon components:
+// Button, OverflowMenu, OverflowMenuItem
+@use '@carbon/react/scss/components/accordion';
+@use '@carbon/react/scss/components/breadcrumb';
+@use '@carbon/react/scss/components/button';
+@use '@carbon/react/scss/components/check-box';
+@use '@carbon/react/scss/components/dropdown';
+@use '@carbon/react/scss/components/overflow-menu';
+@use '@carbon/react/scss/components/radio-button';
+@use '@carbon/react/scss/components/tag';
+@use '@carbon/react/scss/components/text-input';
+@use '@carbon/react/scss/components/structured-list';