Issue number: resolves#27184
---------
## What is the current behavior?
The modern form controls do not use the same opacity for their labels
when disabled, resulting in inconsistent UI when using two different
types in the same view (select vs checkbox, for example).
## What is the new behavior?
The checkbox, input, radio, range, select, textarea and toggle labels
have been updated on both modes to use the same opacity as each other
when disabled. The checkbox and radio icons have been updated to use a
different opacity than the label for `md` mode.
- Updates `ios` mode so all form controls use the same opacity of `0.3`
- I could not find any guidelines by Apple for what color these should
be, so I decided to just make them the same as what is most commonly
used & match item
- Updates `md` mode so all form control labels use the same opacity of
`0.38`
- I used the [Material Design 3
documentation](https://m2.material.io/components) to get this number as
well as the opacity of the disabled selection controls in the [Material
Design 2 figma design
kit](https://www.figma.com/community/file/778763161265841481). The
Material Design 2 documentation does not mention the opacity, but this
is also the number used by Material Design 1 so it's safe to assume it
is what the disabled form labels should also use for Material Design 2.
- Updates the `md` range so the slotted elements are also included when
setting the opacity on the label
- Updates the range, radio & checkbox tests to make sure there are
screenshots in the different disabled states
- Updates the item/disabled test to include radio & textarea so you can
see all form controls side by side
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
## Other information
I downloaded screenshots of the item disabled tests and put them side by
side for `main` and this branch in order to see the differences in the
labels. The grey boxes to the left of each item are just a bigger
version of the label color for that item, so it's easier to see when
they aren't the same.
---------
Co-authored-by: ionitron <hi@ionicframework.com>
This adds an `indeterminate` prop to the `ion-checkbox` component, which visually renders the checkbox with a dash to indicate an indeterminate state.
closes#16943
Reviews the `--width` and `--height` variables in each component to either remove or add them based on need.
- fixes a bug where the spinner color wasn't being set properly in loading
- adds css variables for customizing background, color, some borders in overlays
- fixes a bug where prefix, suffix are taking up too much width in picker
closes#16097
references ionic-team/ionic-docs#228
BREAKING CHANGES
## Core Components
Removes the `--width` and `--height` variables from the following components, in favor of CSS:
- Button
- FAB Button
- Checkbox
- Removes the `--width`/`--height` and adds a `--size` variable that is set on the width and height, allowing width and height to still be set and border-radius to still use it as a variable
- Radio
- Removes the `--width`/`--height` and `--inner-width`/`--inner-height` variables. Calculates inner values based on parent element size.
## Overlay Components
The following components have all be converted to shadow (or scoped) and have CSS variables for width/height:
- Action Sheet _(scoped)_
- Alert _(scoped)_
- Loading _(scoped)_
- Menu _(shadow)_
- Modal _(scoped)_
- Picker _(scoped)_
- Popover _(scoped)_
- Toast _(shadow)_
The above components will now have the following CSS variables for consistency among overlays:
| Name |
| ----------------- |
| `--height` |
| `--max-height` |
| `--max-width` |
| `--min-height` |
| `--min-width` |
| `--width` |
If the component does not set the value, it will default to `auto`.
## Removed CSS Variables
The following CSS properties have been removed:
| Component | Property | Reason |
| ---------------| --------------------| --------------------------------|
| **Button** | `--height` | Use CSS instead |
| **Button** | `--margin-bottom` | Use CSS instead |
| **Button** | `--margin-end` | Use CSS instead |
| **Button** | `--margin-start` | Use CSS instead |
| **Button** | `--margin-top` | Use CSS instead |
| **Button** | `--width` | Use CSS instead |
| **Checkbox** | `--height` | Use CSS or `--size` |
| **Checkbox** | `--width` | Use CSS or `--size` |
| **FAB Button** | `--width` | Use CSS instead |
| **FAB Button** | `--height` | Use CSS instead |
| **FAB Button** | `--margin-bottom` | Use CSS instead |
| **FAB Button** | `--margin-end` | Use CSS instead |
| **FAB Button** | `--margin-start` | Use CSS instead |
| **FAB Button** | `--margin-top | Use CSS instead |
| **Menu** | `--width-small` | Use a media query and `--width` |
| **Radio** | `--width` | Use CSS instead |
| **Radio** | `--height` | Use CSS instead |
| **Radio** | `--inner-height` | Calculated based on parent |
| **Radio** | `--inner-width` | Calculated based on parent |
* 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
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>
