Skip to content

v0.11.0 Add className to all components

Choose a tag to compare

@github-actions github-actions released this 23 Apr 01:12
· 114 commits to main since this release
e9ef7ba

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 mergeClasses utility): 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