javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 03:00:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(checkbox): remove legacy property and support for legacy syntax (#29043)

Browse Source 
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).
This commit is contained in:
Liam DeBeasi
2024-02-14 12:49:50 -05:00
committed by GitHub
parent 6baf005da5
commit fb5ae5b07f
62 changed files with 19 additions and 614 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
core/src/components/checkbox/checkbox.scss
View File

@ -48,34 +48,17 @@
* toolbar which is why we do not
* limit the below behavior to just ion-item.
*/
:host([slot="start"]:not(.legacy-checkbox)),
:host([slot="end"]:not(.legacy-checkbox)) {
:host([slot="start"]),
:host([slot="end"]) {
width: auto;
}
// TODO(FW-3100): remove this
:host(.legacy-checkbox) {
width: var(--size);
height: var(--size);
}
:host(.ion-color) {
--checkbox-background-checked: #{current-color(base)};
--border-color-checked: #{current-color(base)};
--checkmark-color: #{current-color(contrast)};
}
// TODO(FW-3100): remove this
:host(.legacy-checkbox) label {
@include input-cover();
display: flex;
align-items: center;
opacity: 0;
}
.checkbox-wrapper {
display: flex;
@ -96,7 +79,7 @@
overflow: hidden;
}
:host(.in-item:not(.legacy-checkbox)) .label-text-wrapper {
:host(.in-item) .label-text-wrapper {
@include margin($checkbox-item-label-margin-top, null, $checkbox-item-label-margin-bottom, null);
}
@ -132,6 +115,9 @@ input {
position: relative;
width: var(--size);
height: var(--size);
transition: var(--transition);
border-width: var(--border-width);
@ -143,20 +129,6 @@ input {
box-sizing: border-box;
}
// TODO(FW-3100): remove this
:host(.legacy-checkbox) .checkbox-icon {
display: block;
width: 100%;
height: 100%;
}
// TODO(FW-3100): merge this with other .checkbox-icon styles above
:host(:not(.legacy-checkbox)) .checkbox-icon {
width: var(--size);
height: var(--size);
}
.checkbox-icon path {
fill: none;
stroke: var(--checkmark-color);