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

package/scss/components/EditTearsheetNarrow/_edit-tearsheet-narrow.scss

@@ -0,0 +1,26 @@
+//
+// 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 '../../global/styles/project-settings' as c4p-settings;
+@use '../../global/styles/mixins';
+
+// Other Carbon settings.
+// TODO: @use 'carbon-components/scss/globals/grid/grid'; if needed
+
+// EditTearsheetNarrow uses the following Carbon components:
+// TODO: @use(s) of Carbon component styles used by EditTearsheetNarrow
+
+// EditTearsheetNarrow uses the following Carbon for IBM Products components:
+// TODO: @use(s) of IBM Products component styles used by EditTearsheetNarrow
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+$block-class: #{c4p-settings.$pkg-prefix}--edit-tearsheet-narrow;
+
+.#{$block-class} {
+  // TODO: Styles.
+}

package/scss/components/EditTearsheetNarrow/_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-tearsheet-narrow';

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,95 @@
+//
+// 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: @use '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: @use(s) of Carbon component styles used by EditUpdateCards
+
+// EditUpdateCards uses the following Carbon for IBM Products components:
+// TODO: @use(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 {
+        // stylelint-disable-next-line carbon/theme-use
+        color: $white-0;
+
+        &:hover {
+          // stylelint-disable-next-line carbon/theme-use
+          background-color: $blue-60-hover;
+        }
+
+        &:focus {
+          box-shadow: none;
+        }
+
+        svg {
+          path {
+            // stylelint-disable-next-line carbon/theme-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-use
+      background-color: $blue-60;
+      // stylelint-disable-next-line carbon/theme-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;
+      }
+    }
+
+    .#{c4p-settings.$pkg-prefix}--card__header-container {
+      align-items: center;
+    }
+  }
+
+  &:not(.#{$block-class}__actions-bottom) {
+    &##{$block-class}--edit {
+      .#{c4p-settings.$pkg-prefix}--card__header {
+        // stylelint-disable-next-line carbon/theme-use
+        background-color: $blue-60;
+        // stylelint-disable-next-line carbon/theme-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/EmptyStates/_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.
+//
+
+// Empty states use the following Carbon components:
+// Button, Link
+@use '@carbon/styles/scss/components/button';
+@use '@carbon/styles/scss/components/link';

package/scss/components/EmptyStates/_empty-state.scss

@@ -0,0 +1,85 @@
+//
+// 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.
+//
+
+// Standard imports.
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/type';
+@use '../../global/styles/project-settings' as c4p-settings;
+
+$block-class: #{c4p-settings.$pkg-prefix}--empty-state;
+
+.#{$block-class} {
+  display: flex;
+  color: $text-primary;
+
+  .#{$block-class}__header {
+    @include type.type-style('heading-03');
+
+    margin: 0;
+
+    padding-block-end: $spacing-03;
+  }
+
+  .#{$block-class}__subtitle {
+    @include type.type-style('body-01');
+
+    color: $text-secondary;
+
+    padding-block-end: $spacing-05;
+  }
+
+  .#{$block-class}__header--small {
+    @include type.type-style('body-compact-02');
+
+    padding-block-end: $spacing-03;
+  }
+
+  .#{$block-class}__subtitle--small {
+    @include type.type-style('label-01');
+  }
+}
+
+.#{$block-class}__illustration {
+  block-size: auto;
+  margin-block-end: $spacing-05;
+
+  &.#{$block-class}__illustration--lg {
+    max-inline-size: $spacing-11;
+    min-inline-size: $spacing-11;
+  }
+
+  &.#{$block-class}__illustration--sm {
+    max-inline-size: $spacing-10;
+    min-inline-size: $spacing-10;
+  }
+}
+
+.#{$block-class}-position--top {
+  flex-direction: column;
+}
+
+.#{$block-class}-position--right {
+  flex-direction: row-reverse;
+}
+
+.#{$block-class}-position--bottom {
+  flex-direction: column-reverse;
+}
+
+.#{$block-class}-position--left {
+  flex-direction: row;
+}
+
+.#{$block-class} .#{$block-class}__action-button {
+  display: block;
+  margin-block-end: $spacing-05;
+}
+
+.#{$block-class} .#{$block-class}__link {
+  display: inline-block;
+}

package/scss/components/EmptyStates/_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 './empty-state';

package/scss/components/EmptyStates/_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 './empty-state';

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

@@ -0,0 +1,10 @@
+//
+// Copyright IBM Corp. 2020, 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.
+//
+
+// ExampleComponent uses the following Carbon components:
+// Button, ButtonSet
+@use '@carbon/styles/scss/components/button';

package/scss/components/ExampleComponent/_example-component.scss

@@ -0,0 +1,28 @@
+//
+// Copyright IBM Corp. 2020, 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/spacing' as *;
+// Standard imports.
+@use '../../global/styles/project-settings' as c4p-settings;
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+$block-class: #{c4p-settings.$pkg-prefix}--example-component;
+
+.#{$block-class} {
+  display: flex;
+  justify-content: flex-end;
+  --#{$block-class}--border-color: transparent;
+}
+
+.#{$block-class}.#{$block-class}--boxed-set {
+  border: 10px solid var(--#{$block-class}--border-color);
+}
+
+.#{$block-class}.#{$block-class}--shadow-set {
+  margin: $spacing-04;
+  box-shadow: 0 0 10px var(--#{$block-class}--border-color);
+}

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

@@ -0,0 +1,9 @@
+//
+// Copyright IBM Corp. 2020, 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 './example-component';

package/scss/components/ExampleComponent/_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 './example-component';

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

@@ -0,0 +1,16 @@
+//
+// 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.
+//
+
+// ExportModal uses the following Carbon components:
+// Button, ComposedModal, ModalHeader, ModalFooter, ModalBody, TextInput,
+// RadioButton, RadioButtonGroup, FormGroup, Loading
+@use '@carbon/styles/scss/components/button';
+@use '@carbon/styles/scss/components/modal';
+@use '@carbon/styles/scss/components/text-input';
+@use '@carbon/styles/scss/components/radio-button';
+@use '@carbon/styles/scss/components/form';
+@use '@carbon/styles/scss/components/loading';

package/scss/components/ExportModal/_export-modal.scss

@@ -0,0 +1,46 @@
+//
+// 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.
+//
+
+// Standard imports.
+@use '@carbon/styles/scss/components/button/tokens' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '../../global/styles/project-settings' as c4p-settings;
+
+$block-class: #{c4p-settings.$pkg-prefix}--export-modal;
+
+.#{$block-class}
+  .#{c4p-settings.$carbon-prefix}--modal-footer
+  .#{c4p-settings.$carbon-prefix}--btn {
+  max-inline-size: none;
+}
+
+.#{$block-class}.#{c4p-settings.$carbon-prefix}--modal
+  .#{c4p-settings.$carbon-prefix}--modal-content {
+  padding-inline-end: $spacing-05;
+}
+
+.#{$block-class}__body {
+  margin-block-end: $spacing-05;
+  padding-inline-end: calc(20% - #{$spacing-05});
+}
+
+.#{$block-class}__messaging {
+  display: flex;
+  align-items: center;
+}
+
+.#{$block-class}__messaging p {
+  margin-inline-start: $spacing-03;
+}
+
+.#{$block-class}__checkmark-icon {
+  fill: $button-primary;
+}
+
+.#{$block-class}__error-icon {
+  fill: $button-danger-primary;
+}

package/scss/components/ExportModal/_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 './export-modal';

package/scss/components/ExportModal/_index.scss

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

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

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

package/scss/components/ExpressiveCard/_expressive-card.scss

@@ -0,0 +1,18 @@
+//
+// Copyright IBM Corp. 2020, 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.
+//
+
+// ExpressiveCard uses the following IBM Products components:
+// Card
+@use '../Card/card' as *;
+@use '../../global/styles/project-settings' as c4p-settings;
+@use '@carbon/styles/scss/type';
+
+$block-class: #{c4p-settings.$pkg-prefix}--card;
+
+.#{$block-class}__title {
+  @include type.type-style('heading-03');
+}

package/scss/components/ExpressiveCard/_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 './expressive-card';

package/scss/components/ExpressiveCard/_index.scss

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

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

@@ -0,0 +1,14 @@
+//
+// Copyright IBM Corp. 2024, 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.
+//
+
+// Import any Carbon component styles used from FilterPanel in this file.
+// FilterPanel uses the following Carbon components:
+@use '@carbon/styles/scss/components/accordion';
+@use '@carbon/styles/scss/components/checkbox';
+@use '@carbon/styles/scss/components/list';
+@use '@carbon/styles/scss/components/overflow-menu';
+@use '@carbon/styles/scss/components/search';

package/scss/components/FilterPanel/_filter-panel-accordion-item.scss

@@ -0,0 +1,54 @@
+//
+// Copyright IBM Corp. 2024, 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 function-no-unknown */
+/* stylelint-disable max-nesting-depth */
+
+// Standard imports.
+@use '../../global/styles/project-settings' as c4p-settings;
+@use '../../global/styles/mixins';
+
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/type';
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+$block-class: #{c4p-settings.$pkg-prefix}--filter-panel-accordion-item;
+$carbon: #{c4p-settings.$carbon-prefix};
+
+// Remove top and bottom borders.
+html .#{$block-class} {
+  border-block-start: 0;
+}
+html .#{$block-class}:last-child {
+  border-block-end: 0;
+}
+
+// Override Carbon Accordion Item styling
+html .#{$block-class} .#{$carbon}--accordion__wrapper {
+  padding-block: 0;
+}
+html .#{$block-class} .#{$carbon}--accordion__heading {
+  min-block-size: $spacing-07;
+  padding-inline-end: 0;
+}
+html .#{$block-class} .#{$carbon}--accordion__title {
+  inline-size: 100%;
+  margin-inline-end: 0;
+  // 100% - the space taken up by the expand/collapse icon.
+  max-inline-size: calc(100% - $spacing-07);
+}
+html .#{$block-class} .#{$carbon}--accordion__content {
+  padding-inline-end: 0;
+}
+
+// Override Filter Panel Label
+.#{$block-class} .#{c4p-settings.$pkg-prefix}--filter-panel-label__text {
+  @include type.type-style('body-01');
+}
+.#{$block-class} .#{c4p-settings.$pkg-prefix}--filter-panel-label__count {
+  @include type.type-style('label-01');
+}

package/scss/components/FilterPanel/_filter-panel-accordion.scss

@@ -0,0 +1,6 @@
+//
+// Copyright IBM Corp. 2024, 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.
+//

package/scss/components/FilterPanel/_filter-panel-checkbox-with-overflow.scss

@@ -0,0 +1,60 @@
+//
+// Copyright IBM Corp. 2024, 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 function-no-unknown */
+/* stylelint-disable max-nesting-depth */
+
+// Standard imports.
+@use '../../global/styles/project-settings' as c4p-settings;
+@use '../../global/styles/mixins';
+
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+$block-class: #{c4p-settings.$pkg-prefix}--filter-panel-checkbox-with-overflow;
+$carbon: #{c4p-settings.$carbon-prefix};
+
+.#{$block-class} {
+  position: relative;
+}
+.#{$block-class}--open,
+.#{$block-class}:hover,
+.#{$block-class}:focus-within {
+  background-color: $field;
+}
+
+// Position the menu button via its wrapper, not the button itself.
+.#{$block-class} .#{$carbon}--overflow-menu__wrapper {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-end: 0;
+}
+// Size the menu button.
+.#{$block-class} .#{$block-class}__overflow-button {
+  background-color: $layer;
+  block-size: $spacing-06;
+  inline-size: $spacing-06;
+  min-block-size: $spacing-06;
+}
+
+// OverflowMenu <li>
+.#{$block-class}__overflow-options .#{$carbon}--overflow-menu-options__option {
+  block-size: $spacing-06;
+}
+// OverflowMenu <button>
+.#{$block-class}__overflow-options .#{$carbon}--overflow-menu-options__btn {
+  justify-content: flex-end;
+  max-inline-size: none;
+}
+// SIZE FIX: This element is being used to "erase" the drop shadow
+// created by the menu items overtop the menu button.
+.#{$block-class}__overflow-options.#{$carbon}--overflow-menu-options[data-floating-menu-direction='bottom']:not(
+    .#{$carbon}--breadcrumb-menu-options
+  )::after {
+  inline-size: $spacing-06;
+}

package/scss/components/FilterPanel/_filter-panel-checkbox.scss

@@ -0,0 +1,53 @@
+//
+// Copyright IBM Corp. 2024, 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 max-nesting-depth */
+
+// Standard imports.
+@use '../../global/styles/project-settings' as c4p-settings;
+@use '../../global/styles/mixins';
+
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/type';
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+$block-class: #{c4p-settings.$pkg-prefix}--filter-panel-checkbox;
+$label: #{c4p-settings.$pkg-prefix}--filter-panel-label;
+$carbon: #{c4p-settings.$carbon-prefix};
+
+// UNDO Carbon's concept that a Checkbox is always a list item (":last-of-type").
+// This also allows the TruncatedList to calculate the correct height for expanding/collapsing the list.
+.#{$block-class}.#{$carbon}--form-item.#{$carbon}--checkbox-wrapper,
+.#{$block-class}.#{$carbon}--form-item.#{$carbon}--checkbox-wrapper:last-of-type {
+  margin-block-end: 0;
+}
+
+// Surround a checkbox's count with parentheses.
+.#{$block-class}
+  .#{c4p-settings.$pkg-prefix}--filter-panel-label__count::before {
+  content: '(';
+}
+.#{$block-class}
+  .#{c4p-settings.$pkg-prefix}--filter-panel-label__count::after {
+  content: ')';
+}
+
+.#{$block-class} .#{$carbon}--checkbox-label,
+.#{$block-class} .#{$carbon}--checkbox-label-text {
+  // Match height to the "checkbox with overflow" button.
+  block-size: $spacing-06;
+  // Set Carbon's Checkbox label to 100% the width of the filter panel.
+  inline-size: 100%;
+}
+
+.#{$block-class} .#{$label}__text {
+  @include type.type-style('body-compact-01');
+}
+
+.#{$block-class} .#{$label}__count {
+  @include type.type-style('label-01');
+}