fix(Tag): properly handle spacing props

dnbexperience · May 20, 2022 · d7129d8 · d7129d8
1 parent 5841990
commit d7129d8
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 11 deletions.
diff --git a/packages/dnb-eufemia/src/components/tag/Tag.tsx b/packages/dnb-eufemia/src/components/tag/Tag.tsx
@@ -15,6 +15,7 @@ import { usePropsWithContext } from '../../shared/hooks'
 // Internal
 import TagGroup from './TagGroup'
 import { TagGroupContext } from './TagContext'
+import { createSpacingClasses } from '../space/SpacingHelper'
 
 export interface TagProps {
   /**
@@ -83,6 +84,14 @@ const Tag = (localProps: TagProps & ISpacingProps) => {
   const tagGroupContext = React.useContext(TagGroupContext)
 
   // Extract additional props from global context
+  const allProps = usePropsWithContext(
+    localProps,
+    defaultProps,
+    context?.translation?.Tag,
+    context?.Tag,
+    tagGroupContext
+  )
+
   const {
     className,
     skeleton,
@@ -93,25 +102,22 @@ const Tag = (localProps: TagProps & ISpacingProps) => {
     onDelete,
     omitOnKeyUpDeleteEvent,
     ...props
-  } = usePropsWithContext(
-    localProps,
-    defaultProps,
-    context?.translation?.Tag,
-    context?.Tag,
-    tagGroupContext
-  )
+  } = allProps
 
   const content = text || children
   const isClickable = !!onClick
   const isRemovable = !!onDelete && !isClickable
   const isInteractive = isClickable || isRemovable
-
+  const spacingClasses = createSpacingClasses(props)
   const tagClassNames = classnames(
     'dnb-tag',
     className,
+    spacingClasses,
     isInteractive && 'dnb-tag--interactive',
     isRemovable && 'dnb-tag--removable'
   )
+  const buttonAttr: typeof props & Pick<ButtonProps, 'element' | 'type'> =
+    props
 
   const isDeleteKeyboardEvent = (keyboardEvent) => {
     return (
@@ -125,9 +131,6 @@ const Tag = (localProps: TagProps & ISpacingProps) => {
     }
   }
 
-  const buttonAttr: typeof props & Pick<ButtonProps, 'element' | 'type'> =
-    props
-
   if (!isInteractive) {
     buttonAttr.element = 'span'
     buttonAttr.type = ''

diff --git a/packages/dnb-eufemia/src/components/tag/__tests__/Tag.test.tsx b/packages/dnb-eufemia/src/components/tag/__tests__/Tag.test.tsx
@@ -75,6 +75,25 @@ describe('Tag Group', () => {
       skeletonClassName
     )
   })
+
+  it('should support spacing props', () => {
+    render(
+      <Tag.Group label="tags" top="2rem">
+        <Tag>Tag</Tag>
+      </Tag.Group>
+    )
+
+    const element = screen.getByTestId('tag-group')
+    const attributes = Array.from(element.attributes).map(
+      (attr) => attr.name
+    )
+
+    expect(attributes).toEqual(['class', 'data-testid'])
+    expect(Array.from(element.classList)).toEqual([
+      'dnb-tag__group',
+      'dnb-space__top--large',
+    ])
+  })
 })
 
 describe('Tag', () => {
@@ -195,6 +214,29 @@ describe('Tag', () => {
     ).toBeTruthy()
   })
 
+  it('should support spacing props', () => {
+    render(
+      <Tag.Group label="tags">
+        <Tag left="2rem">Tag</Tag>
+      </Tag.Group>
+    )
+
+    const element = screen.getByTestId('tag')
+    const attributes = Array.from(element.attributes).map(
+      (attr) => attr.name
+    )
+
+    expect(attributes).toEqual(['class', 'data-testid'])
+    expect(Array.from(element.classList)).toEqual([
+      'dnb-button',
+      'dnb-button--unstyled',
+      'dnb-button--has-text',
+      'dnb-space__left--large',
+      'dnb-tag',
+      'dnb-button--size-small',
+    ])
+  })
+
   describe('with onClick', () => {
     it('renders a clickable tag with the correct attributes if onClick is defined', () => {
       const clickableClassName = 'dnb-tag--interactive'