fix(Chip): implement new design and css alignment (#2493)

- Fixes #2321 - Removes `Chip.Group` as we postpone wrapper-components till after V1 --------- Co-authored-by: Tobias Barsnes <[email protected]>
digdir · Sep 26, 2024 · d0fad1d · d0fad1d
1 parent aa53b02
commit d0fad1d
Show file tree

Hide file tree

Showing 19 changed files with 417 additions and 633 deletions.
diff --git a/.changeset/tall-guests-arrive.md b/.changeset/tall-guests-arrive.md
@@ -0,0 +1,9 @@
+---
+"@digdir/designsystemet-css": patch
+"@digdir/designsystemet-react": patch
+---
+
+Chip: 
+- Add `Chip.Button`
+- Rename `Chip.Toggle` to `Chip.Radio` and `Chip.Checkbox`
+- Remove `Chip.Group`
diff --git a/apps/theme/components/Previews/Components/Components.tsx b/apps/theme/components/Previews/Components/Components.tsx
@@ -275,11 +275,15 @@ export const Components = () => {
           Filtrer på språk
         </Heading>
         <div className={classes.chips}>
-          <Chip.Toggle selected checkmark={false} size='sm'>
+          <Chip.Radio name='language' size='sm' checked>
             Bokmål
-          </Chip.Toggle>
-          <Chip.Toggle size='sm'>Nynorsk</Chip.Toggle>
-          <Chip.Toggle size='sm'>Engelsk</Chip.Toggle>
+          </Chip.Radio>
+          <Chip.Radio name='language' size='sm'>
+            Nynorsk
+          </Chip.Radio>
+          <Chip.Radio name='language' size='sm'>
+            Engelsk
+          </Chip.Radio>
         </div>
       </div>
       <div className={cl(classes.card, classes.comboBox)}>

diff --git a/packages/css/chip.css b/packages/css/chip.css
@@ -1,173 +1,134 @@
-/*
-  The class is unused. There is no root chip component?
-  .chip {
-    display: flex;
-  }
-  */
-
-.ds-chip--button {
-  --dsc-chip-height: var(--ds-sizing-7);
-  --dsc-chip-padding: 0 var(--ds-spacing-3);
+.ds-chip {
   --dsc-chip-background: var(--ds-color-accent-surface-default);
-  --dsc-chip-text-color: var(--ds-color-accent-text-default);
-  --dsc-chip-border: var(--ds-color-accent-border-subtle);
+  --dsc-chip-border-color: var(--ds-color-accent-border-subtle);
   --dsc-chip-border-radius: var(--ds-border-radius-full);
+  --dsc-chip-color: var(--ds-color-accent-text-default);
+  --dsc-chip-height: var(--ds-sizing-8);
+  --dsc-chip-icon-size: var(--ds-spacing-6);
+  --dsc-chip-input-color: var(--ds-color-accent-border-default);
+  --dsc-chip-input-size: var(--ds-spacing-5);
+  --dsc-chip-padding: 0 var(--ds-spacing-3);
+
+  @composes ds-focus from './utilities.css';
+  @composes ds-paragraph-short from './baseline/typography.css';
 
+  align-items: center;
   background: var(--dsc-chip-background);
-  padding: var(--dsc-chip-padding);
-  min-height: var(--dsc-chip-height);
   border-radius: var(--dsc-chip-border-radius);
-  border: 1px solid var(--dsc-chip-border);
-  color: var(--dsc-chip-text-color);
-  text-decoration: none;
-  font-family: inherit;
+  border: 1px solid var(--dsc-chip-border-color);
+  box-sizing: border-box;
+  color: var(--dsc-chip-color);
+  cursor: pointer;
   display: inline-flex;
-  align-items: center;
-}
-
-.ds-chip--button:disabled,
-.ds-chip--button[aria-disabled='true'] {
-  cursor: not-allowed;
-  opacity: var(--ds-disabled-opacity);
-}
-
-.ds-chip--button .ds-chip__label {
-  color: inherit;
-  line-height: normal;
-  display: flex;
-  align-items: center;
-  flex-direction: row;
-  gap: var(--ds-spacing-2);
-}
-
-.ds-chip--removable {
-  --dsc-removable-background: var(--ds-color-accent-base-default);
-  --dsc-removable-text-color: var(--ds-color-neutral-contrast-default);
-  --dsc-removable-chip-size: var(--ds-sizing-7);
-  --dsc-removable-chip-xmark-color: var(--ds-color-neutral-contrast-default);
-  --dsc-removable-chip-xmark-padding_right: var(--ds-spacing-1);
-  --dsc-removable-chip-xmark-size: var(--ds-sizing-6);
-  --dsc-removable-chip-xmark-wrapper-width: calc(var(--dsc-removable-chip-xmark-size) + var(--dsc-removable-chip-xmark-padding_right));
-
-  color: var(--dsc-removable-text-color);
-  background: var(--dsc-removable-background);
-  border: 0;
-  padding-right: var(--ds-spacing-2);
+  font-family: inherit;
   min-height: var(--dsc-chip-height);
-}
-
-.ds-chip--removable.ds-chip--sm {
-  padding-right: var(--ds-spacing-1);
-}
-
-.ds-chip--removable.ds-chip--lg {
-  padding-right: var(--ds-spacing-2);
-}
-
-.ds-chip__x-mark {
-  color: var(--dsc-removable-chip-xmark-color);
-  height: var(--dsc-removable-chip-xmark-size);
-  width: var(--dsc-removable-chip-xmark-size);
-}
-
-.ds-chip__x-mark .ds-chip__icon {
-  height: var(--dsc-removable-chip-xmark-size);
-  width: var(--dsc-removable-chip-xmark-size);
-}
-
-.ds-chip--spacing {
-  padding-left: var(--ds-spacing-2) !important;
-}
-
-.ds-chip--sm .ds-chip__checkmark-icon {
-  height: var(--ds-sizing-5);
-  width: auto;
-}
-
-.ds-chip--md .ds-chip__checkmark-icon {
-  height: 24px;
-  width: auto;
-}
-
-.ds-chip--lg .ds-chip__checkmark-icon {
-  height: 26px;
-  width: auto;
-}
-
-.ds-chip--group-container {
-  --dsc-chip-group-gap: var(--ds-spacing-2);
-
-  align-items: center;
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--dsc-chip-group-gap);
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
+  padding: var(--dsc-chip-padding);
+  text-decoration: none;
 
-.ds-chip--group-container.ds-chip--sm {
-  --dsc-chip-group-gap: var(--ds-spacing-2);
-}
+  /* Make focus ring also when input inside is focused */
+  &:has(:focus-visible) {
+    box-shadow: var(--dsc-focus-boxShadow);
+  }
 
-.ds-chip--group-container.ds-chip--md {
-  --dsc-chip-group-gap: var(--ds-spacing-2);
-}
+  &:disabled,
+  &:has(input:disabled),
+  &[aria-disabled='true'] {
+    cursor: not-allowed;
+    opacity: var(--ds-disabled-opacity);
+  }
 
-.ds-chip--group-container.ds-chip--lg {
-  --dsc-chip-group-gap: var(--ds-spacing-2);
-}
+  &:has(input[type='checkbox']) {
+    --dsc-chip-border-radius: var(--ds-border-radius-lg);
+    --dsc-chip-padding: 0 var(--ds-spacing-2) 0 var(--ds-spacing-3);
+  }
 
-/* Only use hover for non-touch devices to prevent sticky-hovering */
-@media (hover: hover) and (pointer: fine) {
-  .ds-chip--button:not(:disabled, [aria-disabled='true']):hover {
-    --dsc-chip-background: var(--ds-color-accent-surface-hover);
-    --dsc-chip-text-color: var(--ds-color-accent-text-default);
-    --dsc-chip-border: var(--ds-color-accent-border-default);
+  &[data-removable]::after {
+    --gap: calc((var(--dsc-chip-height) - var(--dsc-chip-icon-size)) / 2); /* Gap is based on remaining space between icon and edge */
 
-    cursor: pointer;
+    background: currentcolor;
+    content: '';
+    height: var(--dsc-chip-icon-size);
+    margin: 0 calc(var(--gap) * -1) 0 var(--gap);
+    mask: center/contain no-repeat
+      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' fill='none' viewBox='0 0 24 24' focusable='false' role='img'%3E%3Cpath fill='currentColor' d='M6.53 5.47a.75.75 0 0 0-1.06 1.06L10.94 12l-5.47 5.47a.75.75 0 1 0 1.06 1.06L12 13.06l5.47 5.47a.75.75 0 1 0 1.06-1.06L13.06 12l5.47-5.47a.75.75 0 0 0-1.06-1.06L12 10.94z'%3E%3C/path%3E%3C/svg%3E");
+    width: var(--dsc-chip-icon-size);
   }
 
-  .ds-chip--button:not(:disabled, [aria-disabled='true']):is([aria-pressed='true']):hover {
-    --dsc-chip-background: var(--ds-color-accent-surface-hover);
-    --dsc-chip-text-color: var(--ds-color-accent-text-default);
+  &[data-size='sm'] {
+    --dsc-chip-height: var(--ds-sizing-7);
+    --dsc-chip-icon-size: var(--ds-sizing-5);
+    --dsc-chip-input-size: var(--ds-spacing-4);
   }
 
-  .ds-chip--removable:not(:disabled, [aria-disabled='true']):hover,
-  .ds-chip--removable:not(:disabled, [aria-disabled='true']):focus {
-    --dsc-removable-background: var(--ds-color-accent-base-hover);
-    --dsc-removable-chip-xmark-color: var(--ds-color-accent-contrast-default);
+  &[data-size='lg'] {
+    --dsc-chip-height: var(--ds-sizing-9);
+    --dsc-chip-icon-size: var(--ds-sizing-7);
+    --dsc-chip-input-size: var(--ds-spacing-6);
   }
-}
-
-.ds-chip--button:is([aria-pressed='true']),
-.ds-chip--button:not(:disabled, [aria-disabled='true']):active,
-.ds-chip--removable:is([aria-pressed='true']),
-.ds-chip--removable:not(:disabled, [aria-disabled='true']):active {
-  --dsc-chip-background: var(--ds-color-accent-base-active);
-  --dsc-chip-text-color: var(--ds-color-accent-contrast-default);
-  --dsc-chip-border: var(--ds-color-accent-base-active);
-  --dsc-removable-background: var(--ds-color-accent-base-active);
-  --dsc-removable-text-color: var(--ds-color-neutral-contrast-default);
-}
 
-.ds-chip--sm {
-  --dsc-chip-height: var(--ds-sizing-7);
-  --dsc-chip-padding: 0 var(--ds-spacing-3);
-  --dsc-removable-chip-xmark-size: var(--ds-sizing-5);
-  --dsc-removable-chip-xmark-padding_right: var(--ds-spacing-1);
-}
+  & > input {
+    --gap: calc((var(--dsc-chip-height) - var(--dsc-chip-input-size)) / 2); /* Gap is based on remaining space between input and edge */
+
+    appearance: none;
+    background: none;
+    border-radius: calc(var(--dsc-chip-border-radius) - (var(--gap) / 2)); /* Use same radius as  */
+    border: 2px solid;
+    box-sizing: border-box;
+    color: var(--dsc-chip-input-color);
+    height: var(--dsc-chip-input-size);
+    margin: 0 var(--gap) 0 calc(var(--gap) * -1);
+    outline: none;
+    width: var(--dsc-chip-input-size);
+
+    &[type='radio']:checked {
+      border-width: calc(var(--dsc-chip-input-size) / 3.5); /* Matches Figma */
+    }
+
+    &[type='checkbox']:checked {
+      background: currentcolor;
+      mask: center/cover no-repeat
+        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M24 0H0v24h24V0Zm-4.44 8.56a1.5 1.5 0 0 0-2.12-2.12L10 13.88l-3.44-3.44a1.5 1.5 0 0 0-2.12 2.12l4.5 4.5a1.5 1.5 0 0 0 2.12 0l8.5-8.5Z'/%3E%3C/svg%3E");
+    }
+  }
 
-.ds-chip--md {
-  --dsc-chip-height: var(--ds-sizing-8);
-  --dsc-chip-padding: 0 var(--ds-spacing-3);
-  --dsc-removable-chip-xmark-size: var(--ds-sizing-6);
-  --dsc-removable-chip-xmark-padding_right: var(--ds-spacing-2);
-}
+  &:has(input:checked),
+  &[data-removable] {
+    --dsc-chip-background: var(--ds-color-accent-base-default);
+    --dsc-chip-border-color: transparent;
+    --dsc-chip-color: var(--ds-color-accent-contrast-default);
+    --dsc-chip-input-color: currentcolor;
+  }
 
-.ds-chip--lg {
-  --dsc-chip-height: var(--ds-sizing-9);
-  --dsc-chip-padding: 0 var(--ds-spacing-4);
-  --dsc-removable-chip-xmark-size: var(--ds-sizing-7);
-  --dsc-removable-chip-xmark-padding_right: var(--ds-spacing-3);
+  /* Only use hover for non-touch devices to prevent sticky-hovering */
+  @media (hover: hover) and (pointer: fine) {
+    &:where(:not(:disabled, :has(input:disabled), [aria-disabled='true'])) {
+      &:hover {
+        --dsc-chip-background: var(--ds-color-accent-surface-hover);
+        --dsc-chip-border-color: var(--ds-color-accent-border-default);
+        --dsc-chip-color: var(--ds-color-accent-text-default);
+        --dsc-chip-input-color: var(--ds-color-accent-border-strong);
+      }
+
+      &:active {
+        --dsc-chip-background: var(--ds-color-accent-surface-active);
+        --dsc-chip-border-color: var(--ds-color-accent-border-strong);
+        --dsc-chip-input-color: var(--ds-color-accent-border-strong);
+      }
+
+      &[data-removable]:hover,
+      &:has(input:checked):hover {
+        --dsc-chip-background: var(--ds-color-accent-base-hover);
+        --dsc-chip-border-color: transparent;
+        --dsc-chip-color: var(--ds-color-accent-contrast-default);
+        --dsc-chip-input-color: currentcolor;
+      }
+
+      &[data-removable]:active,
+      &:has(input:checked):active {
+        --dsc-chip-background: var(--ds-color-accent-base-active);
+        --dsc-chip-border-color: transparent;
+        --dsc-chip-color: var(--ds-color-accent-contrast-default);
+      }
+    }
+  }
 }