fix: correct usage of dt/dd in description list

magicbell · Mar 27, 2024 · 8c6dd0e · 8c6dd0e
1 parent 47c31fc
commit 8c6dd0e
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 10 deletions.
diff --git a/.changeset/healthy-emus-prove.md 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
@@ -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<React.ElementRef<'div'>, ItemProps>(function Item(
 
   return (
     <StyledItem stacked={stacked} labelWidth={labelWidth} truncate={truncate} {...props} ref={ref}>
-      <dd>{label}</dd>
+      <dt>{label}</dt>
       <StyledValue muted={!hasValue}>
-        <dt>{hasValue ? value : 'n/a'}</dt>
+        <dd>{hasValue ? value : 'n/a'}</dd>
         {hasValue && showCopyButton && (
           <StyledAddon>
             <CopyButton variant="text" value={String(copyValue)} />