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

package/scss/components/ActionBar/_index.scss

@@ -0,0 +1,8 @@
+//
+// Copyright IBM Corp. 2020, 2021
+//
+// 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 './action-bar';

package/scss/components/ActionSet/_action-set.scss

@@ -0,0 +1,126 @@
+//
+// Copyright IBM Corp. 2021, 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/layout/scss/convert' as *;
+
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/spacing' as *;
+
+@use '../../global/styles/project-settings' as c4p-settings;
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+$action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
+
+.#{$action-set-block-class} {
+  align-items: stretch;
+  justify-content: flex-end;
+  background-color: $layer-01;
+}
+
+.#{$action-set-block-class} .#{$action-set-block-class}__action-button {
+  @include type.type-style('body-short-01');
+
+  align-items: center;
+  margin: 0;
+
+  &.#{$action-set-block-class}__action-button--expressive {
+    block-size: $spacing-10;
+    padding-block: $spacing-05 $spacing-07;
+  }
+}
+
+.#{$action-set-block-class}.#{c4p-settings.$carbon-prefix}--btn-set
+  .#{$action-set-block-class}__action-button.#{c4p-settings.$carbon-prefix}--btn.#{c4p-settings.$carbon-prefix}--btn--expressive,
+.#{$action-set-block-class}.#{c4p-settings.$carbon-prefix}--btn-set
+  .#{$action-set-block-class}__action-button.#{c4p-settings.$carbon-prefix}--btn {
+  max-inline-size: none;
+}
+
+.#{$action-set-block-class}:not(.#{$action-set-block-class}--stacking)
+  .#{$action-set-block-class}__action-button--ghost {
+  padding-inline-start: $spacing-07;
+}
+
+// For row-single in medium,
+// or for ghosts in row-single,
+// buttons are 100% width
+.#{$action-set-block-class}.#{$action-set-block-class}--row-single.#{$action-set-block-class}--md
+  .#{$action-set-block-class}__action-button,
+.#{$action-set-block-class}.#{$action-set-block-class}--row-single
+  .#{$action-set-block-class}__action-button--ghost {
+  flex: 0 0 100%;
+}
+
+// For ghosts in row-double,
+// buttons are 75% width and expand to use any remaining space
+.#{$action-set-block-class}.#{$action-set-block-class}--row-double
+  .#{$action-set-block-class}__action-button--ghost {
+  flex: 1 1 75%;
+}
+
+// For row-single in large (non-ghost),
+// or row-double in medium or large,
+// buttons are 50% width
+.#{$action-set-block-class}.#{$action-set-block-class}--row-single.#{$action-set-block-class}--lg
+  .#{$action-set-block-class}__action-button:not(
+    .#{$action-set-block-class}__action-button--ghost
+  ),
+.#{$action-set-block-class}.#{$action-set-block-class}--row-double.#{$action-set-block-class}--md
+  .#{$action-set-block-class}__action-button,
+.#{$action-set-block-class}.#{$action-set-block-class}--row-double.#{$action-set-block-class}--lg
+  .#{$action-set-block-class}__action-button,
+.#{$action-set-block-class}.#{$action-set-block-class}--row-triple
+  .#{$action-set-block-class}__action-button--ghost {
+  flex: 0 1 50%;
+}
+
+// For ghosts in row-triple,
+// buttons are 50% width and expand to use any remaining space
+.#{$action-set-block-class}.#{$action-set-block-class}--row-triple
+  .#{$action-set-block-class}__action-button--ghost {
+  flex: 1 1 50%;
+}
+
+// For row-triple in large (non-ghost),
+// or any non-ghosts in extra large or 2xl,
+// or row-quadruple (non-ghost),
+// buttons are 25% width with a 2xl of 232px
+.#{$action-set-block-class}.#{c4p-settings.$carbon-prefix}--btn-set.#{$action-set-block-class}--row-triple.#{$action-set-block-class}--lg
+  .#{$action-set-block-class}__action-button:not(
+    .#{$action-set-block-class}__action-button--ghost
+  ),
+.#{$action-set-block-class}.#{c4p-settings.$carbon-prefix}--btn-set.#{$action-set-block-class}--xl
+  .#{$action-set-block-class}__action-button:not(
+    .#{$action-set-block-class}__action-button--ghost
+  ),
+.#{$action-set-block-class}.#{c4p-settings.$carbon-prefix}--btn-set.#{$action-set-block-class}--2xl
+  .#{$action-set-block-class}__action-button:not(
+    .#{$action-set-block-class}__action-button--ghost
+  ),
+.#{$action-set-block-class}.#{c4p-settings.$carbon-prefix}--btn-set.#{$action-set-block-class}--row-quadruple
+  .#{$action-set-block-class}__action-button:not(
+    .#{$action-set-block-class}__action-button--ghost
+  ) {
+  flex: 0 1 25%;
+  /* stylelint-disable-next-line function-no-unknown -- to-rem carbon replacement for rem */
+  max-inline-size: to-rem(232px);
+}
+
+.#{$action-set-block-class}.#{c4p-settings.$carbon-prefix}--btn-set.#{$action-set-block-class}--row-quadruple
+  .#{$action-set-block-class}__action-button--ghost {
+  flex: 1 1 25%;
+}
+
+.#{$action-set-block-class}
+  .#{$action-set-block-class}__action-button
+  .#{c4p-settings.$carbon-prefix}--inline-loading {
+  position: absolute;
+  inline-size: $spacing-07;
+  inset-block-start: 0;
+  inset-inline-end: 0;
+}

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

@@ -0,0 +1,11 @@
+//
+// 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.
+//
+
+// ActionBar uses the following Carbon components:
+// Button, OverflowMenu, OverflowMenuItem
+@use '@carbon/styles/scss/components/button';
+@use '@carbon/styles/scss/components/inline-loading';

package/scss/components/ActionSet/_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 './action-set';

package/scss/components/ActionSet/_index.scss

@@ -0,0 +1,8 @@
+//
+// Copyright IBM Corp. 2021, 2021
+//
+// 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 './action-set';

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

@@ -0,0 +1,468 @@
+//
+// 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.
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/type';
+@use '@carbon/type/scss/font-family' as *;
+
+// Standard imports.
+@use '../../global/styles/project-settings' as *;
+
+$block-class: #{$pkg-prefix}--add-select;
+$tearsheet-class: #{$pkg-prefix}--tearsheet;
+
+.#{$block-class}__header {
+  padding: $spacing-05;
+  border-block-start: 1px solid $layer-accent-01;
+  padding-block-end: 0;
+}
+
+.#{$block-class}__body {
+  padding: $spacing-05;
+}
+
+/* stylelint-disable max-nesting-depth */
+.#{$block-class}__selections {
+  &-wrapper {
+    display: block;
+  }
+
+  &-cell-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 $spacing-05;
+    block-size: 3rem;
+    border-block-end: 1px solid $layer-accent-01;
+  }
+
+  &-cell-title {
+    display: block;
+    color: $text-primary;
+  }
+
+  &-cell-subtitle {
+    @include type.type-style('label-01');
+
+    display: block;
+    color: $text-secondary;
+  }
+
+  &-cell {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  &-dropdown .cds--dropdown {
+    background: transparent;
+  }
+
+  &-row--selected {
+    background-color: $layer-selected-01;
+  }
+
+  &-row--active {
+    background-color: $layer-active-01;
+  }
+
+  &-form-control {
+    display: flex;
+    align-items: center;
+  }
+
+  &-form-control-wrapper--radio {
+    cursor: pointer;
+  }
+
+  &-form-control-label-wrapper {
+    display: flex;
+    margin-inline-start: $spacing-05;
+  }
+
+  &-form-control-label-text {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &-cell-avatar {
+    margin-inline-end: $spacing-03;
+  }
+
+  &-cell-icon {
+    margin-inline-end: $spacing-03;
+  }
+
+  &-row {
+    border-inline-start: 0.125rem solid transparent;
+  }
+
+  &-row-meta--selected {
+    background-color: $layer-hover-01;
+    border-inline-start: 0.125rem solid $interactive;
+  }
+}
+
+.#{$block-class} .#{$block-class}__selections-row:hover {
+  background: $layer-hover-01;
+
+  .#{$block-class}__selections-cell-title {
+    color: $interactive;
+  }
+
+  .#{$block-class}__selections-view-children svg {
+    color: $interactive;
+  }
+
+  button.#{$block-class}__selections-view-children.#{$carbon-prefix}--btn--ghost.#{$carbon-prefix}--btn--icon-only
+    .#{$carbon-prefix}--btn__icon
+    path {
+    fill: currentColor;
+  }
+}
+
+.#{$block-class}__sub-header {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+
+  &-multi {
+    padding: 0 $spacing-05;
+  }
+}
+
+// sidebar
+
+.#{$block-class}__sidebar-header {
+  display: flex;
+  padding: $spacing-07 $spacing-05 $spacing-03 $spacing-05;
+  border-block-end: 1px solid $layer-accent-01;
+
+  .#{$block-class}__sidebar-title {
+    @include type.type-style('heading-compact-02');
+  }
+}
+
+.#{$block-class}__sidebar-title {
+  margin-inline-end: $spacing-03;
+}
+
+.#{$block-class}__sidebar-selected-item {
+  &-title {
+    color: $text-primary;
+  }
+
+  &-subtitle {
+    @include type.type-style('label-01');
+
+    color: $text-secondary;
+  }
+}
+
+.#{$block-class}__sidebar-body {
+  padding: 0 $spacing-05;
+}
+
+.#{$block-class} .#{$block-class}__sidebar-item-header {
+  @include type.type-style('label-01');
+
+  color: $text-secondary;
+
+  margin-block-end: $spacing-03;
+}
+
+.#{$block-class} .#{$block-class}__sidebar-item-body {
+  @include type.type-style('body-01');
+
+  margin-block-end: $spacing-05;
+}
+
+.#{$block-class} .#{$block-class}__sidebar-item-remove-button:hover {
+  background: $text-disabled;
+}
+
+.#{$block-class} .#{$block-class}__sidebar-accordion-title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+// columns
+
+.#{$block-class}__columns {
+  display: flex;
+  flex-direction: row;
+  flex-grow: 1;
+
+  .#{$block-class}__selections-form-control-label-wrapper {
+    margin-inline-start: $spacing-03;
+  }
+
+  .#{$block-class}__selections-row {
+    border-inline-start: 0;
+  }
+
+  .#{$block-class}__selections .#{$block-class}__selections-cell {
+    padding: 0;
+  }
+
+  .#{$block-class}__selections-cell-wrapper {
+    padding: 0 $spacing-03;
+    block-size: 2rem;
+  }
+
+  .#{$block-class}__tags {
+    padding: 0 $spacing-03;
+    margin-block-end: 0;
+  }
+
+  .#{$block-class}__selections-wrapper-multi {
+    padding: 0;
+  }
+}
+
+.#{$block-class}__selections-wrapper-multi .#{$block-class}__selections-cell {
+  padding: 0 $spacing-05;
+}
+
+.#{$block-class}__selections-row:first-child
+  .#{$block-class}__selections-cell-wrapper {
+  border-block-start: 1px solid $border-subtle-01;
+}
+
+.#{$block-class}__column {
+  flex: 0 0 20rem;
+  padding: $spacing-05;
+  border-block-start: 1px solid $border-subtle-01;
+  border-inline-end: 1px solid $border-subtle-01;
+
+  &-search-bar {
+    display: flex;
+
+    .#{$carbon-prefix}--btn {
+      border-block-end: 1px solid $border-strong-01;
+    }
+  }
+
+  .#{$carbon-prefix}--popover--tab-tip.#{$carbon-prefix}--popover--open
+    .#{$carbon-prefix}--btn {
+    background: $layer;
+  }
+
+  &-filter-popover.#{$carbon-prefix}--popover-content {
+    padding: $spacing-05;
+    min-inline-size: $spacing-13;
+  }
+
+  &-sort-filter {
+    display: flex;
+  }
+
+  .#{$carbon-prefix}--overflow-menu {
+    border-block-end: 1px solid $border-strong-01;
+  }
+}
+
+.#{$block-class}-sort_overflow {
+  z-index: 9999;
+}
+
+.#{$block-class}__tags {
+  display: flex;
+  align-items: center;
+  margin-block: $spacing-05 $spacing-03;
+
+  &-label {
+    margin-inline-end: $spacing-03;
+  }
+}
+
+.#{$block-class}__global-filter {
+  position: absolute;
+  z-index: 999999;
+  background: $layer-01;
+  box-shadow: 0 6px 6px 0 rgba(0, 0, 0, 0.2);
+  inline-size: 100%;
+  inset-inline-end: 0;
+  max-inline-size: 40rem;
+  transform: translate(0, 100%);
+
+  &-search {
+    position: relative;
+    display: flex;
+    align-items: flex-end;
+  }
+
+  &-content {
+    padding: $spacing-05;
+  }
+
+  &-opts {
+    display: grid;
+    grid-gap: $spacing-05 2rem;
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  &-applied {
+    display: flex;
+    align-items: center;
+    padding: $spacing-03;
+    background: $layer-01;
+  }
+}
+
+.#{$block-class}__global-filter-button-set
+  button.#{$block-class}__global-filter-button {
+  flex: 1;
+  max-inline-size: none;
+}
+
+button.#{$block-class}__global-filter-toggle {
+  background: $field-01;
+  border-block-end-color: $border-strong-01;
+
+  &--open {
+    border-block-end: $border-strong-01;
+    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
+  }
+}
+
+// meta panel
+.#{$block-class}__meta-panel {
+  padding: $spacing-05;
+
+  &-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-block-end: $spacing-05;
+  }
+
+  &-entry {
+    margin-block-end: $spacing-05;
+  }
+}
+
+.#{$block-class}__meta-panel p.#{$block-class}__meta-panel-title {
+  @include type.type-style('heading-03');
+}
+
+.#{$block-class}__meta-panel p.#{$block-class}__meta-panel-entry-title {
+  @include type.type-style('heading-compact-01');
+}
+
+.#{$block-class}__meta-panel p.#{$block-class}__meta-panel-entry-body {
+  @include type.type-style('body-compact-01');
+}
+
+// overrides
+
+.#{$block-class}__selections .#{$carbon-prefix}--list-box__menu {
+  inset-inline-start: auto;
+}
+
+.#{$block-class}__tags .#{$carbon-prefix}--tag {
+  margin: 0;
+}
+
+// the influencer sidebar needs to be even with the buttons
+.#{$block-class}.#{$tearsheet-class} .#{$tearsheet-class}__influencer {
+  flex-basis: 22.5rem;
+  background: $layer-01;
+}
+
+.#{$block-class}.#{$tearsheet-class}.#{$tearsheet-class}--wide
+  .#{$tearsheet-class}__content
+  .cds--dropdown {
+  background-color: transparent;
+}
+
+.#{$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}__multi
+  .#{$pkg-prefix}--action-set.#{$carbon-prefix}--btn-set.#{$pkg-prefix}--action-set--max
+  .#{$pkg-prefix}--action-set__action-button {
+  max-inline-size: 11.25rem;
+}
+
+.#{$block-class} .#{$block-class}__items-label {
+  @include type.type-style('heading-compact-01');
+}
+
+.#{$block-class}
+  .#{$carbon-prefix}--modal-container--sm
+  .#{$carbon-prefix}--modal-content
+  p {
+  padding-inline-end: 0;
+}
+
+.#{$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}__sidebar-accordion-title button {
+    opacity: 0;
+  }
+}
+
+.#{$block-class}__multi .#{$pkg-prefix}--empty-state {
+  margin-block-start: $spacing-09;
+  max-inline-size: 16rem;
+}
+
+.#{$block-class} .#{$carbon-prefix}--accordion__arrow {
+  transform: rotate(0deg);
+}
+
+.#{$block-class}
+  .#{$carbon-prefix}--accordion__item--active
+  .#{$carbon-prefix}--accordion__arrow {
+  transform: rotate(90deg);
+}
+
+.#{$block-class}
+  .#{$carbon-prefix}--accordion--start
+  .#{$carbon-prefix}--accordion__arrow {
+  margin: 0 0 0 $spacing-05;
+}
+
+.#{$block-class}
+  .#{$carbon-prefix}--accordion--start
+  .#{$carbon-prefix}--accordion__title {
+  margin: 0 $spacing-05 0 $spacing-03;
+}
+
+.#{$block-class}
+  .#{$carbon-prefix}--accordion__item--active
+  .#{$carbon-prefix}--accordion__content {
+  margin-block-start: $spacing-03;
+  padding-block: 0;
+}

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/styles/scss/components/accordion';
+@use '@carbon/styles/scss/components/breadcrumb';
+@use '@carbon/styles/scss/components/button';
+@use '@carbon/styles/scss/components/check-box';
+@use '@carbon/styles/scss/components/dropdown';
+@use '@carbon/styles/scss/components/overflow-menu';
+@use '@carbon/styles/scss/components/radio-button';
+@use '@carbon/styles/scss/components/tag';
+@use '@carbon/styles/scss/components/text-input';
+@use '@carbon/styles/scss/components/structured-list';

package/scss/components/AddSelect/_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 './add-select';

package/scss/components/AddSelect/_index.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.
+//
+
+// An index file is most useful when you have multiple components
+
+@use './add-select';