Merge 2bb3fd6 into 76b3a65

.changeset/silver-mirrors-joke.md

@@ -0,0 +1,6 @@
+---
+"@navikt/ds-css": patch
+"@navikt/ds-react": patch
+---
+
+:bug: Search støtter nå htmlSize-prop

@navikt/core/css/form/search.css

@@ -17,6 +17,10 @@
   width: 100%;
 }
 
+.navds-search--with-size :where(.navds-search__wrapper-inner) {
+  width: inherit;
+}
+
 .navds-search__wrapper {
   display: inline-flex;
   align-items: center;

@navikt/core/react/src/form/search/Search.tsx

@@ -67,6 +67,10 @@ export interface SearchProps
    * @default "primary"
    */
   variant?: "primary" | "secondary" | "simple";
+  /**
+   * Exposes the HTML size attribute
+   */
+  htmlSize?: number | string;
 }
 
 interface SearchComponent
@@ -112,6 +116,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
       defaultValue,
       onChange,
       onSearchClick,
+      htmlSize,
       ...rest
     } = props;
 
@@ -164,9 +169,11 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
           "navds-form-field",
           `navds-form-field--${size}`,
           "navds-search",
+
           {
             "navds-search--error": hasError,
             "navds-search--disabled": !!inputProps.disabled,
+            "navds-search--with-size": !!htmlSize,
           }
         )}
       >
@@ -215,6 +222,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
                 "navds-body-short",
                 `navds-body-${size}`
               )}
+              {...(htmlSize ? { size: Number(htmlSize) } : {})}
             />
             {(value ?? internalValue) && clearButton && (
               <button

@navikt/core/react/src/form/search/search.stories.tsx

@@ -164,3 +164,28 @@ export const NoClearButton = () => (
     />
   </div>
 );
+
+export const HtmlSize = () => (
+  <div className="colgap">
+    <Search
+      label="Lorem ipsum dolor sit amet"
+      description="Saepe laborum delectus officia perferendis quaerat excepturi possimus hic enim dicta assumenda."
+      hideLabel={false}
+      htmlSize="20"
+    />
+    <Search
+      label="Lorem ipsum dolor sit amet"
+      description="Saepe laborum delectus officia perferendis quaerat excepturi possimus hic enim dicta assumenda."
+      hideLabel={false}
+      htmlSize="20"
+      variant="secondary"
+    />
+    <Search
+      label="Lorem ipsum dolor sit amet"
+      description="Saepe laborum delectus officia perferendis quaerat excepturi possimus hic enim dicta assumenda."
+      hideLabel={false}
+      htmlSize="20"
+      variant="simple"
+    />
+  </div>
+);

aksel.nav.no/website/pages/eksempler/search/darkmode.tsx

@@ -12,5 +12,5 @@ const Example = () => {
 export default withDsExample(Example, "inverted");
 
 export const args = {
-  index: 6,
+  index: 7,
 };

aksel.nav.no/website/pages/eksempler/search/error.tsx

@@ -21,5 +21,5 @@ export const Demo = {
 };
 
 export const args = {
-  index: 5,
+  index: 6,
 };

aksel.nav.no/website/pages/eksempler/search/input-size.tsx

@@ -0,0 +1,26 @@
+import { Search } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+
+const Example = () => {
+  return (
+    <form>
+      <Search
+        label="Hva er artikkelnummeret til denne varen?"
+        description="Art.nr. finner du på varens produktside eller i katalogen."
+        hideLabel={false}
+        htmlSize="12"
+      />
+    </form>
+  );
+};
+
+export default withDsExample(Example);
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 5,
+};