refactor(NativeSelect): ♻️ Move styling to native-select.css

digdir · May 2, 2024 · 5faf008 · 5faf008
1 parent 7f13236
commit 5faf008
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 25 deletions.
diff --git a/packages/css/index.css b/packages/css/index.css
@@ -18,3 +18,4 @@
 @import url('./heading.css');
 @import url('./paragraph.css');
 @import url('./radio.css');
+@import url('./native-select.css');
diff --git a/...form/NativeSelect/NativeSelect.module.css → packages/css/native-select.css b/...form/NativeSelect/NativeSelect.module.css → packages/css/native-select.css
@@ -1,5 +1,5 @@
 @layer fds.nativeselect {
-  .select {
+  .fds-native-select {
     position: relative;
     font: inherit;
     font-family: inherit;
@@ -17,67 +17,67 @@
   }
 
   @media (hover: hover) and (pointer: fine) {
-    .select:not(:focus-visible, :disabled, [aria-disabled]):hover {
+    .fds-native-select:not(:focus-visible, :disabled, [aria-disabled]):hover {
       border-color: var(--fds-semantic-border-input-hover);
       box-shadow: inset 0 0 0 1px var(--fds-semantic-border-input-hover);
     }
   }
 
-  .select.multiple {
+  .fds-native-select.fds-native-select--multiple {
     background-image: none;
   }
 
-  .select.small {
+  .fds-native-select--small {
     padding: 0 var(--fds-spacing-2);
     padding-right: var(--fds-spacing-8);
     height: var(--fds-sizing-10);
   }
 
-  .select.medium {
+  .fds-native-select--medium {
     padding: 0 var(--fds-spacing-3);
     padding-right: var(--fds-spacing-10);
     height: var(--fds-sizing-12);
   }
 
-  .select.large {
+  .fds-native-select--large {
     padding: 0 var(--fds-spacing-4);
     padding-right: var(--fds-spacing-12);
     height: var(--fds-sizing-14);
   }
 
-  .formField {
+  .fds-native-select--container {
     display: grid;
     gap: var(--fds-spacing-2);
   }
 
-  .disabled {
+  .fds-native-select--disabled {
     opacity: var(--fds-opacity-disabled);
   }
 
-  .disabled .select {
+  .fds-native-select--disabled .fds-native-select {
     cursor: not-allowed;
   }
 
-  .readOnly .select {
+  .fds-native-select--readonly .fds-native-select {
     background: var(--fds-semantic-surface-neutral-subtle);
     border-color: var(--fds-semantic-border-neutral-default);
   }
 
-  .error > .select:not(:focus-visible) {
+  .fds-native-select--error > .fds-native-select:not(:focus-visible) {
     border-color: var(--fds-semantic-border-danger-default);
     box-shadow: inset 0 0 0 1px var(--fds-semantic-border-danger-default);
   }
 
-  .padlock {
+  .fds-native-select__padlock {
     height: 1.2em;
     width: 1.2em;
   }
 
-  .errorMessage:empty {
+  .fds-native-select__error:empty {
     display: none;
   }
 
-  .label {
+  .fds-native-select__label {
     min-width: min-content;
     display: inline-flex;
     flex-direction: row;

diff --git a/packages/react/src/components/form/NativeSelect/NativeSelect.tsx b/packages/react/src/components/form/NativeSelect/NativeSelect.tsx
@@ -6,7 +6,6 @@ import { PadlockLockedFillIcon } from '@navikt/aksel-icons';
 import { omit } from '../../../utilities';
 import { ErrorMessage, Label, Paragraph } from '../../Typography';
 
-import classes from './NativeSelect.module.css';
 import { useNativeSelect } from './useNativeSelect';
 
 export type NativeSelectProps = {
@@ -64,23 +63,26 @@ export const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(
       >
         <div
           className={cl(
-            classes.formField,
-            disabled && classes.disabled,
-            readOnly && classes.readOnly,
-            error && classes.error,
+            'fds-native-select--container',
+            disabled && 'fds-native-select--disabled',
+            readOnly && 'fds-native-select--readonly',
+            error && 'fds-native-select--error',
           )}
         >
           {label && (
             <Label
               weight='medium'
               size={size}
               htmlFor={selectProps.id}
-              className={cl(classes.label, hideLabel && 'fds-sr-only')}
+              className={cl(
+                'fds-native-select__label',
+                hideLabel && 'fds-sr-only',
+              )}
             >
               {readOnly && (
                 <PadlockLockedFillIcon
                   aria-hidden
-                  className={classes.padlock}
+                  className={'fds-native-select__padlock'}
                 />
               )}
               {label}
@@ -92,10 +94,10 @@ export const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(
             ref={ref}
             size={htmlSize}
             className={cl(
-              classes.select,
-              classes[size],
+              'fds-native-select',
+              `fds-native-select--${size}`,
               `fds-focus`,
-              props.multiple && classes.multiple,
+              props.multiple && 'fds-native-select--multiple',
               className,
             )}
             {...omit(['size', 'error', 'errorId'], rest)}
@@ -107,7 +109,7 @@ export const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(
           {error && (
             <div
               id={errorId}
-              className={classes.errorMessage}
+              className={'fds-native-select__error'}
               aria-live='polite'
               aria-relevant='additions removals'
             >