60 Commits

Author SHA1 Message Date
3c1d8ccd85 chore: sync with main 2024-03-12 13:12:16 -04:00
b2d636f14d fix(checkbox): set aria-checked of indeterminate checkbox to 'mixed' (#29115)
Issue number: resolves Internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
We are not ever explicitly setting `aria-checked`. For checked and
unchecked states (i.e. `true` and `false` for aria-checked), we don't
need to set `aria-checked` because an input with a type of 'checkbox'
has built-in semantics making `aria-checked` redundant.

However, when the checkbox is in an indeterminate state, `aria-checked`
should have a value of 'mixed'. We are not currently ever setting it to
'mixed'. See
[MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-checked#description)
for more details.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- The checkbox's `aria-checked` has a value of 'true' when it is checked
- The checkbox's `aria-checked` has a value of 'false' when it is
unchecked
- The checkbox's `aria-checked` has a value of 'mixed' when it is
indeterminate

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
2024-03-06 22:34:54 +00:00
fb5ae5b07f refactor(checkbox): remove legacy property and support for legacy syntax (#29043)
BREAKING CHANGE:

The `legacy` property and support for the legacy syntax, which involved placing an `ion-checkbox` inside of an `ion-item` with an `ion-label`, have been removed from checkbox. For more information on migrating from the legacy checkbox syntax, refer to the [Checkbox documentation](https://ionicframework.com/docs/api/checkbox#migrating-from-legacy-checkbox-syntax).
2024-02-14 12:49:50 -05:00
f9f5654ab0 feat(checkbox): add shadow part for label (#28604)
Issue number: Part of #28300 

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
Developers are unable to adjust margin, width, etc. of the checkbox
label

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Checkbox label has a shadow part.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
As part of this work, I investigated moving `pointer-events: none` up
the DOM tree so developers wouldn't be able to override it with the
shadow part. In my testing, I was unable to see any difference in
behavior with vs without `pointer-events: none`. Therefore, I removed it
entirely.
2023-12-01 11:26:05 -05:00
6438e3e919 fix(item): wrap elements and label contents when the font size increases or the elements do not fit (#28146)
1) Wraps the label text and other content in an item when there is not enough room for everything to fit, instead of truncating the label with an ellipsis. Does not apply to items containing legacy inputs.
2) Passes the legacy property up to item from checkbox, input, radio, range, select, textarea and toggle. Item adds classes for all of these and does not wrap its contents if that class exists. If a developer is using a legacy input without the legacy property on it then they will need to add the legacy property to prevent the wrapping.
3) If a developer does not want the text to wrap for labels in modern items, the `ion-text-nowrap` class can be added to the label.
2023-10-17 14:08:35 -04:00
c70432e693 fix(checkbox, radio, toggle): disabled elements are not interactive (#28294)
Issue number: resolves #28293

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

Disabled toggles, radios, and checkboxes can still be enabled by
manually dispatching a click event on them.


## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Toggles, radios, and checkboxes no longer activate if `disabled` is
set to `true`

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Dev build: `7.4.4-dev.11696545130.1171e7a9`
2023-10-09 21:05:09 +00:00
5b7e422dc0 fix(radio,toggle,checkbox,select): padded space is clickable in items (#28136)
Issue number: Resolves #27169

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

Clicking the padded space within an `ion-item` will not pass the click
event to the slotted `ion-radio`, `ion-checkbox`, `ion-select` or
`ion-toggle`.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- The padded space at the start of `.item-native` and at the end of
`.item-inner` is clickable to activate a control.
- When the item is clicked, we check if the event is a result of
clicking the control or clicking the item's padded space. If the click
event is on the control, we don't need to do anything and let the
default behavior occur. If the click event is on the padded space, we
manually call the `.click()` method for the interactive element.
- The cursor pointer displays when hovering over the padded space when a
slotted interactive control is present.


## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
2023-09-20 03:27:36 +00:00
e6c7bb60e7 feat(checkbox, radio, toggle, range): stacked labels for form controls (#28075)
Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Co-authored-by: ionitron <hi@ionicframework.com>
2023-09-01 09:30:59 -07:00
0a0345a84a refactor(many): use utils import (#27160) 2023-04-12 13:25:14 -07:00
f829672a6a fix(many): disabled control in item does not receive active/hover states (#26867)
Resolves #26706
2023-03-14 10:32:55 -04:00
67578f6246 chore: format string values in comments with double quotes (#26857) 2023-02-28 21:16:15 -05:00
1457ce7be4 refactor(many): clarify deprecation warning (#26834) 2023-02-21 13:58:22 -05:00
7578aa3c59 fix(select): emit single ionChange event for popover option selection (#26796)
Resolves #26789
2023-02-20 20:20:32 -05:00
7312b0696d fix(checkbox): screen readers announce state correctly (#26817)
resolves #25740
2023-02-20 09:45:27 -05:00
87bc749040 fix(checkbox, radio): label is announced once on ios (#26770)
resolves #26769
2023-02-09 12:36:29 -05:00
1a8bd6d8c6 chore(deps): update to stencil v3 (#26663) 2023-01-31 18:07:22 -05:00
63f8525284 fix(many): legacy form control does not warn when using aria-labelledby (#26699)
resolves #26698
2023-01-30 16:02:00 -05:00
b78b454e08 revert(): revert base components feature (#26692)
The Ionic Framework team would like to re-evaluate our approach to improving customization options when building mobile applications. We are looking at other solutions that a) make customizing an app UI easier and b) are applicable to a broader set of developers.
2023-01-30 11:52:36 -05:00
18f109c7da feat(base-components): add ability to remove ios and md theme (#26669) 2023-01-24 16:18:35 -05:00
9d52e70361 feat(checkbox): component can be used outside ion-item (#26518) 2023-01-05 13:49:04 -06:00
a6b2629ede feat(checkbox): ionChange fires on user interaction (#25923)
BREAKING CHANGE:

`ionChange` is no longer emitted when the `checked` property of `ion-checkbox` is modified externally. `ionChange` is only emitted from user committed changes, such as clicking or tapping the checkbox.
2022-09-13 16:27:34 -04:00
5676bab316 lint(eslint): migrate to eslint and prettier (#25046) 2022-04-04 11:12:53 -04:00
c20408369b fix(select): ensure popover options with number values are searched for correctly (#23998) 2021-10-04 11:19:49 -05:00
dc430af906 fix(all): reflect color property as an attribute for vue (#23345)
resolves #23323
2021-05-21 19:26:53 -04:00
07868354aa fix(a11y): only preventDefault for the onClick event (#22573) 2020-11-25 16:56:51 -05:00
c45c8d5564 fix(checkbox): click events on ion-item now fire properly (#22561)
resolves #22557
2020-11-24 14:31:24 -05:00
7214a8401b fix(checkbox): use a native input to fix a11y issues with axe and screen readers (#22402)
fixes #21644
fixes #20517
fixes #17796
2020-11-12 11:25:33 -05:00
753fd2f910 chore(colorClass): update createColorClasses() for ts4 (#21896)
Change the createColorClasses() fn so the returned type and jsx class property work well with typescript 4
2020-08-10 09:18:41 -05:00
d4b9151396 feat(checkbox): add parts support for container, mark (#20950) 2020-04-23 12:19:24 -04:00
8a88dd25b6 feat(item): add hover and focused states (#18606)
references #18279 references #17624
2019-06-25 17:29:14 -04:00
34dfc3ce98 refactor(all): updating to newest stencil apis (#18578)
* chore(): update ionicons

* refactor(all): updating to newest stencil apis

* fix lint issues

* more changes

* moreee

* fix treeshaking

* fix config

* fix checkbox

* fix stuff

* chore(): update ionicons

* fix linting errors
2019-06-23 11:26:42 +02:00
b40f7d36d5 fix(): update to Stencil One 🎉🎊 2019-06-19 21:33:50 +02:00
e5c8c10029 fix(components): include mode classes on components for use in shadow (#17838)
- 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
2019-04-16 17:28:21 -04:00
c641ae10ed feat(checkbox): implement indeterminate state (#16951)
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
2019-03-04 11:16:41 -05:00
2b4d7b7be9 fix(angular): apply validation classes properly
* fix(angular): add validation classes to ion-item

* fix(inputs): focus handling

fixes #17171
fixes #16052
fixes #15572
fixes #16452
fixes #17063
2019-01-19 22:56:00 +01:00
6364e4e2a1 fix(inputs): keyboard focus improvements (#16838)
fixes #16815
fixes #16872
fixes #13978
fixes #16610
2019-01-11 19:36:02 +01:00
3d656ac312 docs(all): improve type docs for event 2018-12-28 20:38:24 +01:00
fd79b57748 fix(inputs): fix aria with shadow-dom (#16329) 2018-11-16 19:26:55 +01:00
ecc2c55370 docs(all): possible values are extracted by stencil (#16190)
* docs(all): possible values are extracted by stencil

* add defaults

* remove all hardcoded defaults

* update stencil
2018-11-02 00:06:40 +01:00
240171a928 fix(checkbox): match MD spec (#16186)
* 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
2018-11-01 14:13:06 -05:00
1733c9489c docs(): value for toggle and checkbox (#16102)
* docs(): value for toggle and checkbox

fixes #16074

* update docs
2018-10-26 20:18:53 +02:00
ef6895acbd fix(inputs): disabled handling (#16071) 2018-10-25 22:50:06 +02:00
a72fced6fe fix(all): docs for all missing props 2018-10-11 16:24:08 -05:00
a999c1f0a9 perf(): prevent unnecesary event listener changes 2018-10-09 16:03:14 -05:00
e81af2d5aa fix(picker): stop animation when it's closed
fixes #15854
2018-10-08 14:53:47 -05:00
c49d896e08 refactor(all): using ComponentInterface 2018-09-14 18:47:00 +02:00
21d1f2e2dd fix(item): update hostContext to use ion-item element
fixes styling issues with children elements using the .in-item class
2018-09-13 11:46:13 -04:00
e7416435d8 refactor(all): additional tslint rules 2018-09-01 18:06:59 +02:00
2e7d355edf fix(input): event interfaces 2018-08-12 01:18:59 +02:00
c1b61d0fee chore(): update to ionic-rules/strict 2018-07-29 23:10:38 +02:00