fix(Select): use field (#2709)

Part of #2311

Author: eirikbacker

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

@@ -18,14 +18,16 @@ For eksempel er det ikke mulig å overstyre formateringen av alternativene.
 ## Bruk
 
 ```tsx
-import { Select } from '@digdir/designsystemet-react';
-
-<Label htmlFor='my-select'>Ta et valg</Label>
-<Select id='my-select'>
-  <Select.Option value='1'>Alternativ 1</Select.Option>
-  <Select.Option value='2'>Alternativ 2</Select.Option>
-  <Select.Option value='3'>Alternativ 3</Select.Option>
-</Select>;
+import { Select, Field } from '@digdir/designsystemet-react';
+
+<Field>
+  <Label>Ta et valg</Label>
+  <Select>
+    <Select.Option value='1'>Alternativ 1</Select.Option>
+    <Select.Option value='2'>Alternativ 2</Select.Option>
+    <Select.Option value='3'>Alternativ 3</Select.Option>
+  </Select>
+</Field>
 ```
 
 ## Eksempler

packages/react/src/components/form/Select/Select.stories.tsx

@@ -1,32 +1,18 @@
 import type { Meta, StoryFn } from '@storybook/react';
 
-import { Label } from '../../Label';
-import { Select } from './';
+import { Field, Label, Select, ValidationMessage } from '../../';
 
 export default {
   title: 'Komponenter/Select',
   component: Select,
   parameters: {
     layout: 'padded',
   },
-  decorators: [
-    (Story) => (
-      <div
-        style={{
-          display: 'flex',
-          gap: 'var(--ds-spacing-2)',
-          flexDirection: 'column',
-        }}
-      >
-        <Story />
-      </div>
-    ),
-  ],
 } as Meta;
 
 export const Preview: StoryFn<typeof Select> = (args) => (
-  <>
-    <Label htmlFor={args.id}>Velg et fjell</Label>
+  <Field>
+    <Label>Velg et fjell</Label>
     <Select {...args}>
       <Select.Option value='blank'>Velg &hellip;</Select.Option>
       <Select.Option value='everest'>Mount Everest</Select.Option>
@@ -38,20 +24,19 @@ export const Preview: StoryFn<typeof Select> = (args) => (
       <Select.Option value='puncakjaya'>Puncak Jaya</Select.Option>
       <Select.Option value='kosciuszko'>Mount Kosciuszko</Select.Option>
     </Select>
-  </>
+  </Field>
 );
 
 Preview.args = {
   'aria-invalid': false,
   'data-size': 'md',
   disabled: false,
   readOnly: false,
-  id: 'my-select',
 };
 
 export const Disabled: StoryFn<typeof Select> = (args) => (
-  <>
-    <Label htmlFor={args.id}>Velg et fjell</Label>
+  <Field>
+    <Label>Velg et fjell</Label>
     <Select {...args}>
       <Select.Option value='blank'>Velg &hellip;</Select.Option>
       <Select.Option value='everest'>Mount Everest</Select.Option>
@@ -63,17 +48,16 @@ export const Disabled: StoryFn<typeof Select> = (args) => (
       <Select.Option value='puncakjaya'>Puncak Jaya</Select.Option>
       <Select.Option value='kosciuszko'>Mount Kosciuszko</Select.Option>
     </Select>
-  </>
+  </Field>
 );
 
 Disabled.args = {
   disabled: true,
-  id: 'my-select',
 };
 
 export const WithError: StoryFn<typeof Select> = (args) => (
-  <>
-    <Label htmlFor={args.id}>Velg et fjell</Label>
+  <Field>
+    <Label>Velg et fjell</Label>
     <Select {...args}>
       <Select.Option value='blank'>Velg &hellip;</Select.Option>
       <Select.Option value='everest'>Mount Everest</Select.Option>
@@ -85,17 +69,17 @@ export const WithError: StoryFn<typeof Select> = (args) => (
       <Select.Option value='puncakjaya'>Puncak Jaya</Select.Option>
       <Select.Option value='kosciuszko'>Mount Kosciuszko</Select.Option>
     </Select>
-  </>
+    <ValidationMessage>Velg et fjell</ValidationMessage>
+  </Field>
 );
 
 WithError.args = {
   'aria-invalid': true,
-  id: 'my-select',
 };
 
 export const WithOptgroup: StoryFn<typeof Select> = (args) => (
-  <>
-    <Label htmlFor={args.id}>Velg et fjell</Label>
+  <Field>
+    <Label>Velg et fjell</Label>
     <Select {...args}>
       <Select.Optgroup label='Gruppe 1'>
         <Select.Option value='everest'>Mount Everest</Select.Option>
@@ -110,9 +94,5 @@ export const WithOptgroup: StoryFn<typeof Select> = (args) => (
         <Select.Option value='kosciuszko'>Mount Kosciuszko</Select.Option>
       </Select.Optgroup>
     </Select>
-  </>
+  </Field>
 );
-
-WithOptgroup.args = {
-  id: 'my-select',
-};

packages/react/src/components/form/Select/Select.tsx

@@ -8,10 +8,10 @@ export type SelectProps = {
    * @default false
    */
   readOnly?: boolean;
-  /** Defines the width of <Select> in count of characters.
+  /** Defines the width of Select in count of characters.
    */
   size?: number;
-} & Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size' | 'multiple'> &
+} & Omit<SelectHTMLAttributes<HTMLSelectElement>, 'multiple'> &
   DefaultProps;
 
 export const Select = forwardRef<HTMLSelectElement, SelectProps>(

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

@@ -2,15 +2,10 @@ import { Select as SelectParent } from './Select';
 import { SelectOptgroup } from './SelectOptgroup';
 import { SelectOption } from './SelectOption';
 
-type SelectComponent = typeof SelectParent & {
-  Option: typeof SelectOption;
-  Optgroup: typeof SelectOptgroup;
-};
-
-const Select = SelectParent as SelectComponent;
-
-Select.Option = SelectOption;
-Select.Optgroup = SelectOptgroup;
+const Select = Object.assign(SelectParent, {
+  Option: SelectOption,
+  Optgroup: SelectOptgroup,
+});
 
 Select.Option.displayName = 'Select.Option';
 Select.Optgroup.displayName = 'Select.Optgroup';