diff --git a/.changeset/healthy-emus-prove.md b/.changeset/healthy-emus-prove.md new file mode 100644 index 00000000..4e08d0a9 --- /dev/null +++ b/.changeset/healthy-emus-prove.md @@ -0,0 +1,5 @@ +--- +'@darkmagic/react': patch +--- + +fix dd/dt usage in description list diff --git a/packages/react/src/components/description-list.tsx b/packages/react/src/components/description-list.tsx index 9a0afb4f..5de6313f 100644 --- a/packages/react/src/components/description-list.tsx +++ b/packages/react/src/components/description-list.tsx @@ -13,20 +13,20 @@ const StyledItem = styled('div', { display: 'flex', font: '$body-small', - '& dd': { + '& dt': { truncate: true, flex: 'none', color: '$text-muted', }, - '& dt': { + '& dd': { color: '$text-default', }, variants: { truncate: { true: { - '& dt': { + '& dd': { truncate: true, }, @@ -40,22 +40,22 @@ const StyledItem = styled('div', { true: { flexDirection: 'column', gap: '0', - '&& dd': { + '&& dt': { width: 'unset', }, }, false: { flexDirection: 'row', - '&& dd': { + '&& dt': { pr: '$4', }, }, }, labelWidth: { - sm: { '& dd': { width: '$40' } }, - md: { '& dd': { width: '$50' } }, - lg: { '& dd': { width: '$60' } }, + sm: { '& dt': { width: '$40' } }, + md: { '& dt': { width: '$50' } }, + lg: { '& dt': { width: '$60' } }, }, }, @@ -139,9 +139,9 @@ const Item = React.forwardRef, ItemProps>(function Item( return ( -
{label}
+
{label}
-
{hasValue ? value : 'n/a'}
+
{hasValue ? value : 'n/a'}
{hasValue && showCopyButton && (