feat(select): add select mobile (#1016)

* feat(select): add select mobile draft * feat(bottom-sheet): update-bottom-sheet Переделка bottom-sheet * refactor(bottom-sheet): refactor * test(bottom-sheet): updated tests * fix(bottom-sheet): bug fixes Co-authored-by: blackraydev <black2001ray@mail.ru>
alfa-laboratory · Apr 13, 2022 · b3cfb0d · b3cfb0d
1 parent 06f0427
commit b3cfb0d
Show file tree

Hide file tree

Showing 36 changed files with 823 additions and 24 deletions.
diff --git a/packages/bottom-sheet/src/component.tsx b/packages/bottom-sheet/src/component.tsx
@@ -52,11 +52,21 @@ export type BottomSheetProps = {
      */
     contentClassName?: string;
 
+    /**
+     * Дополнительный класс
+     */
+    containerClassName?: string;
+
     /**
      * Дополнительный класс шапки
      */
     headerClassName?: string;
 
+    /**
+     * Дополнительный класс футера
+     */
+    footerClassName?: string;
+
     /**
      * Дополнительный класс для аддонов
      */
@@ -181,7 +191,9 @@ export const BottomSheet = forwardRef<HTMLDivElement, BottomSheetProps>(
             title,
             actionButton,
             contentClassName,
+            containerClassName,
             headerClassName,
+            footerClassName,
             addonClassName,
             closerClassName,
             backerClassName,
@@ -419,7 +431,7 @@ export const BottomSheet = forwardRef<HTMLDivElement, BottomSheetProps>(
                     {...sheetSwipeablehandlers}
                 >
                     <div
-                        className={cn(styles.scrollableContainer, {
+                        className={cn(styles.scrollableContainer, containerClassName, {
                             [styles.scrollLocked]: scrollLocked,
                         })}
                         ref={scrollableContainer}
@@ -437,7 +449,11 @@ export const BottomSheet = forwardRef<HTMLDivElement, BottomSheetProps>(
                             {children}
                         </div>
 
-                        {actionButton && <Footer sticky={stickyFooter}>{actionButton}</Footer>}
+                        {actionButton && (
+                            <Footer sticky={stickyFooter} className={footerClassName}>
+                                {actionButton}
+                            </Footer>
+                        )}
                     </div>
                 </div>
             </BaseModal>

diff --git a/packages/bottom-sheet/src/components/backer/index.module.css b/packages/bottom-sheet/src/components/backer/index.module.css
@@ -1,5 +1,5 @@
 :root {
-    --bottom-sheet-backer-bg-color: var(--color-light-bg-primary-alpha-40);
+    --bottom-sheet-backer-bg-color: var(--color-light-bg-primary-inverted-alpha-3);
 }
 
 .backer {
@@ -9,6 +9,7 @@
     justify-content: center;
     align-items: center;
     cursor: pointer;
+    color: var(--color-light-graphic-primary);
 }
 
 .button {

diff --git a/packages/bottom-sheet/src/components/closer/index.module.css b/packages/bottom-sheet/src/components/closer/index.module.css
@@ -1,5 +1,5 @@
 :root {
-    --bottom-sheet-closer-bg-color: var(--color-light-bg-primary-alpha-40);
+    --bottom-sheet-closer-bg-color: var(--color-light-bg-primary-inverted-alpha-3);
 }
 
 .closer {
@@ -9,6 +9,7 @@
     justify-content: center;
     align-items: center;
     cursor: pointer;
+    color: var(--color-light-graphic-primary);
 }
 
 .button {

diff --git a/packages/bottom-sheet/src/components/header/index.module.css b/packages/bottom-sheet/src/components/header/index.module.css
@@ -12,12 +12,12 @@
 
 .header {
     display: flex;
-    align-items: center;
     padding: var(--gap-xs);
     padding-bottom: 0;
     background-color: var(--color-light-bg-primary);
     border-top-right-radius: var(--border-radius-xl);
     border-top-left-radius: var(--border-radius-xl);
+    z-index: 1;
 }
 
 .sticky {
@@ -56,7 +56,6 @@
 }
 
 .title {
-    height: 24px;
     padding: var(--gap-xs) var(--gap-xs);
     margin: var(--bottom-sheet-title-margin-vertical) 0;
     width: 100%;

diff --git a/packages/select/package.json b/packages/select/package.json
@@ -21,6 +21,8 @@
     },
     "dependencies": {
         "@alfalab/core-components-button": "^5.1.1",
+        "@alfalab/core-components-bottom-sheet": "^4.0.1",
+        "@alfalab/core-components-base-modal": "^4.0.0",
         "@alfalab/core-components-checkbox": "^2.7.0",
         "@alfalab/core-components-form-control": "^7.4.0",
         "@alfalab/core-components-input": "^8.1.0",

diff --git a/packages/select/src/__image_snapshots__/select-click-theme-main-props-snap.png b/packages/select/src/__image_snapshots__/select-click-theme-main-props-snap.png
diff --git a/packages/select/src/__image_snapshots__/select-default-theme-main-props-snap.png b/packages/select/src/__image_snapshots__/select-default-theme-main-props-snap.png
diff --git a/...hots__/select-interactions-tests-default-open-select-select-one-item-3-snap.png b/...hots__/select-interactions-tests-default-open-select-select-one-item-3-snap.png
diff --git a/...pshots__/select-interactions-tests-default-open-select-select-one-item-snap.png b/...pshots__/select-interactions-tests-default-open-select-select-one-item-snap.png
diff --git a/packages/select/src/__image_snapshots__/select-placeholder-label-snap.png b/packages/select/src/__image_snapshots__/select-placeholder-label-snap.png
diff --git a/packages/select/src/components/index.ts b/packages/select/src/components/index.ts
@@ -1,5 +1,6 @@
 export * from './arrow';
 export * from './base-select';
+export * from './select-mobile';
 export * from './field';
 export * from './optgroup';
 export * from './option';

diff --git a/packages/select/src/components/optgroup/Component.tsx b/packages/select/src/components/optgroup/Component.tsx
@@ -4,9 +4,9 @@ import { OptgroupProps } from '../../typings';
 
 import styles from './index.module.css';
 
-export const Optgroup = ({ children, label, size = 's' }: OptgroupProps) => (
+export const Optgroup = ({ children, className, label, size = 's' }: OptgroupProps) => (
     <React.Fragment>
-        <div className={cn(styles.optgroup, styles[size])}>
+        <div className={cn(styles.optgroup, className, styles[size])}>
             <span className={styles.label}>{label}</span>
         </div>
         {children}

diff --git a/packages/select/src/components/options-list/Component.tsx b/packages/select/src/components/options-list/Component.tsx
@@ -18,6 +18,7 @@ export const OptionsList = forwardRef(
         {
             size = 's',
             className,
+            optionGroupClassName,
             Option,
             getOptionProps,
             options = [],
@@ -43,11 +44,11 @@ export const OptionsList = forwardRef(
         const counter = createCounter();
         const renderGroup = useCallback(
             (group: GroupShape) => (
-                <Optgroup label={group.label} key={group.label} size={size}>
+                <Optgroup className={optionGroupClassName} label={group.label} key={group.label} size={size}>
                     {group.options.map(option => renderOption(option, counter()))}
                 </Optgroup>
             ),
-            [counter, renderOption, size],
+            [optionGroupClassName, counter, renderOption, size],
         );
 
         useVisibleOptions({