@carbon/ibm-products 2.0.0-rc.9 → 2.0.1

package/scss/components/Datagrid/styles/addons/_CustomizeColumnsModal.scss

@@ -1,93 +0,0 @@
-/*
-* Licensed Materials - Property of IBM
-* 5724-Q36
-* (c) Copyright IBM Corp. 2021, 2022
-* US Government Users Restricted Rights - Use, duplication or disclosure
-* restricted by GSA ADP Schedule Contract with IBM Corp.
-*/
-
-@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;
-@use '../variables';
-
-.#{variables.$block-class}__customize-columns-modal {
-  .#{c4p-settings.$carbon-prefix}--modal-content {
-    position: inherit;
-    display: flex;
-    flex-flow: column;
-    padding: 0;
-    margin: 0;
-  }
-}
-
-.#{variables.$block-class}__customize-columns-checkbox-wrapper {
-  margin-bottom: 0;
-}
-.#{variables.$block-class}__customize-columns-checkbox-wrapper {
-  display: flex;
-  justify-content: center;
-}
-
-.#{variables.$block-class}__customize-columns-modal--actions {
-  display: flex;
-  height: $spacing-09;
-  flex-flow: row;
-  background-color: $field-02;
-}
-
-.#{variables.$block-class}__customize-columns-modal--actions
-  input[role='searchbox'] {
-  height: $spacing-09;
-  padding-left: $spacing-08;
-  border-bottom: none;
-}
-
-.#{variables.$block-class}__customize-columns-modal--actions > button {
-  margin-left: $spacing-05;
-}
-
-.#{variables.$block-class}__customize-columns-instructions {
-  padding-left: $spacing-05;
-  margin-bottom: $spacing-06;
-
-  @include type.type-style('body-long-01');
-
-  color: $text-primary;
-}
-
-.#{variables.$block-class}__customize-columns-column-list {
-  position: relative; // needed for the react-dnd, otherwise the drag preview will not work correctly
-  overflow: auto;
-}
-
-.#{variables.$block-class}__customize-columns-select-all {
-  display: flex;
-  height: $spacing-09;
-  align-items: center;
-  padding-left: $spacing-08;
-  border-bottom: 1px solid $layer-active;
-  background-color: $layer-01;
-}
-.#{variables.$block-class}__customize-columns-select-all:hover {
-  background-color: $layer-hover-01;
-}
-.#{variables.$block-class}__customize-columns-select-all-selected {
-  display: flex;
-  height: $spacing-09;
-  align-items: center;
-  padding-left: $spacing-08;
-  border-bottom: 1px solid $layer-active;
-  background-color: $layer-selected-01;
-}
-
-.#{variables.$block-class}__customize-columns-select-all-selected:hover {
-  background-color: $background-selected-hover;
-}
-
-.#{variables.$block-class}
-  .#{variables.$block-class}__customize-columns-modal
-  .#{c4p-settings.$carbon-prefix}--modal-content {
-  margin-bottom: 0;
-}

package/scss/components/InlineEditV1/_carbon-imports.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/InlineEditV1/_index.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 './inline-edit-v1';

package/scss/components/InlineEditV1/_inline-edit-v1.scss

@@ -1,355 +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.
-//
-
-// Standard imports.
-@use '@carbon/styles/scss/theme' as *;
-@use '@carbon/styles/scss/spacing' as *;
-@use '@carbon/styles/scss/motion' as *;
-@use '../../global/styles/project-settings' as c4p-settings;
-@use '../../global/styles/mixins' as *;
-
-// Other Carbon settings.
-// TODO: @use '@carbon/react/scss/grid'; if needed
-
-// InlineEdit uses the following Carbon components:
-// TODO: @use(s) of Carbon component styles used by InlineEdit
-
-// InlineEdit uses the following Carbon for IBM Products components:
-// TODO: @use(s) of IBM Products component styles used by InlineEdit
-
-// cut down version borrowed from 'carbon-components/scss/globals/scss/vendor/@carbon/styles/scss/utilities/focus-outline';
-@mixin input-outline($color: $focus) {
-  /* stylelint-disable-next-line carbon/theme-token-use */
-  outline: $spacing-01 solid $color;
-  outline-offset: calc(-1 * #{$spacing-01});
-
-  @media screen and (prefers-contrast) {
-    outline-style: dotted;
-  }
-}
-
-@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;
-
-  border: 2px solid transparent;
-}
-
-// The block part of our conventional BEM class names (blockClass__E--M).
-$block-class: #{c4p-settings.$pkg-prefix}--inline-edit;
-
-@include block-wrap($block-class) {
-  --#{$block-class}--size: #{$spacing-08};
-  --#{$block-class}--icon-size: #{$spacing-05};
-  --#{$block-class}--background-color: #{$layer-01};
-  --#{$block-class}--toolbar-width: calc(2 * var(--#{$block-class}--size));
-
-  &.#{$block-class}--light {
-    --#{$block-class}--background-color: transparent;
-  }
-
-  &:hover {
-    --#{$block-class}--background-color: #{$background-hover};
-    // background-color: $background-color;
-  }
-
-  position: relative;
-  display: inline-block;
-  // A standard input box is based on size (often around 150px)
-  // In our case there are potentially 2 * size buttons which we double
-  min-width: calc(4 * var(--#{$block-class}--size));
-  max-width: 100%;
-  height: var(--#{$block-class}--size);
-  background-color: var(--#{$block-class}--background-color);
-  cursor: text; // appear to be part of the text box
-  transition: background-color $duration-fast-01 motion(entrance, productive),
-    box-shadow $duration-fast-01 motion(entrance, productive),
-    border-color $duration-fast-01 motion(entrance, productive);
-  vertical-align: middle; // mis-aligned items cause height to grow beyond setting.
-
-  white-space: nowrap;
-
-  &.#{$block-class}--sm {
-    --#{$block-class}--size: #{$spacing-07};
-    --#{$block-class}--icon-size: #{$spacing-05};
-  }
-
-  &.#{$block-class}--lg {
-    --#{$block-class}--size: #{$spacing-09};
-    --#{$block-class}--icon-size: #{$spacing-05};
-  }
-
-  &.#{$block-class}--invalid {
-    // editing takes precedence over invalid
-    @include input-outline($support-error);
-  }
-
-  &.#{$block-class}--editing {
-    @include input-outline($focus);
-
-    background-color: $layer-01;
-  }
-
-  .#{$block-class}__input {
-    display: inline-block;
-    overflow: hidden;
-    // positions text and placeholder including when showing placeholder
-    // NOTE: Using flex does strange things to a caret in content editable
-    width: calc(100% - var(--#{$block-class}--toolbar-width) - #{$spacing-05});
-    max-width: calc(
-      100% - var(--#{$block-class}--toolbar-width) - #{$spacing-05}
-    );
-    min-height: var(--#{$block-class}--size);
-    /* stylelint-disable-next-line carbon/layout-token-use */
-    margin-right: var(--#{$block-class}--toolbar-width);
-    // room for toolbar
-    margin-left: $spacing-05;
-    font-family: inherit;
-    // stylelint-disable-next-line carbon/type-token-use
-    line-height: var(--#{$block-class}--size);
-
-    &:focus {
-      outline: none;
-    }
-  }
-
-  &.#{$block-class}--invalid .#{$block-class}__input {
-    // add space for validation
-    --#{$block-class}--toolbar-width: calc(3 * var(--#{$block-class}--size));
-  }
-
-  .#{$block-class}__input::after {
-    position: absolute;
-    top: 0;
-    left: 0;
-    display: block;
-    overflow: hidden;
-    width: 0;
-    margin-left: $spacing-05;
-    color: $text-helper;
-    content: attr(data-placeholder);
-    opacity: 0;
-    visibility: hidden;
-  }
-
-  .#{$block-class}__ellipsis {
-    display: inline-block;
-    overflow: hidden;
-    width: 0;
-    height: var(--#{$block-class}--size);
-    // stylelint-disable-next-line carbon/type-token-use
-    line-height: var(--#{$block-class}--size);
-    opacity: 0;
-    pointer-events: none;
-
-    // only transition fade in
-    transition: opacity $duration-moderate-02 motion(standard, productive);
-  }
-
-  &.#{$block-class}--overflows:not(.#{$block-class}--editing)
-    .#{$block-class}__ellipsis {
-    width: initial;
-    opacity: 1;
-  }
-
-  .#{$block-class}__disabled-cover {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    pointer-events: none; // act as if not there
-  }
-
-  &.#{$block-class}--disabled .#{$block-class}__disabled-cover {
-    // when disabled prevent pointer events going through to the input
-    cursor: not-allowed;
-    pointer-events: all;
-  }
-
-  .#{$block-class}__input--empty::after {
-    width: initial;
-    opacity: 1;
-    // only transition fade in
-    transition: opacity $duration-moderate-02 motion(standard, productive);
-    visibility: visible;
-  }
-
-  .#{$block-class}__after-input-elements {
-    --#{$block-class}--toolbar-width: calc(2 * var(--#{$block-class}--size));
-
-    // not simply flexed in as this causes flexbox to mis-measure the size of the input
-    position: absolute;
-    top: 0;
-    right: 0;
-    display: flex;
-    // width: room for validation, and two buttons
-    width: var(--#{$block-class}--toolbar-width);
-    height: 100%;
-    justify-content: space-between;
-    cursor: text;
-  }
-
-  &.#{$block-class}--invalid .#{$block-class}__after-input-elements {
-    // width: room for validation, and two buttons
-    --#{$block-class}--toolbar-width: calc(3 * var(--#{$block-class}--size));
-  }
-
-  .#{$block-class}__toolbar--animation {
-    // width: ;
-  }
-
-  &.#{$block-class}--editing .#{$block-class}__toolbar::after {
-    // cover top and bottom when focus within block
-    // doing the same on the buttons is problematic when animating
-    // and causes visual artifacts when the button is hovered without focus
-    // as the buttons leave a 45% join between sides with transparent borders and top/bottom with $focus
-    position: absolute;
-    top: 0;
-    left: 0;
-    display: block;
-    width: 100%;
-    height: 100%;
-    box-sizing: border-box;
-    border: 2px solid $focus;
-    border-left: 0;
-    content: '';
-    pointer-events: none;
-  }
-
-  &.#{$block-class}.#{$block-class} .#{$block-class}__save,
-  &.#{$block-class}.#{$block-class} .#{$block-class}__cancel {
-    @include input-button-defaults($block-class);
-
-    // input does not have focus
-    &:hover {
-      outline: initial;
-    }
-
-    &:focus:active,
-    &:focus {
-      // border focus input does NOT have focus
-      border-color: $focus;
-      box-shadow: initial;
-      outline: initial;
-    }
-
-    &:focus:active:hover {
-      box-shadow: inset 0 0 0 1px $field-01;
-    }
-
-    &::before {
-      background-color: transparent;
-    }
-
-    &[disabled] {
-      border-color: transparent;
-    }
-  }
-
-  &.#{$block-class}--editing
-    .#{$block-class}__toolbar--animation
-    .#{$block-class}__save {
-    overflow: visible;
-    width: var(--#{$block-class}--edit-size);
-    transition: all $duration-moderate-02 motion(standard, productive);
-    transition-property: margin, padding;
-  }
-
-  &.#{$block-class}--editing
-    .#{$block-class}__toolbar--animation:not(.#{$block-class}__toolbar--saveable)
-    .#{$block-class}__save {
-    overflow: hidden;
-    width: 0;
-    padding: 0;
-    border-right: 0;
-    border-left: 0;
-  }
-
-  &.#{$block-class}--editing
-    .#{$block-class}__toolbar--animation
-    .#{$block-class}__save {
-    margin-right: 0;
-    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;
-    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 {
-    @include input-button-defaults($block-class);
-    // pointer-events: none;
-    &:hover,
-    &:active,
-    &:focus {
-      border-color: transparent;
-      background-color: transparent;
-      box-shadow: initial;
-      outline: initial;
-    }
-  }
-
-  @media (hover: hover) {
-    // if hover is the primary input mechanism hide edit button
-    .#{$block-class}__edit {
-      opacity: 0;
-      transition: opacity $duration-fast-01 motion(entrance, productive);
-    }
-
-    &:hover .#{$block-class}__edit {
-      opacity: 1;
-    }
-  }
-
-  .#{$block-class}__edit--always-visible {
-    opacity: 1;
-  }
-
-  .#{$block-class}__validation-icon {
-    @include input-button-defaults($block-class);
-  }
-
-  &.#{$block-class}--invalid .#{$block-class}__validation-icon {
-    color: $support-error;
-  }
-
-  .#{$block-class}__validation-text {
-    display: block;
-    overflow: visible;
-    margin-left: $spacing-05;
-  }
-
-  &.#{$block-class}--invalid .#{$block-class}__validation-text {
-    color: $support-error;
-  }
-}

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

@@ -1,9 +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 './carbon-imports';
-@use './inline-edit-v2';

package/scss/components/InlineEditV2/_inline-edit-v2.scss

@@ -1,83 +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.
-//
-
-// Standard imports.
-@use '@carbon/styles/scss/spacing' as *;
-@use '@carbon/styles/scss/theme' as *;
-@use '../../global/styles/project-settings' as *;
-@use '@carbon/styles/scss/type';
-
-$block-class: #{$pkg-prefix}--inline-edit-v2;
-$carbon-input: #{$carbon-prefix}--text-input;
-
-.#{$block-class} {
-  display: flex;
-  align-items: center;
-  background: transparent;
-  cursor: pointer;
-}
-
-.#{$block-class}-readonly {
-  cursor: not-allowed;
-}
-
-.#{$block-class}:hover {
-  background: $field-01;
-}
-
-.#{$block-class}:hover .#{$block-class}__btn-edit {
-  visibility: visible;
-}
-
-.#{$block-class}__btn-edit {
-  visibility: hidden;
-}
-
-.#{$block-class}-focused {
-  background: $field-01;
-  outline: 2px solid $focus;
-}
-
-.#{$block-class}__text-input {
-  flex: 1;
-}
-
-.#{$block-class}__text-input-label {
-  display: none;
-}
-
-.#{$block-class}__warning-icon {
-  /* stylelint-disable-next-line carbon/layout-token-use */
-  margin-right: 0.4375rem;
-  color: $support-error;
-}
-
-.#{$block-class}__warning-text {
-  @include type.type-style('label-01');
-
-  margin-top: $spacing-03;
-  color: $support-error;
-}
-
-// overrides
-.#{$block-class}__text-input.#{$carbon-input} {
-  border: none;
-  background: transparent;
-  cursor: pointer;
-  outline: none;
-}
-
-.#{$block-class}-readonly .#{$block-class}__text-input.#{$carbon-input},
-.#{$block-class}-readonly
-  .#{$carbon-prefix}--btn.#{$carbon-prefix}--btn--icon-only.#{$carbon-prefix}--tooltip__trigger {
-  cursor: not-allowed;
-}
-
-.#{$block-class}__text-input.#{$carbon-input}:focus,
-.#{$block-class}__text-input.#{$carbon-input}:active {
-  outline: none;
-}

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

@@ -1,10 +0,0 @@
-//
-// 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.
-//
-
-// ModifiedTabs uses the following Carbon components:
-// Tabs, Tab
-@use '@carbon/react/scss/components/tabs';

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

@@ -1,9 +0,0 @@
-//
-// 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 './modified-tabs';

package/scss/components/ModifiedTabs/_modified-tabs.scss

@@ -1,89 +0,0 @@
-//
-// 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.
-//
-
-// Standard imports.
-@use '@carbon/styles/scss/theme' as *;
-@use '@carbon/react/scss/components/button/tokens' as *;
-@use '@carbon/styles/scss/motion' as *;
-@use '@carbon/styles/scss/spacing' as *;
-@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}--modified-tabs;
-
-.#{$block-class} .#{$block-class}__tab-label {
-  display: flex;
-  width: 100%;
-  // height: 100%;
-  align-items: flex-end;
-  justify-content: space-between;
-}
-
-.#{$block-class}__tab-new,
-.#{$block-class}__tab {
-  position: relative;
-  display: inline-block;
-  width: 100%;
-  height: 100%;
-}
-
-.#{$block-class}__tab-new-img,
-.#{$block-class}__tab-close {
-  // similar to modal dialog close
-  position: absolute;
-  top: -$spacing-04;
-  right: -$spacing-05;
-  overflow: hidden;
-  width: 2.5rem;
-  height: 2.5rem;
-  padding: $spacing-04;
-  border: $spacing-01 solid transparent;
-  background-color: transparent;
-  border-radius: 0;
-  cursor: pointer;
-  transition: background-color $duration-fast-02 motion(standard, productive);
-  // stylelint-disable-next-line max-nesting-depth
-  @media (prefers-reduced-motion: reduce) {
-    transition: none;
-  }
-}
-
-.#{$block-class}__tab-new-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-  margin-top: $spacing-01;
-}
-
-.#{$block-class}__tab-close:focus {
-  border-color: $button-primary;
-  outline: none;
-}
-
-.#{$block-class}__tab-close:hover {
-  background-color: $background-hover;
-}
-
-.#{$block-class}__tab-new-img {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-}
-
-.#{$block-class}
-  .#{c4p-settings.$carbon-prefix}--tabs__nav-item.#{c4p-settings.$carbon-prefix}--tabs__nav-link {
-  width: 10rem;
-}
-
-.#{$block-class}
-  .#{c4p-settings.$carbon-prefix}--tab--overflow-nav-button--previous,
-.#{$block-class}
-  .#{c4p-settings.$carbon-prefix}--tab--overflow-nav-button--next {
-  z-index: 2;
-}

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

@@ -1,6 +0,0 @@
-//
-// Copyright IBM Corp. 2020, 2020
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//