Conversation
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request replaces the static examples and the LiveEditorCompact component in the Tabs documentation with a new, interactive TabsPreview component. This change includes the addition of necessary translation strings and the implementation of a TabsProperty editor to allow for dynamic configuration of tab labels, icons, and states. The review feedback identifies a critical issue where the TabsProperty component ignores initial property values, along with suggestions to improve event handling consistency and to remove the hardcoded limit on the number of tabs to facilitate testing of overflow behaviors.
| const [isEditing, setIsEditing] = useState(false); | ||
| const [tabCount, setTabCount] = useState(3); | ||
| const [tabs, setTabs] = useState<TabButtonProps[]>(DEFAULT_TABS); |
There was a problem hiding this comment.
The TabsProperty component initializes its internal state with hardcoded defaults (3 and DEFAULT_TABS) and does not account for the _value prop passed by the Preview component. This causes two issues:
- Any initial tab configuration provided to
TabsPreviewviainitialPropsis ignored by the editor. - The
useEffecton line 35 will immediately overwrite the parent component's state with these defaults upon mounting, effectively resetting any custom initial tabs.
To fix this, initialize the state using props._value and update the component's prop type to include _value.
| onInput: (e: Event) => { | ||
| const target = e.target as HTMLInputElement; | ||
| handleTabFieldChange(index, '_label', target.value); | ||
| }, |
There was a problem hiding this comment.
The onInput handler for KolInputText is inconsistent with other handlers in this file (e.g., lines 94, 104, 114). It should use the second argument (value) provided by the component instead of manually casting and accessing e.target. This is safer and more idiomatic for this library.
onInput: (_e: Event, value: unknown) => {
handleTabFieldChange(index, '_label', value);
},
| }, [tabs, tabCount]); | ||
|
|
||
| const handleCountChange = (_event: Event, value: unknown) => { | ||
| const count = Math.min(Math.max(Number(value) || 1, 1), DEFAULT_TABS.length); |
There was a problem hiding this comment.
The number of tabs is hardcoded to a maximum of 5 (the length of DEFAULT_TABS). This limits the utility of the preview for testing scenarios with many tabs, such as overflow or scrolling behavior. Consider allowing a higher limit by dynamically generating default tab objects when the count exceeds the initial list.
…nced tab functionality
laske185
force-pushed
the
feature/565-tabs-preview
branch
from
0af5d8b to
32a1b62
Compare
1 participant
This pull request introduces a new interactive preview for the Tabs component, enhances the documentation in both German and English, and adds internationalization support for the new features. The main changes are the addition of a
TabsPreviewcomponent and an editableTabsPropertyfor live editing of tab properties, along with updates to the documentation to use these new components.Component Preview and Property Editing Enhancements:
TabsPreviewcomponent (src/components/previews/components/Tabs.tsx) that provides an interactive, configurable preview of the Tabs component, allowing users to adjust properties and see changes live.TabsProperty(src/components/previews/properties/TabsProperty.tsx) for editing tab properties (label, icon, tooltip alignment, disabled state, hide label) via a drawer UI, including tab count adjustment and per-tab editing.TabsPropertyin the property components index for use in previews.Documentation Updates:
docs/30-components/tabs.mdx) and English (i18n/en/docusaurus-plugin-content-docs/current/30-components/tabs.mdx) Tabs documentation to replace static code examples and live editor with the newTabsPreview, improving the interactive experience and maintainability. [1] [2] [3] [4] [5] [6] [7] [8]Internationalization:
i18n/de/code.json) and English (i18n/en/code.json). [1] [2]These changes significantly improve the usability and maintainability of the Tabs component documentation and previews, making it easier for users to experiment with and understand the component's features.