fix(Select): rename from nativeselect (#2404)

Fixes #2399

Author: eirikbacker

.changeset/odd-hornets-sleep.md

@@ -0,0 +1,6 @@
+---
+"@digdir/designsystemet-css": patch
+"@digdir/designsystemet-react": patch
+---
+
+Select: Rename from `NativeSelect`

apps/storefront/app/komponenter/component-list.ts

@@ -95,9 +95,9 @@ export const data = [
     url: 'https://storybook.designsystemet.no/?path=/docs/komponenter-modal--docs',
   },
   {
-    title: 'Native Select',
+    title: 'Select',
     image: 'Select.svg',
-    url: 'https://storybook.designsystemet.no/?path=/docs/komponenter-nativeselect--docs',
+    url: 'https://storybook.designsystemet.no/?path=/docs/komponenter-select--docs',
   },
   {
     title: 'Pagination',

apps/theme/components/Previews/Components/Components.tsx

@@ -11,11 +11,11 @@ import {
   Heading,
   HelpText,
   Link,
-  NativeSelect,
   Pagination,
   Paragraph,
   Radio,
   Search,
+  Select,
   Skeleton,
   Spinner,
   Switch,
@@ -86,12 +86,12 @@ export const Components = () => {
         </Heading>
         <div className={classes.tableHeader}>
           <div className={classes.tableAction}>
-            <NativeSelect label='Velg handling' size='sm' hideLabel>
+            <Select label='Velg handling' size='sm' hideLabel>
               <option value='blank'>Velg handling</option>
               <option value='everest'>Dupliser</option>
               <option value='aconcagua'>Slett</option>
               <option value='denali'>Oppdater</option>
-            </NativeSelect>
+            </Select>
             <Button className={classes.tableBtn} size='sm'>
               Utfør
             </Button>

apps/theme/components/ThemeToolbar/ThemeToolbar.tsx

@@ -1,5 +1,5 @@
 import type { CssColor } from '@adobe/leonardo-contrast-colors';
-import { Button, NativeSelect, Tooltip } from '@digdir/designsystemet-react';
+import { Button, Select, Tooltip } from '@digdir/designsystemet-react';
 import type {
   ColorError,
   ContrastMode,
@@ -107,7 +107,7 @@ export const ThemeToolbar = ({
         />
 
         <div className={classes.dropdown}>
-          <NativeSelect
+          <Select
             label='Kontrastnivå'
             size='md'
             className={classes.contrastSelect}
@@ -118,10 +118,10 @@ export const ThemeToolbar = ({
           >
             <option value='aa'>AA</option>
             <option value='aaa'>AAA (WIP)</option>
-          </NativeSelect>
+          </Select>
         </div>
         <div className={classes.borderRadii}>
-          <NativeSelect
+          <Select
             label='Border radius'
             size='md'
             className={classes.borderRadiiSelect}
@@ -142,7 +142,7 @@ export const ThemeToolbar = ({
                 {key}
               </option>
             ))}
-          </NativeSelect>
+          </Select>
         </div>
         <Tooltip content={toolTipText} portal={false}>
           <Button

packages/css/index.css

@@ -18,7 +18,7 @@
 @import url('./checkbox.css') layer(ds.components);
 @import url('./radio.css') layer(ds.components);
 @import url('./search.css') layer(ds.components);
-@import url('./native-select.css') layer(ds.components);
+@import url('./select.css') layer(ds.components);
 @import url('./textfield.css') layer(ds.components);
 @import url('./textarea.css') layer(ds.components);
 @import url('./helptext.css') layer(ds.components);

packages/css/native-select.css packages/css/select.css

@@ -1,25 +1,25 @@
-.ds-native-select__wrapper {
+.ds-select__wrapper {
   position: relative;
   display: grid;
   flex: 0 1 auto;
-}
 
-/* chevron for native select */
-.ds-native-select__wrapper::after {
-  content: '';
-  position: absolute;
-  background-color: var(--ds-color-neutral-text-default);
-  pointer-events: none;
-  top: 50%;
-  right: var(--ds-spacing-2);
-  transform: translateY(-50%);
-  width: 1.5em;
-  height: 1.5em;
-  mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMWVtJyBoZWlnaHQ9JzFlbScgdmlld0JveD0nMCAwIDI0IDI0JyBmaWxsPSdub25lJyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIGZvY3VzYWJsZT0nZmFsc2UnIHJvbGU9J2ltZyc+PHBhdGggZmlsbC1ydWxlPSdldmVub2RkJyBjbGlwLXJ1bGU9J2V2ZW5vZGQnIGQ9J001Ljk3IDkuNDdhLjc1Ljc1IDAgMCAxIDEuMDYgMEwxMiAxNC40NGw0Ljk3LTQuOTdhLjc1Ljc1IDAgMSAxIDEuMDYgMS4wNmwtNS41IDUuNWEuNzUuNzUgMCAwIDEtMS4wNiAwbC01LjUtNS41YS43NS43NSAwIDAgMSAwLTEuMDZaJyBmaWxsPSdjdXJyZW50Q29sb3InPjwvcGF0aD48L3N2Zz4=');
-  mask-size: contain;
+  /* chevron for native select */
+  &::after {
+    content: '';
+    position: absolute;
+    background-color: var(--ds-color-neutral-text-default);
+    pointer-events: none;
+    top: 50%;
+    right: var(--ds-spacing-2);
+    transform: translateY(-50%);
+    width: 1.5em;
+    height: 1.5em;
+    mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMWVtJyBoZWlnaHQ9JzFlbScgdmlld0JveD0nMCAwIDI0IDI0JyBmaWxsPSdub25lJyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIGZvY3VzYWJsZT0nZmFsc2UnIHJvbGU9J2ltZyc+PHBhdGggZmlsbC1ydWxlPSdldmVub2RkJyBjbGlwLXJ1bGU9J2V2ZW5vZGQnIGQ9J001Ljk3IDkuNDdhLjc1Ljc1IDAgMCAxIDEuMDYgMEwxMiAxNC40NGw0Ljk3LTQuOTdhLjc1Ljc1IDAgMSAxIDEuMDYgMS4wNmwtNS41IDUuNWEuNzUuNzUgMCAwIDEtMS4wNiAwbC01LjUtNS41YS43NS43NSAwIDAgMSAwLTEuMDZaJyBmaWxsPSdjdXJyZW50Q29sb3InPjwvcGF0aD48L3N2Zz4=');
+    mask-size: contain;
+  }
 }
 
-.ds-native-select {
+.ds-select {
   position: relative;
   font-family: inherit;
   box-sizing: border-box;
@@ -32,75 +32,75 @@
 }
 
 @media (hover: hover) and (pointer: fine) {
-  .ds-native-select:not(:focus-visible, :disabled, [aria-disabled]):hover {
+  .ds-select:not(:focus-visible, :disabled, [aria-disabled]):hover {
     border-color: var(--ds-color-accent-border-strong);
     box-shadow: inset 0 0 0 1px var(--ds-color-accent-border-strong);
   }
 }
 
-.ds-native-select.ds-native-select--multiple {
+.ds-select.ds-select--multiple {
   background-image: none;
 }
 
-.ds-native-select--sm {
+.ds-select--sm {
   padding: 0 var(--ds-spacing-2);
   padding-right: var(--ds-spacing-8);
   height: var(--ds-sizing-10);
 }
 
-.ds-native-select--md {
+.ds-select--md {
   padding: 0 var(--ds-spacing-3);
   padding-right: var(--ds-spacing-10);
   height: var(--ds-sizing-12);
 }
 
-.ds-native-select--lg {
+.ds-select--lg {
   padding: 0 var(--ds-spacing-4);
   padding-right: var(--ds-spacing-12);
   height: var(--ds-sizing-14);
 }
 
-.ds-native-select--container {
+.ds-select--container {
   display: grid;
   gap: var(--ds-spacing-2);
 }
 
-.ds-native-select--container:has(.ds-native-select:disabled) {
+.ds-select--container:has(.ds-select:disabled) {
   opacity: var(--ds-disabled-opacity);
 }
 
-.ds-native-select:disabled {
+.ds-select:disabled {
   cursor: not-allowed;
 }
 
-.ds-native-select--readonly .ds-native-select {
+.ds-select--readonly .ds-select {
   background: var(--ds-color-neutral-background-subtle);
   border-color: var(--ds-color-neutral-border-strong);
 }
 
-.ds-native-select--error > .ds-native-select:not(:focus-visible) {
+.ds-select--error > .ds-select:not(:focus-visible) {
   border-color: var(--ds-color-danger-border-default);
   box-shadow: inset 0 0 0 1px var(--ds-color-danger-border-default);
 }
 
-.ds-native-select__readonly__icon {
+.ds-select__readonly__icon {
   height: 1.2em;
   width: 1.2em;
 }
 
-.ds-native-select__error-message:empty {
+.ds-select__error-message:empty {
   display: none;
 }
 
-.ds-native-select__label {
+.ds-select__label {
   min-width: min-content;
   display: inline-flex;
   flex-direction: row;
   gap: var(--ds-spacing-1);
   align-items: center;
 }
 
-.ds-native-select__description {
+.ds-select__description {
   color: var(--ds-color-neutral-text-subtle);
   margin-top: calc(var(--ds-spacing-2) * -1);
 }

packages/react/src/components/Card/Card.stories.tsx

@@ -11,7 +11,7 @@ import { Button } from '../Button';
 import { Divider } from '../Divider';
 import { Link } from '../Link';
 import { Heading, Paragraph } from '../Typography';
-import { NativeSelect } from '../form/NativeSelect';
+import { Select } from '../form/Select';
 import { Textfield } from '../form/Textfield';
 
 import { Card } from '.';
@@ -287,13 +287,13 @@ export const Composed: Story = () => (
     </Card.Header>
     <Divider color='subtle' />
     <Card.Content>
-      <NativeSelect label='Velg rolle'>
+      <Select label='Velg rolle'>
         {options.map(({ value, label }, index) => (
           <option key={index} value={value}>
             {label}
           </option>
         ))}
-      </NativeSelect>
+      </Select>
       <Textfield label='Fødsels- eller d-nummer' />
       <Textfield label='Etternavn' />
     </Card.Content>

packages/react/src/components/form/Checkbox/Checkbox.mdx

@@ -83,7 +83,7 @@ Unngå deaktiverte tilstander om du kan. De har lav fargekontrast som er problem
 
 ## Retningslinjer for checkbox
 
-Hvis det er flere enn 7 svaralternativer, bruk [`NativeSelect`](/docs/komponenter-nativeselect--docs) eller [`Combobox`](/docs/komponenter-combobox--docs) istedenfor.
+Hvis det er flere enn 7 svaralternativer, bruk [`Select`](/docs/komponenter-select--docs) eller [`Combobox`](/docs/komponenter-combobox--docs) istedenfor.
 
 ### Sortering
 

packages/react/src/components/form/NativeSelect/index.ts

@@ -1,12 +1,12 @@
 import { Meta, Canvas, Controls, Primary } from '@storybook/blocks';
 
-import * as NativeSelectStories from './NativeSelect.stories';
+import * as SelectStories from './Select.stories';
 
-<Meta of={NativeSelectStories} />
+<Meta of={SelectStories} />
 
-# NativeSelect
+# Select
 
-`NativeSelect` er en enkel nedtrekksliste som lar brukeren velge ett eller flere alternativer fra et statisk utvalg.
+`Select` er en enkel nedtrekksliste som lar brukeren velge ett eller flere alternativer fra et statisk utvalg.
 Komponenten er bygget på HTML-elementet `select`, som benytter seg av operativsystemets standarder (derav "native").
 Dette sikrer forutsigbarhet og tilgjengelighet, men det setter noen begrensninger på hvordan komponenten kan tilpasses.
 For eksempel er det ikke mulig å overstyre formateringen av alternativene.
@@ -19,25 +19,25 @@ For eksempel er det ikke mulig å overstyre formateringen av alternativene.
 ## Bruk
 
 ```tsx
-import { NativeSelect } from '@digdir/designsystemet-react';
+import { Select } from '@digdir/designsystemet-react';
 
-<NativeSelect label='Ta et valg'>
+<Select label='Ta et valg'>
   <option value='1'>Alternativ 1</option>
   <option value='2'>Alternativ 2</option>
   <option value='3'>Alternativ 3</option>
-</NativeSelect>;
+</Select>;
 ```
 
 ## Eksempler
 
 ### Deaktivert
 
-<Canvas of={NativeSelectStories.Disabled} />
+<Canvas of={SelectStories.Disabled} />
 
 ### Med feil
 
-<Canvas of={NativeSelectStories.WithError} />
+<Canvas of={SelectStories.WithError} />
 
 ### Flervalg
 
-<Canvas of={NativeSelectStories.Multiple} />
+<Canvas of={SelectStories.Multiple} />