diff --git a/src/components/DefinitionList/DefinitionList.scss b/src/components/DefinitionList/DefinitionList.scss index 0e4749b8d9..5d0e47f10b 100644 --- a/src/components/DefinitionList/DefinitionList.scss +++ b/src/components/DefinitionList/DefinitionList.scss @@ -11,7 +11,8 @@ $block: '.#{variables.$ns}definition-list'; &__group-title { margin-block-end: var(--g-spacing-3); - &:not(:first-of-type) { + //decreace specifity to allow groupLabelClassName work properly + :where(&:not(:first-of-type)) { margin-block-start: var(--g-spacing-5); } } @@ -21,19 +22,19 @@ $block: '.#{variables.$ns}definition-list'; align-items: baseline; gap: var(--g-spacing-1); - & + & { + :where(& + &) { margin-block-start: var(--g-spacing-4); } } &__item_grouped { - & + & { + :where(& + &) { margin-block-start: var(--g-spacing-3); } } &_margin { - &:not(:first-of-type) { + :where(&:not(:first-of-type)) { margin-block-start: var(--g-spacing-5); } } @@ -136,13 +137,17 @@ $block: '.#{variables.$ns}definition-list'; flex-direction: column; gap: var(--g-spacing-half); } - #{$block}__item + #{$block}__item { + :where(#{$block}__item + #{$block}__item) { margin-block-start: var(--g-spacing-3); } - #{$block}__group-title:not(:first-of-type) { + :where(#{$block}__group-title:not(:first-of-type)) { margin-block-start: var(--g-spacing-8); } - #{$block}_margin:not(:first-of-type) { + :where(#{$block}_margin:not(:first-of-type)) { margin-block-start: var(--g-spacing-8); } } + +.unique { + margin: unset; +} diff --git a/src/components/DefinitionList/DefinitionList.tsx b/src/components/DefinitionList/DefinitionList.tsx index c0e35f6bd4..35d9616623 100644 --- a/src/components/DefinitionList/DefinitionList.tsx +++ b/src/components/DefinitionList/DefinitionList.tsx @@ -96,6 +96,7 @@ function DefinitionListGrouped({ items, className, itemClassName, + groupLabelClassName, ...rest }: DefinitionListGroupedProps) { const normalizedItems = React.useMemo(() => { @@ -103,17 +104,17 @@ function DefinitionListGrouped({ }, [items]); return ( -
+
{normalizedItems.map((item) => { const {key, label} = item; return ( - {label && } + {label && } {item.items && ( diff --git a/src/components/DefinitionList/README.md b/src/components/DefinitionList/README.md index ee4a7eaf26..f04125f3ad 100644 --- a/src/components/DefinitionList/README.md +++ b/src/components/DefinitionList/README.md @@ -63,16 +63,17 @@ LANDING_BLOCK--> ## Properties -| Property | Type | Required | Default | Description | -| :-------------- | :----------------------------- | :-------: | :----------- | :-------------------------------------------------------------------------------------------------- | -| [items](#items) | `DefinitionListItem[]` | yes | | Items of the list | -| responsive | `boolean` | | | If set to `true` list will take 100% width of its parent | -| direction | `'horizontal'` \| `'vertical'` | | 'horizontal' | If set to `vertical` content will be located under name and list will take 100% width of its parent | -| nameMaxWidth | `number` | | | Maximum width of term | -| contentMaxWidth | `number \| 'auto'` | | 'auto' | Maximum width of definition | -| className | `string` | | | Class name for the list container | -| itemClassName | `string` | | | Class name for the list item | -| copyPosition | `'inside' \| 'outside'` | 'outside' | | If set to `inside`, copy icon will be placed over definition | +| Property | Type | Required | Default | Description | +| :------------------ | :----------------------------- | :-------: | :----------- | :-------------------------------------------------------------------------------------------------- | +| [items](#items) | `DefinitionListItem[]` | yes | | Items of the list | +| responsive | `boolean` | | | If set to `true` list will take 100% width of its parent | +| direction | `'horizontal'` \| `'vertical'` | | 'horizontal' | If set to `vertical` content will be located under name and list will take 100% width of its parent | +| nameMaxWidth | `number` | | | Maximum width of term | +| contentMaxWidth | `number \| 'auto'` | | 'auto' | Maximum width of definition | +| className | `string` | | | Class name for the definition list (for every granular definition list in group view) | +| itemClassName | `string` | | | Class name for the list item | +| groupLabelClassName | `string` | | | Class name for the group label in group view | +| copyPosition | `'inside' \| 'outside'` | 'outside' | | If set to `inside`, copy icon will be placed over definition | ### Items diff --git a/src/components/DefinitionList/__tests__/DefinitionList.test.tsx b/src/components/DefinitionList/__tests__/DefinitionList.test.tsx index 3299326be4..7b01fd2d65 100644 --- a/src/components/DefinitionList/__tests__/DefinitionList.test.tsx +++ b/src/components/DefinitionList/__tests__/DefinitionList.test.tsx @@ -82,6 +82,18 @@ describe('components: DefinitionList', () => { const component = screen.getByText('Test group'); expect(component).toBeVisible(); }); + it('should render group label class name', () => { + const items = [ + { + label: 'Test group', + items: [{name: 'test1', content: 'value1'}], + }, + ]; + getComponent({items, groupLabelClassName: 'test'}); + + const component = screen.getByText('Test group').parentElement; + expect(component).toHaveClass('test'); + }); it('should render grouped items', () => { const items = [ { diff --git a/src/components/DefinitionList/components/GroupLabel.tsx b/src/components/DefinitionList/components/GroupLabel.tsx index 8cbcd7ef8d..0fed188afc 100644 --- a/src/components/DefinitionList/components/GroupLabel.tsx +++ b/src/components/DefinitionList/components/GroupLabel.tsx @@ -5,11 +5,12 @@ import {b} from '../utils'; interface GroupLabelProps { label: React.ReactNode; + className?: string; } -export function GroupLabel({label}: GroupLabelProps) { +export function GroupLabel({label, className}: GroupLabelProps) { return ( -
+
{label} diff --git a/src/components/DefinitionList/types.ts b/src/components/DefinitionList/types.ts index 7e25841caf..2e307a362e 100644 --- a/src/components/DefinitionList/types.ts +++ b/src/components/DefinitionList/types.ts @@ -32,6 +32,7 @@ export interface DefinitionListProps extends QAProps { contentMaxWidth?: number | 'auto'; className?: string; itemClassName?: string; + groupLabelClassName?: string; } export interface DefinitionListGranularProps extends Omit {