Merge 6e39c82 into 5f2f61a

fulcanellee · web-flow · commit f1e1439a8144 · 2025-10-31T12:17:28.000Z
diff --git a/.changeset/common-rats-care.md b/.changeset/common-rats-care.md
@@ -0,0 +1,6 @@
+---
+'@alfalab/core-components-select': patch
+'@alfalab/core-components': patch
+---
+
+Изменено скругление OptionsList для desktop (не затрагивает тему site)
diff --git a/packages/input-autocomplete/src/__snapshots__/Component.test.tsx.snap b/packages/input-autocomplete/src/__snapshots__/Component.test.tsx.snap
@@ -363,7 +363,7 @@ exports[`InputAutocompleteMobile Snapshots tests should match snapshot in open s
                             />
                           </div>
                           <div
-                            class="track vertical"
+                            class="track vertical verticalBar verticalBarWithFooter"
                             style="visibility: hidden;"
                           >
                             <div
diff --git a/packages/international-phone-input/src/__image_snapshots__/international-phone-input-desktop-interactions-autocomplete-snap.png b/packages/international-phone-input/src/__image_snapshots__/international-phone-input-desktop-interactions-autocomplete-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:d9281ae247b32995dc66722ae70d9fc4837ad1cf27ebd434aa59e4d3f93598f3
-size 8468
+oid sha256:1a55697e8402cdd6b274d280793b6102e3cb5d16457a4f51e12f1a1e2f43eb0f
+size 9064
diff --git a/packages/international-phone-input/src/__image_snapshots__/international-phone-input-desktop-interactions-flag-select-snap.png b/packages/international-phone-input/src/__image_snapshots__/international-phone-input-desktop-interactions-flag-select-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:f7c0bc0455f59a495c1751c1c49f574c17027d4cd6d3504f4a6fff4dd96f22c8
-size 19834
+oid sha256:e51bb6373631d54fce60d2f2e1eb0ad9e69ba61108ddf50e003a82da3310be3f
+size 20346
diff --git a/packages/picker-button/src/__snapshots__/Component.test.tsx.snap b/packages/picker-button/src/__snapshots__/Component.test.tsx.snap
@@ -1342,7 +1342,7 @@ exports[`Snapshots tests should display opened correctly 4`] = `
                           />
                         </div>
                         <div
-                          class="track vertical"
+                          class="track vertical verticalBar"
                           style="visibility: hidden;"
                         >
                           <div
@@ -2456,7 +2456,7 @@ exports[`Snapshots tests should display opened correctly 6`] = `
                           />
                         </div>
                         <div
-                          class="track vertical"
+                          class="track vertical verticalBar"
                           style="visibility: hidden;"
                         >
                           <div
diff --git a/packages/select-with-tags/src/__image_snapshots__/select-with-tags-collapse-tag-list-desktop-snap.png b/packages/select-with-tags/src/__image_snapshots__/select-with-tags-collapse-tag-list-desktop-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:fb08da81731b3219322b9e7c1ef7a412c54e1f73f620b464c69000f1278268ee
-size 17887
+oid sha256:57aa4f798e7a2f7610b82e5ff4b7543bc619c61df943a18741e61928e6113b6a
+size 18547
diff --git a/packages/select-with-tags/src/__image_snapshots__/select-with-tags-main-scenario-desktop-4-snap.png b/packages/select-with-tags/src/__image_snapshots__/select-with-tags-main-scenario-desktop-4-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:d40b4dacf59e558cd3cb41f5f7130085970b8b17039c7e5585f15182f1ef81a8
-size 18990
+oid sha256:c17dd8030713db949e791369d8a60c7bb6259e4977df482d33d85f4f7ce8b77c
+size 19765
diff --git a/packages/select/src/__image_snapshots__/corp-select-desktop-option-list-3-snap.png b/packages/select/src/__image_snapshots__/corp-select-desktop-option-list-3-snap.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:08342f8a0d6b8ed84af2b5a8fff49758dcfa73c01bd3fa43d18ef40452cca40b
+size 12007
diff --git a/packages/select/src/__image_snapshots__/corp-select-mobile-option-list-3-snap.png b/packages/select/src/__image_snapshots__/corp-select-mobile-option-list-3-snap.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:28521f472efe4315f62d617d0c74609c621f2300aa1fc52893fd0029ae139e66
+size 15705
diff --git a/packages/select/src/__image_snapshots__/default-select-desktop-option-list-snap.png b/packages/select/src/__image_snapshots__/default-select-desktop-option-list-snap.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:c19ee9de78fab87ba0607862dd4947fa79c047f0353b77c378b2f77a0865a168
+size 11897
diff --git a/packages/select/src/__image_snapshots__/default-select-mobile-option-list-snap.png b/packages/select/src/__image_snapshots__/default-select-mobile-option-list-snap.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:28521f472efe4315f62d617d0c74609c621f2300aa1fc52893fd0029ae139e66
+size 15705
diff --git a/packages/select/src/__image_snapshots__/select-interactions-tests-click-open-select-select-one-item-2-snap.png b/packages/select/src/__image_snapshots__/select-interactions-tests-click-open-select-select-one-item-2-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:75c28eb24f1ffb2a9d480edf3486608e411f12b6666365b0bcd5b26143d94881
-size 16031
+oid sha256:c60b8e486c693857415a8dce3619226f0375c78452b7a21db993059fbf80b082
+size 16745
diff --git a/packages/select/src/__image_snapshots__/select-interactions-tests-click-open-select-select-one-item-4-snap.png b/packages/select/src/__image_snapshots__/select-interactions-tests-click-open-select-select-one-item-4-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:b7514ee97a0239cd01bc00695a1c9d7469dc4c9b5290c5db3f553af045e29125
-size 15469
+oid sha256:5706af329e025fe42ff1c1a735fe7717aee7f3667651b0ff40c9d99b2fcba966
+size 16123
diff --git a/packages/select/src/__image_snapshots__/select-interactions-tests-default-open-select-select-one-item-2-snap.png b/packages/select/src/__image_snapshots__/select-interactions-tests-default-open-select-select-one-item-2-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:82d934c26cab74813e9bcb407389228104cbc21d69d116bc0c4469099a50e097
-size 16059
+oid sha256:f6d0ae1ae3feb78d95930526f00d253008b213d70d26379c6864938e2b92ca17
+size 16771
diff --git a/packages/select/src/__image_snapshots__/select-interactions-tests-default-open-select-select-one-item-4-snap.png b/packages/select/src/__image_snapshots__/select-interactions-tests-default-open-select-select-one-item-4-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:cbcbd4c24f4db9ed0be81facbc3c0a053384a8fddba07cd3f4097825e40a87a5
-size 15343
+oid sha256:ea2fcfcb51672d0a56e96a19fa9ab3ec893df58c0a818fb22fd7dec38e8e62b7
+size 16003
diff --git a/packages/select/src/__image_snapshots__/select-interactions-tests-long-options-2-snap.png b/packages/select/src/__image_snapshots__/select-interactions-tests-long-options-2-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:2a733cba0bc81100536a83fe07fdf84831a7ac7785e2bdd29f26d0f74d2b3544
-size 17694
+oid sha256:998b1c02df527c91882a92a6c0cba826894c9a2de4f6ca361cd0d13fbdf49068
+size 18262
diff --git a/packages/select/src/__image_snapshots__/select-interactions-tests-long-options-snap.png b/packages/select/src/__image_snapshots__/select-interactions-tests-long-options-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:5c0e7a46aa4fe611fe64f57f51983875dbeccb129b8f844e9c73c1fcda0edaf3
-size 17602
+oid sha256:6c9b47a869f8b5609bb507e31975a68ca394607ec15b4d4f6ae72686e1a44713
+size 18243
diff --git a/packages/select/src/__image_snapshots__/select-interactions-tests-visible-options-snap.png b/packages/select/src/__image_snapshots__/select-interactions-tests-visible-options-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:11396c9fa38909dbb408f84c6f05234fc7c9a1c22ebfa8443e059f12064de923
-size 12576
+oid sha256:9375e40beaf1df7162a3be2f64bf03e1a905e50139975224bfe2fd66a1519dee
+size 13204
diff --git a/packages/select/src/__image_snapshots__/site-select-desktop-option-list-2-snap.png b/packages/select/src/__image_snapshots__/site-select-desktop-option-list-2-snap.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:68598aef5b7419d34651cf1456878e176c1d72e05421b232c1285c23866b348e
+size 10880
diff --git a/packages/select/src/__image_snapshots__/site-select-mobile-option-list-2-snap.png b/packages/select/src/__image_snapshots__/site-select-mobile-option-list-2-snap.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:84608cf001182c549caf1d070b35b4b34ff5dd150869bf5e7c2c75df9efbaff4
+size 15074
diff --git a/packages/select/src/component.screenshots.test.tsx b/packages/select/src/component.screenshots.test.tsx
@@ -6,6 +6,8 @@ import {
     openBrowserPage,
     createSpriteStorybookUrl,
     createPreview,
+    generateTestCases,
+    customSnapshotIdentifier,
 } from '@alfalab/core-components-screenshot-utils';
 
 const screenshotTesting = setupScreenshotTesting({
@@ -469,3 +471,53 @@ describe('SelectMobile | screenshots addons', () => {
 
     ['default', 'site'].forEach((theme) => testCase(theme));
 });
+
+describe('SelectDesktopOptionList', () => {
+    const testCase = (theme: string) =>
+        screenshotTesting({
+            cases: [
+                ...generateTestCases({
+                    componentName: 'Select',
+                    subComponentName: 'SelectDesktopOptionList',
+                    testStory: false,
+                    knobs: {},
+                }),
+            ],
+            viewport: {
+                width: 180,
+                height: 320,
+            },
+            matchImageSnapshotOptions: {
+                customSnapshotIdentifier: (...args) =>
+                    `${theme}-${customSnapshotIdentifier(...args)}`,
+            },
+            theme,
+        })();
+
+    ['default', 'site', 'corp'].forEach((theme) => testCase(theme));
+});
+
+describe('SelectMobileOptionList', () => {
+    const testCase = (theme: string) =>
+        screenshotTesting({
+            cases: [
+                ...generateTestCases({
+                    componentName: 'Select',
+                    subComponentName: 'SelectMobileOptionList',
+                    testStory: false,
+                    knobs: {},
+                }),
+            ],
+            viewport: {
+                width: 500,
+                height: 500,
+            },
+            matchImageSnapshotOptions: {
+                customSnapshotIdentifier: (...args) =>
+                    `${theme}-${customSnapshotIdentifier(...args)}`,
+            },
+            theme,
+        })();
+
+    ['default', 'site', 'corp'].forEach((theme) => testCase(theme));
+});
diff --git a/packages/select/src/components/options-list/Component.tsx b/packages/select/src/components/options-list/Component.tsx
@@ -166,6 +166,10 @@ export const OptionsList = forwardRef<HTMLDivElement, OptionsListProps>(
             return (
                 <Scrollbar
                     className={cn(styles.scrollable, scrollbarClassName)}
+                    verticalBarClassName={cn(styles.verticalBar, {
+                        [styles.verticalBarWithHeader]: Boolean(header),
+                        [styles.verticalBarWithFooter]: Boolean(footer),
+                    })}
                     ref={scrollbarRef}
                     style={{ height }}
                     horizontalAutoStretch={optionsListWidth === 'content'}
diff --git a/packages/select/src/components/options-list/index.module.css b/packages/select/src/components/options-list/index.module.css
@@ -6,6 +6,31 @@
     outline: none;
     box-sizing: border-box;
     position: relative;
+
+    & .scrollable {
+        overflow: auto;
+        width: 100%;
+
+        & .verticalBar.verticalBar {
+            top: var(--select-options-list-scrollbar-gap);
+            height: calc(100% - 2 * var(--select-options-list-scrollbar-gap));
+
+            &.verticalBarWithHeader {
+                top: 0;
+                height: calc(100% - var(--select-options-list-scrollbar-gap));
+            }
+
+            &.verticalBarWithFooter {
+                top: var(--select-options-list-scrollbar-gap);
+                height: calc(100% - var(--select-options-list-scrollbar-gap));
+            }
+
+            &.verticalBarWithHeader.verticalBarWithFooter {
+                top: 0;
+                height: 100%;
+            }
+        }
+    }
 }
 
 .optionsListHeader {
@@ -30,11 +55,6 @@
     }
 }
 
-.scrollable {
-    overflow: auto;
-    width: 100%;
-}
-
 .mask {
     min-width: 4000px;
 }
diff --git a/packages/select/src/docs/Component.stories.tsx b/packages/select/src/docs/Component.stories.tsx
@@ -269,4 +269,36 @@ export const select_modal_mobile: Story = {
     },
 };
 
+export const select_desktop_option_list: Story = {
+    name: 'SelectDesktopOptionList',
+    render: () => {
+        const multiple = boolean('multiple', false);
+
+        return (
+            <SelectDesktop
+                defaultOpen={true}
+                label='Option List Test'
+                options={options.slice(0, 5)}
+                multiple={multiple}
+            />
+        );
+    },
+};
+
+export const select_mobile_option_list: Story = {
+    name: 'SelectMobileOptionList',
+    render: () => {
+        const multiple = boolean('multiple', false);
+
+        return (
+            <SelectMobile
+                defaultOpen={true}
+                label='Option List Test'
+                options={options.slice(0, 5)}
+                multiple={multiple}
+            />
+        );
+    },
+};
+
 export default meta;
diff --git a/packages/select/src/vars.css b/packages/select/src/vars.css
@@ -6,7 +6,8 @@
 
     /* options list */
 
-    --select-options-list-border-radius: var(--border-radius-8);
+    --select-options-list-border-radius: var(--border-radius-16);
+    --select-options-list-scrollbar-gap: var(--gap-12);
     --select-options-list-box-shadow: var(--shadow-m);
     --select-options-list-offset: var(--gap-4);
     --select-options-list-top-padding: var(--gap-0);
diff --git a/packages/themes/src/mixins/select/corp.css b/packages/themes/src/mixins/select/corp.css
@@ -1,4 +1,3 @@
 @define-mixin select-corp {
-    --select-options-list-border-radius: var(--border-radius-16);
     --select-option-list-footer-button-gap: var(--gap-8);
 }

Original file line number	Diff line number	Diff line change
@@ -363,7 +363,7 @@ exports[`InputAutocompleteMobile Snapshots tests should match snapshot in open s
`363`	`363`	`/>`
`364`	`364`	`</div>`
`365`	`365`	`<div`
`366`		`- class="track vertical"`
	`366`	`+ class="track vertical verticalBar verticalBarWithFooter"`
`367`	`367`	`style="visibility: hidden;"`
`368`	`368`	`>`
`369`	`369`	`<div`