diff --git a/packages/cloud-cognitive/src/__tests__/__snapshots__/styles.test.js.snap b/packages/cloud-cognitive/src/__tests__/__snapshots__/styles.test.js.snap
index 757a71dfe1..a7f648b879 100644
--- 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
index f9eda8140e..780e388989 100644
--- 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}
/>
+
{invalid && (
diff --git a/packages/cloud-cognitive/src/components/InlineEditV2/InlineEditV2.stories.js b/packages/cloud-cognitive/src/components/InlineEditV2/InlineEditV2.stories.js
index d5c7d870fd..7433ea1634 100644
--- 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) => (
+
{story()}
+ ),
+ ],
};
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
;
+ return (
+
+
+
+ );
};
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
index 5fc61e9a41..e87a711859 100644
--- 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
index 37dc75a329..9788619f40 100644
--- 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;
}