refactor(OrderList.stories): use Badge component and add Storybook co…#66
Merged
garrity-miepub merged 2 commits intomainfrom Feb 3, 2026
Merged
Conversation
…ntrols Component Integration: - Replace custom status badge styling with Badge component (variant mapping) - Use CSS variables for container styling (border-border, bg-background, bg-muted) - Button component already in use for actions Storybook Controls: - Add comprehensive argTypes for all props with descriptions - Add control types (boolean, text) for interactive props - Add component-level documentation description - Add story-level descriptions for each variant Stories Updated: - Default, WithSearch, WithActions, WithSearchAndActions - SimpleTabs, Loading, Empty, CustomEmptyIcon - All stories now have parameter docs descriptions
There was a problem hiding this comment.
Pull request overview
This PR refactors the OrderList Storybook stories to use the shared Badge component, align styling with the design system tokens, and enhance Storybook documentation/controls for OrderList.
Changes:
- Integrates the design-system
Badgecomponent into theOrderItemrenderer, using a status-to-variant mapping consistent withOrderCard. - Updates container and text styling to use semantic design tokens (
bg-background,text-foreground,text-muted-foreground,border-border,bg-muted/50) instead of hardcoded Tailwind gray scale classes. - Adds Storybook docs metadata and argTypes for all
OrderListprops, including actions for callbacks and descriptive documentation for each story variant.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
…ayout fixes Stories refactoring: - Add Badge component integration with status-to-variant mapping - Add comprehensive argTypes with descriptions for all props - Create PlaygroundDemo wrapper for proper hook usage with Storybook args - Update Default story to use args pattern so controls work on docs page - Add default args (showSearch, isLoading, emptyMessage, searchPlaceholder) Component improvements: - Add h-full to root container for proper flex layout and scrolling - Change header padding from pb-4 to py-4 for equal top/bottom spacing - Tabs now stay fixed while order list scrolls independently UI polish: - Change action button to ghost variant - Simplify button label to '+ New' with whitespace-nowrap
Deploying ui with
|
| Latest commit: |
dc18c5b
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://cd431d7b.ui-6d0.pages.dev |
| Branch Preview URL: | https://feature-orderlist-stories-re.ui-6d0.pages.dev |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
…ntrols
Component Integration:
Storybook Controls:
Stories Updated:
order-list.mov