@carbon/ibm-products 2.16.0 → 2.17.0

package/scss/components/InlineTip/_inline-tip.scss

@@ -6,12 +6,12 @@
 //
 
 /**
- * The InlineTip specifically is theme-agnostic, and so we have to 
- * use color tokens to keep the colors static instead of theme tokens 
+ * The InlineTip specifically is theme-agnostic, and so we have to
+ * use color tokens to keep the colors static instead of theme tokens
  * that will change depending on the selected theme.
- * 
+ *
  * We are triggering a *large* amount of linting errors.
- * So, we're using the following "disable" rules for the entire file 
+ * So, we're using the following "disable" rules for the entire file
  * instead of many individual rules.
  */
 

package/scss/components/_index-released-only-with-carbon.scss

@@ -17,6 +17,7 @@
 @use './CreateSidePanel/index-with-carbon' as *;
 @use './CreateTearsheetNarrow/index-with-carbon' as *;
 @use './CreateTearsheet/index-with-carbon' as *;
+@use './Datagrid/index-with-carbon' as *;
 @use './EditInPlace/index-with-carbon' as *;
 @use './EmptyStates/index-with-carbon' as *;
 @use './ExportModal/index-with-carbon' as *;

package/scss/components/_index-released-only.scss

@@ -17,6 +17,7 @@
 @use './CreateSidePanel';
 @use './CreateTearsheetNarrow';
 @use './CreateTearsheet';
+@use './Datagrid';
 @use './EditInPlace';
 @use './EmptyStates';
 @use './ExportModal';

package/scss/config-dev.scss

@@ -0,0 +1,3 @@
+@forward './global/styles/project-settings' with (
+  $pkg-prefix: 'dev-prefix--c4p'
+);

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

@@ -1,35 +0,0 @@
-//
-// 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 'ALIAS_STORY_STYLE_CONFIG' as c4p-settings;
-@use '@carbon/styles/scss/theme' as *;
-@use '@carbon/styles/scss/spacing' as *;
-
-$block-class: #{c4p-settings.$pkg-prefix}--apikey-modal;
-
-.#{$block-class} .#{c4p-settings.$carbon-prefix}--radio-button-wrapper {
-  margin-bottom: $spacing-02;
-}
-
-.#{$block-class}__permissions.#{c4p-settings.$carbon-prefix}--fieldset {
-  margin-top: $spacing-05;
-  margin-bottom: 0;
-}
-
-.#{$block-class}__resource-toggle.#{c4p-settings.$carbon-prefix}--fieldset {
-  margin-top: 0;
-  margin-bottom: $spacing-05;
-}
-
-.#{$block-class}__resource-name.#{c4p-settings.$carbon-prefix}--fieldset {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-.#{$block-class}__button-loading.#{c4p-settings.$carbon-prefix}--btn--primary {
-  background: $link-secondary;
-}

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

@@ -1,29 +0,0 @@
-//
-// 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 '@carbon/styles/scss/theme' as *;
-@use '@carbon/styles/scss/spacing' as *;
-@use '@carbon/styles/scss/type';
-@use '@carbon/styles/scss/components/ui-shell' as *;
-@use 'ALIAS_STORY_STYLE_CONFIG' as c4p-settings;
-
-// The block part of our conventional BEM class names (blockClass__E--M).
-$block-class: #{c4p-settings.$pkg-prefix}--about-modal;
-
-.#{$block-class}__stories--tech-logo {
-  width: $spacing-06;
-  height: $spacing-06;
-  margin-right: $spacing-03;
-  object-fit: contain;
-}
-
-.#{$block-class}__footer-label {
-  @include type.type-style('label-01');
-
-  margin-bottom: $spacing-02;
-  color: $text-secondary;
-}

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

@@ -1,8 +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 '../../global/styles/display-box' as *;

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

@@ -1,36 +0,0 @@
-//
-// 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 'ALIAS_STORY_STYLE_CONFIG' as c4p-settings;
-@use '../../global/styles/display-box' as *;
-
-$block-class: #{c4p-settings.$pkg-prefix}--action-set;
-
-.#{$block-class}__story-container {
-  width: 96vw;
-  min-height: 3rem;
-}
-
-.#{$block-class}__story-container--xlg {
-  width: 75vw;
-}
-
-.#{$block-class}__story-container--lg {
-  width: 60vw;
-}
-
-.#{$block-class}__story-container--md {
-  width: 45vw;
-}
-
-.#{$block-class}__story-container--sm {
-  width: 30vw;
-}
-
-.#{$block-class}__story-container--xs {
-  width: 25vw;
-}

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

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

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

@@ -1,8 +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 '../../global/styles/display-box' as *;

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

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

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

@@ -1,8 +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 '../../global/styles/display-box' as *;

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

@@ -1,12 +0,0 @@
-//
-// 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.
-//
-
-// make the root full width to get a better idea of how the cards
-// look in a real grid situation
-#root {
-  width: 100%;
-}

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

@@ -1,34 +0,0 @@
-//
-// Copyright IBM Corp. 20201, 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 '@carbon/styles/scss/theme' as *;
-@use '@carbon/styles/scss/spacing' as *;
-
-#storybook-docs .docs-story {
-  /* stylelint-disable-next-line carbon/layout-token-use */
-  padding: 30px 0;
-}
-
-.box {
-  display: inline-block;
-  width: 400px;
-  height: 300px;
-  margin: $spacing-04;
-  background-color: $layer-selected-inverse;
-  color: $text-on-color;
-}
-
-.grid-box {
-  display: flex;
-  width: 100%;
-  height: 300px;
-  align-items: center;
-  justify-content: center;
-  margin-bottom: $spacing-03;
-  background-color: $layer-selected-inverse;
-  color: $text-on-color;
-}

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

@@ -1,13 +0,0 @@
-//
-// Copyright IBM Corp. 2023, 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/spacing' as *;
-
-.checklist-stories__viewport {
-  min-width: calc(2 * $spacing-13); // 320px
-  max-width: calc(2 * $spacing-13);
-}

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

@@ -1,67 +0,0 @@
-//
-// Copyright IBM Corp. 2021, 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';
-@use '@carbon/styles/scss/components/ui-shell' as *;
-@use 'ALIAS_STORY_STYLE_CONFIG' as c4p-settings;
-
-$story-class: 'create-full-page-stories';
-$block-class: #{c4p-settings.$pkg-prefix}--create-full-page;
-// cspell:disable-next-line
-.sbdocs .#{$story-class}__viewport {
-  height: 100vh;
-  background-color: $background;
-  box-shadow: 0 0 4px 1px $border-subtle-01;
-  color: $text-primary;
-  overflow-y: auto;
-}
-
-.#{$story-class}__step-fieldset--no-label
-  .#{c4p-settings.$carbon-prefix}--fieldset
-  legend {
-  position: absolute;
-  overflow: hidden;
-  width: 1px;
-  height: 1px;
-  clip: rect(0 0 0 0);
-  clip-path: inset(50%);
-  white-space: nowrap;
-}
-
-.#{$story-class}__tooltip {
-  position: relative;
-  // stylelint-disable-next-line carbon/layout-token-use
-  top: calc(#{$spacing-05} + #{$spacing-01});
-  left: $spacing-11;
-}
-
-.#{$block-class}__step-fieldset.#{$story-class}__step-fieldset--label.#{c4p-settings.$carbon-prefix}--label {
-  position: absolute;
-  overflow: hidden;
-  width: 1px;
-  height: 1px;
-  clip: rect(0 0 0 0);
-  clip-path: inset(50%);
-  white-space: nowrap;
-}
-
-.#{c4p-settings.$carbon-prefix}--form-item {
-  margin-bottom: $spacing-05;
-}
-
-.#{$story-class}__error--text {
-  @include type.type-style('label-01');
-
-  margin-bottom: $spacing-05;
-}
-
-.#{$block-class}
-  .#{$block-class}__step-description.#{$story-class}__step-description {
-  padding-left: 0;
-}

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

@@ -1,54 +0,0 @@
-//
-// 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 '@carbon/react/scss/components/number-input';
-@use '@carbon/react/scss/components/text-area';
-@use '@carbon/react/scss/components/text-input';
-@use '@carbon/react/scss/components/dropdown';
-@use '@carbon/react/scss/components/date-picker';
-@use '@carbon/react/scss/components/radio-button';
-@use '@carbon/react/scss/components/progress-indicator';
-@use '@carbon/react/scss/components/tooltip';
-@use '@carbon/react/scss/components/modal';
-@use '@carbon/styles/scss/spacing';
-@use 'ALIAS_STORY_STYLE_CONFIG' as c4p-settings;
-
-.#{c4p-settings.$carbon-prefix}--number {
-  min-width: 100%;
-}
-
-.#{c4p-settings.$carbon-prefix}--number__control-btn::before {
-  background-color: transparent;
-}
-
-.#{c4p-settings.$carbon-prefix}--number__control-btn::after {
-  background-color: transparent;
-}
-
-.#{c4p-settings.$carbon-prefix}--date-picker {
-  min-width: 100%;
-}
-
-.#{c4p-settings.$carbon-prefix}--date-picker-container {
-  min-width: 100%;
-}
-
-.#{c4p-settings.$carbon-prefix}--date-picker.#{c4p-settings.$carbon-prefix}--date-picker--single
-  .#{c4p-settings.$carbon-prefix}--date-picker__input {
-  min-width: 100%;
-}
-
-.#{c4p-settings.$carbon-prefix}--list-box__menu-icon {
-  /* stylelint-disable-next-line carbon/layout-token-use */
-  top: spacing.$spacing-03;
-}
-
-.example-wrapper {
-  display: grid;
-  grid-gap: spacing.$spacing-05;
-  grid-template-columns: 1fr 1fr;
-}

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

@@ -1,32 +0,0 @@
-//
-// 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 'ALIAS_STORY_STYLE_CONFIG' as c4p-settings;
-@use '@carbon/styles/scss/theme' as *;
-@use '@carbon/styles/scss/spacing';
-@use '../../global/decorators/side-panel-decorator' as *;
-
-$block-class: #{c4p-settings.$pkg-prefix}--create-side-panel;
-$story-prefix: create-side-panel-stories__;
-
-.#{$story-prefix}example-container {
-  display: grid;
-  align-items: flex-end;
-  grid-gap: spacing.$spacing-04;
-  grid-template-columns: 1fr 1fr;
-}
-
-.#{$story-prefix}example-form-group .#{c4p-settings.$carbon-prefix}--label {
-  margin-bottom: 0;
-}
-
-.#{$block-class} .#{c4p-settings.$carbon-prefix}--number__control-btn::before,
-.#{$block-class} .#{c4p-settings.$carbon-prefix}--number__control-btn::after {
-  background-color: $field-02;
-}
-
-@include side-panel-decorator($story-prefix);

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

@@ -1,56 +0,0 @@
-//
-// 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 'ALIAS_STORY_STYLE_CONFIG' as c4p-settings;
-@use '@carbon/styles/scss/type';
-@use '@carbon/type/scss/font-family';
-@use '@carbon/styles/scss/spacing' as *;
-
-$preview-block-class: #{c4p-settings.$pkg-prefix}--tearsheet-create-multi-step;
-
-.#{$preview-block-class}__description {
-  @include type.type-style('body-compact-01');
-
-  padding-bottom: $spacing-04;
-}
-
-p.#{$preview-block-class}__description:last-of-type {
-  padding-bottom: $spacing-07;
-}
-
-.#{$preview-block-class}__heading {
-  @include font-family.font-weight('semibold');
-}
-
-.#{$preview-block-class}
-  .#{c4p-settings.$pkg-prefix}--tearsheet__content
-  .#{c4p-settings.$carbon-prefix}--form-item {
-  margin-bottom: $spacing-05;
-}
-
-.#{c4p-settings.$carbon-prefix}--tile-group div {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.#{c4p-settings.$pkg-prefix}--tearsheet-create-multi-step--custom-tile {
-  width: 280px;
-  height: 240px;
-  margin-right: $spacing-05;
-}
-
-.#{c4p-settings.$pkg-prefix}--tearsheet-create-multi-step--custom-tile
-  .#{c4p-settings.$pkg-prefix}--empty-state__illustration.#{c4p-settings.$pkg-prefix}--empty-state__illustration--lg {
-  min-width: 120px;
-  height: 120px;
-}
-
-.#{c4p-settings.$pkg-prefix}--tearsheet-create-multi-step--custom-tile-label {
-  position: absolute;
-  bottom: $spacing-05;
-  left: $spacing-05;
-}

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

@@ -1,27 +0,0 @@
-//
-// 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 'ALIAS_STORY_STYLE_CONFIG' as c4p-settings;
-@use '@carbon/styles/scss/spacing' as *;
-
-$story-class: #{c4p-settings.$pkg-prefix}--create-tearsheet-narrow--story;
-
-.#{$story-class}__flex-container {
-  display: flex;
-  align-items: baseline;
-}
-
-.#{$story-class}__flex-container .#{c4p-settings.$carbon-prefix}--form-item,
-.#{$story-class}__form .#{c4p-settings.$carbon-prefix}--form-item {
-  margin-bottom: $spacing-05;
-}
-
-.#{$story-class}__flex-container .#{c4p-settings.$carbon-prefix}--form-item,
-.#{$story-class}__flex-container
-  .#{c4p-settings.$carbon-prefix}--dropdown__wrapper.#{c4p-settings.$carbon-prefix}--list-box__wrapper {
-  width: 50%;
-}

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

@@ -1,17 +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.
-//
-
-$story-anchor: 'DataSpreadsheet';
-
-$story-anchor: 'DataSpreadsheet';
-div[data-story-title*='#{$story-anchor}']
-  .docs-story
-  > div:first-child
-  > div:first-child {
-  overflow: auto;
-  width: 100%;
-}

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

@@ -1,157 +0,0 @@
-//
-// Copyright IBM Corp. 2022, 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 '@carbon/styles/scss/type';
-@use '@carbon/styles/scss/spacing' as *;
-@use '@carbon/styles/scss/components/tooltip';
-
-@use 'ALIAS_STORY_STYLE_CONFIG' as c4p-settings;
-
-// TODO: add any additional styles used by Datagrid.stories.js
-// helper class for the nested table
-
-$block-class: #{c4p-settings.$pkg-prefix}--datagrid;
-
-.sb-show-main.sb-main-centered {
-  height: 100vh;
-}
-
-.sb-show-main.sb-main-centered #storybook-root {
-  width: 100%;
-  height: 100vh;
-  padding: $spacing-07;
-}
-
-#storybook-root
-  .#{c4p-settings.$carbon-prefix}--actionable-notification__content {
-  white-space: pre-wrap;
-}
-
-.carbon-nested-table {
-  border-bottom: 1px solid $border-subtle-01;
-
-  .#{$block-class}__virtual-scrollbar > div > div:last-child td {
-    border-bottom: none;
-  }
-}
-
-.#{$block-class}__panelContent {
-  display: inline;
-}
-
-/* only for storybook purpose. */
-.#{c4p-settings.$pkg-prefix}--side-panel.#{c4p-settings.$pkg-prefix}--side-panel__container {
-  top: 0;
-  height: 100%;
-}
-
-.page-content-wrapper.side-panel-open {
-  .#{$block-class} {
-    padding-right: $spacing-05;
-  }
-}
-
-.#{$block-class}__side-panel-sections {
-  padding-bottom: $spacing-06;
-}
-
-.#{$block-class}__side-panel-link {
-  padding-top: $spacing-01;
-  padding-bottom: $spacing-06;
-}
-
-.#{$block-class}__side-panel-section-inner {
-  display: flex;
-  padding: $spacing-01 0;
-}
-
-.#{$block-class}__side-panel-label-text {
-  @include type.type-style('body-compact-01');
-
-  color: $text-secondary;
-}
-
-.#{$block-class}__side-panel-value {
-  @include type.type-style('body-compact-01');
-
-  padding-left: $spacing-03;
-}
-
-.#{$block-class}__side-panel-section-header {
-  @include type.type-style('heading-compact-01');
-
-  padding-bottom: $spacing-02;
-}
-
-.#{c4p-settings.$pkg-prefix}--side-panel.#{c4p-settings.$pkg-prefix}--side-panel__container.#{c4p-settings.$pkg-prefix}--side-panel__container-right-placement {
-  border: 0 none;
-  box-shadow: none;
-}
-
-.#{c4p-settings.$pkg-prefix}--side-panel__container
-  .#{c4p-settings.$pkg-prefix}--side-panel__inner-content {
-  height: 100%;
-}
-
-.#{$block-class}-story__custom-cell-wrapper.#{c4p-settings.$carbon-prefix}--link {
-  display: block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.#{$block-class}-story__hidden-column-id-snippet {
-  padding-top: $spacing-07;
-}
-
-.#{$block-class}__mobile-toolbar-modal
-  .#{c4p-settings.$carbon-prefix}--dropdown__wrapper {
-  margin-bottom: $spacing-07;
-}
-
-.storybook-#{$block-class}__validation-code-snippet {
-  @include type.font-family($name: mono);
-  @include type.type-style('code-01');
-
-  display: inline-block;
-  padding: 0 $spacing-03;
-  border: 2px solid transparent;
-  border-radius: $spacing-02;
-  margin-right: $spacing-03;
-  background-color: $field-01;
-}
-
-.#{c4p-settings.$carbon-prefix}--body--with-modal-open {
-  .#{$block-class}__mobile-toolbar-modal.#{c4p-settings.$carbon-prefix}--modal {
-    top: -$spacing-07;
-    left: -$spacing-07;
-    width: 100vw;
-  }
-}
-
-$story-anchor: 'Datagrid';
-div[data-story-title*='#{$story-anchor}']
-  .docs-story
-  > div:first-child
-  > div:first-child {
-  overflow: auto;
-  width: 100%;
-}
-
-.sb--tooltip-trigger {
-  display: flex;
-  box-sizing: border-box;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-  border: 0;
-  margin: 0;
-  background: none;
-  cursor: pointer;
-  text-align: start;
-}

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

@@ -1,10 +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.
-//
-
-@import '../../global/styles/project-settings';
-
-// TODO: add any additional styles used by EditFullPage.stories.js