diff --git a/.changeset/fair-pugs-flash.md b/.changeset/fair-pugs-flash.md new file mode 100644 index 0000000000..16db211129 --- /dev/null +++ b/.changeset/fair-pugs-flash.md @@ -0,0 +1,6 @@ +--- +'@twilio-paste/label': patch +'@twilio-paste/core': patch +--- + +[Label] Add "required" title to required dot diff --git a/packages/paste-core/components/label/__tests__/label.test.tsx b/packages/paste-core/components/label/__tests__/label.test.tsx index b8952ee0ec..8872a9705d 100644 --- a/packages/paste-core/components/label/__tests__/label.test.tsx +++ b/packages/paste-core/components/label/__tests__/label.test.tsx @@ -75,10 +75,10 @@ describe('Customization', () => { }); describe('RequiredDot', () => { - it('should not have text by default', () => { + it('should have text "Required" by default', () => { render(); const dot = screen.getByTestId('test-dot'); - expect(dot?.textContent).toEqual(''); + expect(dot?.textContent).toEqual('Required'); }); it('should use i18nLabel prop for the dot text', () => { diff --git a/packages/paste-core/components/label/src/RequiredDot.tsx b/packages/paste-core/components/label/src/RequiredDot.tsx index 57b0917eca..5abdc8011c 100644 --- a/packages/paste-core/components/label/src/RequiredDot.tsx +++ b/packages/paste-core/components/label/src/RequiredDot.tsx @@ -11,7 +11,7 @@ export interface RequiredDotProps { export const RequiredDot: React.FC> = ({ element = 'REQUIRED_DOT', - i18nLabel = '', + i18nLabel = 'Required', ...props }) => { return ( @@ -23,6 +23,7 @@ export const RequiredDot: React.FC> = cursor="pointer" display="flex" height="sizeIcon30" + title={i18nLabel} element={`${element}_WRAPPER`} >