Repository navigation
v0.11.0 Add className to all components
Changes in v0.11.0
Addresses #20 — standardizes the CSS class joining pattern across all components and expands className support to every component in the library.
Changes
Pattern standardization (3 components):
- Converted template literal
.replace(/\s+/g, ' ').trim()to array.filter(Boolean).join(' ')in ButtonWidget, CardLayout, and TagField
className prop added to all components (22 new):
- Via FieldWrapper (shared wrapper now accepts
className): CheckboxField, RadioButtonField, DropdownField, MultipleDropdownField, DropdownFieldBase, TextField, SliderField, SwitchField, ToggleField, ImageField, ReadOnlyGrid - Standalone components (using
mergeClassesutility): HeadingField, MilestoneField, ProgressBar, StampField, TabsField, DialogField, ButtonArrayLayout, MessageBanner, RichTextDisplayField, ApplicationHeader, SideNavAdmin
How it works
Every component now accepts an optional className?: string prop documented as:
/** Additional Tailwind classes for prototype-specific styling (not part of SAIL API) */
className?: string
Classes are merged using the existing mergeClasses() utility which intelligently resolves conflicts (e.g., bg-red-500 in className overrides bg-blue-500 from SAIL params).
See CHANGELOG for details.
Installation
npm install @pglevy/sailwind@v0.11.0