fix(components): Display <Checkbox> focus ring and adjust focus rin…

…g of `<Table>` (#4196) * fix(components): Display `<Checkbox>` focus ring and adjust focus ring of `<Table>` * Create lovely-rivers-kiss.md
marigold-ui · Oct 10, 2024 · d5386e4 · d5386e4
1 parent dc1b4ff
commit d5386e4
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 14 deletions.
diff --git a/.changeset/lovely-rivers-kiss.md b/.changeset/lovely-rivers-kiss.md
@@ -0,0 +1,8 @@
+---
+"@marigold/components": patch
+"@marigold/theme-core": patch
+---
+
+fix(components): Display `<Checkbox>` focus ring and adjust focus ring of `<Table>`
+
+Focus ring was not showing for the `<Checkbox>`. It does now!
diff --git a/packages/components/src/Checkbox/Checkbox.tsx b/packages/components/src/Checkbox/Checkbox.tsx
@@ -176,7 +176,9 @@ const _Checkbox = forwardRef<HTMLLabelElement, CheckboxProps>(
               indeterminate={isIndeterminate}
               className={classNames.checkbox}
             />
-            <div className={classNames.label}>{children}</div>
+            {children ? (
+              <div className={classNames.label}>{children}</div>
+            ) : null}
           </>
         )}
       </Checkbox>

diff --git a/packages/components/src/Table/TableRow.tsx b/packages/components/src/Table/TableRow.tsx
@@ -39,8 +39,7 @@ export const TableRow = ({ children, row }: TableRowProps) => {
   const disabled = state.disabledKeys.has(row.key);
   const selected = state.selectionManager.isSelected(row.key);
 
-  // Rows are focused if any cell inside it is focused
-  const { focusProps, isFocusVisible } = useFocusRing({ within: true });
+  const { focusProps, isFocusVisible } = useFocusRing();
   const { hoverProps, isHovered } = useHover({
     isDisabled: disabled || !interactive,
   });

diff --git a/themes/theme-core/src/components/Checkbox.styles.ts b/themes/theme-core/src/components/Checkbox.styles.ts
@@ -1,17 +1,22 @@
 import { ThemeComponent, cva } from '@marigold/system';
 
+// TODO: use group or something to show outline around checkbox (svg)
+
 export const Checkbox: ThemeComponent<'Checkbox'> = {
-  container: cva([], {
+  container: cva('', {
     variants: {
       size: {
         small: 'py-1',
       },
     },
   }),
-  label: cva('group-[disabled]/checkbox:text-text-base-disabled leading-none'),
+  label: cva([
+    'group-[disabled]/checkbox:text-text-base-disabled leading-none',
+  ]),
   checkbox: cva([
-    'border-border-inverted rounded-[2] bg-white p-0.5',
+    'border-border-inverted rounded-[2px] bg-white p-0.5',
     'group-[hovered]/checkbox:border-border-base-hover',
+    'group-rac-focus-visible/checkbox:outline outline-2 outline-outline-focus outline-offset-1',
     'group-[selected]/checkbox:border-border-selected group-rac-selected/checkbox:bg-bg-selected group-rac-selected/checkbox:text-white fill-white',
     'group-[disabled]/checkbox:group-[selected]/checkbox:border-border-base-disabled group-[disabled]/checkbox:border-border-base-disabled group-[disabled]/checkbox:group-[selected]/checkbox:bg-bg-base-disabled',
     'group-indeterminate/checkbox:border-border-selected group-indeterminate/checkbox:bg-bg-selected group-indeterminate/checkbox:text-text-inverted',

diff --git a/themes/theme-core/src/components/Table.styles.ts b/themes/theme-core/src/components/Table.styles.ts
@@ -8,7 +8,7 @@ export const Table: ThemeComponent<'Table'> = {
       'border-x px-2 font-bold',
       'text-text-inverted bg-gray-400',
       'odd:bg-bg-accent',
-      'focus:outline-outline-focus',
+      'rac-focus-visible:outline outline-2 outline-outline-focus outline-offset-1',
     ],
     {
       variants: {
@@ -26,7 +26,8 @@ export const Table: ThemeComponent<'Table'> = {
   row: cva(
     [
       'group-aria-[multiselectable]/table:[&>*:first-child]:w-12',
-      'selected:bg-bg-selected focus:outline-outline-focus',
+      'selected:bg-bg-selected',
+      'rac-focus-visible:outline outline-2 outline-outline-focus outline-offset-1',
     ],
     {
       variants: {
@@ -37,11 +38,17 @@ export const Table: ThemeComponent<'Table'> = {
       },
     }
   ),
-  cell: cva(['text-text-base p-2', 'focus:outline-outline-focus'], {
-    variants: {
-      variant: {
-        grid: ['border-border-inverted border'],
+  cell: cva(
+    [
+      'text-text-base p-2',
+      'rac-focus-visible:outline outline-2 outline-outline-focus outline-offset-1',
+    ],
+    {
+      variants: {
+        variant: {
+          grid: ['border-border-inverted border'],
+        },
       },
-    },
-  }),
+    }
+  ),
 };