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(