@carbon/ibm-products 1.23.1 → 1.24.0

package/scss/components/EditFullPage/_edit-full-page.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
+
+// EditFullPage uses the following Carbon components:
+// TODO: @import(s) of Carbon component styles used by EditFullPage
+
+// EditFullPage uses the following Carbon for IBM Products components:
+// TODO: @import(s) of IBM Products component styles used by EditFullPage
+
+// Define all component styles in a mixin which is then exported using
+// the Carbon import-once mechanism.
+@mixin edit-full-page {
+  // The block part of our conventional BEM class names (blockClass__E--M).
+  $block-class: #{$pkg-prefix}--edit-full-page;
+
+  .#{$block-class} {
+    // TODO: Styles.
+  }
+}
+
+@include exports('edit-full-page') {
+  @include edit-full-page;
+}

package/scss/components/EditFullPage/_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-full-page';

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/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';