From 5faf008eb27eb31f43d3a5d77b75f3facebbec61 Mon Sep 17 00:00:00 2001
From: Barsnes <tobias.barsnes@digdir.no>
Date: Thu, 2 May 2024 08:30:24 +0200
Subject: [PATCH] =?UTF-8?q?refactor(NativeSelect):=20=E2=99=BB=EF=B8=8F=20?=
 =?UTF-8?q?Move=20styling=20to=20`native-select.css`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/css/index.css                        |  1 +
 .../native-select.css}                        | 28 +++++++++----------
 .../form/NativeSelect/NativeSelect.tsx        | 24 ++++++++--------
 3 files changed, 28 insertions(+), 25 deletions(-)
 rename packages/{react/src/components/form/NativeSelect/NativeSelect.module.css => css/native-select.css} (79%)

diff --git a/packages/css/index.css b/packages/css/index.css
index c9fd3c35a4..f862f77dcc 100644
--- 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/packages/react/src/components/form/NativeSelect/NativeSelect.module.css b/packages/css/native-select.css
similarity index 79%
rename from packages/react/src/components/form/NativeSelect/NativeSelect.module.css
rename to packages/css/native-select.css
index cc8f5af076..6a284af8a5 100644
--- a/packages/react/src/components/form/NativeSelect/NativeSelect.module.css
+++ b/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
index 3814c2ae95..4643da7357 100644
--- 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,10 +63,10 @@ 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 && (
@@ -75,12 +74,15 @@ export const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(
               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'
             >