Rating: Adopt brandAccent tone
The stars in the Rating component now use the brandAccent tone rather than the rating token from the theme.
As a result the rating variable has been deprecated and will be removed in a future release.
MIGRATION GUIDE:
# styles.css.ts import { vars } from 'braid-design-system/css'; export const myStyle = style({ - color: vars.foreground.rating, + color: vars.foreground.brandAccent, });
Rating: Add tone support
For usages where the Rating component should not be accentuated, the tone prop can be used to apply neutral tone.
EXAMPLE USAGE:
<Rating tone="neutral" />
Standardise icon slot spacing
Normalise the space between the icon slot and component content across the system.
Rating: Simplify internal layout
Simplify the internal HTML and layout of the Rating component.
This change should not affect the appearance or behavior of the component.
Rating: Remove deprecated showTextRating prop
Remove the deprecated showTextRating prop in favour of variant="starsOnly".
<Rating rating={3.7} - showTextRating={false} + variant="starsOnly" />
Rating: Add weight support
Provide a weight prop to customise the weight of the text rating alongside the stars.
EXAMPLE USAGE:
<Rating rating={3} weight="strong" />
Support data attribute boolean values
The data attribute map now supports boolean values. This provides an improvement for the developer experience, no longer having to convert values to strings explicitly.
EXAMPLE USAGE:
<Component data={{ 'custom-attribute': true, }} /> // => <div data-custom-attribute="true" />
Rating: Only fill star for scores .75 and above
A star is only filled when the score is .75 and above. Fixes an issue where all scores .5 or above are shown as half filled stars.
EXAMPLE USAGE: Now when a rating reaches .75 it will round up to a full star.
<Rating rating={3.75} /> // 4 filled
Rating: Add variant prop and deprecate showTextRating
Provide the variant prop to allow customising the appearance. This supports the new minimal appearance, which presents a single star alongside the text rating.
Also adding the starsOnly variant as a replacement for the now deprecated showTextRating={false}.
EXAMPLE USAGE:
<Rating rating={3.7} variant="minimal" />
MIGRATION GUIDE:
The showTextRating prop is now deprecated. If you were using this previously, please migrate to the new variant prop using starsOnly.
<Rating rating={3.7} - showTextRating={false} + variant="starsOnly" />
Add support for data attribute maps on all components.
EXAMPLE USAGE:
<Alert data={{ testId: 'message' }} /> // => <div data-testId="message" />