diff --git a/packages/eui/changelogs/upcoming/8586.md b/packages/eui/changelogs/upcoming/8586.md new file mode 100644 index 00000000000..232b83a1d91 --- /dev/null +++ b/packages/eui/changelogs/upcoming/8586.md @@ -0,0 +1 @@ +- Spread `labelProps` to the `label` element in `EuiCheckableCard` diff --git a/packages/eui/src/components/card/checkable_card/checkable_card.stories.tsx b/packages/eui/src/components/card/checkable_card/checkable_card.stories.tsx index 2653b63822e..6b791ef3e9e 100644 --- a/packages/eui/src/components/card/checkable_card/checkable_card.stories.tsx +++ b/packages/eui/src/components/card/checkable_card/checkable_card.stories.tsx @@ -16,6 +16,10 @@ const meta: Meta = { // NOTE: Storybook isn't correctly inheriting certain props due to the exclusive union, // so we have to do some manual polyfilling argTypes: { + labelProps: { + control: 'object', + type: { name: 'object', value: { key: { name: 'string' } } }, + }, checkableType: { options: ['radio', 'checkbox'], control: 'radio', diff --git a/packages/eui/src/components/card/checkable_card/checkable_card.test.tsx b/packages/eui/src/components/card/checkable_card/checkable_card.test.tsx index b54ab4367cd..0f08e468c2c 100644 --- a/packages/eui/src/components/card/checkable_card/checkable_card.test.tsx +++ b/packages/eui/src/components/card/checkable_card/checkable_card.test.tsx @@ -82,4 +82,22 @@ describe('EuiCheckableCard', () => { expect(container.firstChild).toMatchSnapshot(); }); + + test('applies labelProps to the label element', () => { + const labelProps = { + 'data-test-subj': 'testLabel', + title: 'Test Title', + }; + + const { getByText } = render( + + ); + + const labelElement = getByText('Label'); + expect(labelElement).toHaveAttribute('data-test-subj', 'testLabel'); + expect(labelElement).toHaveAttribute('title', 'Test Title'); + }); }); diff --git a/packages/eui/src/components/card/checkable_card/checkable_card.tsx b/packages/eui/src/components/card/checkable_card/checkable_card.tsx index 764b18746ce..ccaa25be195 100644 --- a/packages/eui/src/components/card/checkable_card/checkable_card.tsx +++ b/packages/eui/src/components/card/checkable_card/checkable_card.tsx @@ -53,6 +53,7 @@ export const EuiCheckableCard: FunctionComponent = ({ css, checkableType = 'radio', label, + labelProps, checked, disabled, hasShadow, @@ -118,6 +119,7 @@ export const EuiCheckableCard: FunctionComponent = ({