Merge pull request #217 from reaviz/oss-8

Select theme update
reaviz · May 28, 2024 · 1bee9b0 · 1bee9b0
2 parents 60e731a + 37aa44d
commit 1bee9b0
Show file tree

Hide file tree

Showing 14 changed files with 353 additions and 161 deletions.
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
@@ -39,7 +39,7 @@
 
   .light .sb-show-main.sb-main-centered {
     color: #11111F;
-    background: #E6E6F0;
+    background: #F7F7FA;
   }
 
   .dark .sb-show-main.sb-main-centered {

diff --git a/src/form/Range/Range.story.tsx b/src/form/Range/Range.story.tsx
@@ -4,14 +4,7 @@ import { RangeSingle } from './RangeSingle';
 
 export default {
   title: 'Components/Form/Range',
-  component: RangeSingle,
-  decorators: [
-    Story => (
-      <div className="bg-panel p-20">
-        <Story />
-      </div>
-    )
-  ]
+  component: RangeSingle
 };
 
 export const Single = () => {

diff --git a/src/form/Select/Select.tsx b/src/form/Select/Select.tsx
@@ -151,6 +151,11 @@ export interface SelectProps {
    */
   menuDisabled?: boolean;
 
+  /**
+   * The size of the select.
+   */
+  size?: 'small' | 'medium' | 'large' | string;
+
   /**
    * When the input receives a key down event.
    */
@@ -244,6 +249,7 @@ export const Select: FC<SelectProps> = ({
   value,
   defaultFilterValue,
   required,
+  size = 'medium',
   input = <SelectInput />,
   menu = <SelectMenu />,
   onRefresh,
@@ -761,6 +767,7 @@ export const Select: FC<SelectProps> = ({
           inputSearchText={keyword}
           loading={loading}
           filterable={filterable}
+          size={size}
           onSelectedChange={onMenuSelectedChange}
         />
       )}
@@ -789,6 +796,7 @@ export const Select: FC<SelectProps> = ({
         selectedOption={selectedOption}
         clearable={clearable}
         menuDisabled={menuDisabled}
+        size={size}
         onSelectedChange={toggleSelectedOption}
         onExpandClick={onInputExpanded}
         onKeyDown={onInputKeyedDown}

diff --git a/src/form/Select/SelectInput/SelectInput.tsx b/src/form/Select/SelectInput/SelectInput.tsx
@@ -15,8 +15,7 @@ import { CloseIcon } from '@/form/Select/icons/CloseIcon';
 import { DotsLoader } from '@/elements/Loader/DotsLoader';
 import { RefreshIcon } from '@/form/Select/icons/RefreshIcon';
 import { SelectInputChip, SelectInputChipProps } from './SelectInputChip';
-import { twMerge } from 'tailwind-merge';
-import { useComponentTheme } from '@/utils';
+import { cn, useComponentTheme } from '@/utils';
 import { SelectTheme } from '@/form/Select/SelectTheme';
 import { CloneElement } from '@/utils';
 
@@ -131,6 +130,11 @@ export interface SelectInputProps {
    */
   menuDisabled?: boolean;
 
+  /**
+   * The size of the select input.
+   */
+  size?: 'small' | 'medium' | 'large' | string;
+
   /**
    * The theme of the select input.
    */
@@ -250,6 +254,7 @@ export const SelectInput: FC<SelectInputProps> = ({
   error,
   menuDisabled,
   menuOpen,
+  size,
   refreshIcon = <RefreshIcon />,
   closeIcon = <CloseIcon />,
   expandIcon = <DownArrowIcon />,
@@ -433,11 +438,9 @@ export const SelectInput: FC<SelectInputProps> = ({
       if (multipleOptions?.length) {
         return (
           <div
-            className={twMerge(
-              theme.prefix,
-              multiple && theme.multiple?.prefix,
-              'select-input-value'
-            )}
+            className={cn(theme.prefix, 'select-input-value', {
+              [theme.multiple?.prefix]: multiple
+            })}
           >
             {multipleOptions.map(option => (
               <CloneElement<SelectInputChipProps>
@@ -459,7 +462,7 @@ export const SelectInput: FC<SelectInputProps> = ({
       if (singleOption?.inputLabel && !inputText) {
         return (
           <div
-            className={twMerge(
+            className={cn(
               theme.prefix,
               theme.single?.prefix,
               'select-input-value'
@@ -488,101 +491,105 @@ export const SelectInput: FC<SelectInputProps> = ({
   ]);
 
   return (
-    <div
-      ref={containerRef}
-      className={twMerge(
-        theme.base,
-        disabled && theme.disabled,
-        !filterable && theme.unfilterable,
-        error && theme.error,
-        ...(menuOpen ? [activeClassName, theme.open] : []),
-        className
-      )}
-      onClick={onContainerClick}
-    >
+    <div className={cn(theme.container)}>
       <div
-        className={twMerge(
-          theme.inputContainer,
-          multiple && theme.multiple?.inputContainer,
-          !multiple && theme.single?.inputContainer
+        ref={containerRef}
+        className={cn(
+          theme.base,
+          theme.size[size],
+          {
+            [theme.disabled]: disabled,
+            [theme.unfilterable]: !filterable,
+            [theme.error]: error
+          },
+          ...(menuOpen ? [activeClassName, theme.open] : []),
+          className
         )}
-        onClick={onInputFocus}
+        onClick={onContainerClick}
       >
-        {renderPrefix()}
-        <InlineInput
-          ref={inputRef}
-          id={id}
-          name={name}
-          disabled={disabled}
-          required={required}
-          autoFocus={autoFocus}
-          placeholder={placeholderText}
-          inputClassName={twMerge(
-            theme.input,
-            theme.placeholder,
-            'select-input-input'
-          )}
-          value={inputTextValue}
-          autoCorrect="off"
-          spellCheck="false"
-          autoComplete="off"
-          onKeyDown={onInputKeyDown}
-          onKeyUp={onInputKeyUp}
-          onChange={onChange}
-          onFocus={onInputFocus}
-          onBlur={onBlur}
-          onPaste={onPaste}
-          placeholderIsMinWidth={false}
-        />
-      </div>
-      <div className={theme.suffix?.container}>
-        {refreshable && !loading && (
-          <button
-            type="button"
-            title="Refresh Options"
+        <div
+          className={cn(theme.inputContainer, {
+            [theme.multiple?.inputContainer]: multiple,
+            [theme.single?.inputContainer]: !multiple
+          })}
+          onClick={onInputFocus}
+        >
+          {renderPrefix()}
+          <InlineInput
+            ref={inputRef}
+            id={id}
+            name={name}
             disabled={disabled}
-            className={twMerge(
-              theme.suffix?.button,
-              theme.suffix?.refresh,
-              'select-input-refresh'
+            required={required}
+            autoFocus={autoFocus}
+            placeholder={placeholderText}
+            inputClassName={cn(
+              theme.input,
+              theme.placeholder,
+              'select-input-input'
             )}
-            onClick={onRefresh}
-          >
-            {refreshIcon}
-          </button>
-        )}
-        {loading && <div className={theme.suffix?.loader}>{loadingIcon}</div>}
-        {showClear && (
-          <button
-            type="button"
-            title="Clear selection"
-            disabled={disabled}
-            className={twMerge(
-              theme.suffix?.button,
-              theme.suffix?.close,
-              'select-input-clear'
-            )}
-            onClick={onClearValues}
-          >
-            {closeIcon}
-          </button>
-        )}
-        {!menuDisabled && (
-          <button
-            type="button"
-            title="Toggle options menu"
-            disabled={disabled}
-            className={twMerge(
-              theme.suffix?.button,
-              theme.suffix?.expand,
-              'select-input-toggle'
-            )}
-            onClick={onExpandClick}
-            tabIndex={-1}
-          >
-            {expandIcon}
-          </button>
-        )}
+            value={inputTextValue}
+            autoCorrect="off"
+            spellCheck="false"
+            autoComplete="off"
+            onKeyDown={onInputKeyDown}
+            onKeyUp={onInputKeyUp}
+            onChange={onChange}
+            onFocus={onInputFocus}
+            onBlur={onBlur}
+            onPaste={onPaste}
+            placeholderIsMinWidth={false}
+          />
+        </div>
+        <div className={theme.suffix?.container}>
+          {refreshable && !loading && (
+            <button
+              type="button"
+              title="Refresh Options"
+              disabled={disabled}
+              className={cn(
+                theme.suffix?.button,
+                theme.suffix?.refresh,
+                'select-input-refresh'
+              )}
+              onClick={onRefresh}
+            >
+              {refreshIcon}
+            </button>
+          )}
+          {loading && <div className={theme.suffix?.loader}>{loadingIcon}</div>}
+          {showClear && (
+            <button
+              type="button"
+              title="Clear selection"
+              disabled={disabled}
+              className={cn(
+                theme.suffix?.button,
+                theme.suffix?.close,
+                'select-input-clear'
+              )}
+              onClick={onClearValues}
+            >
+              {closeIcon}
+            </button>
+          )}
+          {!menuDisabled && (
+            <button
+              type="button"
+              title="Toggle options menu"
+              disabled={disabled}
+              className={cn(
+                theme.suffix?.button,
+                theme.suffix?.expand,
+                'select-input-toggle'
+              )}
+              onClick={onExpandClick}
+              tabIndex={-1}
+            >
+              {expandIcon}
+            </button>
+          )}
+        </div>
       </div>
     </div>
   );