Redesign NavBarSearchField (#612)

Co-authored-by: Niklas <[email protected]>
StenaIT · Oct 3, 2023 · 1112f4e · 1112f4e
1 parent ff2c7d5
commit 1112f4e
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 21 deletions.
diff --git a/packages/forms/src/components/ui/text-input/TextInput.module.css b/packages/forms/src/components/ui/text-input/TextInput.module.css
@@ -9,6 +9,9 @@
   --swui-textinput-font-family: var(--swui-font-input);
   --swui-textinput-font-weight: var(--swui-font-weight-inputs);
   --swui-textinput-placeholder-color: var(--swui-field-placeholder-color);
+  --swui-textinput-placeholder-font-weight: var(
+    --swui-field-placeholder-font-weight
+  );
   --swui-textinput-animation-time: var(--swui-animation-time-medium);
   --swui-textinput-icon-color: var(--swui-field-icon-color);
   --swui-textinput-icon-hover-color: var(--swui-primary-action-color);
@@ -85,6 +88,11 @@
 
     &::placeholder {
       color: var(--swui-textinput-placeholder-color);
+      font-weight: var(--swui-textinput-placeholder-font-weight);
+    }
+
+    &:focus::placeholder {
+      opacity: 0;
     }
 
     &:focus {

diff --git a/packages/forms/src/components/ui/text-input/TextInput.stories.tsx b/packages/forms/src/components/ui/text-input/TextInput.stories.tsx
@@ -20,7 +20,9 @@ export default {
   },
 };
 
-export const Demo: Story<TextInputProps> = (props) => <TextInput {...props} />;
+export const Demo: Story<TextInputProps> = (props) => (
+  <TextInput {...props} placeholder={"Enter some text"} />
+);
 
 export const Overview = () => (
   <Box width={"400px"}>

diff --git a/packages/panels/src/components/nav-bar/NavBar.stories.tsx b/packages/panels/src/components/nav-bar/NavBar.stories.tsx
@@ -57,7 +57,6 @@ import { faAngleDoubleLeft } from "@fortawesome/free-solid-svg-icons/faAngleDoub
 import { faThumbtack } from "@fortawesome/free-solid-svg-icons/faThumbtack";
 import { NavBarUserButton } from "./NavBarUserButton";
 import { NavBarNotificationButton } from "./NavBarNotificationButton";
-import { NavBarSearchField } from "./NavBarSearchField";
 
 export default {
   title: "panels/NavBar",
@@ -220,14 +219,6 @@ export const WithButtonIcons = () => (
   </Column>
 );
 
-export const CenterContent = () => (
-  <NavBar center={<NavBarSearchField />}>
-    <NavBarButton label={"Customers"} selected />
-    <NavBarButton label={"Bookings"} />
-    <NavBarButton label={"Events"} />
-  </NavBar>
-);
-
 export const PopoverButton = () => (
   <NavBar
     right={

diff --git a/packages/panels/src/components/nav-bar/NavBarSearchField.module.css b/packages/panels/src/components/nav-bar/NavBarSearchField.module.css
@@ -1,6 +1,9 @@
-.navBarSearchFieldInput {
+.navBarSearchFieldInput.navBarSearchFieldInput {
   --swui-textinput-line-height: 2.7rem;
   --swui-textinput-text-color: var(--lhds-color-ui-50);
+  --swui-textinput-placeholder-color: var(--lhds-color-blue-800);
+
+  padding: 1px var(--swui-metrics-indent);
 
   &:focus {
     --swui-textinput-text-color: var(--lhds-color-ui-800);
@@ -11,14 +14,17 @@
   --swui-textinput-animation-time: var(--swui-animation-time-fast);
 
   --swui-textinput-placeholder-color: var(--lhds-color-ui-500);
-  --swui-textinput-bg-color: var(--lhds-color-blue-50);
+  --swui-textinput-bg-color: var(--lhds-color-ui-200);
   --swui-textinput-border-color: transparent;
   --swui-textinput-border-color-hover: transparent;
 
+  padding: 1px var(--swui-metrics-indent) 0;
+
+  border-radius: var(--swui-max-border-radius);
+
   &:focus-within {
     --swui-textinput-text-color: var(--lhds-color-ui-800);
     --swui-field-text-color: var(--swui-field-text-color);
-    --swui-textinput-icon-color: var(--lhds-color-ui-500);
     --swui-textinput-bg-color: var(--lhds-color-ui-50);
   }
 }
diff --git a/packages/panels/src/components/nav-bar/NavBarSearchField.stories.tsx b/packages/panels/src/components/nav-bar/NavBarSearchField.stories.tsx
@@ -0,0 +1,19 @@
+import * as React from "react";
+import { NavBar } from "./NavBar";
+import { NavBarButton } from "./NavBarButton";
+import { NavBarSearchField } from "./NavBarSearchField";
+
+export default {
+  title: "panels/NavBar/NavBarSearchField",
+  component: NavBarSearchField,
+  parameters: {
+    layout: "fullscreen",
+  },
+};
+
+export const CenterContent = () => (
+  <NavBar center={<NavBarSearchField />}>
+    <NavBarButton label={"Customers"} selected />
+    <NavBarButton label={"Bookings"} />
+  </NavBar>
+);
diff --git a/packages/panels/src/components/nav-bar/NavBarSearchField.tsx b/packages/panels/src/components/nav-bar/NavBarSearchField.tsx
@@ -1,14 +1,12 @@
 import * as React from "react";
 import { TextInput, TextInputProps } from "@stenajs-webui/forms";
-import { Clickable } from "@stenajs-webui/core";
-import { Icon, stenaSearch } from "@stenajs-webui/elements";
 import cx from "classnames";
 import styles from "./NavBarSearchField.module.css";
 
 interface NavBarSearchFieldProps extends TextInputProps {}
 
 export const NavBarSearchField: React.FC<NavBarSearchFieldProps> = ({
-  placeholder = "Search...",
+  placeholder = "Search",
   className,
   wrapperClassName,
   ...textInputProps
@@ -18,11 +16,6 @@ export const NavBarSearchField: React.FC<NavBarSearchFieldProps> = ({
       wrapperClassName={cx(styles.navBarSearchField, wrapperClassName)}
       className={cx(styles.navBarSearchFieldInput, className)}
       placeholder={placeholder}
-      contentRight={
-        <Clickable>
-          <Icon icon={stenaSearch} />
-        </Clickable>
-      }
       {...textInputProps}
     />
   );

diff --git a/packages/theme/src/styles/default-theme.css b/packages/theme/src/styles/default-theme.css
@@ -85,6 +85,7 @@
   --swui-field-indicator-active-color: var(--swui-white);
   --swui-field-indicator-inactive-color: var(--swui-hidden);
   --swui-field-placeholder-color: var(--lhds-color-ui-500);
+  --swui-field-placeholder-font-weight: var(--swui-font-weight-text-bold);
 
   /* Borders */
   --swui-border-radius: 8px;