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;
```
- removes mode-less component classes from the internal CSS, use element instead
- adds mode specific classes `md` or `ios` for styling inside of shadow components
- adds e2e test that verifies mode classes exist on all ionic components, plus checks for specific classes that the components need for internal styling
fixes#17608
styles the item option properly when icons are slotted. This was not working before at all for `top` and `bottom` slots.
- removes the e2e test from item/sliding in favor of all of them being under item-sliding
- adds more usage examples for all frameworks
- updates the styling for an anchor option so that it displays properly
- updates the standalone e2e test to take screenshots of the start icon, top icon, and anchor options
- updates the interactive e2e test to work locally
- cleaned up the CSS for start/end icons
- verified the styles for ben approval 💪closes#17737fixes#17402
- 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>
* docs(components): update grammar and docs
* docs(item): update item documentation and add usage
* test(item): add lines test
* feat(list): add lines property to override borders on items
* feat(item): add lines property to override borders on items
* refactor(item): remove old uses of no-lines attribute
* fix(item-sliding): update item options to show border
- show the border on left options only if in a full list
- show the border on both options only if in an inset list (or ios by
default)
- don’t show border on either for no lines list (and md by default)
also renames isRightSide to isEndSide to match the side values
* chore(package): update package lock
* style(item): fix lint errors
* test(item): update item tests
* refactor(item): remove the custom styling of last child items
instead of us overriding first/last child items to have borders we are
going to add to the documentation how to style items with a full border
* fix(item): apply border to item inputs for MD mode
* docs(components): update docs based on new build
* docs(usage): update item usage to show lines being used
* fix(item): do not set the padding right to 0 on an item by default
* fix(item): cast lines to boolean
fixes: #5537#13218#12689#12073#9112
