diff --git a/packages/kaspersky-hexa-ui/src/select/stories/FieldDefaultWidth.tsx b/packages/kaspersky-hexa-ui/src/select/stories/FieldDefaultWidth.tsx new file mode 100644 index 00000000..eb37b173 --- /dev/null +++ b/packages/kaspersky-hexa-ui/src/select/stories/FieldDefaultWidth.tsx @@ -0,0 +1,124 @@ +import { Field } from '@src/field' +import { Textbox } from '@src/input' +import { StoryObj } from '@storybook/react' +import React from 'react' +import styled from 'styled-components' + +import { Select } from '../Select' +import { SelectProps } from '../types' + +type Story = StoryObj + +const selectOptions = [ + { label: 'Option 1', value: '1' }, + { label: 'Option 2', value: '2' }, + { label: 'Option 3', value: '3' } +] + +type FormFieldsProps = { + labelType?: 'default' | 'full' +} + +const FormFields = ({ labelType = 'default' }: FormFieldsProps) => ( + <> + } + /> + + } + /> + + } + /> + + } + /> + +) + +const FormLayout = styled.div` + width: 100%; + max-width: 640px; + + .kl6-field + .kl6-field { + margin-top: 16px; + } +` + +/** + * Same specificity trick as SidebarFilters.module.scss (.valueRow × 3). + * Plain ".kl6-field-control-box { min-width: unset }" loses to Field fieldCss. + */ +const ClientLikeLayout = styled(FormLayout)` + &&& .kl6-field .kl6-field-control-wrapper .kl6-field-control-box { + min-width: unset; + } +` + +export const FieldDefaultWidth: Story = { + render: () => ( + + + + ), + parameters: { + controls: { disable: true }, + docs: { + description: { + story: + 'Control case: labelType="default" + min-width: 200px on control-box. ' + + 'Select and Textbox stay the same width.' + } + } + } +} + +export const FieldDefaultWidthRepro: Story = { + render: () => ( + + + + ), + parameters: { + controls: { disable: true }, + docs: { + description: { + story: + 'Repro attempt: labelType="full" + min-width: unset on control-box ' + + '(SidebarFilters / QuickFilter pattern). Select rows should be ' + + 'narrower than the Textbox row.' + } + } + } +} diff --git a/packages/kaspersky-hexa-ui/src/sidebar/Sidebar.stories.tsx b/packages/kaspersky-hexa-ui/src/sidebar/Sidebar.stories.tsx index 40a447d7..5bc43f3f 100644 --- a/packages/kaspersky-hexa-ui/src/sidebar/Sidebar.stories.tsx +++ b/packages/kaspersky-hexa-ui/src/sidebar/Sidebar.stories.tsx @@ -588,6 +588,8 @@ export const WithToolbarAndTabs: StoryWithButton = { } } +export { SelectInSidebar, SelectInSidebarWithField } from './stories/SelectInSidebar' + type PaletteStory = StoryObj export const ColorTokens: PaletteStory = { args: { source: componentColors.sidebar }, diff --git a/packages/kaspersky-hexa-ui/src/sidebar/stories/SelectInSidebar.tsx b/packages/kaspersky-hexa-ui/src/sidebar/stories/SelectInSidebar.tsx new file mode 100644 index 00000000..84c7d86a --- /dev/null +++ b/packages/kaspersky-hexa-ui/src/sidebar/stories/SelectInSidebar.tsx @@ -0,0 +1,98 @@ +import { Button } from '@src/button' +import { Field } from '@src/field' +import { Select } from '@src/select' +import { StoryObj } from '@storybook/react' +import React, { useState } from 'react' + +import { Sidebar } from '../Sidebar' +import { SidebarProps } from '../types' + +type Story = StoryObj + +const selectOptions = [ + { label: 'test', value: 1 }, + { label: 'Option 2', value: 2 } +] + +/** + * Client repro: Select inside Sidebar (no Field). + * 1. Click "Open" → Sidebar opens, Select is full width. + * 2. Open Select dropdown → trigger may collapse to min-content. + * 3. DevTools: inspect `.ant-select` — styled-components class with + * `width: 100%` may disappear after opening. + */ +export const SelectInSidebar: Story = { + render: () => { + const [visible, setVisible] = useState(false) + + return ( + <> + + setVisible(false)} + > +