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;
```
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
* style(theming): clean up sass TODOs
* fix(item): use proper padding on small buttons in an item
* refactor(components): remove color from unused components
* chore(components): update build files to remove color
* fix(tab-bar): remove unused layout prop
* test(segment): add custom test and update standalone
* docs(segment): update usage examples to remove layout
* test(segment): update tests to remove layout
* test(tab-bar): update tests to remove layout
* fix(segment): set the colors in the parent segment
but use them in the child segment button
This allows the user to customize all of the segment buttons from segment, while still allowing the `color` property to take precedence, and they can also edit the segment button colors directly if desired.
This actually fixes some bugs surrounding colors and allows customization for a segment inside of a toolbar.
references #14853
* style(sass): fix lint errors
* chore(build): build files
* fix(segment-button): use transparent background
* docs(segment-button): add color activated back
* why does the build hate me
* fix(segment): set initial css variables to avoid inheriting
* fix(segment): set initial color activated
also add new line to the nav readme because reasons
* test(segment): parent mode should match children
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 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>
* Cleanup for iOS mode used in material variables
Refactor to alpha variables for colors in the color map
updated theme builder with new alpha variables
updated theme builder with duplicate default CSS modes
* moved alpha transform into css-var
removed ion-color-alpha
fixes for disabled css-variable mode
added defaults for user configurable variables
* revert to spinner related code
