- Adds `ionImgWillLoad` event that emits when the img src is set
- Moves the `ionImgDidLoad` event emit so that it happens when the image actually finishes loading
fixes#17652closes#18161
Adds a `header` and `buttons` property to toast. This allows for a toast header to be passed and multiple buttons including action buttons and icon only buttons which matches the Material Design spec. Adds hover states to the button to match the spec. Updates usage section to recommend the new way of passing a close button using the buttons array and `cancel` role. If a button is passed using the cancel role default the color to match the spec. Buttons will default to the `end` side but have the option of being placed on the `start` side.
Co-authored-by: Simon Hänisch <simonhaenisch@users.noreply.github.com>
Co-authored-by: Brandy Carney <brandy@ionic.io>
closes#16791closes#16237closes#17611
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
* moves most of the CSS to the host element so that it's easier to customize the skeleton text
* adds auto inherit for border-radius
* moves height to 100% so it will naturally fill an avatar and thumbnail
* adds animated property defaulted to `false`
* removes mode specific styles as they're the same
* changes background to an rgba making it easier to customize
* still works outside of a container element
* adds usage examples for javascript and angular
* moves the width to the parent element making it easier to style
* adds the ability to style the width using CSS
* uses the global theme text color as the background if a custom background is not supplied before defaulting
closesionic-team/ionic-docs#407
* Revert "fix(range): improved rtl support (#17479)"
This reverts commit f832de5f4a.
revert range rtl support
* Revert "feat(range): add neutral point (#17400)"
This reverts commit 15acb4be37.
revert neutral point
* feat(Range): add neutral point
* feat(Range): generate proxies and api
* fix(): check positive case in neutralPointChanged
* fix(Range): neutralPoint to min if neutralPoint < min
* fix(Range): active bar style
* fix(Range): tick styling
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 |
- 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
* 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
- updates segment button so that when layout is not provided the following will happen
- if both label and icon are there, it will apply icon-top
- if only label or only icon, it will style as such
