Labels can truncate and FormFields force Label truncation (#1499)

* Labels can truncate and FormFields force Label truncation

* changelog

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"
+}

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(
+      <FormField>
+        <Label>Pick Email Address</Label>
+        <Input />
+      </FormField>
+    )
+
+    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(
       <FormField>

packages/core/src/FormField/FormField.stories.tsx

@@ -86,6 +86,13 @@ export const DynamicLabelWithValue = () => (
   </FormField>
 )
 
+export const WithTruncatedLabel = () => (
+  <FormField width='200px'>
+    <Label>Really long label that will get truncated</Label>
+    <Input value='hello@example.com' />
+  </FormField>
+)
+
 export const IconToTheRight = () => (
   <FormField>
     <Label htmlFor='dynamic-label-email-icon-right'>Email Address</Label>

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',

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;

packages/core/src/Label/Label.spec.tsx

@@ -9,18 +9,37 @@ describe('Label', () => {
   })
 
   test('Label hidden renders', () => {
-    const json = rendererCreateWithTheme(<Label hidden />).toJSON()
-    expect(json).toMatchSnapshot()
+    render(<Label hidden>Label Children</Label>)
+
+    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(<Label nowrap />).toJSON()
-    expect(json).toMatchSnapshot()
+    render(<Label nowrap>Label Children</Label>)
+
+    expect(screen.getByText('Label Children')).toHaveStyleRule('white-space', 'nowrap')
+  })
+
+  test('Label truncate renders', () => {
+    render(<Label truncate>Label Children</Label>)
+
+    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(<Label width={1 / 2} nowrap />).toJSON()
-    expect(json).toMatchSnapshot()
+    render(
+      <Label width={1 / 2} nowrap>
+        Label Children
+      </Label>
+    )
+
+    expect(screen.getByText('Label Children')).toHaveStyleRule('white-space', 'nowrap')
+    expect(screen.getByText('Label Children')).toHaveStyleRule('width', '50%')
   })
 
   test('Label clickable renders with cursor pointer', () => {

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'],

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<LabelProps> & { isLabel?: boolean } = styled.label.
 
   ${nowrap}
   ${accessiblyHide}
+  ${truncate}
 
   ${(props) => compose(fontSize, fontWeight, lineHeight, letterSpacing, space, textStyle, width)(props)}
 `

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;
-}
-
-<label
-  className="c0"
-  color="text.light"
-  fontSize="10px"
-  fontWeight={700}
-  hidden={true}
-  letterSpacing="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;
-}
-
-<label
-  className="c0"
-  color="text.light"
-  fontSize="10px"
-  fontWeight={700}
-  letterSpacing="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;
-}
-
-<label
-  className="c0"
-  color="text.light"
-  fontSize="10px"
-  fontWeight={700}
-  letterSpacing="0.2px"
-  width={0.5}
-/>
-`;
-
 exports[`Label it renders 1`] = `
 .c0 {
   display: block;