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 {