@true-engineering/true-react-common-ui-kit 3.9.2 → 3.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@true-engineering/true-react-common-ui-kit",
-  "version": "3.9.2",
+  "version": "3.11.0",
   "description": "True Engineering React UI Kit with theming support",
   "author": "True Engineering (https://trueengineering.ru)",
   "keywords": [

package/src/components/AccountInfo/AccountInfo.styles.ts

@@ -16,7 +16,8 @@ export const useStyles = createThemedStyles('AccountInfo', {
   accountName: {
     margin: [0, 2, 0, 10],
     fontSize: 14,
-    transition: 'color 0.25s ease-in-out',
+    transition: animations.defaultTransition,
+    transitionProperty: 'color',
   },
 
   accountNameOpened: {},
@@ -24,7 +25,7 @@ export const useStyles = createThemedStyles('AccountInfo', {
   accountChevron: {
     width: 16,
     height: 16,
-    transition: 'ease-in-out 0.25s',
+    transition: animations.defaultTransition,
     transitionProperty: 'transform, color',
   },
 

package/src/components/Button/Button.stories.tsx

@@ -2,9 +2,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { IIconType, iconsList } from '../Icon';
 import { complexIcons } from '../Icon/complexIcons';
 import { Button, IButtonProps } from './Button';
-import { BUTTON_VIEWS } from './constants';
-
-const sizeTypes: Array<IButtonProps['size']> = ['s', 'm', 'l', 'xl'];
+import { BUTTON_SIZES, BUTTON_VIEWS } from './constants';
 
 const iconTypes = [
   undefined,
@@ -31,9 +29,9 @@ export default {
     isFullWidth: false,
   },
   argTypes: {
-    view: { options: BUTTON_VIEWS, control: 'inline-radio' },
     icon: { options: iconTypes, control: 'select' },
-    size: { options: sizeTypes, control: 'inline-radio' },
+    size: { options: BUTTON_SIZES, control: 'inline-radio' },
+    view: { options: BUTTON_VIEWS, control: 'inline-radio' },
     iconPosition: { options: ['left', 'right'], control: 'inline-radio' },
     preloaderType: { options: preloaderTypes, control: 'inline-radio' },
   },

package/src/components/Button/Button.styles.ts

@@ -1,4 +1,4 @@
-import { createThemedStyles, ITweakStyles } from '../../theme';
+import { animations, createThemedStyles, ITweakStyles } from '../../theme';
 import { IThemedPreloaderStyles } from '../ThemedPreloader';
 import { IButtonSize } from './types';
 
@@ -10,7 +10,7 @@ export const useStyles = createThemedStyles('Button', {
     cursor: 'pointer',
     outline: 'none',
     boxSizing: 'border-box',
-    transition: '0.25s ease-in-out',
+    transition: animations.defaultTransition,
     transitionProperty: 'background-color, color, box-shadow, border-color',
     maxWidth: '100%',
     border: [1, 'solid', 'transparent'],

package/src/components/Button/constants.ts

@@ -1,3 +1,5 @@
+export const BUTTON_SIZES = ['s', 'm', 'l', 'xl'] as const;
+
 export const BUTTON_VIEWS = [
   'primary',
   'secondary',

package/src/components/Button/types.ts

@@ -1,5 +1,5 @@
-import { BUTTON_VIEWS } from './constants';
+import { BUTTON_SIZES, BUTTON_VIEWS } from './constants';
 
-export type IButtonSize = 's' | 'm' | 'l' | 'xl';
+export type IButtonSize = (typeof BUTTON_SIZES)[number];
 
 export type IButtonView = (typeof BUTTON_VIEWS)[number];

package/src/components/CloseButton/CloseButton.stories.tsx

@@ -0,0 +1,11 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { CloseButton } from './CloseButton';
+
+export default {
+  title: 'Buttons/CloseButton',
+  component: CloseButton,
+  args: {},
+  argTypes: {},
+} as ComponentMeta<typeof CloseButton>;
+
+export const Default: ComponentStory<typeof CloseButton> = (args) => <CloseButton {...args} />;

package/src/components/CloseButton/CloseButton.styles.ts

@@ -1,5 +1,5 @@
 import { rgba } from '../../helpers';
-import { colors, createThemedStyles, ITweakStyles } from '../../theme';
+import { animations, colors, createThemedStyles, ITweakStyles } from '../../theme';
 
 export const useStyles = createThemedStyles('CloseButton', {
   root: {
@@ -14,7 +14,8 @@ export const useStyles = createThemedStyles('CloseButton', {
     appearance: 'none',
     backgroundColor: 'transparent',
     cursor: 'pointer',
-    transition: 'background-color 0.25s ease-in-out',
+    transition: animations.defaultTransition,
+    transitionProperty: 'background-color',
 
     '&:hover': {
       backgroundColor: rgba(colors.BORDER_MAIN, 0.5),

package/src/components/CloseButton/CloseButton.tsx

@@ -11,6 +11,7 @@ export interface ICloseButtonProps extends ICommonProps<ICloseButtonStyles> {
   onClose?: () => void;
 }
 
+/** @deprecated */
 export const CloseButton: FC<ICloseButtonProps> = ({
   tweakStyles,
   testId,

package/src/components/FiltersPane/FiltersPane.styles.ts

@@ -1,4 +1,4 @@
-import { colors, ITweakStyles, createThemedStyles } from '../../theme';
+import { colors, ITweakStyles, createThemedStyles, animations } from '../../theme';
 import { IButtonStyles } from '../Button';
 
 export const FILTER_HEIGHT = 36;
@@ -20,7 +20,8 @@ export const useStyles = createThemedStyles('FiltersPane', {
     width: 40,
     height: FILTER_HEIGHT,
     cursor: 'pointer',
-    transition: 'background-color 0.25s ease-in-out',
+    transition: animations.defaultTransition,
+    transitionProperty: 'background-color',
   },
 
   settingsIcon: {

package/src/components/FiltersPane/components/FilterSelect/FilterSelect.styles.ts

@@ -1,5 +1,5 @@
 import cloneDeep from 'lodash-es/cloneDeep';
-import { colors, createThemedStyles, helpers, ITweakStyles } from '../../../../theme';
+import { animations, colors, createThemedStyles, helpers, ITweakStyles } from '../../../../theme';
 import { IButtonStyles } from '../../../Button';
 import { ISearchInputStyles } from '../../../SearchInput';
 import { innerTextButtonStyles } from '../../FiltersPane.styles';
@@ -55,7 +55,8 @@ export const useStyles = createThemedStyles('FilterSelect', {
     cursor: 'pointer',
     fontSize: 14,
     minHeight: ITEM_HEIGHT,
-    transition: 'background-color 0.25s ease-in-out',
+    transition: animations.defaultTransition,
+    transitionProperty: 'background-color',
     boxSizing: 'border-box',
   },
 

package/src/components/FiltersPane/components/FilterWrapper/FilterWrapper.styles.ts

@@ -1,11 +1,11 @@
-import { colors, createThemedStyles, ITweakStyles } from '../../../../theme';
+import { animations, colors, createThemedStyles, ITweakStyles } from '../../../../theme';
 import type { IFilterValueViewStyles } from '../FilterValueView';
 import { FILTER_HEIGHT } from '../../FiltersPane.styles';
 
 export const useStyles = createThemedStyles('FilterWrapper', {
   root: {
     position: 'relative',
-    transition: '0.25s ease-in-out',
+    transition: animations.defaultTransition,
     transitionProperty: 'background-color, border-color',
     border: [1, 'solid', colors.BORDER_MAIN],
     borderRadius: 18,

package/src/components/FiltersPane/components/FiltersPaneSearch/FiltersPaneSearch.styles.ts

@@ -1,5 +1,11 @@
 import { rgba } from '../../../../helpers';
-import { colors, createThemedStyles, dimensions, ITweakStyles } from '../../../../theme';
+import {
+  animations,
+  colors,
+  createThemedStyles,
+  dimensions,
+  ITweakStyles,
+} from '../../../../theme';
 import { ISearchInputStyles } from '../../../SearchInput';
 import { ISelectStyles } from '../../../Select';
 import { FILTER_HEIGHT } from '../../FiltersPane.styles';
@@ -12,7 +18,7 @@ export const useStyles = createThemedStyles('FiltersPaneSearch', {
     border: [1, 'transparent', 'solid'],
     borderRadius: 18,
     paddingRight: 8,
-    transition: '0.25s ease-in-out',
+    transition: animations.defaultTransition,
     transitionProperty: 'background-color, border-color',
   },
 

package/src/components/FlexibleTable/FlexibleTable.styles.ts

@@ -1,5 +1,5 @@
 import { rgba } from '../../helpers';
-import { colors, ITweakStyles, createThemedStyles } from '../../theme';
+import { colors, ITweakStyles, createThemedStyles, animations } from '../../theme';
 import type { IFlexibleTableRowStyles } from './components';
 
 export const STICKY_SHADOW_PADDING = 12;
@@ -72,7 +72,8 @@ export const useStyles = createThemedStyles('FlexibleTable', {
       background: 'transparent',
       pointerEvents: 'none',
       zIndex: 1,
-      transition: ['box-shadow', '0.25s', 'ease-in-out'],
+      transition: animations.defaultTransition,
+      transitionProperty: 'box-shadow',
 
       '[data-scrolled] &': {
         boxShadow: '4px 0 4px rgba(0, 0, 0, 0.05)',

package/src/components/IconButton/IconButton.stories.tsx

@@ -0,0 +1,32 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { IIconType, iconsList } from '../Icon';
+import { complexIcons } from '../Icon/complexIcons';
+import { IconButton } from './IconButton';
+import { ICON_BUTTON_SIZES, ICON_BUTTON_VIEWS } from './constants';
+
+const iconTypes = [...Object.keys(iconsList), ...Object.keys(complexIcons)] as IIconType[];
+
+export default {
+  title: 'Buttons/IconButton',
+  component: IconButton,
+  args: {
+    icon: iconTypes[0],
+    view: 'main',
+    size: 'm',
+    isDisabled: false,
+    isLoading: false,
+    isActive: false,
+  },
+  argTypes: {
+    icon: { options: iconTypes, control: 'select' },
+    size: { options: ICON_BUTTON_SIZES, control: 'inline-radio' },
+    view: { options: ICON_BUTTON_VIEWS, control: 'inline-radio' },
+  },
+  parameters: {
+    controls: {
+      exclude: ['tweakStyles', 'testId', 'data'],
+    },
+  },
+} as ComponentMeta<typeof IconButton>;
+
+export const Default: ComponentStory<typeof IconButton> = (args) => <IconButton {...args} />;

package/src/components/IconButton/IconButton.styles.ts

@@ -0,0 +1,88 @@
+import { ITweakStyles, animations, createThemedStyles } from '../../theme';
+
+const BUTTON_SIZE_S = 24;
+const BUTTON_SIZE_M = 32;
+const ICON_SIZE = 20;
+
+export const useStyles = createThemedStyles('IconButton', {
+  root: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    cursor: 'pointer',
+    outline: 'none',
+    boxSizing: 'border-box',
+    transition: animations.defaultTransition,
+    transitionProperty: 'background-color, color, border-color',
+    border: 'none',
+    position: 'relative',
+    boxShadow: 'none',
+    borderRadius: '50%',
+    background: 'none',
+    padding: 0,
+    flexShrink: 0,
+
+    '&:disabled': {
+      extend: 'disabled',
+    },
+
+    '&:active': {
+      extend: 'active',
+    },
+  },
+
+  'cancel-light': {},
+
+  cancel: {},
+
+  main: {},
+
+  custom: {},
+
+  active: {},
+
+  disabled: {
+    cursor: 'not-allowed',
+    pointerEvents: 'none',
+  },
+
+  loading: {
+    '& $content': {
+      visibility: 'hidden',
+    },
+
+    '& $loader': {
+      display: 'block',
+    },
+  },
+
+  icon: {
+    display: 'flex',
+    alignItems: 'center',
+    width: ICON_SIZE,
+    height: ICON_SIZE,
+  },
+
+  loader: {
+    display: 'none',
+    position: 'absolute',
+    left: '50%',
+    top: '50%',
+    transform: 'translate(-50%, -50%)',
+
+    width: ICON_SIZE,
+    height: ICON_SIZE,
+  },
+
+  s: {
+    width: BUTTON_SIZE_S,
+    height: BUTTON_SIZE_S,
+  },
+
+  m: {
+    width: BUTTON_SIZE_M,
+    height: BUTTON_SIZE_M,
+  },
+});
+
+export type IIconButtonStyles = ITweakStyles<typeof useStyles>;

package/src/components/IconButton/IconButton.tsx

@@ -0,0 +1,74 @@
+import { forwardRef } from 'react';
+import clsx from 'clsx';
+import { addDataTestId } from '@true-engineering/true-react-platform-helpers';
+import { addDataAttributes } from '../../helpers';
+import { ICommonProps } from '../../types';
+import { renderIcon, IIcon } from '../Icon';
+import { ThemedPreloader } from '../ThemedPreloader';
+import { IIconButtonSize, IIconButtonView, IIconButtonHTMLBaseProps } from './types';
+import { useStyles, IIconButtonStyles } from './IconButton.styles';
+
+export interface IIconButtonProps
+  extends IIconButtonHTMLBaseProps,
+    ICommonProps<IIconButtonStyles> {
+  icon: IIcon;
+  /** @default 'm' */
+  size?: IIconButtonSize;
+  /** @default 'cancel-light' */
+  view?: IIconButtonView;
+  /** @default false */
+  isDisabled?: boolean;
+  /** @default false */
+  isActive?: boolean;
+  /** @default false */
+  isLoading?: boolean;
+}
+
+export const IconButton = forwardRef<HTMLButtonElement, IIconButtonProps>(
+  (
+    {
+      icon,
+      size = 'm',
+      view = 'cancel-light',
+      isDisabled = false,
+      isActive = false,
+      isLoading = false,
+      type = 'button',
+      testId,
+      tweakStyles,
+      data,
+      onClick,
+      ...restProps
+    },
+    ref,
+  ) => {
+    const classes = useStyles({ theme: tweakStyles });
+
+    const hasNoAction = isDisabled || isLoading;
+
+    return (
+      <button
+        ref={ref}
+        className={clsx(classes.root, classes[view], classes[size], {
+          [classes.disabled]: isDisabled,
+          [classes.active]: isActive,
+          [classes.loading]: isLoading,
+        })}
+        type={type}
+        disabled={isDisabled}
+        onClick={hasNoAction ? undefined : onClick}
+        {...restProps}
+        {...addDataTestId(testId)}
+        {...addDataAttributes(data)}
+      >
+        {isLoading ? (
+          <span className={classes.loader}>
+            <ThemedPreloader type="default" useCurrentColor />
+          </span>
+        ) : (
+          <span className={classes.icon}>{renderIcon(icon)}</span>
+        )}
+      </button>
+    );
+  },
+);

package/src/components/IconButton/constants.ts

@@ -0,0 +1,3 @@
+export const ICON_BUTTON_SIZES = ['s', 'm'] as const;
+
+export const ICON_BUTTON_VIEWS = ['cancel', 'cancel-light', 'main', 'custom'] as const;

package/src/components/IconButton/index.ts

@@ -0,0 +1,3 @@
+export * from './IconButton';
+export * from './types';
+export type { IIconButtonStyles } from './IconButton.styles';

package/src/components/IconButton/types.ts

@@ -0,0 +1,11 @@
+import { ButtonHTMLAttributes } from 'react';
+import { ICON_BUTTON_SIZES, ICON_BUTTON_VIEWS } from './constants';
+
+export type IIconButtonSize = (typeof ICON_BUTTON_SIZES)[number];
+
+export type IIconButtonView = (typeof ICON_BUTTON_VIEWS)[number];
+
+export type IIconButtonHTMLBaseProps = Omit<
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  'disabled' | 'style' | 'className'
+>;

package/src/components/IncrementInput/IncrementInput.styles.ts

@@ -1,4 +1,4 @@
-import { colors, dimensions, ITweakStyles, createThemedStyles } from '../../theme';
+import { colors, dimensions, ITweakStyles, createThemedStyles, animations } from '../../theme';
 import { IInputStyles } from '../Input';
 
 export const BUTTONS_WIDTH = 36;
@@ -28,7 +28,8 @@ export const useStyles = createThemedStyles('IncrementInput', {
     border: 'none',
     outline: 'none',
     backgroundColor: colors.GREY_BACKGROUND,
-    transition: 'background-color 0.25s ease-in-out',
+    transition: animations.defaultTransition,
+    transitionProperty: 'background-color',
     color: colors.FONT_MEDIUM,
     cursor: 'pointer',
     display: 'flex',

package/src/components/Input/Input.styles.ts

@@ -1,4 +1,4 @@
-import { dimensions, ITweakStyles, createThemedStyles } from '../../theme';
+import { dimensions, ITweakStyles, createThemedStyles, animations } from '../../theme';
 import { IThemedPreloaderStyles } from '../ThemedPreloader';
 
 const PADDING_X = 12;
@@ -16,7 +16,7 @@ export const useStyles = createThemedStyles('Input', {
     width: '100%',
     height: dimensions.CONTROL_HEIGHT,
     boxSizing: 'border-box',
-    transition: '0.25s ease-in-out',
+    transition: animations.defaultTransition,
     transitionProperty: 'border-color',
     backgroundColor: 'white',
     position: 'relative',
@@ -35,7 +35,7 @@ export const useStyles = createThemedStyles('Input', {
     outline: 'none',
     boxSizing: 'border-box',
     outlineStyle: 'none',
-    transition: '0.25s ease-in-out',
+    transition: animations.defaultTransition,
     transitionProperty: 'background-color',
     border: 'none',
     background: 'none',
@@ -137,7 +137,7 @@ export const useStyles = createThemedStyles('Input', {
     top: '50%',
     transformOrigin: 'top left',
     transform: 'translateY(-50%)',
-    transition: '0.25s ease-in-out',
+    transition: animations.defaultTransition,
     transitionProperty: 'transform, color',
     fontSize: 16,
   },
@@ -241,7 +241,8 @@ export const useStyles = createThemedStyles('Input', {
     alignItems: 'center',
     padding: [0, 4],
     width: 20,
-    transition: 'color 0.25s ease-in-out',
+    transition: animations.defaultTransition,
+    transitionProperty: 'color',
     boxSizing: 'content-box',
 
     '&:last-child': {

package/src/components/List/List.styles.ts

@@ -1,4 +1,4 @@
-import { colors, ITweakStyles, createThemedStyles } from '../../theme';
+import { colors, ITweakStyles, createThemedStyles, animations } from '../../theme';
 
 const ITEM_HORIZONTAL_PADDING = 16;
 const ICON_SIZE = 20;
@@ -21,7 +21,8 @@ export const useStyles = createThemedStyles('List', {
     whiteSpace: 'nowrap',
     minHeight: 40,
     padding: [0, ITEM_HORIZONTAL_PADDING],
-    transition: 'background-color 0.25s ease-in-out',
+    transition: animations.defaultTransition,
+    transitionProperty: 'background-color',
     cursor: 'pointer',
   },
 

package/src/components/List/components/ListItem/ListItem.styles.ts

@@ -1,4 +1,4 @@
-import { colors, createThemedStyles, ITweakStyles } from '../../../../theme';
+import { animations, colors, createThemedStyles, ITweakStyles } from '../../../../theme';
 
 const ITEM_HORIZONTAL_PADDING = 16;
 const ICON_SIZE = 20;
@@ -13,7 +13,8 @@ export const useStyles = createThemedStyles('ListItem', {
     whiteSpace: 'nowrap',
     minHeight: 40,
     padding: [0, ITEM_HORIZONTAL_PADDING],
-    transition: 'background-color 0.25s ease-in-out',
+    transition: animations.defaultTransition,
+    transitionProperty: 'background-color',
     cursor: 'pointer',
   },
 

package/src/components/Modal/Modal.styles.ts

@@ -1,6 +1,6 @@
 import { rgba } from '../../helpers';
 import { colors, dimensions, ITweakStyles, createThemedStyles } from '../../theme';
-import { ICloseButtonStyles } from '../CloseButton';
+import { IIconButtonStyles } from '../IconButton';
 
 const VERTICAL_OVERLAY_PADDING = 50;
 
@@ -8,6 +8,9 @@ const MODAL_HORIZONTAL_PADDING_L = 40;
 const MODAL_HORIZONTAL_PADDING_M = 36;
 const MODAL_HORIZONTAL_PADDING_S = 26;
 
+const MODAL_CLOSE_BUTTON_SIZE = 40;
+const MODAL_CLOSE_BUTTON_ICON_SIZE = 30;
+
 export const useStyles = createThemedStyles('Modal', {
   root: {},
 
@@ -300,4 +303,16 @@ export const useStyles = createThemedStyles('Modal', {
   'modal-exit-active': { extend: 'animationEnd' },
 });
 
-export type IModalStyles = ITweakStyles<typeof useStyles, { tweakCloseButton: ICloseButtonStyles }>;
+export const closeButtonStyles: IIconButtonStyles = {
+  m: {
+    width: MODAL_CLOSE_BUTTON_SIZE,
+    height: MODAL_CLOSE_BUTTON_SIZE,
+  },
+
+  icon: {
+    width: MODAL_CLOSE_BUTTON_ICON_SIZE,
+    height: MODAL_CLOSE_BUTTON_ICON_SIZE,
+  },
+};
+
+export type IModalStyles = ITweakStyles<typeof useStyles, { tweakCloseButton: IIconButtonStyles }>;

package/src/components/Modal/Modal.tsx

@@ -10,9 +10,9 @@ import {
 import { addDataAttributes } from '../../helpers';
 import { useTweakStyles } from '../../hooks';
 import { ICommonProps } from '../../types';
-import { CloseButton } from '../CloseButton';
+import { IconButton } from '../IconButton';
 import { IModalPosition, IModalTransitionProps } from './types';
-import { useStyles, IModalStyles } from './Modal.styles';
+import { useStyles, IModalStyles, closeButtonStyles } from './Modal.styles';
 
 export interface IModalProps extends ICommonProps<IModalStyles>, IModalTransitionProps {
   title?: ReactNode;
@@ -68,6 +68,7 @@ export const Modal: FC<IModalProps> = ({
   const classes = useStyles({ theme: tweakStyles });
 
   const tweakCloseButtonStyles = useTweakStyles({
+    innerStyles: closeButtonStyles,
     tweakStyles,
     className: 'tweakCloseButton',
     currentComponentName: 'Modal',
@@ -154,10 +155,12 @@ export const Modal: FC<IModalProps> = ({
               >
                 {hasCloseButton && (
                   <div className={classes.close}>
-                    <CloseButton
+                    <IconButton
                       testId={getTestId(testId, 'close-button')}
                       tweakStyles={tweakCloseButtonStyles}
-                      onClose={onClose}
+                      view="cancel-light"
+                      icon="close"
+                      onClick={onClose}
                     />
                   </div>
                 )}

package/src/components/MoreMenu/MoreMenu.styles.ts

@@ -1,5 +1,5 @@
 import { rgba } from '../../helpers';
-import { colors, ITweakStyles, createThemedStyles } from '../../theme';
+import { colors, ITweakStyles, createThemedStyles, animations } from '../../theme';
 import { IListStyles } from '../List';
 
 export const useStyles = createThemedStyles('MoreMenu', {
@@ -21,7 +21,8 @@ export const useStyles = createThemedStyles('MoreMenu', {
     borderRadius: '50%',
     border: 'none',
     cursor: 'pointer',
-    transition: 'background-color 0.25s ease-in-out',
+    transition: animations.defaultTransition,
+    transitionProperty: 'background-color',
 
     '&$hasCircle': {
       backgroundColor: rgba(colors.GREY_HOVER, 0.5),

package/src/components/NewMoreMenu/NewMoreMenu.styles.ts

@@ -1,4 +1,4 @@
-import { colors, ITweakStyles, createThemedStyles } from '../../theme';
+import { colors, ITweakStyles, createThemedStyles, animations } from '../../theme';
 import { IListStyles } from '../List';
 import { IWithPopupStyles } from '../WithPopup';
 
@@ -17,7 +17,8 @@ export const useStyles = createThemedStyles('NewMoreMenu', {
     borderRadius: '50%',
     border: 'none',
     cursor: 'pointer',
-    transition: 'background-color 0.25s ease-in-out',
+    transition: animations.defaultTransition,
+    transitionProperty: 'background-color',
   },
 
   icon: {

package/src/components/Select/CustomSelect.stories.tsx

@@ -180,7 +180,7 @@ function SelectWithCustomProps({
 }
 
 export default {
-  title: 'Select',
+  title: 'Controls/Select',
   component: SelectWithCustomProps,
   argTypes: {
     scrollParent: {