refactor(css): Create utils.css (#1811)

digdir · Apr 15, 2024 · 2aec769 · 2aec769
1 parent 22ed61d
commit 2aec769
Show file tree

Hide file tree

Showing 20 changed files with 36 additions and 118 deletions.
diff --git a/packages/css/index.css b/packages/css/index.css
@@ -1,4 +1,5 @@
 @charset "UTF-8";
 
 @import url('./react-css-modules.css');
+@import url('./utils.css');
 @import url('./alert.css');
diff --git a/packages/css/react-css-modules.css b/packages/css/react-css-modules.css
@@ -1,30 +1,3 @@
-@layer fds.utilities {
-  /**
- * Visually hide an element, but leave it available for screen readers
- */
-  .fds-utility-visuallyHidden-1ed11112 {
-    border: 0;
-    clip: rect(0 0 0 0);
-    height: 1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    white-space: nowrap;
-    width: 1px;
-  }
-
-  /**
- * Apply a focus outline on an element when it is focused with keyboard
- */
-  .fds-utility-focusable-1ed11112:focus-visible {
-    --fds-focus-border-width: 3px;
-
-    outline: var(--fds-focus-border-width) solid var(--fds-semantic-border-focus-outline);
-    outline-offset: var(--fds-focus-border-width);
-    box-shadow: 0 0 0 var(--fds-focus-border-width) var(--fds-semantic-border-focus-boxshadow);
-  }
-}
-
 @layer fds.button {
   .fds-button-button-8fa00f0f {
     --fc-button-padding: 0 var(--fds-spacing-4);

diff --git a/...es/react/src/utilities/utility.module.css → packages/css/utils.css b/...es/react/src/utilities/utility.module.css → packages/css/utils.css
@@ -1,8 +1,8 @@
-@layer fds.utilities {
+@layer fds.utils {
   /**
  * Visually hide an element, but leave it available for screen readers
  */
-  .visuallyHidden {
+  .fds-sr-only {
     border: 0;
     clip: rect(0 0 0 0);
     height: 1px;
@@ -16,11 +16,13 @@
   /**
  * Apply a focus outline on an element when it is focused with keyboard
  */
-  .focusable:focus-visible {
+  .fds-focus:focus-visible {
     --fds-focus-border-width: 3px;
 
-    outline: var(--fds-focus-border-width) solid var(--fds-semantic-border-focus-outline);
+    outline: var(--fds-focus-border-width) solid
+      var(--fds-semantic-border-focus-outline);
     outline-offset: var(--fds-focus-border-width);
-    box-shadow: 0 0 0 var(--fds-focus-border-width) var(--fds-semantic-border-focus-boxshadow);
+    box-shadow: 0 0 0 var(--fds-focus-border-width)
+      var(--fds-semantic-border-focus-boxshadow);
   }
 }
diff --git a/packages/react/scripts/generate-css.ts b/packages/react/scripts/generate-css.ts
@@ -13,7 +13,7 @@ fs.ensureDirSync(outputFolder);
 
 /** To exclude files when we start writing css manually */
 const ignore = [''];
-const additional = ['utility.module.css'];
+const additional = [''];
 
 const findComponentName = (filePath: string) => {
   let fileName = filePath.split('/src/')[1];

diff --git a/packages/react/src/components/Accordion/AccordionHeader/AccordionHeader.tsx b/packages/react/src/components/Accordion/AccordionHeader/AccordionHeader.tsx
@@ -5,7 +5,6 @@ import { forwardRef, useContext } from 'react';
 
 import { Paragraph, Heading } from '../..';
 import classes from '../Accordion.module.css';
-import utilityClasses from '../../../utilities/utility.module.css';
 import { AccordionItemContext } from '../AccordionItem';
 
 export type AccordionHeaderProps = {
@@ -45,7 +44,7 @@ export const AccordionHeader = forwardRef<
     >
       <button
         type='button'
-        className={cl(classes.accordionButton, utilityClasses.focusable)}
+        className={cl(classes.accordionButton, `fds-focus`)}
         onClick={handleClick}
         aria-expanded={context.open}
         aria-controls={context.contentId}

diff --git a/packages/react/src/components/Button/Button.tsx b/packages/react/src/components/Button/Button.tsx
@@ -3,7 +3,6 @@ import type { ButtonHTMLAttributes } from 'react';
 import cl from 'clsx';
 import { Slot } from '@radix-ui/react-slot';
 
-import utilityClasses from '../../utilities/utility.module.css';
 import type { OverridableComponent } from '../../types/OverridableComponent';
 
 import classes from './Button.module.css';
@@ -57,7 +56,7 @@ export const Button: OverridableComponent<ButtonProps, HTMLButtonElement> =
           type={type}
           className={cl(
             classes.button,
-            utilityClasses.focusable,
+            `fds-focus`,
             classes[size],
             classes[variant],
             classes[color],

diff --git a/packages/react/src/components/Card/Card.tsx b/packages/react/src/components/Card/Card.tsx
@@ -4,7 +4,6 @@ import cl from 'clsx';
 import { Slot } from '@radix-ui/react-slot';
 
 import type { OverridableComponent } from '../../types/OverridableComponent';
-import utilityClasses from '../../utilities/utility.module.css';
 
 import classes from './Card.module.css';
 
@@ -54,7 +53,7 @@ export const Card: OverridableComponent<CardProps, HTMLDivElement> = forwardRef(
           classes.card,
           classes[color],
           isLink && classes.linkCard,
-          isLink && utilityClasses.focusable,
+          isLink && `fds-focus`,
           className,
         )}
         {...rest}

diff --git a/packages/react/src/components/Chip/Removable/Removable.tsx b/packages/react/src/components/Chip/Removable/Removable.tsx
@@ -6,7 +6,6 @@ import { XMarkIcon } from '@navikt/aksel-icons';
 import classes from '../Chip.module.css';
 import { Paragraph } from '../../Typography';
 import { ChipGroupContext } from '../Group/Group';
-import utilityClasses from '../../../utilities/utility.module.css';
 
 export type RemovableChipProps = {
   /**
@@ -26,7 +25,7 @@ export const RemovableChip = forwardRef<HTMLButtonElement, RemovableChipProps>(
         ref={ref}
         className={cl(
           classes.chipButton,
-          utilityClasses.focusable,
+          `fds-focus`,
           classes[group?.size || size],
           classes.removable,
           className,

diff --git a/packages/react/src/components/Chip/Toggle/Toggle.tsx b/packages/react/src/components/Chip/Toggle/Toggle.tsx
@@ -5,7 +5,6 @@ import cl from 'clsx';
 
 import { Paragraph } from '../../Typography';
 import { ChipGroupContext } from '../Group/Group';
-import utilityClasses from '../../../utilities/utility.module.css';
 import classes from '../Chip.module.css';
 
 export type ToggleChipProps = {
@@ -46,7 +45,7 @@ export const ToggleChip = forwardRef<HTMLButtonElement, ToggleChipProps>(
         aria-pressed={selected}
         className={cl(
           classes.chipButton,
-          utilityClasses.focusable,
+          `fds-focus`,
           classes[group?.size || size],
           { [classes.spacing]: shouldDisplayCheckmark },
           className,

diff --git a/packages/react/src/components/HelpText/HelpText.tsx b/packages/react/src/components/HelpText/HelpText.tsx
@@ -4,7 +4,6 @@ import cl from 'clsx';
 import type { Placement } from '@floating-ui/utils';
 
 import { Popover } from '../Popover';
-import utilClasses from '../../utilities/utility.module.css';
 import type { PopoverProps } from '../Popover/Popover';
 import type { PortalProps } from '../../types/Portal';
 
@@ -55,11 +54,7 @@ const HelpText = ({
           variant='tertiary'
         >
           <button
-            className={cl(
-              classes.helpTextButton,
-              utilClasses.focusable,
-              className,
-            )}
+            className={cl(classes.helpTextButton, `fds-focus`, className)}
             aria-expanded={open}
             onClick={() => setOpen(!open)}
             {...rest}
@@ -78,7 +73,7 @@ const HelpText = ({
               className={cl(classes.helpTextIcon, classes[size], className)}
               openState={open}
             />
-            <span className={utilClasses.visuallyHidden}>{title}</span>
+            <span className={`fds-sr-only`}>{title}</span>
           </button>
         </Popover.Trigger>
         <Popover.Content className={classes.helpTextContent}>

diff --git a/packages/react/src/components/SkipLink/SkipLink.tsx b/packages/react/src/components/SkipLink/SkipLink.tsx
@@ -1,7 +1,6 @@
 import type { AnchorHTMLAttributes, ReactNode } from 'react';
 import cl from 'clsx';
 
-import utilityClasses from './../../utilities/utility.module.css';
 import classes from './SkipLink.module.css';
 
 export type SkipLinkProps = {
@@ -21,7 +20,7 @@ export const SkipLink = ({
   return (
     <a
       href={href}
-      className={cl(utilityClasses.visuallyHidden, classes.skiplink, className)}
+      className={cl(`fds-sr-only`, classes.skiplink, className)}
       {...rest}
     >
       {children}

diff --git a/packages/react/src/components/Table/TableHeaderCell.tsx b/packages/react/src/components/Table/TableHeaderCell.tsx
@@ -7,8 +7,6 @@ import type { AriaAttributes } from 'react';
 import * as React from 'react';
 import cl from 'clsx';
 
-import utilityClasses from '../../utilities/utility.module.css';
-
 import classes from './Table.module.css';
 
 const SORT_ICON = {
@@ -63,7 +61,7 @@ export const TableHeaderCell = React.forwardRef<
       >
         {sortable && (
           <button
-            className={utilityClasses.focusable}
+            className={`fds-focus`}
             onClick={onSortClick}
           >
             {children}

diff --git a/packages/react/src/components/form/CharacterCounter.tsx b/packages/react/src/components/form/CharacterCounter.tsx
@@ -1,4 +1,3 @@
-import utilityClasses from '../../utilities/utility.module.css';
 import { ErrorMessage } from '../Typography';
 
 export type CharacterLimitProps = Omit<
@@ -42,7 +41,7 @@ export const CharacterCounter = ({
   return (
     <>
       <span
-        className={utilityClasses.visuallyHidden}
+        className={`fds-sr-only`}
         id={id}
       >
         {srLabel}

diff --git a/packages/react/src/components/form/Combobox/internal/ComboboxClearButton.tsx b/packages/react/src/components/form/Combobox/internal/ComboboxClearButton.tsx
@@ -4,7 +4,6 @@ import cl from 'clsx';
 
 import { ComboboxContext } from '../Combobox';
 import classes from '../Combobox.module.css';
-import utilityClasses from '../../../../utilities/utility.module.css';
 
 export const ComboboxClearButton = () => {
   const context = useContext(ComboboxContext);
@@ -26,11 +25,7 @@ export const ComboboxClearButton = () => {
   return (
     <button
       disabled={disabled}
-      className={cl(
-        classes.clearButton,
-        classes[size],
-        utilityClasses.focusable,
-      )}
+      className={cl(classes.clearButton, classes[size], `fds-focus`)}
       onClick={() => {
         if (readOnly) return;
         if (disabled) return;

diff --git a/packages/react/src/components/form/Combobox/internal/ComboboxLabel.tsx b/packages/react/src/components/form/Combobox/internal/ComboboxLabel.tsx
@@ -5,7 +5,6 @@ import { Label, Paragraph } from '../../../Typography';
 import type { ComboboxProps } from '../Combobox';
 import type { useFormField } from '../../useFormField';
 import classes from '../Combobox.module.css';
-import utilityClasses from '../../../../utilities/utility.module.css';
 
 type ComboboxLabelProps = {
   label?: ComboboxProps['label'];
@@ -30,10 +29,7 @@ export const ComboboxLabel = ({
         <Label
           size={size}
           htmlFor={formFieldProps.inputProps.id}
-          className={cl(
-            classes.label,
-            hideLabel && utilityClasses.visuallyHidden,
-          )}
+          className={cl(classes.label, hideLabel && `fds-sr-only`)}
         >
           {readOnly && (
             <PadlockLockedFillIcon
@@ -51,10 +47,7 @@ export const ComboboxLabel = ({
         >
           <div
             id={formFieldProps.descriptionId}
-            className={cl(
-              classes.description,
-              hideLabel && utilityClasses.visuallyHidden,
-            )}
+            className={cl(classes.description, hideLabel && `fds-sr-only`)}
           >
             {description}
           </div>

diff --git a/packages/react/src/components/form/Fieldset/Fieldset.tsx b/packages/react/src/components/form/Fieldset/Fieldset.tsx
@@ -4,7 +4,6 @@ import cl from 'clsx';
 import { PadlockLockedFillIcon } from '@navikt/aksel-icons';
 
 import { Label, Paragraph, ErrorMessage } from '../../Typography';
-import utilityclasses from '../../../utilities/utility.module.css';
 import type { FormFieldProps } from '../useFormField';
 
 import { useFieldset } from './useFieldset';
@@ -75,7 +74,7 @@ export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
               <span
                 className={cl(
                   classes.legendContent,
-                  hideLegend && utilityclasses.visuallyHidden,
+                  hideLegend && `fds-sr-only`,
                 )}
               >
                 {readOnly && (
@@ -96,10 +95,7 @@ export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
             >
               <div
                 id={descriptionId}
-                className={cl(
-                  classes.description,
-                  hideLegend && utilityclasses.visuallyHidden,
-                )}
+                className={cl(classes.description, hideLegend && `fds-sr-only`)}
               >
                 {description}
               </div>

diff --git a/packages/react/src/components/form/NativeSelect/NativeSelect.tsx b/packages/react/src/components/form/NativeSelect/NativeSelect.tsx
@@ -7,7 +7,6 @@ import { omit } from '../../../utilities';
 import { ErrorMessage, Label, Paragraph } from '../../Typography';
 
 import classes from './NativeSelect.module.css';
-import utilityClasses from './../../../utilities/utility.module.css';
 import { useNativeSelect } from './useNativeSelect';
 
 export type NativeSelectProps = {
@@ -76,10 +75,7 @@ export const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(
               weight='medium'
               size={size}
               htmlFor={selectProps.id}
-              className={cl(
-                classes.label,
-                hideLabel && utilityClasses.visuallyHidden,
-              )}
+              className={cl(classes.label, hideLabel && 'fds-sr-only')}
             >
               {readOnly && (
                 <PadlockLockedFillIcon
@@ -98,7 +94,7 @@ export const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(
             className={cl(
               classes.select,
               classes[size],
-              utilityClasses.focusable,
+              `fds-focus`,
               props.multiple && classes.multiple,
               className,
             )}

diff --git a/packages/react/src/components/form/Search/Search.tsx b/packages/react/src/components/form/Search/Search.tsx
@@ -11,7 +11,6 @@ import type { FormFieldProps } from '../useFormField';
 
 import { useSearch } from './useSearch';
 import classes from './Search.module.css';
-import utilityClasses from './../../../utilities/utility.module.css';
 
 export type SearchProps = {
   /** Label */
@@ -122,10 +121,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
               size={size}
               weight='medium'
               htmlFor={inputProps.id}
-              className={cl(
-                classes.label,
-                hideLabel && utilityClasses.visuallyHidden,
-              )}
+              className={cl(classes.label, hideLabel && 'fds-sr-only')}
             >
               <span>{label}</span>
             </Label>
@@ -146,7 +142,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
                 disabled={disabled}
                 className={cl(
                   classes.input,
-                  utilityClasses.focusable,
+                  `fds-focus`,
                   isSimple && classes.simple,
                   !isSimple && classes.withSearchButton,
                 )}
@@ -156,14 +152,12 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
               />
               {showClearButton && (
                 <button
-                  className={cl(classes.clearButton, utilityClasses.focusable)}
+                  className={cl(classes.clearButton, `fds-focus`)}
                   type='button'
                   onClick={handleClear}
                   disabled={disabled}
                 >
-                  <span className={utilityClasses.visuallyHidden}>
-                    {clearButtonLabel}
-                  </span>
+                  <span className={`fds-sr-only`}>{clearButtonLabel}</span>
                   <XMarkIcon aria-hidden />
                 </button>
               )}