@carbon/ibm-products 2.0.0-rc.27 → 2.0.0-rc.28

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

@@ -1,269 +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;
-  }
-}
-
-// 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};
-  }
-
-  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;
-    color: $text-primary;
-    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 {
-    display: flex;
-    align-items: center;
-  }
-
-  &.#{$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 {
-    display: inline-flex;
-  }
-
-  &.#{$block-class}--editing
-    .#{$block-class}__toolbar--animation
-    .#{$block-class}__save {
-    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 {
-    width: 0;
-    padding: 0;
-    border-right: 0;
-    border-left: 0;
-  }
-
-  @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}--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/_storybook-styles.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.
-//
-.inline-edit-v2-example {
-  width: 15rem;
-}