diff --git a/common/changes/pcln-design-system/label-form-field-truncation_2024-06-05-22-26.json b/common/changes/pcln-design-system/label-form-field-truncation_2024-06-05-22-26.json
new file mode 100644
index 0000000000..2c77d23ad6
--- /dev/null
+++ b/common/changes/pcln-design-system/label-form-field-truncation_2024-06-05-22-26.json
@@ -0,0 +1,10 @@
+{
+ "changes": [
+ {
+ "packageName": "pcln-design-system",
+ "comment": "Labels can truncate and FormFields force Label truncation",
+ "type": "minor"
+ }
+ ],
+ "packageName": "pcln-design-system"
+}
\ No newline at end of file
diff --git a/packages/core/src/FormField/FormField.spec.tsx b/packages/core/src/FormField/FormField.spec.tsx
index 539ef2aa55..72378d9637 100644
--- a/packages/core/src/FormField/FormField.spec.tsx
+++ b/packages/core/src/FormField/FormField.spec.tsx
@@ -3,7 +3,7 @@ import React from 'react'
import { Input } from '../Input/Input'
import { Label } from '../Label/Label'
import { Select } from '../Select/Select'
-import { render } from '../__test__/testing-library'
+import { render, screen } from '../__test__/testing-library'
import { FormField } from './FormField'
afterEach(() => {
@@ -54,6 +54,19 @@ describe('FormField', () => {
expect(json).toMatchSnapshot()
})
+ test('renders with Label - forces truncate', () => {
+ render(
+
+
+
+
+ )
+
+ expect(screen.getByText('Pick Email Address')).toHaveStyleRule('white-space', 'nowrap')
+ expect(screen.getByText('Pick Email Address')).toHaveStyleRule('overflow', 'hidden')
+ expect(screen.getByText('Pick Email Address')).toHaveStyleRule('text-overflow', 'ellipsis')
+ })
+
test('renders with Label autoHide prop', () => {
const json = rendererCreateWithTheme(
diff --git a/packages/core/src/FormField/FormField.stories.tsx b/packages/core/src/FormField/FormField.stories.tsx
index 5530396067..8afb30e53a 100644
--- a/packages/core/src/FormField/FormField.stories.tsx
+++ b/packages/core/src/FormField/FormField.stories.tsx
@@ -86,6 +86,13 @@ export const DynamicLabelWithValue = () => (
)
+export const WithTruncatedLabel = () => (
+
+
+
+
+)
+
export const IconToTheRight = () => (
diff --git a/packages/core/src/FormField/FormField.tsx b/packages/core/src/FormField/FormField.tsx
index 6ad8a32df2..4e8638d2c4 100644
--- a/packages/core/src/FormField/FormField.tsx
+++ b/packages/core/src/FormField/FormField.tsx
@@ -99,6 +99,7 @@ export function FormField({ children, disabled, readOnly, ...props }: FormFieldP
React.cloneElement(label, {
htmlFor: label.props.htmlFor || id,
fontSize: 10,
+ truncate: true,
ml,
pt: labelPaddingTop(inputSize),
mb: '-20px',
diff --git a/packages/core/src/FormField/__snapshots__/FormField.spec.tsx.snap b/packages/core/src/FormField/__snapshots__/FormField.spec.tsx.snap
index 1669624907..2db6b23888 100644
--- a/packages/core/src/FormField/__snapshots__/FormField.spec.tsx.snap
+++ b/packages/core/src/FormField/__snapshots__/FormField.spec.tsx.snap
@@ -74,6 +74,9 @@ exports[`FormField disabled state renders input with icon - disabled 1`] = `
margin: 0;
z-index: 1;
color: #4f6f8f;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
font-size: 10px;
margin-left: 40px;
padding-top: 6px;
@@ -236,6 +239,9 @@ exports[`FormField disabled state renders select with icon - disabled 1`] = `
margin: 0;
z-index: 1;
color: #4f6f8f;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
font-size: 10px;
margin-left: 40px;
padding-top: 6px;
@@ -496,6 +502,9 @@ exports[`FormField renders 1`] = `
margin: 0;
z-index: 1;
color: #4f6f8f;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
font-size: 10px;
margin-left: 12px;
padding-top: 6px;
@@ -658,6 +667,9 @@ exports[`FormField renders with Icon 1`] = `
margin: 0;
z-index: 1;
color: #4f6f8f;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
font-size: 10px;
margin-left: 40px;
padding-top: 6px;
@@ -852,6 +864,9 @@ exports[`FormField renders with Label autoHide prop 1`] = `
margin: 0;
z-index: 1;
color: #4f6f8f;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
font-size: 10px;
margin-left: 40px;
padding-top: 6px;
@@ -994,6 +1009,9 @@ exports[`FormField renders with Select 1`] = `
margin: 0;
z-index: 1;
color: #4f6f8f;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
font-size: 10px;
margin-left: 12px;
padding-top: 6px;
@@ -1189,6 +1207,9 @@ exports[`FormField renders with Select and Icon 1`] = `
margin: 0;
z-index: 1;
color: #4f6f8f;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
font-size: 10px;
margin-left: 40px;
padding-top: 6px;
diff --git a/packages/core/src/Label/Label.spec.tsx b/packages/core/src/Label/Label.spec.tsx
index 29a87be0a3..9591f97280 100644
--- a/packages/core/src/Label/Label.spec.tsx
+++ b/packages/core/src/Label/Label.spec.tsx
@@ -9,18 +9,37 @@ describe('Label', () => {
})
test('Label hidden renders', () => {
- const json = rendererCreateWithTheme().toJSON()
- expect(json).toMatchSnapshot()
+ render()
+
+ expect(screen.getByText('Label Children')).toHaveStyleRule('position', 'absolute')
+ expect(screen.getByText('Label Children')).toHaveStyleRule('width', '1px')
+ expect(screen.getByText('Label Children')).toHaveStyleRule('height', '1px')
+ expect(screen.getByText('Label Children')).toHaveStyleRule('clip', 'rect(1px,1px,1px,1px)')
})
test('Label nowrap renders', () => {
- const json = rendererCreateWithTheme().toJSON()
- expect(json).toMatchSnapshot()
+ render()
+
+ expect(screen.getByText('Label Children')).toHaveStyleRule('white-space', 'nowrap')
+ })
+
+ test('Label truncate renders', () => {
+ render()
+
+ expect(screen.getByText('Label Children')).toHaveStyleRule('white-space', 'nowrap')
+ expect(screen.getByText('Label Children')).toHaveStyleRule('overflow', 'hidden')
+ expect(screen.getByText('Label Children')).toHaveStyleRule('text-overflow', 'ellipsis')
})
test('Label width renders', () => {
- const json = rendererCreateWithTheme().toJSON()
- expect(json).toMatchSnapshot()
+ render(
+
+ )
+
+ expect(screen.getByText('Label Children')).toHaveStyleRule('white-space', 'nowrap')
+ expect(screen.getByText('Label Children')).toHaveStyleRule('width', '50%')
})
test('Label clickable renders with cursor pointer', () => {
diff --git a/packages/core/src/Label/Label.stories.args.ts b/packages/core/src/Label/Label.stories.args.ts
index 98a9bbe57a..794bf58163 100644
--- a/packages/core/src/Label/Label.stories.args.ts
+++ b/packages/core/src/Label/Label.stories.args.ts
@@ -7,7 +7,10 @@ const actions = {
}
export const defaultArgs = {
- children: 'Label Children',
+ children: 'Label Children Long Message That Could Truncate',
+ hidden: false,
+ nowrap: false,
+ truncate: false,
width: 'auto',
}
@@ -23,6 +26,18 @@ export const argTypes = {
options: [0, 1, 2, 3, 4, 5, 6],
control: 'select',
},
+ hidden: {
+ name: 'hidden',
+ control: 'boolean',
+ },
+ nowrap: {
+ name: 'nowrap',
+ control: 'boolean',
+ },
+ truncate: {
+ name: 'truncate',
+ control: 'boolean',
+ },
width: {
name: 'width',
options: [0.5, '20px', 'auto'],
diff --git a/packages/core/src/Label/Label.tsx b/packages/core/src/Label/Label.tsx
index 2e041a2aa8..b9642fcd74 100644
--- a/packages/core/src/Label/Label.tsx
+++ b/packages/core/src/Label/Label.tsx
@@ -36,6 +36,15 @@ const accessiblyHide = (props) =>
}
: null
+const truncate = (props) =>
+ props.truncate
+ ? {
+ whiteSpace: 'nowrap',
+ overflow: 'hidden',
+ textOverflow: 'ellipsis',
+ }
+ : null
+
/**
* @public
*/
@@ -52,6 +61,7 @@ export type LabelProps = SpaceProps &
nowrap?: boolean
for?: string
as?: unknown
+ truncate?: boolean
onClick?: (evt: unknown) => void
}
@@ -74,6 +84,7 @@ export const Label: React.FC & { isLabel?: boolean } = styled.label.
${nowrap}
${accessiblyHide}
+ ${truncate}
${(props) => compose(fontSize, fontWeight, lineHeight, letterSpacing, space, textStyle, width)(props)}
`
diff --git a/packages/core/src/Label/__snapshots__/Label.spec.tsx.snap b/packages/core/src/Label/__snapshots__/Label.spec.tsx.snap
index 88e59f1905..cb9bba35e2 100644
--- a/packages/core/src/Label/__snapshots__/Label.spec.tsx.snap
+++ b/packages/core/src/Label/__snapshots__/Label.spec.tsx.snap
@@ -1,90 +1,5 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`Label Label hidden renders 1`] = `
-.c0 {
- display: block;
- width: 100%;
- margin: 0;
- z-index: 1;
- color: #4f6f8f;
- position: absolute;
- width: 1px;
- height: 1px;
- -webkit-clip: rect(1px,1px,1px,1px);
- clip: rect(1px,1px,1px,1px);
- font-weight: 700;
- font-size: 10px;
- line-height: 1.4;
- -webkit-letter-spacing: 0.2px;
- -moz-letter-spacing: 0.2px;
- -ms-letter-spacing: 0.2px;
- letter-spacing: 0.2px;
-}
-
-
-`;
-
-exports[`Label Label nowrap renders 1`] = `
-.c0 {
- display: block;
- width: 100%;
- margin: 0;
- z-index: 1;
- color: #4f6f8f;
- white-space: nowrap;
- font-weight: 700;
- font-size: 10px;
- line-height: 1.4;
- -webkit-letter-spacing: 0.2px;
- -moz-letter-spacing: 0.2px;
- -ms-letter-spacing: 0.2px;
- letter-spacing: 0.2px;
-}
-
-
-`;
-
-exports[`Label Label width renders 1`] = `
-.c0 {
- display: block;
- width: 100%;
- margin: 0;
- z-index: 1;
- color: #4f6f8f;
- white-space: nowrap;
- width: 50%;
- font-weight: 700;
- font-size: 10px;
- line-height: 1.4;
- -webkit-letter-spacing: 0.2px;
- -moz-letter-spacing: 0.2px;
- -ms-letter-spacing: 0.2px;
- letter-spacing: 0.2px;
-}
-
-
-`;
-
exports[`Label it renders 1`] = `
.c0 {
display: block;