Changed the CSS sync script to output theme files to src/css/ instead
of public/, matching the new location for theme CSS files.
Updated variable names from publicPath to outputPath for clarity and
updated log messages to reflect the correct output location.
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
Next.js cannot import CSS from the /public directory - it's for static
assets only. Moved theme-backstage.css and theme-spotify.css from
/public to /src/css and updated imports to use proper relative paths.
This fixes the @next/next/no-css-tags ESLint warnings and follows
Next.js best practices for CSS imports.
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
Refactored components to avoid synchronous setState calls in effects
by using proper React patterns:
- TableOfContents: Use requestAnimationFrame to defer setState calls
and useLayoutEffect for DOM measurements
- CustomTheme: Use lazy state initialization for isClient and defer
theme loading with requestAnimationFrame
- PlaygroundContext: Use lazy initialization for localStorage hydration
These changes maintain functionality while satisfying the strict
react-hooks/set-state-in-effect ESLint rule.
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
Next.js 16 requires ESLint 9 for proper flat config support. This commit:
- Upgrades eslint from ^8 to ^9
- Migrates from .eslintrc.json to eslint.config.mjs (flat config)
- Updates lint script to use eslint directly (next lint removed in Next.js 16)
- Adds tsconfig.json includes for Next.js 16 dev types
- Fixes layout.tsx to use proper theme CSS link tags
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
After upgrading to Next.js 16.1.6, the build failed with CSS Module
purity errors in Popover and Tooltip components. Next.js 16 with
Turbopack enforces stricter validation requiring global selectors
like [data-theme='dark'] to be combined with local classes.
Changed nested selector structure:
[data-theme='dark'] { .bui-Popover { ... } }
To flattened structure:
[data-theme='dark'] .bui-Popover { ... }
This matches the pattern used in Dialog.module.css and satisfies
Turbopack's CSS Module purity requirements.
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
Added changesets documenting that API factory conflicts are now treated
as errors that block app startup, reverting the previous warning behavior.
Signed-off-by: Patrik Oldsberg <patriko@spotify.com>
Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
Improves Container documentation to better explain its purpose as
a page-level wrapper for plugin content.
- Added Core Concepts section explaining centering, max-width, and gutters
- Removed redundant Basic Usage example
- Updated examples to use DecorativeBox
- Improved PageTitle description
Signed-off-by: Johan Persson <johanopersson@gmail.com>
Restores the striped DecorativeBox pattern for visualizing layout
in Box, Flex, and Grid documentation examples.
- Enhanced DecorativeBox to accept children and style props
- Updated Box examples to use DecorativeBox with width/height props
- Replaced inline boxStyle/labelBoxStyle in Flex and Grid with DecorativeBox
- Improved Box surface example description
Signed-off-by: Johan Persson <johanopersson@gmail.com>
Added a `danger` variant for destructive actions like delete or remove.
Uses solid red background with white text in both light and dark modes.
- Added CSS styles with custom properties for future token migration
- Updated Storybook stories to include danger variant examples
- Updated docs-ui documentation to reflect the new variant
Signed-off-by: Johan Persson <johanopersson@gmail.com>
When no className prop was passed to a component using useDefinition,
the hook would add a literal "undefined" string as a CSS class. This
happened because clsx treats object keys as class names, and
`{ [undefined]: true }` creates an "undefined" key.
Fixed by using conditional expressions instead of object syntax,
which clsx correctly ignores when falsy.
Signed-off-by: Johan Persson <johanopersson@gmail.com>
Add proper visual feedback for disabled Switch component by
applying `not-allowed` cursor and disabled text color.
Signed-off-by: Johan Persson <johanopersson@gmail.com>
Improves documentation quality and consistency across all UI components.
Props documentation:
- Added descriptions to all props across all components
- Fixed prop types to match source implementations
- Added missing props (onAction, isInvalid, aria-label, etc.)
- Corrected default values and removed non-existent props
- Converted props-definition files to .tsx for Chip component usage
Examples and snippets:
- Added side-by-side layout option to Snippet component
- Fixed snippet/preview mismatches
- Improved example code indentation and formatting
- Added live previews to Container, Box, Grid examples
- Wrapped Skeleton examples in themed Box for visibility
API reference:
- Added ReactAriaLinks to all components
- Updated React Aria URLs to react-aria.adobe.com format
- Cleaned up verbose prose and standardized descriptions
Other:
- Updated PageTitle descriptions to 5-12 word format
- Varied example intro phrasing for consistency
Signed-off-by: Johan Persson <johanopersson@gmail.com>
Björn Ramberg