fix(Input+Select): remove htmlSize

.changeset/selfish-meals-pump.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-react": major
+---
+
+Input+Select: Use native HTML `size` prop instead of `htmlSize`

packages/react/src/components/Pagination/PaginationButton.tsx

@@ -8,7 +8,7 @@ export type PaginationButtonProps = {
    * @default false
    */
   'aria-current'?: AriaAttributes['aria-current'];
-} & Omit<ButtonProps, 'icon' | 'loading' | 'size'>;
+} & Omit<ButtonProps, 'icon' | 'loading'>;
 
 export const PaginationButton = forwardRef<
   HTMLButtonElement,

packages/react/src/components/ToggleGroup/ToggleGroupItem.tsx

@@ -11,7 +11,7 @@ export type ToggleGroupItemProps = {
    * Generates a random value if not set.
    **/
   value?: string;
-} & Omit<ButtonProps, 'loading' | 'size' | 'value'>;
+} & Omit<ButtonProps, 'loading' | 'value'>;
 
 /**
  * A single item in a ToggleGroup.

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

@@ -28,7 +28,9 @@ Det er viktig at samme informasjon som vises i prefixet eller suffixet også er
 
 <Canvas of={InputStories.Controlled} />
 
-## Html Size
+## Html size
+
+`size` attributtet kan brukes for å angi bredden på tekstfeltet. Verdien kan være et tall fra 1 til 99.
 
 <Canvas of={InputStories.HtmlSize} />
 

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

@@ -104,11 +104,11 @@ export const Preview: Story = {
 };
 export const HtmlSize: Story = {
   args: {
-    htmlSize: 10,
+    size: 10,
   },
   render: (args) => (
     <Field>
-      <Label>Input with htmlSize</Label>
+      <Label>Input with size</Label>
       <Input {...args} />
     </Field>
   ),

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

@@ -7,10 +7,9 @@ type InputAttr = InputHTMLAttributes<HTMLInputElement>;
 export type InputProps = {
   /** Supported `input` types */
   type?: InputAttr['type'];
-  /** Exposes the HTML `size` attribute.
-   * @default 20
+  /** Defines the width of <Input> in count of characters.
    */
-  htmlSize?: number;
+  size?: number;
   /** Disables element
    * @note Avoid using if possible for accessibility purposes
    */
@@ -19,7 +18,7 @@ export type InputProps = {
   readOnly?: boolean;
   /** Set role, i.e. `switch` when `checkbox` or `radio` */
   role?: InputAttr['role'];
-} & Omit<InputAttr, 'size' | 'prefix' | 'role' | 'type'> &
+} & Omit<InputAttr, 'prefix' | 'role' | 'type'> &
   DefaultProps;
 
 /** Input field
@@ -30,14 +29,13 @@ export type InputProps = {
  * ```
  */
 export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
-  { type = 'text', htmlSize, className, onChange, onClick, ...rest },
+  { type = 'text', className, onChange, onClick, ...rest },
   ref,
 ) {
   return (
     <input
       className={cl(`ds-input`, className)}
       ref={ref}
-      size={htmlSize}
       type={type}
       onChange={(event) => rest.readOnly || onChange?.(event)} // Make readonly work for checkbox / radio / switch
       onClick={(event) => {

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

@@ -8,23 +8,18 @@ export type SelectProps = {
    * @default false
    */
   readOnly?: boolean;
-  /** Exposes the HTML `size` attribute.
-   * @default 0
+  /** Defines the width of <Select> in count of characters.
    */
-  htmlSize?: number;
+  size?: number;
 } & Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size' | 'multiple'> &
   DefaultProps;
 
 export const Select = forwardRef<HTMLSelectElement, SelectProps>(
-  function Select(
-    { className, htmlSize, onKeyDown, onMouseDown, ...rest },
-    ref,
-  ) {
+  function Select({ className, onKeyDown, onMouseDown, ...rest }, ref) {
     return (
       <select
         className={cl('ds-input', className)}
         ref={ref}
-        size={htmlSize}
         onKeyDown={(event) => {
           if (event.key === 'Tab') return;
           if (rest.readOnly) event.preventDefault(); // Make readonly work for select

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

@@ -21,7 +21,7 @@ type UseSelect = (props: SelectProps) => Omit<FormField, 'inputProps'> & {
 };
 
 /** Handles props for `Select` in context with `Fieldset` */
-export const useSelect: UseSelect = (props) => {
+export const useSelect: UseSelect = ({ size: htmlSize, ...props }) => {
   const fieldset = useContext(FieldsetContext);
   const {
     inputProps: selectProps,

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

@@ -28,7 +28,9 @@ Det er viktig at samme informasjon som vises i prefixet eller suffixet også er
 
 <Canvas of={TextfieldStories.Controlled} />
 
-## Html Size
+## Html size
+
+`size` attributtet kan brukes for å angi bredden på tekstfeltet. Verdien kan være et tall fra 1 til 99.
 
 <Canvas of={TextfieldStories.HtmlSize} />
 

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

@@ -52,8 +52,8 @@ export type TextfieldProps = {
    * @default 20
    */
   htmlSize?: number;
-} & Omit<FormFieldProps, 'size'> &
-  Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> &
+} & FormFieldProps &
+  InputHTMLAttributes<HTMLInputElement> &
   DefaultProps;
 
 /** Text input field