feat: variant & disabled styles

kadena-community · Aug 23, 2023 · 73182c9 · 73182c9
1 parent 14ec3b3
commit 73182c9
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 7 deletions.
diff --git a/packages/libs/react-ui/src/components/Select/Select.css.ts b/packages/libs/react-ui/src/components/Select/Select.css.ts
@@ -21,20 +21,32 @@ export const containerClass = style([
     },
   }),
   {
-    // border: `1px solid`,
     position: 'relative',
   },
 ]);
 
+export const containerClassDisabled = style([
+  sprinkles({
+    backgroundColor: {
+      lightMode: '$gray30',
+      // darkMode: '$gray100',
+    },
+    color: {
+      lightMode: '$gray100',
+      // darkMode: '$gray40',
+    },
+  }),
+]);
+
 export const selectVariants = styleVariants({
   default: [
     {
       borderBottom: `1px solid ${vars.colors.$gray30}`,
     },
   ],
-  form: [
+  solid: [
     {
-      borderBottom: `1px solid ${vars.colors.$gray30}`,
+      border: `1px solid ${vars.colors.$gray30}`,
     },
   ],
 });

diff --git a/packages/libs/react-ui/src/components/Select/Select.stories.tsx b/packages/libs/react-ui/src/components/Select/Select.stories.tsx
@@ -1,5 +1,5 @@
 import { Option } from './Option';
-import { ISelectProps, Select } from './Select';
+import { ISelectProps, Select, variants } from './Select';
 
 import { SystemIcon } from '@components/Icon';
 import type { Meta, StoryObj } from '@storybook/react';
@@ -32,7 +32,7 @@ const meta: Meta<
         type: { summary: 'select' },
         defaultValue: { summary: 'default' },
       },
-      options: ['default', 'form'],
+      options: variants,
     },
     icon: {
       options: [

diff --git a/packages/libs/react-ui/src/components/Select/Select.tsx b/packages/libs/react-ui/src/components/Select/Select.tsx
@@ -1,5 +1,6 @@
 import {
   containerClass,
+  containerClassDisabled,
   iconClass,
   selectClass,
   selectContainerClass,
@@ -10,6 +11,8 @@ import { SystemIcon } from '@components/Icon';
 import classNames from 'classnames';
 import React, { FC, forwardRef } from 'react';
 
+export const variants: ['default', 'solid'] = ['default', 'solid'];
+
 export interface ISelectProps
   extends Omit<
     React.HTMLAttributes<HTMLSelectElement>,
@@ -22,7 +25,7 @@ export interface ISelectProps
   onChange: React.ChangeEventHandler<HTMLSelectElement>;
   ref?: React.ForwardedRef<HTMLSelectElement>;
   ariaLabel: string;
-  variant?: 'default' | 'form';
+  variant?: (typeof variants)[number];
 }
 
 export const Select: FC<ISelectProps> = forwardRef<
@@ -42,7 +45,11 @@ export const Select: FC<ISelectProps> = forwardRef<
 ) {
   return (
     <div
-      className={classNames(containerClass, selectVariants[variant])}
+      className={classNames(
+        containerClass,
+        selectVariants[variant],
+        disabled && containerClassDisabled,
+      )}
       data-testid="kda-select"
     >
       <label>