fix(Tag): add default spacing 8px between tags (#1266)

* fix(Tag): add default spacing 8px between tags

* chore: remove clickable tag demo

packages/dnb-design-system-portal/src/docs/uilib/components/tag/Examples.js

@@ -5,7 +5,6 @@
 
 import ComponentBox from 'dnb-design-system-portal/src/shared/tags/ComponentBox'
 import {
-  send as Send,
   einvoice as EInvoice,
   ainvoice as AInvoice,
   digipost as DigiPost,
@@ -15,8 +14,8 @@ export const TagDefault = () => (
   <ComponentBox data-visual-test="tag-default">
     {() => /* jsx */ `
 <Tag.Group label="Payment types:">
-  <Tag right="x-small">Digipost</Tag>
-  <Tag right="x-small">AvtaleGiro</Tag>
+  <Tag>Digipost</Tag>
+  <Tag>AvtaleGiro</Tag>
 </Tag.Group>
 `}
   </ComponentBox>
@@ -29,22 +28,14 @@ export const TagWithIcon = () => (
   >
     {() => /* jsx */ `
 <Tag.Group label="Betalingstyper:">
-  <Tag icon={AInvoice} text="AvtaleGiro" right="x-small" />
-  <Tag icon={EInvoice} text="eFaktura" right="x-small" />
-  <Tag icon={DigiPost} text="DigiPost" right="x-small" />
+  <Tag icon={AInvoice} text="AvtaleGiro" />
+  <Tag icon={EInvoice} text="eFaktura" />
+  <Tag icon={DigiPost} text="DigiPost" />
 </Tag.Group>
 `}
   </ComponentBox>
 )
 
-export const TagClickable = () => (
-  <ComponentBox data-visual-test="tag-clickable" scope={{ Send }}>
-    {() => /* jsx */ `
-<Tag icon={Send} text="Send" onClick={() => { console.log("I was sent!") }}/>
-`}
-  </ComponentBox>
-)
-
 export const TagRemovable = () => (
   <ComponentBox data-visual-test="tag-removable">
     {() => /* jsx */ `
@@ -94,7 +85,6 @@ const Genres = () => {
               key={tag.key}
               text={tag.text}
               onDelete={handleDelete(tag)}
-              space={{right: 'x-small'}}
             />
         );
       })
@@ -111,10 +101,10 @@ export const TagSkeleton = () => (
   <ComponentBox data-visual-test="tag-skeleton">
     {() => /* jsx */ `
 <Tag.Group label="Skeletons:">
-  <Tag skeleton text="Skeleton" space={{right: 'x-small'}} /> 
-  <Tag skeleton text="Skeleton" space={{right: 'x-small'}} />
-  <Tag skeleton text="Skeleton" space={{right: 'x-small'}} />
+  <Tag skeleton text="Skeleton" /> 
+  <Tag skeleton text="Skeleton" />
+  <Tag skeleton text="Skeleton" />
 </Tag.Group>
 `}
   </ComponentBox>
-)
+)

packages/dnb-design-system-portal/src/docs/uilib/components/tag/demos.md

@@ -5,7 +5,6 @@ showTabs: true
 import {
 TagDefault,
 TagWithIcon,
-TagClickable,
 TagRemovable,
 TagMultipleRemovable,
 TagInline,
@@ -26,10 +25,6 @@ See more examples below.
 
 <TagWithIcon />
 
-#### Clickable Tag
-
-<TagClickable />
-
 #### Removable tag
 
 Use the `onDelete`-prop to make a tag removable. A removable tag supports adds a `onClick`-event to the underlying `Button`-component. <br/>

packages/dnb-design-system-portal/src/docs/uilib/components/tag/info.md

@@ -8,4 +8,4 @@ The Tag is a compact element for displaying discrete information.<br/>
 The component should have a clear and helpful relationship to the content or task it represents.<br/>
 For example, a Tag can be used to display a category of an item.<br/>
 
-Tags with the `onClick`-prop or `onDelete`-prop can be used to define an action. A clickable tag will change appearance on focus, hover, and click. <br/>
+Tags with the `onDelete`-prop can be used to define an action. A clickable tag will change appearance on focus, hover, and click. <br/>

packages/dnb-design-system-portal/src/docs/uilib/components/tag/visual-tests/clickable-tag.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import { Tag } from '@dnb/eufemia/src'
+
+export default function ClickableTag() {
+  return (
+    <div data-visual-test="tag-clickable" style={{ margin: '2rem' }}>
+      <Tag
+        text="Some filter"
+        onClick={() => {
+          console.log('I was sent!')
+        }}
+      />
+    </div>
+  )
+}

packages/dnb-eufemia-sandbox/stories/components/Tag.tsx

@@ -59,9 +59,9 @@ export const TagMultiple = () => {
     <Wrapper>
       <Box>
         <Tag.Group label="tags">
-          <Tag icon={bell} text={'Tag 1'} />{' '}
-          <Tag icon={car_1} text={'Tag 2'} />{' '}
-          <Tag icon={chip} text={'Tag 3'} />{' '}
+          <Tag icon={bell} text={'Tag 1'} />
+          <Tag icon={car_1} text={'Tag 2'} />
+          <Tag icon={chip} text={'Tag 3'} />
         </Tag.Group>
       </Box>
     </Wrapper>
@@ -123,7 +123,7 @@ export const TagClickable = () => {
           onClick={() => {
             console.log('Tag is clicked!')
           }}
-        />{' '}
+        />
       </Tag.Group>
     </Provider>
   )
@@ -140,28 +140,28 @@ export const TagMultipleClickable = () => {
               console.log('Click1')
             }}
             text={'First'}
-          />{' '}
+          />
           <Tag
             icon={scissors}
             onClick={() => {
               console.log('Click2')
             }}
             text={'Second'}
-          />{' '}
+          />
           <Tag
             icon={scooter}
             onClick={() => {
               console.log('Click3')
             }}
             text={'Third'}
-          />{' '}
+          />
           <Tag
             icon={share_ios}
             onClick={() => {
               console.log('Click4')
             }}
             text={'Fourth'}
-          />{' '}
+          />
         </Tag.Group>
       </Box>
     </Wrapper>
@@ -173,22 +173,22 @@ export const TagMixed = () => {
     <Wrapper>
       <Box>
         <Tag.Group label="numbers">
-          <Tag icon={save} text={'First'} />{' '}
+          <Tag icon={save} text={'First'} />
           <Tag
             icon={scissors}
             onClick={() => {
               console.log('Click2')
             }}
             text={'Second'}
-          />{' '}
-          <Tag icon={scooter} text={'Third'} />{' '}
+          />
+          <Tag icon={scooter} text={'Third'} />
           <Tag
             icon={share_ios}
             onClick={() => {
               console.log('Click4')
             }}
             text={'Fourth'}
-          />{' '}
+          />
         </Tag.Group>
       </Box>
     </Wrapper>
@@ -200,10 +200,10 @@ export const TagWithMediumSizedIcons = () => {
     <Wrapper>
       <Box>
         <Tag.Group label="medium sized">
-          <Tag icon={save_medium} text={'First'} />{' '}
-          <Tag icon={scissors_medium} text={'Second'} />{' '}
-          <Tag icon={scooter_medium} text={'Third'} />{' '}
-          <Tag icon={share_ios_medium} text={'Fourth'} />{' '}
+          <Tag icon={save_medium} text={'First'} />
+          <Tag icon={scissors_medium} text={'Second'} />
+          <Tag icon={scooter_medium} text={'Third'} />
+          <Tag icon={share_ios_medium} text={'Fourth'} />
         </Tag.Group>
       </Box>
     </Wrapper>
@@ -268,28 +268,28 @@ export const TagMultipleRemovable = () => {
               console.log('Delete1')
             }}
             text={'First'}
-          />{' '}
+          />
           <Tag
             icon={scissors}
             onDelete={() => {
               console.log('Delete2')
             }}
             text={'Second'}
-          />{' '}
+          />
           <Tag
             icon={scooter}
             onDelete={() => {
               console.log('Delete3')
             }}
             text={'Third'}
-          />{' '}
+          />
           <Tag
             icon={share_ios}
             onDelete={() => {
               console.log('Delete4')
             }}
             text={'Fourth'}
-          />{' '}
+          />
         </Tag.Group>
       </Box>
     </Wrapper>

packages/dnb-eufemia/src/components/tag/__tests__/Tag.screenshot.test.js

@@ -25,14 +25,6 @@ describe('Tag screenshot', () => {
     expect(screenshot).toMatchImageSnapshot()
   })
 
-  it('have to match a clickable Tag', async () => {
-    const screenshot = await testPageScreenshot({
-      selector: '[data-visual-test="tag-clickable"] .dnb-tag',
-    })
-
-    expect(screenshot).toMatchImageSnapshot()
-  })
-
   it('have to match a removable Tag', async () => {
     const screenshot = await testPageScreenshot({
       selector: '[data-visual-test="tag-removable"] .dnb-tag',
@@ -61,3 +53,16 @@ describe('Tag screenshot', () => {
     expect(screenshot).toMatchImageSnapshot()
   })
 })
+
+describe('Clickable tag screenshot', () => {
+  setupPageScreenshot({
+    url: '/uilib/components/tag/visual-tests/clickable-tag',
+  })
+  it('have to match a clickable Tag', async () => {
+    const screenshot = await testPageScreenshot({
+      selector: '[data-visual-test="tag-clickable"] .dnb-tag',
+    })
+
+    expect(screenshot).toMatchImageSnapshot()
+  })
+})

packages/dnb-eufemia/src/components/tag/__tests__/__snapshots__/Tag.test.tsx.snap

@@ -693,5 +693,11 @@ button.dnb-button::-moz-focus-inner {
 
 .dnb-tag--removable.dnb-button--size-small.dnb-button--has-icon {
   padding-right: 0; }
+
+.dnb-tag__group .dnb-button:not([class*='dnb-space']):not(:last-of-type) {
+  margin-right: 0.25rem; }
+
+.dnb-tag__group .dnb-button:not([class*='dnb-space']):not(:first-of-type) {
+  margin-left: 0.25rem; }
 "
 `;

packages/dnb-eufemia/src/components/tag/style/_tag.scss

@@ -87,4 +87,16 @@
       padding-right: 0;
     }
   }
+
+  // Default space between tags
+  &__group {
+    .dnb-button:not([class*='dnb-space']) {
+      &:not(:last-of-type) {
+        margin-right: 0.25rem;
+      }
+      &:not(:first-of-type) {
+        margin-left: 0.25rem;
+      }
+    }
+  }
 }