Breaking Changes are Here! (10/21 - v0.0.28-next)

[N00nDay]

Aligning Component Composition

The following components fall outside of the typical component composition to be expected within this library. The refactor of the following components is to eliminate as many properties being passed as possible and move as many of them to slots as possible. The easiest example is for leading and trailing properties will be converted to slots.

• Autocomplete
• Currency
• DatePicker
• Input
• InputNumber
• Select
• TextArea
• Toggle

Remove dependency on Material Icons

The next update will also address the glaring issue of icons. I will be eliminating the dependency on Material Icons and allowing developers to use any icon package they prefer. I will be adding an Icon component that will be a simple svg element that allows for a d property to be passed along with other styling properties.

[N00nDay]

This Update is complete and will be rolled out Friday evening. Before updating, I strongly encourage you to review the new documentation (that will be live Friday, October 21). Almost every single component was affected, some more than others, during this update as any component that was utilizing an icon needed to be refactored. I am going to do my best to recap the upcoming changes in this post as well as the CHANGELOG after the update.

Material Icons

Material Icons are no longer a dependency and are no longer required for this project. As such it should be removed from your app.html after updating.

Icons Moving Forward

leading, trailing, icon, and on or off of <Swap /> are slots that are specifically designed for icons. You have the choice to use the library icons as documented or use any of these slots with your preferred icon.

New Components

<Icon /> has been added and documented for easy icon usage within the library. This component takes several properties but the only required property is the data prop which takes an <svg /> element as a string.

Example:

const calendar = '<svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="currentColor" d="M19,19H5V8H19M16,1V3H8V1H6V3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3H18V1M17,12H12V17H17V12Z" /></svg>';

<Icon data={calendar} />

<Row /> and <Col /> have always been a part of the library but have just now been added to the documentation.

Basic Typography has been added and documented.

All components affected

Alert

• <Alert.Icon /> has been dropped
• leading prop has been dropped
• leading slot has been added
• <Autocomplete.Leading slot="leading" /> has been added

Autocomplete

• label prop has been dropped
• label has been added
• <Autocomplete.Label slot="label" /> has been added
• leading prop has been dropped
• leading slot has been added
• Autocomplete.Leading slot="leading" /> has been added

Button

• <Button.Leading.Icon /> has been dropped
• <Button.Trailing.Icon />. has been dropped
• <Button.Leading />, <Button.Icon />, and <Button.Trailing /> are now instances of the <Icon /> component and receive the data prop

ButtonGroup

• <ButtonGroup.Button.Leading.Icon /> has been dropped
• <ButtonGroup.Button.Trailing.Icon />. has been dropped
• <ButtonGroup.Button.Leading />, <ButtonGroup.Button.Icon />, and <ButtonGroup.Button.Trailing /> are now instances of the <Icon /> component and receive the data prop

Card

• icon prop on <Card.Actions.Action /> has been dropped
• label prop on <Card.Actions.Action /> has been dropped
• <Card.Actions.Action.Icon /> has been added and is an instance of the <Icon /> component and receives the data prop
• <Card.Actions.Action.Label /> has been added

Currency

• label prop has been dropped
• label slot has been added
• <Currency.Label /> has been added
• trailing prop has been dropped
• leading slot has been added
• trailing slot has been added
• <Currency.Leading /> and <Currency.Trailing /> are now instances of the <Icon /> component and receive the data prop

DatePicker

• label prop has been dropped
• label slot has been added
• <DatePicker.Label /> has been added
• leading prop has been dropped
• trailing prop has been dropped
• leading slot has been added
• trailing slot has been added
• <DatePicker.Leading /> and <DatePicker.Trailing /> are now instances of the <Icon /> component and receive the data prop

Divider

• <Divider.Icon /> is now an instance of the <Icon /> component and receives the data prop

Dropdown

• <Dropdown.Items.Item /> has dropped its default slot
• <Dropdown.Items.Item /> has added label as a prop
• <Dropdown.Items.Item /> has added icon and extra slots
• <Dropdown.Items.Item.Icon /> has been added and is an instances of the <Icon /> component and receives the data prop
• <Dropdown.Items.Divider /> has been added

Empty

• <Empty.Icon /> is now an instance of the <Icon /> component and receives the data prop

Feed

• <Feed.Item.Leading.Icon /> is now an instance of the <Icon /> component and receives the data prop

Input

• label prop has been dropped
• label slot has been added
• <Input.Label /> has been added
• leading prop has been dropped
• trailing prop has been dropped
• leading slot has been added
• trailing slot has been added
• <Input.Leading /> and <Input.Trailing /> are now instances of the <Icon /> component and receive the data prop

InputNumber

• label prop has been dropped
• label slot has been added
• <InputNumber.Label /> has been added
• leading prop has been dropped
• trailing prop has been dropped
• leading slot has been added
• trailing slot has been added
• <InputNumber.Leading /> and <InputNumber.Trailing /> are now instances of the <Icon /> component and receive the data prop

List

• <List.Item.Leading.Icon /> is now an instance of the <Icon /> component and receives the data prop

Menu

• <Menu.Item.Icon /> is now an instance of the <Icon /> component and receives the data prop

Notification

• <Notification.Leading.Icon /> is now an instance of the <Icon /> component and receives the data prop

Post

• icon prop has been removed from <Post.Actions.Action />
• label prop has been removed from <Post.Actions.Action />
• <Post.Actions.Action.Icon /> has been added and is an instance of the <Icon /> component and receives the data prop

Select

• label prop has been dropped
• label slot has been added
• <Select.Label /> has been added
• leading prop has been dropped
• leading slot has been added
• <Select.Leading /> are now instances of the <Icon /> component and receive the data prop

Statistic

• <Menu.Icon /> is now an instance of the <Icon /> component and receives the data prop
• icon prop has been dropped from <Statistic.Comparison.Trend />
• trend prop has been added to the <Statistic.Comparison.Trend /> component
• <Statistic.Comparison.Trend.Icon /> has been added and is an instance of the <Icon /> component and receives the data prop

Tabs

• <Tabs.Tab.Icon /> is now an instance of the <Icon /> component and receives the data prop

Timeline

• icon now takes an <svg /> element as a string

Toggle

• <Toggle.LeftIcon /> is now an instance of the <Icon /> component and receives the data prop
• <Toggle.RightIcon /> is now an instance of the <Icon /> component and receives the data prop