Skip to content

4.9.1 - Material Expressive Dropdowns and FABs

Choose a tag to compare

View all tags
@Nerwyn Nerwyn released this 19 May 00:30
4.9.1
2d90a21

Changes in 4.9.1:

  • Fix editor missing selector option appearance icon and label fields #200.

Material Expressive Dropdowns and FABs #192

image

This release includes new button and dropdown variants following the Material Design 3 specification for menus, FABs (floating action buttons), and FAB menus. In total there are eleven new variants of dropdowns and buttons. Similar to existing Material Design 3 variants of custom features, they work best with Material You Theme and Utilities but should work with any theme.

Updated Material Design 3 Token Backup Values

All Material Design 3 variants of custom features have been updated to use backup values defined using the Home Assistant default theme's new primary, orange, and red color palettes. Now when you aren't using Material You Theme and Utilities they will look much more true to spec.

Floating Action Button Variants

Buttons now have six new variants based on the Material Design 3 specifications for primary, secondary, tertiary, primary container, secondary container, and tertiary container FAB variants. Because these are custom card features you are not limited to using them just as floating action buttons, and can use them in features like regular custom button features. To use them as FABs, try putting them in a custom features card in a sections view footer area.

Dropdown Updates and Variants

Dropdown Updates

Dropdowns have received updated styles to match the newer ha-dropdown default component. The dropdown area will now match the width of it's parent feature, or wider if needed. The individual options are shorter and have a new highlight color as defined by your selected theme.

Dropdowns now have some extra features that distinguish them from selectors in functionality. You can now add a default icon and label to dropdowns, which it will use if no option is selected (remember, an option is considered selected if it's option field matches the parent dropdown/selector feature value as defined by it's state or attribute). This way instead of using dropdowns to select items from a list, you can instead use it as a hidden action menu. Just make sure that none of the options ever match the parent dropdown feature state, and the parent dropdown icon and label will always be displayed. If using a dropdown this way, you may need to also disable autofill.

Material Design 3 Dropdowns

The first two new dropdown variants are very similar to the default dropdown, but have altered animations and colors. They follow the Material Design 3 specifications for standard and vibrant menus.

The other three new dropdown variants are very different - they follow the FAB menu primary, secondary, and tertiary specifications. The dropdown button is replaced with a FAB button similar to a FAB button with no label. The menu itself has been completely redesigned with containers surrounding each option that hug their content width individually.

Other Changes

  • Fixed checkbox theme tokens.
  • Removed fixed Material Design 3 slider height, it will now scale with feature height.
  • Material Design 3 buttons and sliders now scale with feature height, closely following specification with heights, border radii, icon size, and font size on clamped linear scales.
  • Improve Material Design 3 slider thumb to use true negative area and inner border radii.
  • Input feature style updates.

Patch Version Fixes

  • Fix editor missing selector option appearance icon and label fields #200.

Full Changelog: 4.8.6...4.9.1

Assets 2
Loading