Skip to content

Add modifier classes when scaleStepPrefix or scaleStepSuffix are set #233

Description

@swashbuck

Subject of the issue/enhancement

When scaleStepPrefix or scaleStepSuffix are configured, no CSS classes are added to indicate this. Scale step labels with a prefix or suffix (e.g. "$5", "5 days") are typically longer than plain numbers, making them harder to theme without a class-based hook.

Expected behaviour

When scaleStepPrefix has a value, a modifier class such as has-scale-step-prefix should be added to the widget (or number container). Likewise, has-scale-step-suffix when scaleStepSuffix has a value. This gives theme authors a reliable selector to adjust layout, font size, or spacing for labelled scales.

Actual behaviour

The prefix/suffix values are rendered inline in the template but no modifier classes are applied anywhere. There is no CSS hook to distinguish a plain numeric scale from one with prefixes or suffixes.

Suggested implementation

Add modifier classes to slider__widget (or slider__number-container) in slider.jsx:

className={classes([
  'component__widget slider__widget',
  scaleStepPrefix && 'has-scale-step-prefix',
  scaleStepSuffix && 'has-scale-step-suffix',
  // ...existing classes
])}

Posted via collaboration with Claude Code

Metadata

Metadata

Assignees

Type

Projects

Status
Recently Released

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions