feat: added hover styling to utrecht select, fix inline issue

components/FormField/src/index.scss

@@ -1 +1,9 @@
 @import "~@utrecht/components/dist/form-field/css";
+
+// TODO: replace with .utrecht-form-field--text-flex when possible
+.denhaag-form-field--flex {
+  --utrecht-space-around: 0;
+
+  display: flex;
+  flex-direction: column;
+}

components/FormField/src/index.tsx

@@ -1,5 +1,22 @@
-import { FormField, FormFieldProps } from '@utrecht/component-library-react';
+import React, { ForwardedRef, forwardRef, PropsWithChildren } from 'react';
+import {
+  FormField as UtrechtFormField,
+  FormFieldProps as UtrechtFormFieldProps,
+} from '@utrecht/component-library-react';
 import './index.scss';
+import clsx from 'clsx';
+
+interface FormFieldProps extends PropsWithChildren<UtrechtFormFieldProps> {
+  flex?: boolean;
+}
+
+const FormField = forwardRef(function FormField(
+  { className, flex, ...restProps }: FormFieldProps,
+  ref: ForwardedRef<HTMLDivElement>,
+) {
+  const classNames = clsx(className, { 'denhaag-form-field--flex': flex });
+  return <UtrechtFormField ref={ref} className={classNames} {...restProps} />;
+});
 
 export { FormField, FormFieldProps };
 export default FormField;

components/Select/src/index.scss

@@ -1 +1,11 @@
 @import "~@utrecht/components/dist/select/css";
+
+.denhaag-select {
+  &:hover,
+  &--hover {
+    background-color: var(--denhaag-select-hover-background-color);
+    border-color: var(--denhaag-select-hover-border-color);
+    border-width: var(--denhaag-select-hover-border-width);
+    color: var(--denhaag-select-hover-color);
+  }
+}

components/Select/src/index.tsx

@@ -1,5 +1,17 @@
-import { Select, SelectOption, SelectProps, SelectOptionProps } from '@utrecht/component-library-react';
+import React from 'react';
+import {
+  Select as UtrechtSelect,
+  SelectOption,
+  SelectProps,
+  SelectOptionProps,
+} from '@utrecht/component-library-react';
 import './index.scss';
+import clsx from 'clsx';
+
+const Select = ({ className, ...props }: SelectProps) => {
+  const classNames = clsx(className, 'denhaag-select');
+  return <UtrechtSelect className={classNames} {...props} />;
+};
 
 export { Select, SelectProps, SelectOption, SelectOptionProps };
 export default Select;

packages/storybook/src/css/FormField.stories.tsx

@@ -10,6 +10,7 @@ import { TextInput } from '@gemeente-denhaag/text-input';
 import { Paragraph } from '@gemeente-denhaag/typography';
 import { RadioButton } from '@gemeente-denhaag/radio-button';
 import readme from '../../../../components/FormField/README.md?raw';
+import Select, { SelectOption } from '@gemeente-denhaag/select';
 
 const meta = {
   id: 'css-input-form-field',
@@ -281,3 +282,18 @@ export const RadioButtonGroupWithDescription: Story = {
     </Fieldset>
   ),
 };
+
+export const SelectInput: Story = {
+  render: () => (
+    <FormField flex>
+      <FormLabel>Options</FormLabel>
+      <Select>
+        <SelectOption value="">Select an option</SelectOption>
+        <SelectOption value="1">Option #1</SelectOption>
+        <SelectOption value="2">Option #2</SelectOption>
+        <SelectOption value="3">Option #3</SelectOption>
+        <SelectOption value="4">Option #4</SelectOption>
+      </Select>
+    </FormField>
+  ),
+};

packages/storybook/src/css/Select.stories.tsx

@@ -41,4 +41,4 @@ export const Focus: Story = { args: { ...Default.args, className: 'utrecht-selec
 export const FocusVisible: Story = {
   args: { ...Default.args, className: 'utrecht-select--focus utrecht-select--focus-visible' },
 };
-export const Hover: Story = { args: { ...Default.args, className: 'utrecht-select--hover' } };
+export const Hover: Story = { args: { ...Default.args, className: 'denhaag-select--hover' } };

packages/storybook/src/react/FormField.stories.tsx

@@ -10,6 +10,7 @@ import { TextInput } from '@gemeente-denhaag/text-input';
 import { Paragraph } from '@gemeente-denhaag/typography';
 import { RadioButton } from '@gemeente-denhaag/radio-button';
 import readme from '../../../../components/FormField/README.md?raw';
+import Select, { SelectOption } from '@gemeente-denhaag/select';
 
 const meta = {
   id: 'react-input-form-field',
@@ -281,3 +282,18 @@ export const RadioButtonGroupWithDescription: Story = {
     </Fieldset>
   ),
 };
+
+export const SelectInput: Story = {
+  render: () => (
+    <FormField flex>
+      <FormLabel>Options</FormLabel>
+      <Select>
+        <SelectOption value="">Select an option</SelectOption>
+        <SelectOption value="1">Option #1</SelectOption>
+        <SelectOption value="2">Option #2</SelectOption>
+        <SelectOption value="3">Option #3</SelectOption>
+        <SelectOption value="4">Option #4</SelectOption>
+      </Select>
+    </FormField>
+  ),
+};

packages/storybook/src/react/Select.stories.tsx

@@ -41,4 +41,4 @@ export const Focus: Story = { args: { ...Default.args, className: 'utrecht-selec
 export const FocusVisible: Story = {
   args: { ...Default.args, className: 'utrecht-select--focus utrecht-select--focus-visible' },
 };
-export const Hover: Story = { args: { ...Default.args, className: 'utrecht-select--hover' } };
+export const Hover: Story = { args: { ...Default.args, className: 'denhaag-select--hover' } };

proprietary/Components/src/denhaag/select.tokens.json

@@ -0,0 +1,12 @@
+{
+  "denhaag": {
+    "select": {
+      "hover": {
+        "background-color": { "value": "{utrecht.form-control.hover.background-color}" },
+        "border-color": { "value": "{utrecht.form-control.hover.border-color}" },
+        "border-width": { "value": "{utrecht.form-control.hover.border-width}" },
+        "color": { "value": "{utrecht.form-control.hover.color}" }
+      }
+    }
+  }
+}