feat: update select popup styles for mobile (#165)

* feat: update slect popup styles for mobile * feat: fix prop
gravity-ui · Jan 23, 2024 · f02f916 · f02f916
1 parent 9fef024
commit f02f916
Show file tree

Hide file tree

Showing 5 changed files with 147 additions and 37 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -86,7 +86,7 @@
     "@gravity-ui/prettier-config": "^1.1.0",
     "@gravity-ui/stylelint-config": "^4.0.1",
     "@gravity-ui/tsconfig": "^1.0.0",
-    "@gravity-ui/uikit": "^5.20.0",
+    "@gravity-ui/uikit": "^5.25.0",
     "@jest/environment": "^29.7.0",
     "@storybook/addon-essentials": "^7.0.27",
     "@storybook/cli": "^7.0.27",

diff --git a/src/components/FeedHeader/components/Controls/Controls.scss b/src/components/FeedHeader/components/Controls/Controls.scss
@@ -67,6 +67,12 @@ $block: '.#{$namespace}feed-controls';
                 border-radius: $selectorItemBorderRadius;
             }
         }
+
+        &_isMobile {
+            @include add-specificity(&) {
+                max-height: inherit;
+            }
+        }
     }
 
     &__popup-filter {

diff --git a/src/components/FeedHeader/components/Controls/Controls.tsx b/src/components/FeedHeader/components/Controls/Controls.tsx
@@ -8,6 +8,7 @@ import {Button, Icon, Select} from '@gravity-ui/uikit';
  */
 import {BlogMetrikaGoalIds} from '../../../../constants';
 import {LikesContext} from '../../../../contexts/LikesContext';
+import {MobileContext} from '../../../../contexts/MobileContext';
 import metrika from '../../../../counters/metrika';
 import {MetrikaCounter} from '../../../../counters/utils';
 import {Keyset, i18} from '../../../../i18n';
@@ -61,6 +62,8 @@ export const Controls = ({
     const [savedOnly, setSavedOnly] = useState<boolean>(savedOnlyInitial === 'true');
     const [search, setSearch] = useState<string>(searchInitial as string);
 
+    const isMobile = useContext(MobileContext);
+
     const handleSavedOnly = () => {
         handleAnalyticsSaveOnly();
         setSavedOnly(!savedOnly);
@@ -162,7 +165,7 @@ export const Controls = ({
                         defaultValue={[tagInitial] as string[]}
                         onUpdate={handleTagSelect}
                         placeholder={i18(Keyset.AllTags)}
-                        popupClassName={b('popup')}
+                        popupClassName={b('popup', {isMobile})}
                         renderControl={renderSwitcher({
                             initial: [tagInitial],
                             list: tagsItems,
@@ -185,7 +188,7 @@ export const Controls = ({
                             disablePortal
                             options={services}
                             defaultValue={servicesItems}
-                            popupClassName={b('popup')}
+                            popupClassName={b('popup', {isMobile})}
                             onUpdate={handleServicesSelect}
                             placeholder={i18(Keyset.AllServices)}
                             renderControl={renderSwitcher({

diff --git a/src/containers/BlogPage/__stories__/BlogPage.stories.tsx b/src/containers/BlogPage/__stories__/BlogPage.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import type {Meta, StoryFn} from '@storybook/react';
+import type {Meta, StoryContext, StoryFn} from '@storybook/react';
 
 import {BlogConstructorProvider} from '../../../constructor/BlogConstructorProvider';
 import {GetPostsRequest, Query} from '../../../models/common';
@@ -45,15 +45,21 @@ export default {
     },
 } as Meta;
 
-const DefaultTemplate: StoryFn<BlogPageProps> = (args) => (
+const WithNavigationTemplate: StoryFn<BlogPageProps> = (args) => (
     <BlogConstructorProvider router={routerData}>
         <BlogPage {...args} />
     </BlogConstructorProvider>
 );
 
-export const Default = DefaultTemplate.bind({});
+export const Default = {
+    render: (args: BlogPageProps, {globals}: StoryContext) => (
+        <BlogConstructorProvider router={routerData} isMobile={globals.platform === 'mobile'}>
+            <BlogPage {...args} />
+        </BlogConstructorProvider>
+    ),
+};
 
-export const WithNavigation = DefaultTemplate.bind({});
+export const WithNavigation = WithNavigationTemplate.bind({});
 WithNavigation.args = {
     navigation,
 } as unknown as BlogPageProps;