Use data-density

Author: pomfrida

packages/eds-core-react/src/components/Checkbox/Checkbox.new.stories.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useRef, ChangeEvent } from 'react'
-import { Typography, Button, EdsProvider, Table, Density } from '../..'
+import { Typography, Button, Table } from '../..'
 import { Checkbox } from './Checkbox.new'
 import type { CheckboxProps } from './Checkbox.new.types'
 import { action } from 'storybook/actions'
@@ -257,21 +257,22 @@ export const WithFormsControl: StoryFn<CheckboxProps> = () => {
 WithFormsControl.storyName = 'Example with React Hook Form'
 
 export const Compact: StoryFn<CheckboxProps> = () => {
-  const [density, setDensity] = useState<Density>('comfortable')
-
-  useEffect(() => {
-    // Simulate user change
-    setDensity('comfortable')
-  }, [density])
-
   return (
-    <EdsProvider density={density}>
+    <div data-density="comfortable">
       <Checkbox label="I am compact" />
       <Checkbox label="I am also compact" defaultChecked />
       <Checkbox label="I am compact and disabled" disabled />
-    </EdsProvider>
+    </div>
   )
 }
+Compact.parameters = {
+  docs: {
+    description: {
+      story:
+        'Compact mode is activated by adding `data-density="comfortable"` to a parent element. The density attribute is inherited by all child components.',
+    },
+  },
+}
 
 export const AlternativeToLabel: StoryFn<CheckboxProps> = () => (
   <Checkbox aria-label="This label is invisible, but read by screen-readers" />

packages/eds-core-react/src/components/Checkbox/Checkbox.new.tsx

@@ -6,7 +6,6 @@ import {
   checkbox_indeterminate,
 } from '@equinor/eds-icons'
 import { TypographyNext } from '../Typography'
-import { useEds } from '../EdsProvider'
 import type { CheckboxProps } from './Checkbox.new.types'
 import './checkbox.new.css'
 
@@ -26,7 +25,6 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
     },
     ref,
   ) {
-    const { density } = useEds()
     const internalRef = useRef<HTMLInputElement>(null)
     const inputRef = (ref as React.RefObject<HTMLInputElement>) || internalRef
 
@@ -116,12 +114,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
 
     if (label) {
       return (
-        <label
-          className={wrapperClasses}
-          style={style}
-          data-density={density}
-          {...labelProps}
-        >
+        <label className={wrapperClasses} style={style} {...labelProps}>
           {checkboxInput}
           <TypographyNext
             as="span"
@@ -140,7 +133,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
     }
 
     return (
-      <span className={wrapperClasses} style={style} data-density={density}>
+      <span className={wrapperClasses} style={style}>
         {checkboxInput}
       </span>
     )

packages/eds-core-react/src/components/Checkbox/checkbox.new.css

@@ -1,16 +1,6 @@
 @import '@equinor/eds-tokens/css/variables';
 @import '@equinor/eds-tokens/css/foundation';
 
-/* Custom properties for checkbox-specific sizes */
-:root {
-  /* Hover circle size - smaller than 48px touch target for visual balance */
-  --checkbox-hover-size: 40px;
-}
-
-[data-density='compact'] {
-  --checkbox-hover-size: 32px;
-}
-
 /* Checkbox wrapper/label */
 .checkbox {
   display: inline-flex;
@@ -20,6 +10,16 @@
   position: relative;
 }
 
+/* Spacious density mode (default/comfortable in TypeScript) */
+.checkbox[data-density='spacious'] {
+  --checkbox-hover-size: 40px;
+}
+
+/* Compact density mode (compact in TypeScript) */
+.checkbox[data-density='comfortable'] {
+  --checkbox-hover-size: 32px;
+}
+
 .checkbox--disabled {
   cursor: not-allowed;
 }
@@ -30,9 +30,18 @@
   grid: [input] 1fr / [input] 1fr;
   position: relative;
   isolation: isolate;
+}
+
+/* Spacious density padding */
+.checkbox[data-density='spacious'] .checkbox__input-wrapper {
   padding: var(--eds-spacing-inset-xs-squared);
 }
 
+/* Compact density padding */
+.checkbox[data-density='comfortable'] .checkbox__input-wrapper {
+  padding: var(--eds-spacing-inset-2-xs-squared);
+}
+
 /* Hover circle background */
 .checkbox__input-wrapper::before {
   content: '';
@@ -79,28 +88,25 @@
   outline: none;
 }
 
-/* Focus styles */
-.checkbox__input[data-focus-visible-added]:focus ~ .checkbox__icon,
-.checkbox__input:focus-visible ~ .checkbox__icon {
+/* Focus styles - spacious (default) */
+.checkbox[data-density='spacious']
+  .checkbox__input[data-focus-visible-added]:focus
+  ~ .checkbox__icon,
+.checkbox[data-density='spacious']
+  .checkbox__input:focus-visible
+  ~ .checkbox__icon {
   outline: 2px dashed var(--eds-color-border-focus);
   outline-offset: var(--eds-spacing-inline-xs);
 }
 
-/* Compact density mode */
-[data-density='compact'] .checkbox__input-wrapper {
-  padding: var(--eds-spacing-inset-2-xs-squared);
-}
-
-[data-density='compact'] .checkbox__input {
-  /* Maintain 48px touch target in compact mode for accessibility */
-  transform: scale(calc(48px / 24px));
-}
-
-/* Density mode focus */
-[data-density='comfortable']
+/* Focus styles - compact */
+.checkbox[data-density='comfortable']
   .checkbox__input[data-focus-visible-added]:focus
   ~ .checkbox__icon,
-[data-density='comfortable'] .checkbox__input:focus-visible ~ .checkbox__icon {
+.checkbox[data-density='comfortable']
+  .checkbox__input:focus-visible
+  ~ .checkbox__icon {
+  outline: 2px dashed var(--eds-color-border-focus);
   outline-offset: var(--eds-spacing-inline-3-xs);
 }