fix(chip): outline focuses

adevinta · Oct 6, 2023 · 93f0fd5 · 93f0fd5
1 parent 0db8509
commit 93f0fd5
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 10 deletions.
diff --git a/packages/components/chip/src/Chip.styles.tsx b/packages/components/chip/src/Chip.styles.tsx
@@ -5,8 +5,8 @@ import { dashedVariants, outlinedVariants, tintedVariants } from './variants'
 
 export const chipStyles = cva(
   [
-    'box-border inline-flex h-sz-32 flex-nowrap items-center justify-center rounded-md text-body-1 font-regular',
-    'max-w-sz-240 focus-visible:outline-none focus-visible:u-ring-inset',
+    'box-border max-w-sz-240 inline-flex h-sz-32 flex-nowrap items-center justify-center rounded-md text-body-1 font-regular',
+    'focus-visible:outline-none focus-visible:u-ring [&:not(:focus-visible)]:ring-inset',
     'ease-out duration-150',
   ],
   {
@@ -23,7 +23,7 @@ export const chipStyles = cva(
        * - `dashed`: Chip will be transparent with an outline dashed.
        */
       design: makeVariants<'design', ['outlined', 'tinted', 'dashed']>({
-        outlined: ['bg-transparent ring-1 ring-current'],
+        outlined: ['bg-transparent border-sm border-solid border-current'],
         tinted: [''],
         dashed: [
           'bg-transparent border-sm border-dashed shadow-none focus-visible:border-outline-high',

diff --git a/packages/components/chip/src/ChipClearButton.styles.tsx b/packages/components/chip/src/ChipClearButton.styles.tsx
@@ -55,8 +55,12 @@ export const chipClearButtonWrapperStyles = cva(
   }
 )
 
+// eslint-disable-next-line tailwindcss/no-custom-classname
 export const chipClearButtonStyles = cva(
-  ['rounded-full', 'focus-visible:outline-none focus-visible:u-ring-inset'],
+  [
+    'rounded-full text-[calc(var(--sz-6))] p-[var(--sz-2)] border-sm',
+    'focus-visible:outline-2 focus-visible:outline focus-visible:outline-offset-2  focus-visible:outline-[blue]',
+  ],
   {
     variants: {
       disabled: {

diff --git a/packages/components/chip/src/ChipClearButton.tsx b/packages/components/chip/src/ChipClearButton.tsx
@@ -1,5 +1,5 @@
 import { Icon } from '@spark-ui/icon'
-import { DeleteOutline } from '@spark-ui/icons/dist/icons/DeleteOutline'
+import { Close } from '@spark-ui/icons/dist/icons/Close'
 import React, { cloneElement, ComponentPropsWithoutRef, forwardRef, useCallback } from 'react'
 
 import {
@@ -19,8 +19,8 @@ export const ChipClearButton = forwardRef<HTMLSpanElement, ChipClearButtonProps>
   (
     {
       children = (
-        <Icon className="">
-          <DeleteOutline />
+        <Icon>
+          <Close />
         </Icon>
       ),
       tabIndex = 0,
@@ -41,7 +41,7 @@ export const ChipClearButton = forwardRef<HTMLSpanElement, ChipClearButtonProps>
     return (
       <span
         className={chipClearButtonWrapperStyles({
-          isBordered: design === 'dashed',
+          isBordered: ['outline', 'dashed'].includes(`${design}`),
           disabled: !!disabled,
           design,
         })}

diff --git a/packages/components/chip/src/variants/outlined.ts b/packages/components/chip/src/variants/outlined.ts
@@ -117,11 +117,11 @@ export const outlinedVariants = [
   {
     design: 'outlined',
     hasClearButton: false,
-    class: tw(['px-md']),
+    class: tw(['px-[calc(var(--spacing-md)-var(--border-width-sm))]']),
   },
   {
     design: 'outlined',
     hasClearButton: true,
-    class: tw(['pl-md']),
+    class: tw(['pl-[calc(var(--spacing-md)-var(--border-width-sm))]']),
   },
 ] as const