@carbon/ibm-products 1.3.0 → 1.4.0

package/scss/components/CancelableTextEdit/_cancelable-text-edit.scss

@@ -18,120 +18,191 @@
 // CancelableTextEdit uses the following Carbon for IBM Products components:
 // TODO: @import(s) of IBM Products component styles used by CancelableTextEdit
 
-// Define all component styles in a mixin which is then exported using
-// the Carbon import-once mechanism.
-@mixin cancelable-text-edit {
-  // The block part of our conventional BEM class names (blockClass__E--M).
-  $block-class: #{$pkg-prefix}--cancelable-text-edit;
-
-  .#{$block-class}.#{$block-class} {
-    --size: #{$spacing-08};
-
-    position: relative;
-    width: 100%;
-    min-height: var(--size);
-  }
-
-  .#{$block-class}.#{$block-class}--xl {
-    --size: $spacing-09;
-  }
-
-  .#{$block-class}.#{$block-class} .#{$block-class}__input {
-    height: var(--size);
-    // stylelint-disable-next-line carbon/layout-token-use
-    padding-right: calc(2 * var(--size));
-  }
-
-  .#{$block-class}__buttons {
-    position: absolute;
-    top: 0;
-    right: 0;
-  }
-  .#{$block-class}.#{$block-class} .#{$block-class}__revert,
-  .#{$block-class}.#{$block-class} .#{$block-class}__save {
-    width: var(--size);
-    height: var(--size);
-    min-height: var(--size);
+@mixin button-states($block-class) {
+  .#{$block-class}__revert,
+  .#{$block-class}__save {
+    border: 1px solid transparent;
 
+    // input does not have focus
     &:hover {
-      // border hover input does NOT have focus
       border-color: $hover-field;
-      border-bottom: 1px solid transparent;
+      border-bottom-color: transparent;
       background-clip: content-box;
       box-shadow: initial;
+      outline: initial;
     }
 
     &:focus:active,
     &:focus {
       // border focus input does NOT have focus
-      border-width: 2px;
       border-color: $focus;
-      box-shadow: initial;
+      box-shadow: inset 0 0 0 1px $focus;
+      outline: initial;
     }
 
     &:focus:active:hover {
-      // stylelint-disable-next-line carbon/layout-token-use
-      padding: 1px;
+      box-shadow: inset 0 0 0 1px $focus, inset 0 0 0 2px $field-01;
     }
 
     &::before {
       background-color: transparent;
     }
+
+    &[disabled] {
+      border-color: transparent;
+    }
   }
 
-  // border hover input has focus
-  // and/or is invalid
-  .#{$block-class}.#{$block-class}--invalid
-    .#{$carbon-prefix}--text-input-wrapper
-    ~ .#{$block-class}__buttons,
-  .#{$block-class}.#{$block-class}
-    .#{$carbon-prefix}--text-input-wrapper:focus-within
+  // invalid affects hover state
+  &.#{$block-class}--invalid {
+    // invalid does not have focus
+    .#{$block-class}__save:hover,
+    .#{$block-class}__revert:hover {
+      border: 1px solid transparent;
+      box-shadow: inset 0 1px 0 $support-01, inset 0 -1px 0 $support-01;
+    }
+
+    .#{$block-class}__save:hover {
+      // invalid does  not have focus
+      box-shadow: inset 0 1px 0 $support-01, inset 0 -1px 0 $support-01,
+        inset -1px 0 0 $support-01;
+    }
+  }
+
+  // after other button states handle focus within input
+  .#{$carbon-prefix}--text-input-wrapper:focus-within
     ~ .#{$block-class}__buttons {
     .#{$block-class}__revert,
     .#{$block-class}__save {
-      border: 2px solid transparent;
+      border: 1px solid transparent;
+      box-shadow: inset 0 1px 0 $focus, inset 0 -1px 0 $focus;
       // transition-property: initial; // turn off seems to cause a bit of a visual glitch
     }
 
     // button hover state
     .#{$block-class}__revert:hover,
     .#{$block-class}__save:hover {
-      border-top: 2px solid transparent;
-      border-bottom: 2px solid transparent;
       background-clip: content-box;
     }
+
     .#{$block-class}__save {
       // border hover input has focus or is in error
-      border-right: 2px solid transparent;
+      box-shadow: inset 0 1px 0 $focus, inset 0 -1px 0 $focus,
+        inset -1px 0 0 $focus;
     }
   }
+}
 
-  // > only wish to affect version added for inline
-  .#{$block-class}--invalid > .#{$carbon-prefix}--form-requirement,
-  .#{$block-class}--warn > .#{$carbon-prefix}--form-requirement {
-    display: block;
-    max-height: initial;
-    // stylelint-disable-next-line carbon/layout-token-use
-    margin-left: calc(20% + 1.25rem); // needs to match inline input layout
-  }
+// Define all component styles in a mixin which is then exported using
+// the Carbon import-once mechanism.
+@mixin cancelable-text-edit {
+  // The block part of our conventional BEM class names (blockClass__E--M).
+  $block-class: #{$pkg-prefix}--cancelable-text-edit;
 
-  // > only wish to affect version added for inline
-  .#{$block-class}--invalid > .#{$carbon-prefix}--form-requirement {
-    color: $text-error;
+  .#{$block-class} {
+    --size: #{$spacing-08};
+    --icon-size: #{$spacing-05};
   }
 
-  .#{$block-class} .#{$carbon-prefix}--text-input {
-    // stylelint-disable-next-line carbon/layout-token-use
-    padding-right: calc(2 * var(--size)); // to take account of save and revert
+  .#{$block-class}--sm {
+    --size: #{$spacing-07};
+    --icon-size: #{$spacing-05};
   }
 
-  .#{$block-class} .#{$carbon-prefix}--text-input--invalid {
-    // stylelint-disable-next-line carbon/layout-token-use
-    padding-right: calc(3 * var(--size)); // to take account of save and revert
+  .#{$block-class}--lg {
+    --size: #{$spacing-09};
+    --icon-size: #{$spacing-05};
   }
 
-  .#{$block-class} .#{$carbon-prefix}--text-input__invalid-icon {
-    margin-right: $spacing-11;
+  // high specificity to override some icon button styles to work like the Carbon search clear button
+  // but at sizes of text input
+  .#{$block-class}.#{$block-class}.#{$block-class} {
+    .#{$block-class}__main {
+      position: relative;
+      display: inline-flex;
+      min-height: var(--size);
+      vertical-align: top;
+    }
+
+    .#{$block-class}__input {
+      height: var(--size);
+      // stylelint-disable-next-line carbon/layout-token-use
+      padding-right: calc(2 * var(--size));
+    }
+
+    .#{$block-class}__buttons {
+      position: absolute;
+      top: 0;
+      right: 0;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .#{$block-class}__buttons-inner {
+      display: flex;
+    }
+
+    @include button-states($block-class);
+
+    .#{$block-class}__revert,
+    .#{$block-class}__save {
+      display: flex;
+      width: var(--size);
+      height: var(--size);
+      min-height: var(--size);
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 0;
+
+      svg {
+        width: var(--icon-size);
+        height: var(--icon-size);
+        // margin: calc(var(--size) / 4);
+      }
+    }
+
+    // > only wish to affect version added for inline
+    &.#{$block-class}--invalid .#{$carbon-prefix}--form-requirement,
+    &.#{$block-class}--warn .#{$carbon-prefix}--form-requirement {
+      display: block;
+      max-height: initial;
+    }
+
+    &.#{$block-class}--invalid.#{$block-class}--inline
+      .#{$carbon-prefix}--form-requirement,
+    &.#{$block-class}--warn.#{$block-class}--inline
+      .#{$carbon-prefix}--form-requirement {
+      // stylelint-disable-next-line carbon/layout-token-use
+      margin-left: calc(20% + 1.25rem); // needs to match inline input layout
+    }
+
+    // > only wish to affect version added for inline
+    &.#{$block-class}--invalid .#{$carbon-prefix}--form-requirement {
+      display: block;
+      overflow: visible;
+      // max-height: 12.5rem;
+      // font-weight: 400;
+      color: $text-error;
+    }
+
+    .#{$carbon-prefix}--text-input {
+      // stylelint-disable-next-line carbon/layout-token-use
+      padding-right: calc(
+        2 * var(--size)
+      ); // to take account of save and revert
+    }
+
+    .#{$carbon-prefix}--text-input--invalid {
+      // stylelint-disable-next-line carbon/layout-token-use
+      padding-right: calc(
+        3 * var(--size)
+      ); // to take account of save and revert
+    }
+
+    .#{$carbon-prefix}--text-input__invalid-icon {
+      margin-right: $spacing-11;
+    }
   }
 }
 

package/scss/components/CreateFullPage/_create-full-page.scss

@@ -30,6 +30,7 @@
 @mixin create-full-page {
   // The block part of our conventional BEM class names (blockClass__E--M).
   $block-class: #{$pkg-prefix}--create-full-page;
+  $step-block-class: #{$pkg-prefix}--create-full-page__step;
 
   .#{$block-class} .#{$block-class} {
     color: $text-01;
@@ -41,20 +42,14 @@
     margin-left: 0;
   }
 
-  .#{$block-class} .#{$block-class}__step--hidden-step,
-  .#{$block-class} .#{$block-class}__step--hidden-section {
+  .#{$block-class} .#{$step-block-class}__step--hidden-step {
     display: none;
   }
 
-  .#{$block-class} .#{$block-class}__step--visible-section {
+  .#{$block-class} .#{$step-block-class}__step--visible-step {
     display: block;
   }
 
-  .#{$block-class} .#{$block-class}__step--visible-step {
-    opacity: 1;
-  }
-
-  .#{$block-class} .#{$block-class}__section-subtitle,
   .#{$block-class} .#{$block-class}__step-subtitle {
     @include carbon--type-style('productive-heading-01');
 
@@ -62,7 +57,6 @@
     margin-bottom: $spacing-03;
   }
 
-  .#{$block-class} .#{$block-class}__section-description,
   .#{$block-class} .#{$block-class}__step-description {
     @include carbon--type-style('body-long-01');
 
@@ -150,8 +144,7 @@
     }
   }
 
-  .#{$block-class} .#{$block-class}__step-title,
-  .#{$block-class} .#{$block-class}__section-title {
+  .#{$block-class} .#{$block-class}__step-title {
     @include carbon--type-style('productive-heading-04');
 
     max-width: 50%;

package/scss/components/CreateTearsheet/_create-tearsheet.scss

@@ -36,6 +36,7 @@
   }
 
   $block-class: #{$pkg-prefix}--tearsheet-create;
+  $step-block-class: #{$pkg-prefix}--tearsheet-create__step;
   $section-block-class: #{$pkg-prefix}--tearsheet-create__section;
   $tearsheet-divider-class: #{$pkg-prefix}--tearsheet-create__section--divider;
   $tearsheet-fieldset-class: #{$pkg-prefix}--tearsheet-create__step--fieldset;
@@ -44,16 +45,11 @@
     --#{$block-class}--total-width: 0;
   }
 
-  .#{$block-class} .#{$block-class}__step--hidden-step,
-  .#{$block-class} .#{$block-class}__step--hidden-section {
+  .#{$block-class} .#{$step-block-class}__step--hidden-step {
     display: none;
   }
 
-  .#{$block-class} .#{$block-class}__step--visible-section {
-    display: block;
-  }
-
-  .#{$block-class} .#{$block-class}__step--visible-step {
+  .#{$block-class} .#{$step-block-class}__step--visible-step {
     animation: $duration--slow-01 stepContentEntrance;
     animation-fill-mode: forwards;
     animation-timing-function: $carbon--standard-easing;
@@ -61,7 +57,7 @@
   }
 
   @media (prefers-reduced-motion) {
-    .#{$block-class} .#{$block-class}__step--visible-step {
+    .#{$block-class} .#{$step-block-class}__step--visible-step {
       animation: none;
       opacity: 1;
     }

package/scss/components/InlineEdit/_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 './inline-edit';

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

@@ -0,0 +1,44 @@
+//
+// 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
+
+// InlineEdit uses the following Carbon components:
+// TODO: @import(s) of Carbon component styles used by InlineEdit
+
+// InlineEdit uses the following Carbon for IBM Products components:
+// TODO: @import(s) of IBM Products component styles used by InlineEdit
+
+// Define all component styles in a mixin which is then exported using
+// the Carbon import-once mechanism.
+@mixin inline-edit {
+  // The block part of our conventional BEM class names (blockClass__E--M).
+  $block-class: #{$pkg-prefix}--inline-edit;
+
+  .#{$block-class} {
+    display: inline-flex;
+    align-content: center;
+  }
+
+  .#{$block-class} .#{$block-class}__value {
+    display: flex;
+    align-items: center;
+  }
+
+  .#{$block-class} .#{$block-class}__button {
+    margin-left: $spacing-03;
+  }
+}
+
+@include exports('inline-edit') {
+  @include inline-edit;
+}

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

@@ -0,0 +1,15 @@
+//
+// 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 './index';
+
+// TODO: add any additional styles used by InlineEdit.stories.js
+
+// Uncomment next line (which must appear last) to test in storybook
+// that the SCSS styles for this component are sufficiently specific
+// to override Carbon whichever order the styles get loaded in.
+//@import 'carbon-components/css/carbon-components.min';

package/scss/components/MultiAddSelect/_index.scss

@@ -0,0 +1 @@
+@import './multi-add-select';

package/scss/components/MultiAddSelect/_multi-add-select.scss

@@ -0,0 +1 @@
+@import '../AddSelect/add-select';

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

@@ -0,0 +1,6 @@
+//
+// Copyright IBM Corp. 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/PageHeader/_page-header.scss

@@ -144,7 +144,7 @@ $right-section-alt-width: 100% - $left-section-alt-width;
 
     .#{$block-class}__breadcrumb-row:not(.#{$block-class}__breadcrumb-row--has-action-bar) {
       // lifts up page title when there is no action bar
-      margin-bottom: calc(-1 * #{$spacing-03});
+      min-height: $spacing-07;
     }
 
     .#{$block-class}__breadcrumb-row--container {
@@ -189,7 +189,7 @@ $right-section-alt-width: 100% - $left-section-alt-width;
       transition: all $duration--moderate-01 ease-out;
     }
 
-    .#{$block-class}__breadcrumb-row--next-to-tabs::after,
+    .#{$block-class}__breadcrumb-row--next-to-tabs:not(.#{$block-class}__has-page-actions-without-action-bar)::after,
     .#{$block-class}__breadcrumb-row--has-action-bar::after {
       /* creates a full width box shadow without causing scroll */
       box-shadow: 25vw 1px 0 0 $ui-03, -25vw 1px 0 0 $ui-03;
@@ -408,7 +408,6 @@ $right-section-alt-width: 100% - $left-section-alt-width;
     }
 
     .#{$block-class}__title-column {
-      overflow: hidden; /* required for ellipsis in title */
       min-height: 40px;
       flex: 0 0 100%;
 
@@ -421,11 +420,22 @@ $right-section-alt-width: 100% - $left-section-alt-width;
     .#{$block-class}__title {
       @include carbon--type-style('productive-heading-04');
 
-      overflow: hidden;
+      overflow-x: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
     }
 
+    .#{$block-class}__title .#{$pkg-prefix}--inline-edit__value {
+      // The heading text sits 2px pixels lower in the inline edit which is aligned center
+      // stylelint-disable-next-line carbon/layout-token-use
+      transform: translateY(-2px);
+    }
+
+    .#{$block-class}__title--editable {
+      display: flex;
+      overflow: visible;
+    }
+
     .#{$block-class}__title-skeleton {
       height: $spacing-07;
     }

package/scss/components/SingleAddSelect/_index.scss

@@ -0,0 +1 @@
+@import './single-add-select';

package/scss/components/SingleAddSelect/_single-add-select.scss

@@ -0,0 +1 @@
+@import '../AddSelect/add-select';

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

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

@@ -9,7 +9,6 @@
 
 @import './_Canary/canary';
 
-@import './AddSelect/index';
 @import './APIKeyModal/index';
 @import './AboutModal/index';
 @import './ActionSet/index';
@@ -28,12 +27,14 @@
 @import './ImportModal/index';
 @import './LoadingBar/index';
 @import './ModifiedTabs/index';
+@import './MultiAddSelect/index';
 @import './NotificationsPanel/index';
 @import './PageHeader/index';
 @import './ProductiveCard/index';
 @import './RemoveModal/index';
 @import './Saving/index';
 @import './SidePanel/index';
+@import './SingleAddSelect/index';
 @import './StatusIcon/index';
 @import './TagSet/index';
 @import './Tearsheet/index';
@@ -43,3 +44,4 @@
 @import './EditSidePanel/index';
 @import './OptionsTile/index';
 @import './CancelableTextEdit/index';
+@import './InlineEdit/index';

package/es/components/CreateFullPage/CreateFullPageSection.js

@@ -1,53 +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.
-//
-import React, { forwardRef } from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-import { pkg } from '../../settings';
-import { CREATE_FULL_PAGE_SECTION } from './constants';
-var blockClass = "".concat(pkg.prefix, "--create-full-page__section");
-export var CreateFullPageSection = /*#__PURE__*/forwardRef( // currently, we are not supporting the use of FullPageSections -- this may be a future feature
-
-/* istanbul ignore next */
-function (_ref, ref) {
-  var children = _ref.children,
-      className = _ref.className,
-      id = _ref.id;
-  return /*#__PURE__*/React.createElement("div", {
-    className: cx(blockClass, className),
-    ref: ref,
-    id: id
-  }, children);
-});
-CreateFullPageSection.propTypes = {
-  /**
-   * Content that shows in the CreateFullPage step
-   */
-  children: PropTypes.node,
-
-  /**
-   * Sets an optional className to be added to the CreateFullPage step
-   */
-  className: PropTypes.string,
-
-  /**
-   * Sets the id of the CreateTearsheetSection outermost element
-   */
-  id: PropTypes.string.isRequired,
-
-  /**
-   * Sets the title text for a CreateFullPage step
-   */
-  title: PropTypes.node.isRequired
-}; // Default values for component props. Default values are not required for
-// props that are required, nor for props where the component can apply
-// 'undefined' values reasonably. Default values should be provided when the
-// component needs to make a choice or assumption when a prop is not supplied.
-
-CreateFullPageSection.defaultProps = {
-  type: CREATE_FULL_PAGE_SECTION
-};

package/es/components/CreateFullPage/constants.js

@@ -1,8 +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.
-//
-export var CREATE_FULL_PAGE_STEP = 'CreateFullPageStep';
-export var CREATE_FULL_PAGE_SECTION = 'CreateFullPageSection';

package/es/components/CreateTearsheet/CreateTearsheetSection.js

@@ -1,83 +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.
- */
-import React, { forwardRef } from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-import { Column, Row } from 'carbon-components-react';
-import { pkg } from '../../settings';
-import { CREATE_TEARSHEET_SECTION } from './constants';
-var componentName = 'CreateTearsheetSection';
-var blockClass = "".concat(pkg.prefix, "--tearsheet-create__section");
-export var CreateTearsheetSection = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var id = _ref.id,
-      children = _ref.children,
-      className = _ref.className,
-      subtitle = _ref.subtitle,
-      description = _ref.description,
-      title = _ref.title,
-      isViewingAllStepsTogether = _ref.isViewingAllStepsTogether;
-  return /*#__PURE__*/React.createElement("div", {
-    className: cx(blockClass, className),
-    ref: ref,
-    id: id
-  }, /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Column, {
-    xlg: 12,
-    lg: 12,
-    md: 8,
-    sm: 8
-  }, isViewingAllStepsTogether && /*#__PURE__*/React.createElement("h4", {
-    className: "".concat(blockClass, "--title")
-  }, title), isViewingAllStepsTogether && subtitle && /*#__PURE__*/React.createElement("h6", {
-    className: "".concat(blockClass, "--subtitle")
-  }, subtitle), isViewingAllStepsTogether && description && /*#__PURE__*/React.createElement("p", {
-    className: "".concat(blockClass, "--description")
-  }, description))), children);
-});
-CreateTearsheetSection.displayName = componentName;
-CreateTearsheetSection.propTypes = {
-  /**
-   * Content that shows in the tearsheet step
-   */
-  children: PropTypes.node,
-
-  /**
-   * Sets an optional className to be added to the tearsheet step
-   */
-  className: PropTypes.string,
-
-  /**
-   * Sets an optional description on the section component
-   */
-  description: PropTypes.string,
-
-  /**
-   * Sets the id of the CreateTearsheetSection outermost element
-   */
-  id: PropTypes.string.isRequired,
-
-  /**
-   * The is an internal prop set in CreateTearsheet so the section knows when to render it's title
-   */
-  isViewingAllStepsTogether: PropTypes.bool,
-
-  /**
-   * Sets an optional subtitle on the section component
-   */
-  subtitle: PropTypes.string,
-
-  /**
-   * Sets the title text for a tearsheet step
-   */
-  title: PropTypes.node.isRequired
-}; // Default values for component props. Default values are not required for
-// props that are required, nor for props where the component can apply
-// 'undefined' values reasonably. Default values should be provided when the
-// component needs to make a choice or assumption when a prop is not supplied.
-
-CreateTearsheetSection.defaultProps = {
-  type: CREATE_TEARSHEET_SECTION
-};

package/es/components/CreateTearsheet/constants.js

@@ -1,8 +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.
- */
-export var CREATE_TEARSHEET_STEP = 'CreateTearsheetStep';
-export var CREATE_TEARSHEET_SECTION = 'CreateTearsheetSection';