feat: add ellipsis to inline-edit v2 pkg v1 (#2931)

* feat: add ellipsis to inline-edit v2 pkg v1 * chore: update snapshot
carbon-design-system · Apr 28, 2023 · 9f60ac9 · 9f60ac9
1 parent d1f7d2e
commit 9f60ac9
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 4 deletions.
diff --git a/packages/cloud-cognitive/src/__tests__/__snapshots__/styles.test.js.snap b/packages/cloud-cognitive/src/__tests__/__snapshots__/styles.test.js.snap
@@ -2385,6 +2385,14 @@ exports[`CSS export checks doesn't change the exported CSS for released componen
   letter-spacing: inherit;
   line-height: inherit;
 }
+.c4p--inline-edit-v2__ellipsis {
+  position: relative;
+  margin-left: calc(-1 * var(--cds-spacing-05, 1rem));
+  opacity: 0;
+}
+.c4p--inline-edit-v2--overflows:not(.c4p--inline-edit-v2--focused) .c4p--inline-edit-v2__ellipsis {
+  opacity: 1;
+}
 .c4p--inline-edit-v2__text-input-label {
   display: none;
 }

diff --git a/packages/cloud-cognitive/src/components/InlineEditV2/InlineEditV2.js b/packages/cloud-cognitive/src/components/InlineEditV2/InlineEditV2.js
@@ -149,6 +149,9 @@ export let InlineEditV2 = forwardRef(
             [`${blockClass}--focused`]: focused,
             [`${blockClass}--invalid`]: invalid,
             [`${blockClass}--inherit-type`]: inheritTypography,
+            [`${blockClass}--overflows`]:
+              inputRef.current &&
+              inputRef.current.scrollWidth > inputRef.current.offsetWidth,
             // [`${blockClass}--readonly`]: readOnly,
           })}
           onFocus={onFocusHandler}
@@ -171,6 +174,9 @@ export let InlineEditV2 = forwardRef(
             // readOnly={readOnly}
             onKeyDown={onKeyHandler}
           />
+          <div className={`${blockClass}__ellipsis`} aria-hidden={!focused}>
+            &hellip;
+          </div>
           <div className={`${blockClass}__toolbar`}>
             {invalid && (
               <WarningFilled16 className={`${blockClass}__warning-icon`} />

diff --git a/packages/cloud-cognitive/src/components/InlineEditV2/InlineEditV2.stories.js b/packages/cloud-cognitive/src/components/InlineEditV2/InlineEditV2.stories.js
@@ -13,18 +13,33 @@ import {
 import { action } from '@storybook/addon-actions';
 import { InlineEdit } from '../InlineEdit/InlineEdit';
 import { InlineEditV2 } from '.';
+import { DisplayBox } from '../../global/js/utils/DisplayBox';
 import mdx from './InlineEditV2.mdx';
 import styles from './_storybook-styles.scss';
 
+const storyClass = 'inline-edit-v2-example';
+
 export default {
   title: getStoryTitle(InlineEditV2.displayName),
   component: InlineEditV2,
+  argTypes: {
+    containerWidth: {
+      control: { type: 'range', min: 20, max: 800, step: 10 },
+      description:
+        'Controls containing element width. Used for demonstration purposes, not property of the component.',
+    },
+  },
   parameters: {
     styles,
     docs: {
       page: mdx,
     },
   },
+  decorators: [
+    (story) => (
+      <DisplayBox className={`${storyClass}__viewport`}>{story()}</DisplayBox>
+    ),
+  ],
 };
 
 const actionSave = action('save');
@@ -33,6 +48,7 @@ const actionCancel = action('cancel');
 
 const defaultProps = {
   cancelLabel: 'Cancel',
+  containerWidth: 300,
   editLabel: 'Edit',
   id: 'story-id',
   invalid: false,
@@ -48,7 +64,7 @@ const defaultProps = {
   value: 'default',
 };
 
-const Template = (args) => {
+const Template = ({ containerWidth, ...args }) => {
   const [value, setValue] = useState(defaultProps.value);
 
   const onChange = (val) => {
@@ -74,7 +90,11 @@ const Template = (args) => {
     onCancel,
   };
 
-  return <InlineEdit {...props} className="inline-edit-v2-example" />;
+  return (
+    <div style={{ width: containerWidth }}>
+      <InlineEdit {...props} className="inline-edit-v2-example" />
+    </div>
+  );
 };
 
 export const Default = prepareStory(Template, {

diff --git a/packages/cloud-cognitive/src/components/InlineEditV2/_inline-edit-v2.scss b/packages/cloud-cognitive/src/components/InlineEditV2/_inline-edit-v2.scss
@@ -72,6 +72,16 @@
       line-height: inherit;
     }
 
+    &__ellipsis {
+      position: relative;
+      margin-left: calc(-1 * $spacing-05);
+      opacity: 0;
+    }
+
+    &--overflows:not(.#{$block-class}--focused) .#{$block-class}__ellipsis {
+      opacity: 1;
+    }
+
     &__text-input-label {
       display: none;
     }

diff --git a/packages/cloud-cognitive/src/components/InlineEditV2/_storybook-styles.scss b/packages/cloud-cognitive/src/components/InlineEditV2/_storybook-styles.scss
@@ -4,6 +4,13 @@
 // 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;
+
+@import '../../global/styles/display-box';
+
+$block-class: 'inline-edit-v2-example';
+
+.#{$block-class}__viewport {
+  // width: 300px; // larger than standard size needed by text input at standard font size (html input attribute size)
+  // stylelint-disable-next-line carbon/layout-token-use
+  margin: 100px;
 }