Add isError prop to Select (#722)

* Add isError prop to Select * fix naming * fix version
nordcloud · Mar 14, 2024 · 80bddf2 · 80bddf2
1 parent 207af97
commit 80bddf2
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 7 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@nordcloud/gnui",
   "description": "Nordcloud Design System - a collection of reusable React components used in Nordcloud's SaaS products",
-  "version": "10.3.0",
+  "version": "10.3.1",
   "license": "MIT",
   "repository": {
     "type": "git",

diff --git a/src/components/select/Select.mdx b/src/components/select/Select.mdx
@@ -15,12 +15,18 @@ https://react-select.com/props
   <Story of={SelectStories.Basic} />
 </Canvas>
 
-## Basic Select
+## Disabled
 
 <Canvas>
   <Story of={SelectStories.Disabled} />
 </Canvas>
 
+## Error
+
+<Canvas>
+  <Story of={SelectStories.isError} />
+</Canvas>
+
 ## Multiselect
 
 <Canvas>

diff --git a/src/components/select/Select.stories.tsx b/src/components/select/Select.stories.tsx
@@ -70,6 +70,28 @@ export const Disabled: StoryObj = {
 
   name: "disabled",
 };
+export const isError: StoryObj = {
+  render: () => {
+    const options = [
+      {
+        value: "chocolate",
+        label: "Chocolate",
+      },
+    ];
+
+    return (
+      <div
+        style={{
+          height: "150px",
+        }}
+      >
+        <Select isError options={options} />
+      </div>
+    );
+  },
+
+  name: "isError",
+};
 
 export const Multiselect: StoryObj = {
   render: () => {

diff --git a/src/components/select/Select.tsx b/src/components/select/Select.tsx
@@ -6,15 +6,20 @@ import ReactSelect, {
   type StylesConfig,
   type Props as ReactSelectProps,
 } from "react-select";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import theme from "../../theme";
 
-const SelectContainer = styled.div`
+const SelectContainer = styled.div<{ isError?: boolean }>`
   .react-select {
     &-container {
       & > .react-select__control {
         background: ${theme.color.field.default};
         border: 1px solid ${theme.color.border.input};
+        ${({ isError }) =>
+          isError &&
+          css`
+            border: 1px solid ${theme.color.border.error};
+          `}
         &:hover {
           border: 1px solid ${theme.color.border.border02};
         }
@@ -57,7 +62,7 @@ const SelectContainer = styled.div`
       }
     }
     &__placeholder {
-      color: ${theme.color.text.text03};
+      color: ${theme.color.text.text02};
     }
     &__single-value {
       color: ${theme.color.text.text01};
@@ -111,6 +116,7 @@ export type SelectOption = {
 
 export type SelectColoredOption = SelectOption & {
   color: string;
+  isError?: boolean;
 };
 
 function getDefaultStyles<
@@ -242,11 +248,13 @@ function SelectInner<
   {
     styles = getDefaultStyles(),
     ...props
-  }: ReactSelectProps<Option, IsMulti, Group>,
+  }: ReactSelectProps<Option, IsMulti, Group> & {
+    isError?: boolean;
+  },
   ref: React.ForwardedRef<SelectInstance<Option, IsMulti, Group>>
 ) {
   return (
-    <SelectContainer>
+    <SelectContainer isError={props.isError}>
       <ReactSelect
         ref={ref}
         className="react-select-container"