Adds the ability to apply a layout to the segment button in order to better match the Material Design spec, updates the design and UI to match the spec more, and separates the segment button styles back into the proper directory.
- moves the segment button css back into segment-button directory
- updates the design to match the MD spec better
- adds layout property to match MD spec
- adds custom properties for better styling
- allows for overscroll / scrolling tabs via scrollable attribute
- changes the indicator to a div - will need to animate it
- updates e2e tests and add spec test
fixes#16232fixes#16081
references #14853
BREAKING CHANGES
Segment Button now requires the text to be wrapped in an `ion-label` element for improved styling.
*Old usage:*
```html
<ion-segment-button>
Item One
</ion-segment-button>
```
*New usage:*
```html
<ion-segment-button>
<ion-label>Item One</ion-label>
</ion-segment-button>
```
Note: this will not technically break your app, but the styles may look wrong.
Updates the Material Design Toast to closer match the spec: https://material.io/design/components/snackbars.html
- Updates the animation to use opacity, not translate
- Updates design with the right background, box-shadow, etc.
- Fixes the broken position middle of toast and updates e2e test to include this
- Allows for line breaks to be passed in the message
fixes#16271
This reimplements chip, removing the extraneous chip-button and chip-icon components and updating the design to match the updated Material Design spec.
This fixes a specificity issue where Material Design ranges with a color attribute wouldn't apply a fully opaque color to the active portion of the range bar.
- splits the item min height by mode
- removes padding end from the slotted end components in favor of using 16px on the item
- updates the icon color to lighter gray (rgb)
- removes font size change from text wrapped labels
- add list spec test to include MD examples
fixes#14799
* fix(checkbox): prevent transition inheritance
* fix(checkbox): use SVG for checkbox icon
* fix(checkbox): match MD spec size
* refactor(checkbox): use height/width custom props over size
* fix(checkbox): match MD spec off state border color
* feat(checkbox): animate check path for MD
