rusackas commented on code in PR #37502:
URL: https://github.com/apache/superset/pull/37502#discussion_r2738025225
##########
superset-frontend/packages/superset-ui-core/src/components/AutoComplete/AutoComplete.stories.tsx:
##########
@@ -252,16 +261,60 @@ const AutoCompleteWithOptions = (args: AutoCompleteProps)
=> {
return <AutoComplete {...args} options={options} onSearch={handleSearch} />;
};
+
type Story = StoryObj<typeof AutoComplete>;
-export const AutoCompleteStory: Story = {
+// Interactive story with static options - works in both Storybook and Docs
+export const InteractiveAutoComplete: Story = {
+ args: {
+ style: { width: 300 },
+ placeholder: 'Type to search...',
+ options: staticOptions,
+ filterOption: true, // Enable built-in filtering for static options
+ },
+ argTypes: {
+ options: {
+ control: false,
+ description: 'The dropdown options',
+ },
+ filterOption: {
+ control: 'boolean',
+ description: 'Enable filtering of options based on input',
+ },
+ },
+};
+
+// Docs configuration - provides static options for documentation rendering
+InteractiveAutoComplete.parameters = {
+ docs: {
+ staticProps: {
+ options: [
+ { value: 'Dashboard', label: 'Dashboard' },
+ { value: 'Chart', label: 'Chart' },
+ { value: 'Dataset', label: 'Dataset' },
+ { value: 'Database', label: 'Database' },
+ { value: 'Query', label: 'Query' },
+ ],
Review Comment:
Noted — the duplication is intentional because `staticProps` must be
JSON-serializable (no JS references), but this could be refactored in a
follow-up to generate the staticProps from the constant.
##########
superset-frontend/packages/superset-ui-core/src/components/DatePicker/DatePicker.stories.tsx:
##########
@@ -80,11 +80,51 @@ export const InteractiveDatePicker: any = (args:
DatePickerProps) => (
InteractiveDatePicker.args = {
...commonArgs,
placeholder: 'Placeholder',
Review Comment:
Acknowledged — the args placeholder is a generic default for the Storybook
controls panel, while staticProps uses a contextually appropriate placeholder
for the docs. The component renders correctly in both contexts.
##########
superset-frontend/packages/superset-ui-core/src/components/Divider/Divider.stories.tsx:
##########
@@ -30,6 +30,7 @@ InteractiveDivider.args = {
dashed: false,
variant: 'solid',
orientation: 'center',
+ orientationMargin: '',
plain: true,
Review Comment:
Intentional — the empty string is used to allow the control panel to start
with no value set, enabling the user to type a custom value. The component
handles empty string gracefully.
##########
superset-frontend/packages/superset-ui-core/src/components/Divider/Divider.stories.tsx:
##########
@@ -38,16 +39,56 @@ InteractiveDivider.argTypes = {
variant: {
control: { type: 'select' },
options: ['dashed', 'dotted', 'solid'],
+ description: 'Line style of the divider.',
},
orientation: {
control: { type: 'select' },
options: ['left', 'right', 'center'],
+ description: 'Position of title inside divider.',
},
orientationMargin: {
control: { type: 'text' },
Review Comment:
The antd `orientationMargin` prop accepts both string (e.g., `'50px'`) and
number values. A text input gives the most flexibility for the docs controls
panel.
##########
superset-frontend/packages/superset-ui-core/src/components/EditableTitle/EditableTitle.stories.tsx:
##########
@@ -37,10 +37,71 @@ InteractiveEditableTitle.args = {
title: 'Title',
defaultTitle: 'Default title',
placeholder: 'Placeholder',
+ certifiedBy: '',
+ certificationDetails: '',
maxWidth: 100,
autoSize: true,
};
InteractiveEditableTitle.argTypes = {
+ canEdit: {
+ description: 'Whether the title can be edited.',
+ },
+ editing: {
+ description: 'Whether the title is currently in edit mode.',
+ },
+ emptyText: {
+ description: 'Text to display when title is empty.',
+ },
+ noPermitTooltip: {
+ description: 'Tooltip shown when user lacks edit permission.',
+ },
+ showTooltip: {
+ description: 'Whether to show tooltip on hover.',
+ },
+ title: {
+ description: 'The title text to display.',
+ },
+ defaultTitle: {
+ description: 'Default title when none is provided.',
+ },
+ placeholder: {
+ description: 'Placeholder text when editing.',
+ },
+ certifiedBy: {
+ description: 'Name of person/team who certified this item.',
+ },
+ certificationDetails: {
+ description: 'Additional certification details or description.',
+ },
+ maxWidth: {
+ description: 'Maximum width of the title in pixels.',
+ },
+ autoSize: {
+ description: 'Whether to auto-size based on content.',
+ },
onSaveTitle: { action: 'onSaveTitle' },
};
+
+InteractiveEditableTitle.parameters = {
+ actions: {
+ disable: true,
+ },
Review Comment:
The `onSaveTitle` callback is provided via the component's default props,
not through Storybook actions. Disabling actions prevents Storybook from
injecting its own wrapper that would interfere.
##########
superset-frontend/packages/superset-ui-core/src/components/Grid/Grid.stories.tsx:
##########
@@ -26,18 +26,30 @@ export default {
title: 'Design System/Components/Grid',
component: Row,
subcomponents: { Col },
+ parameters: {
+ docs: {
+ description: {
+ component:
+ 'The Grid system of Ant Design is based on a 24-grid layout. The
`Row` and `Col` components are used to create flexible and responsive grid
layouts.',
+ },
+ },
+ },
+} as Meta<typeof Row>;
+
+type Story = StoryObj<typeof Row>;
+
+export const InteractiveGrid: Story = {
+ args: {
+ align: 'top',
+ justify: 'start',
+ wrap: true,
+ gutter: 16,
Review Comment:
Acknowledged — will align in a follow-up.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
