BREAKING CHANGE:
- The `swipeToClose` property has been removed in favor of `canDismiss`.
- The `canDismiss` property now defaults to `true` and can no longer be set to `undefined`.
Before users had to know the exact opacity that the MD/iOS spec called for in order to change the hover or focused background color. This allows them to change the background without having to know the opacity.
- changes apply to Action Sheet (Buttons), Back Button, Button, FAB Button, Item, Menu Button, Segment Button, Tab Button
- greatly reduces the requirement by users to set the background hover, focused states for dark modes and custom themes, also eliminates the need to know what the hover opacity is for each based on the spec
- updates the MD dark theme per their spec
- adds a component guide for internal use changing Ionic components
references #18279fixes#20213fixes#19965
BREAKING CHANGE:
*Activated Class*
The `activated` class that is automatically added to buttons on press has been renamed to `ion-activated`. This will be more consistent with our `ion-focused` class we add and also will reduce conflicts with user's CSS.
*CSS Variables*
The `--background-hover`, `--background-focused` and `--background-activated` CSS variables on components that render native buttons will now have an opacity automatically set. If you are setting any of these like the following:
```
--background-hover: rgba(44, 44, 44, 0.08);
```
You will likely not see a hover state anymore. It should be updated to only set the desired color:
```
--background-hover: rgba(44, 44, 44);
```
If the opacity desired is something other than what the spec asks for, use:
```
--background-hover: rgba(44, 44, 44);
--background-hover-opacity: 1;
```
BREAKING CHANGE:
The following components have been updated to remove the checked or selected properties:
- Radio
- Segment Button
- Select
Developers should set the value property on the respective parent components in order to managed checked/selected status.
Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Changes
Closes#18663
* Converts Segment to shadow
* Enables gesture to swipe between segment buttons
* Adds indicator transition to slide the indicator between buttons
* Updates global theme variables
* Removes activated state, now handled by the gesture
* Updates iOS to latest iOS 13 UI
* Ensures customization is working for the buttons and indicator
* Updates the e2e tests
- update docs icon usage for Ionicons 5
- update tests to remove mode prefixed icons
- update tests to use the correct icons for Ionicons 5
- update to latest ionicons dev which fixes the ellipsis icon fill
- Updates the iOS buttons in a toolbar to use the proper global theming variables
- Updates the iOS segment to use the correct background variable when checked
- Updates the iOS back button and menu button to use the proper color in a toolbar
- Updates the iOS buttons in a toolbar w/ color to use the proper contrast colors (background, borders, text, hover, focus), mostly solid and outline buttons were affected
- Updates the CSS that applies the global toolbar variables so that it won't affect toolbars w/ a color
fixes#18184, fixes#17840
- style all slotted content to order properly in a toolbar, not only buttons
- removes duplicated sass variables
- use current color in select so icon will inherit toolbar color
BREAKING CHANGES
- Removes `--icon-color` and `--placeholder-color` from select in favor of inheritance with opacity
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
* fix(fab): separate the mode colors and update the md icon color
-md icon color matches spec by adding 0.54 opacity to the color
fixes#16091
* fix(fab): update the font size for buttons in a fab list
* fix(fab-button): update box-shadow for both states
* fix(fab-button): update transition to match md spec
Updates all of the global variables to make sure their naming is consistent, their default values are correct, they are used properly by the related components, and remove any that are not used.
- removes some of the non mode-specific global Sass variables
- updates the md and ios values so that the default is the css variable
with different fallbacks
- removes non-color related css variables from the global file
- fixes item so it uses the background color that is set by the global
file
# Breaking Changes
## Removed Global CSS Variables
The following global CSS variables have been removed for the reasons listed.
| Variable Name | Reason |
| ----------------------------------| ------------------------------------------------|
| `--ion-toolbar-color-inactive` | Unused |
| `--ion-ripple-background-color` | Unused / Ripple color is based on component |
| `--ion-header-size` | Removed in favor of using CSS for h1-h6 |
| `--ion-header-step` | Removed in favor of using CSS for h1-h6 |
## Renamed Global CSS Variables
The following global CSS variables have been renamed for the reasons listed.
| Old Variable Name | New Variable Name | Reason |
| -----------------------------------------| -----------------------------------| ------------------------------------------------------------------------------|
| `--ion-toolbar-text-color` | `--ion-toolbar-color` | Variable is not limited to text color |
| `--ion-toolbar-color-active` | `--ion-toolbar-color-activated` | Consistency with our component variables |
| `--ion-tabbar-text-color` | `--ion-tab-bar-color` | Variable is not limited to text color |
| `--ion-tabbar-text-color-active` | `--ion-tab-bar-color-activated` | Consistency with our component variables |
| `--ion-tabbar-background-color` | `--ion-tab-bar-background` | Applies to the background property |
| `--ion-tabbar-background-color-focused` | `--ion-tab-bar-background-focused` | Applies to the background property |
| `--ion-item-background-color` | `--ion-item-background` | Applies to the background property |
| `--ion-item-background-color-active` | `--ion-item-background-activated` | Applies to the background property / Consistency with our component variables |
| `--ion-item-text-color` | `--ion-item-color` | Variable is not limited to text color |
| `--ion-placeholder-text-color` | `--ion-placeholder-color` | Consistency with other variables |
Fixes#15989Fixes#15559
- updates components to use shadow DOM or scoped if they require css variables
- moves global styles to an external stylesheet that needs to be imported
- adds support for additional colors and removes the Sass loops to generate colors for each component
- several property renames, bug fixes, and test updates
Co-authored-by: Manu Mtz.-Almeida <manu.mtza@gmail.com>
Co-authored-by: Adam Bradley <adambradley25@gmail.com>
Co-authored-by: Cam Wiegert <cam@camwiegert.com>
