All bites
The whole library, newest first. Filter by what you are here for, or pick a topic if you already know.
4330 bites
Page 148
Choosing a spacing scale for a design system
A numeric base-grid gives predictable math, semantic t-shirt names give readable intent, often combine them.
Describe a robust architecture for implementing theming using design tokens
Three tiers, CSS custom properties for live switching, and layered overrides.
How do you handle a one-off token exception for a campaign?
Tests balancing speed and systemic consistency. Strong answers outline a governance fast-track with sunset clauses, document the exception, and isolate it via campaign overrides instead of mutating core tokens. Red flag: permanently hardcoding the one-off.
When should data in a reusable component be a prop or state?
This tests controlled versus uncontrolled patterns. Great answers ask who owns the data: props when parent must drive or observe it, state only for private details.
Two strategies to prevent style leakage in reusable components and their trade-offs
This tests style encapsulation in design systems. A strong answer contrasts Shadow DOM, which fully isolates CSS via a shadow root, with scoped naming like BEM or CSS Modules. Red flag: proposing global resets or !important as a solution.
How would you structure a flexible Card component API?
Tests composition-over-configuration thinking in design systems. A strong answer uses compound components or slots so consumers reorder or omit title, image, and body freely without prop drilling. Red flag: rigid boolean props that freeze layout order.
What WAI-ARIA attributes and keyboard interactions make Tabs accessible?
This tests mastery of the W3C Tabs pattern. A strong answer covers role tablist tab tabpanel, aria-selected, aria-controls, and arrow-key roving focus with optional auto-activation. A red flag is treating tabs as buttons and relying only on the Tab key.
Design a type-safe polymorphic component that renders as different HTML elements
Tests TypeScript generics and prop forwarding in design systems. Answer: generic as constrained to keyof JSX.IntrinsicElements, merged with ComponentPropsWithoutRef<C>, omit clashes, forward ref with ElementRef.
Architecting global and local theming with context
A top-level provider supplies global tokens, nested providers merge local overrides, components read the nearest theme, often backed by CSS variables.
Headless components and a headless Combobox
A headless component owns state, logic, and accessibility but renders no UI, exposing state and prop-getters so consumers supply markup.
Composing Input and Button into a SearchForm
Wrap Input and Button in a form, expose value/placeholder props, emit onSearch on submit, keep it controlled.
Building a flexible Card with optional content
Use optional props or named slots for image, title, and text, conditionally render present ones, and prefer composition for ordering.
Designing a responsive Grid with breakpoint props
Accept per-breakpoint column props, map them to CSS Grid and media queries or container queries, expose a gap prop.
Designing a Modal with controlled open state
Parent owns isOpen and onClose, portal renders content with focus trap, children for static content, render prop when content needs modal state.
Decoupling Form state from its Field components
Form holds values, errors, and status in context, Fields self-register and read/write via a hook, validation composes per field.
The slots pattern for a PageLayout component
Slots are named insertion points so a layout owns structure while consumers fill header, sidebar, and main, via named props or compound subcomponents.
Architecting a composable DataTable API
Separate a headless data/state core from rendering, use a column-definition config with custom cell renderers, expose composition over dozens of flags.
Designing a multi-step wizard form pattern
A wizard controller owns step index and shared data, each step validates itself and reports up, accumulated data persists across steps.
Structuring Storybook stories for visual states
One named story per state with explicit args, plus argTypes and controls.
Auto-generating component API docs from source
Extract types via react-docgen-typescript, surface in Storybook ArgsTable, enrich with JSDoc.