@carbon/ibm-products 1.23.1 → 1.25.1

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

package/scss/components/EditTearsheet/_edit-tearsheet.scss

@@ -0,0 +1,132 @@
+//
+// 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.
+@import '../../global/styles/project-settings';
+
+// Other Carbon settings.
+@import 'carbon-components/scss/globals/grid/grid';
+
+// EditTearsheet uses the following Carbon components:
+@import 'carbon-components/scss/components/toggle/toggle';
+@import 'carbon-components/scss/components/ui-shell/side-nav';
+
+// EditTearsheet uses the following IBM Products components:
+// TearsheetShell
+@import '../Tearsheet/tearsheet';
+@import '../CreateInfluencer/index';
+
+@mixin edit-tearsheet {
+  @keyframes form-content-entrance {
+    0% {
+      opacity: 0;
+      // stylelint-disable-next-line carbon/layout-token-use
+      transform: translateY(-0.75rem);
+    }
+
+    100% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  $block-class: #{$pkg-prefix}--tearsheet-edit;
+  $form-block-class: #{$pkg-prefix}--tearsheet-edit__form;
+  $section-block-class: #{$pkg-prefix}--tearsheet-edit__section;
+  $tearsheet-divider-class: #{$pkg-prefix}--tearsheet-edit__section--divider;
+  $tearsheet-fieldset-class: #{$pkg-prefix}--tearsheet-edit__form--fieldset;
+
+  .#{$block-class} {
+    --#{$block-class}--total-width: 0;
+  }
+
+  .#{$block-class} .#{$form-block-class}__form--hidden-form {
+    display: none;
+  }
+
+  .#{$block-class} .#{$form-block-class}__form--visible-form {
+    animation-duration: $duration--slow-01;
+    animation-fill-mode: forwards;
+    animation-name: form-content-entrance;
+    animation-timing-function: $carbon--standard-easing;
+    opacity: 0;
+  }
+
+  @media (prefers-reduced-motion) {
+    .#{$block-class} .#{$form-block-class}__form--visible-form {
+      animation: none;
+      opacity: 1;
+    }
+  }
+
+  .#{$block-class} .#{$block-class}__content {
+    height: 100%;
+    padding: $spacing-06;
+    overflow-x: hidden;
+  }
+
+  .#{$block-class} .#{$block-class}__content .#{$carbon-prefix}--grid {
+    padding: 0;
+    margin: 0;
+  }
+
+  .#{$block-class} .#{$block-class}__form--heading {
+    padding-bottom: $spacing-06;
+  }
+
+  .#{$block-class}
+    .#{$carbon-prefix}--btn-set
+    .#{$carbon-prefix}--btn.#{$carbon-prefix}--btn--disabled {
+    box-shadow: -0.0625rem 0 0 0 $button-separator;
+  }
+
+  .#{$block-class} .#{$carbon-prefix}--side-nav--ux {
+    position: initial;
+    width: 100%;
+    max-width: 100%;
+    background-color: transparent;
+  }
+
+  .#{$block-class} .#{$carbon-prefix}--side-nav__link:hover {
+    cursor: pointer;
+  }
+
+  .#{$block-class} .#{$carbon-prefix}--side-nav__overlay-active {
+    display: none;
+  }
+
+  .#{$block-class} .#{$block-class}__form--title,
+  .#{$block-class} .#{$block-class}__section--title {
+    margin-bottom: $spacing-05;
+  }
+
+  .#{$block-class} .#{$block-class}__section--subtitle,
+  .#{$block-class} .#{$block-class}__form--subtitle {
+    @include carbon--type-style('productive-heading-01');
+
+    margin-bottom: $spacing-03;
+  }
+
+  .#{$block-class} .#{$block-class}__section--description,
+  .#{$block-class} .#{$block-class}__form--description {
+    @include carbon--type-style('body-long-01');
+
+    margin-bottom: $spacing-06;
+  }
+
+  .#{$block-class} .#{$carbon-prefix}--fieldset {
+    margin-bottom: 0;
+  }
+
+  .#{$block-class} .#{$block-class}__form--fieldset > * {
+    margin-bottom: $spacing-05;
+  }
+}
+
+@include exports('edit-tearsheet') {
+  @include edit-tearsheet;
+}

package/scss/components/EditTearsheet/_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.
+//
+
+@import './edit-tearsheet';

package/scss/components/EditTearsheet/_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.
+//
+
+@import '../../global/styles/project-settings';
+
+// TODO: add any additional styles used by EditTearsheet.stories.js
+
+$preview-block-class: #{$pkg-prefix}--tearsheet-edit-multi-form;
+
+.#{$preview-block-class}__description {
+  @include carbon--type-style('body-short-01');
+
+  padding-bottom: $spacing-04;
+}
+
+p.#{$preview-block-class}__description:last-of-type {
+  padding-bottom: $spacing-07;
+}
+
+.#{$preview-block-class}__heading {
+  @include carbon--font-weight('semibold');
+}
+
+.#{$preview-block-class}
+  .#{$pkg-prefix}--tearsheet__content
+  .#{$carbon-prefix}--form-item {
+  margin-bottom: $spacing-05;
+}
+
+.#{$prefix}--tile-group div {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.#{$pkg-prefix}--tearsheet-edit-multi-form--custom-tile {
+  width: 280px;
+  height: 240px;
+  margin-right: $spacing-05;
+}
+
+.#{$pkg-prefix}--tearsheet-edit-multi-form--custom-tile
+  .#{$pkg-prefix}--empty-state__illustration.#{$pkg-prefix}--empty-state__illustration--lg {
+  min-width: 120px;
+  height: 120px;
+}
+
+.#{$pkg-prefix}--tearsheet-edit-multi-form--custom-tile-label {
+  position: absolute;
+  bottom: $spacing-05;
+  left: $spacing-05;
+}

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

@@ -0,0 +1,34 @@
+//
+// 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.
+@import '../../global/styles/project-settings';
+@import '../../global/styles/mixins';
+
+// Other Carbon settings.
+// TODO: @import 'carbon-components/scss/globals/grid/grid'; if needed
+
+// EditTearsheetNarrow uses the following Carbon components:
+// TODO: @import(s) of Carbon component styles used by EditTearsheetNarrow
+
+// EditTearsheetNarrow uses the following Carbon for IBM Products components:
+// TODO: @import(s) of IBM Products component styles used by EditTearsheetNarrow
+
+// Define all component styles in a mixin which is then exported using
+// the Carbon import-once mechanism.
+@mixin edit-tearsheet-narrow {
+  // The block part of our conventional BEM class names (blockClass__E--M).
+  $block-class: #{$pkg-prefix}--edit-tearsheet-narrow;
+
+  .#{$block-class} {
+    // TODO: Styles.
+  }
+}
+
+@include exports('edit-tearsheet-narrow') {
+  @include edit-tearsheet-narrow;
+}

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.
+//
+
+@import './edit-tearsheet-narrow';

package/scss/components/EditTearsheetNarrow/_storybook-styles.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.
+//
+
+@import '../../global/styles/project-settings';
+
+// TODO: add any additional styles used by EditTearsheetNarrow.stories.js

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

@@ -21,20 +21,30 @@
   .#{$block-class} {
     color: $text-01;
 
-    .#{$block-class}__header,
-    .#{$block-class}__subtitle {
-      padding-bottom: $spacing-02;
+    .#{$block-class}__header {
+      @include carbon--type-style('productive-heading-03');
+      // stylelint-disable-next-line carbon/layout-token-use
+      padding-bottom: calc($spacing-01 + $spacing-02);
       margin: 0;
     }
+    .#{$block-class}__subtitle {
+      @include carbon--type-style('body-long-01');
+
+      padding-bottom: $spacing-05;
+    }
     .#{$block-class}__header--small {
-      @include carbon--type-style('productive-heading-03');
+      @include carbon--type-style('body-short-02');
+
+      padding-bottom: $spacing-03;
     }
     .#{$block-class}__subtitle--small {
-      @include carbon--type-style('body-short-01');
+      @include carbon--type-style('caption-01');
     }
   }
 
   .#{$block-class}__illustration {
+    height: auto;
+    margin-bottom: $spacing-05;
     &.#{$block-class}__illustration--lg {
       min-width: $spacing-11;
       max-width: $spacing-11;
@@ -45,12 +55,9 @@
     }
   }
 
-  .#{$block-class}__action-button,
-  .#{$block-class}__link {
-    margin-top: $spacing-06;
-  }
   .#{$block-class} .#{$block-class}__action-button {
     display: block;
+    margin-bottom: $spacing-05;
   }
   .#{$block-class} .#{$block-class}__link {
     display: block;

package/scss/components/InlineEdit/_inline-edit.scss

@@ -32,14 +32,13 @@
 @mixin input-button-defaults($block-class) {
   display: inline-flex;
   width: var(--#{$block-class}--size);
+  max-width: var(--#{$block-class}--size);
   height: 100%;
   min-height: initial;
   max-height: var(--#{$block-class}--size);
+  align-items: center;
+  justify-content: center;
 
-  // stylelint-disable-next-line carbon/layout-token-use
-  padding: calc(
-    0.5 * (var(--#{$block-class}--size) - var(--#{$block-class}--icon-size)) - #{$spacing-01}
-  );
   border: 2px solid transparent;
 }
 
@@ -260,31 +259,20 @@
     &.#{$block-class}--editing
       .#{$block-class}__toolbar--animation
       .#{$block-class}__save {
-      margin-right: 0;
+      overflow: visible;
+      width: var(--#{$block-class}--edit-size);
       transition: all $duration--moderate-02 motion(standard, productive);
       transition-property: margin, padding;
-
-      svg {
-        transition: width $duration--moderate-02 motion(standard, productive);
-        @media (prefers-reduced-motion: reduce) {
-          transition: none;
-        }
-      }
     }
 
     &.#{$block-class}--editing
       .#{$block-class}__toolbar--animation:not(.#{$block-class}__toolbar--saveable)
       .#{$block-class}__save {
-      padding-right: 0;
-      padding-left: 0;
+      overflow: hidden;
+      width: 0;
+      padding: 0;
       border-right: 0;
       border-left: 0;
-      margin-right: calc(-1 * var(--#{$block-class}--size));
-
-      svg {
-        overflow: hidden;
-        width: 0;
-      }
     }
 
     &.#{$block-class}.#{$block-class} .#{$block-class}__edit {

package/scss/components/NotificationsPanel/_notifications-panel.scss

@@ -185,6 +185,7 @@
           padding: 0;
 
           .#{$carbon-prefix}--btn__icon {
+            // stylelint-disable-next-line carbon/motion-easing-use
             transition: transform $duration--moderate-02 ease;
             @media (prefers-reduced-motion: reduce) {
               transition: none;

package/scss/components/PageHeader/_page-header.scss

@@ -92,7 +92,7 @@ $right-section-alt-width: 100% - $left-section-alt-width;
     $animation: background-and-shadow-appear;
   }
 
-  /* stylelint-disable-next-line carbon/motion-token-use */
+  // stylelint-disable-next-line carbon/motion-duration-use, carbon/motion-easing-use
   animation: $animation $duration linear paused forwards;
   // Added separately for clarity
   animation-delay: calc(
@@ -196,6 +196,7 @@ $right-section-alt-width: 100% - $left-section-alt-width;
       content: '';
       opacity: 0;
       transform: translateX(-50%) scaleX(1);
+      // stylelint-disable-next-line carbon/motion-easing-use
       transition: all $duration--moderate-01 ease-out;
     }
 
@@ -432,6 +433,7 @@ $right-section-alt-width: 100% - $left-section-alt-width;
     .#{$block-class}__title {
       @include carbon--type-style('productive-heading-04');
 
+      min-height: $spacing-08;
       overflow-x: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;

package/scss/components/StatusIcon/_status-icon.scss

@@ -119,7 +119,7 @@ $block-class: #{$pkg-prefix}--status-icon;
           @media (prefers-reduced-motion: reduce) {
             animation: none;
           }
-          // stylelint-disable-next-line carbon/motion-token-use
+          // stylelint-disable-next-line carbon/motion-duration-use, carbon/motion-easing-use
           animation: rotating 8000ms infinite linear;
           // stylelint-disable-next-line carbon/theme-token-use
           fill: --clr($icon, $theme);

package/scss/components/Tearsheet/_tearsheet.scss

@@ -32,7 +32,7 @@
       z-index: z('modal') + 1;
       align-items: flex-end;
       color: $text-01;
-      // stylelint-disable-next-line carbon/motion-token-use
+      // stylelint-disable-next-line carbon/motion-duration-use, carbon/motion-easing-use
       transition: visibility 0s linear $motion-duration,
         background-color $motion-duration motion(exit, expressive),
         opacity $motion-duration motion(exit, expressive);
@@ -43,7 +43,7 @@
     &.is-visible {
       z-index: z('modal');
       align-items: flex-end;
-      // stylelint-disable-next-line carbon/motion-token-use
+      // stylelint-disable-next-line carbon/motion-duration-use, carbon/motion-easing-use
       transition: visibility 0s linear,
         background-color $motion-duration motion(entrance, expressive),
         opacity $motion-duration motion(entrance, expressive);

package/scss/components/_index.scss

@@ -45,3 +45,6 @@
 @import './InlineEdit/index';
 @import './DataSpreadsheet/index';
 @import './Datagrid/index';
+@import './EditTearsheet/index';
+@import './EditTearsheetNarrow/index';
+@import './EditFullPage/index';

package/css/components/Datagrid/styles/addons/CustomizeColumnsModal.css

@@ -1,47 +0,0 @@
-/*
-* Licensed Materials - Property of IBM
-* 5724-Q36
-* (c) Copyright IBM Corp. 2021
-* US Government Users Restricted Rights - Use, duplication or disclosure
-* restricted by GSA ADP Schedule Contract with IBM Corp.
-*/
-.c4p--datagrid__customize-columns-modal .bx--modal-content {
-  position: inherit;
-  display: flex;
-  flex-flow: column;
-  /* stylelint-disable-next-line declaration-no-important */
-  padding-top: 0 !important;
-}
-
-.c4p--datagrid__customize-columns-checkbox {
-  display: flex;
-  justify-content: center;
-  /* stylelint-disable-next-line declaration-no-important */
-  margin-bottom: 0 !important;
-}
-
-.c4p--datagrid__customize-columns-modal--actions {
-  display: flex;
-  flex-flow: row;
-  margin-bottom: var(--cds-spacing-06, 1.5rem);
-}
-
-.c4p--datagrid__customize-columns-modal--actions > button {
-  margin-left: var(--cds-spacing-05, 1rem);
-}
-
-.c4p--datagrid__customize-columns-instructions {
-  margin-bottom: var(--cds-spacing-06, 1.5rem);
-  font-size: var(--cds-body-long-01-font-size, 0.875rem);
-  font-weight: var(--cds-body-long-01-font-weight, 400);
-  line-height: var(--cds-body-long-01-line-height, 1.42857);
-  letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
-  color: var(--cds-text-01, #161616);
-}
-
-.c4p--datagrid__customize-columns-column-list {
-  position: relative;
-  overflow: auto;
-}
-
-/*# sourceMappingURL=CustomizeColumnsModal.css.map */

package/css/components/Datagrid/styles/addons/CustomizeColumnsModal.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["../../../../../scss/components/Datagrid/styles/addons/CustomizeColumnsModal.scss","../../../../../../../node_modules/carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/themes/generated/_mixins.scss","../../../../../../../node_modules/@carbon/type/scss/_styles.import.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWE;EACE;EACA;EACA;AACA;EACA;;;AAIJ;EACE;EACA;AACA;EACA;;;AAGF;EACE;EACA;EACA,eCq7Be;;;ADl7BjB;EACE,aC66Be;;;AD16BjB;EACE,eC66Be;EClQb;EAAA;EAAA;EAAA;EFxqBF,OCkXY;;;AD/Wd;EACE;EACA","file":"CustomizeColumnsModal.css"}

package/css/components/Datagrid/styles/addons/RowSizeDropdown.css

@@ -1,20 +0,0 @@
-/*
-* Licensed Materials - Property of IBM
-* 5724-Q36
-* (c) Copyright IBM Corp. 2021
-* US Government Users Restricted Rights - Use, duplication or disclosure
-* restricted by GSA ADP Schedule Contract with IBM Corp.
-*/
-.c4p--datagrid__row-size-dropdown {
-  position: absolute;
-  padding: var(--cds-spacing-05, 1rem);
-  background-color: var(--cds-ui-background, #ffffff);
-  box-shadow: 1px 4px 8px -3px var(--cds-overlay-01, rgba(22, 22, 22, 0.5)), -1px 6px 8px -5px var(--cds-overlay-01, rgba(22, 22, 22, 0.5));
-}
-
-.c4p--datagrid__row-size-button--open {
-  background-color: var(--cds-ui-background, #ffffff);
-  box-shadow: 1px 4px 8px -3px var(--cds-overlay-01, rgba(22, 22, 22, 0.5)), -1px 6px 8px -5px var(--cds-overlay-01, rgba(22, 22, 22, 0.5));
-}
-
-/*# sourceMappingURL=RowSizeDropdown.css.map */

package/css/components/Datagrid/styles/addons/RowSizeDropdown.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["../../../../../scss/components/Datagrid/styles/addons/RowSizeDropdown.scss","../../../../../../../node_modules/carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/themes/generated/_mixins.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUA;EACE;EACA,SCm8Be;EDl8Bf,kBCsXkB;EDpXlB;;;AAGF;EACE,kBCgXkB;ED9WlB","file":"RowSizeDropdown.css"}