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

feat(checkbox): component can be used outside ion-item (#26518)

Browse Source
This commit is contained in:
Amanda Johnston
2023-01-05 13:49:04 -06:00
committed by GitHub
parent 96147ec1b0
commit 9d52e70361
297 changed files with 1189 additions and 274 deletions
Download Patch File Download Diff File Expand all files Collapse all files

193
core/src/components/checkbox/checkbox.tsx
View File

@ -1,14 +1,21 @@
import type { ComponentInterface, EventEmitter } from '@stencil/core';
import { Component, Element, Event, Host, Prop, Watch, h } from '@stencil/core';
// TODO(FW-2845) - Use @utils/forms and @utils/logging when https://github.com/ionic-team/stencil/issues/3826 is resolved
import { getIonMode } from '../../global/ionic-global';
import type { CheckboxChangeEventDetail, Color, StyleEventDetail } from '../../interface';
import { getAriaLabel, renderHiddenInput } from '../../utils/helpers';
import type { CheckboxChangeEventDetail, Color, Mode, StyleEventDetail } from '../../interface';
import type { LegacyFormController } from '../../utils/forms';
import { createLegacyFormController } from '../../utils/forms';
import type { Attributes } from '../../utils/helpers';
import { getAriaLabel, inheritAriaAttributes, renderHiddenInput } from '../../utils/helpers';
import { printIonWarning } from '../../utils/logging';
import { createColorClasses, hostContext } from '../../utils/theme';
/**
* @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
*
* @slot - The label text to associate with the checkbox. Use the "labelPlacement" property to control where the label is placed relative to the checkbox.
*
* @part container - The container for the checkbox mark.
* @part mark - The checkmark used to indicate the checked state.
*/
@ -23,8 +30,14 @@ import { createColorClasses, hostContext } from '../../utils/theme';
export class Checkbox implements ComponentInterface {
private inputId = `ion-cb-${checkboxIds++}`;
private focusEl?: HTMLElement;
private legacyFormController!: LegacyFormController; // TODO(FW-3100): remove this
private inheritedAttributes: Attributes = {};
@Element() el!: HTMLElement;
// TODO(FW-3100): remove this
// This flag ensures we log the deprecation warning at most once.
private hasLoggedDeprecationWarning = false;
@Element() el!: HTMLIonCheckboxElement;
/**
* The color to use from your application's color palette.
@ -62,6 +75,38 @@ export class Checkbox implements ComponentInterface {
*/
@Prop() value: any | null = 'on';
/**
* Where to place the label relative to the checkbox.
* `'start'`: The label will appear to the left of the checkbox in LTR and to the right in RTL.
* `'end'`: The label will appear to the right of the checkbox in LTR and to the left in RTL.
* `'fixed'`: The label has the same behavior as `'start'` except it also has a fixed width. Long text will be truncated with ellipses ("...").
*/
@Prop() labelPlacement: 'start' | 'end' | 'fixed' = 'start';
/**
* How to pack the label and checkbox within a line.
* `'start'`: The label and checkbox will appear on the left in LTR and
* on the right in RTL.
* `'end'`: The label and checkbox will appear on the right in LTR and
* on the left in RTL.
* `'space-between'`: The label and checkbox will appear on opposite
* ends of the line with space between the two elements.
*/
@Prop() justify: 'start' | 'end' | 'space-between' = 'space-between';
// TODO(FW-3100): remove this
/**
* Set the `legacy` property to `true` to forcibly use the legacy form control markup.
* Ionic will only opt checkboxes in to the modern form markup when they are
* using either the `aria-label` attribute or have text in the default slot. As a result,
* the `legacy` property should only be used as an escape hatch when you want to
* avoid this automatic opt-in behavior.
*
* Note that this property will be removed in an upcoming major release
* of Ionic, and all form components will be opted-in to using the modern form markup.
*/
@Prop() legacy?: boolean;
/**
* Emitted when the checked property has changed
* as a result of a user action such as a click.
@ -86,8 +131,20 @@ export class Checkbox implements ComponentInterface {
*/
@Event() ionStyle!: EventEmitter<StyleEventDetail>;
// TODO(FW-3100): remove this
connectedCallback() {
this.legacyFormController = createLegacyFormController(this.el);
}
componentWillLoad() {
this.emitStyle();
// TODO(FW-3100): remove check
if (!this.legacyFormController.hasLegacyControl()) {
this.inheritedAttributes = {
...inheritAriaAttributes(this.el),
};
}
}
@Watch('checked')
@ -100,11 +157,14 @@ export class Checkbox implements ComponentInterface {
this.emitStyle();
}
// TODO(FW-3100): remove this
private emitStyle() {
this.ionStyle.emit({
'checkbox-checked': this.checked,
'interactive-disabled': this.disabled,
});
if (this.legacyFormController.hasLegacyControl()) {
this.ionStyle.emit({
'checkbox-checked': this.checked,
'interactive-disabled': this.disabled,
});
}
}
private setFocus() {
@ -143,27 +203,105 @@ export class Checkbox implements ComponentInterface {
this.ionBlur.emit();
};
// TODO(FW-3100): run contents of renderCheckbox directly instead
render() {
const { color, checked, disabled, el, indeterminate, inputId, name, value } = this;
const { legacyFormController } = this;
return legacyFormController.hasLegacyControl() ? this.renderLegacyCheckbox() : this.renderCheckbox();
}
private renderCheckbox() {
const {
color,
checked,
disabled,
el,
getSVGPath,
indeterminate,
inheritedAttributes,
inputId,
justify,
labelPlacement,
name,
value,
} = this;
const mode = getIonMode(this);
const { label, labelId, labelText } = getAriaLabel(el, inputId);
const path = getSVGPath(mode, indeterminate);
renderHiddenInput(true, el, name, checked ? value : '', disabled);
let path = indeterminate ? (
<path d="M6 12L18 12" part="mark" />
) : (
<path d="M5.9,12.5l3.8,3.8l8.8-8.8" part="mark" />
return (
<Host
aria-hidden={disabled ? 'true' : null}
class={createColorClasses(color, {
[mode]: true,
'in-item': hostContext('ion-item', el),
'checkbox-checked': checked,
'checkbox-disabled': disabled,
'checkbox-indeterminate': indeterminate,
interactive: true,
[`checkbox-justify-${justify}`]: true,
[`checkbox-label-placement-${labelPlacement}`]: true,
})}
>
<label class="checkbox-wrapper">
<div
class={{
'label-text-wrapper': true,
'label-text-wrapper-hidden': el.textContent === '',
}}
>
<slot></slot>
</div>
<div class="native-wrapper">
<svg class="checkbox-icon" viewBox="0 0 24 24" part="container">
{path}
</svg>
</div>
<input
type="checkbox"
aria-checked={`${checked}`}
disabled={disabled}
id={inputId}
onChange={this.toggleChecked}
onFocus={() => this.onFocus()}
onBlur={() => this.onBlur()}
ref={(focusEl) => (this.focusEl = focusEl)}
{...inheritedAttributes}
/>
</label>
</Host>
);
}
if (mode === 'md') {
path = indeterminate ? (
<path d="M2 12H22" part="mark" />
) : (
<path d="M1.73,12.91 8.1,19.28 22.79,4.59" part="mark" />
// TODO(FW-3100): remove this
private renderLegacyCheckbox() {
if (!this.hasLoggedDeprecationWarning) {
printIonWarning(
`Using ion-checkbox with an ion-label has been deprecated. To migrate, remove the ion-label and pass your label directly into ion-checkbox instead.
Example: <ion-checkbox>Label</ion-checkbox>
For checkboxes that do not have a visible label, developers should use "aria-label" so screen readers can announce the purpose of the checkbox.`,
this.el
);
if (this.legacy) {
printIonWarning(
`ion-checkbox is being used with the "legacy" property enabled which will forcibly enable the legacy form markup. This property will be removed in an upcoming major release of Ionic where this form control will use the modern form markup.
Developers can dismiss this warning by removing their usage of the "legacy" property and using the new checkbox syntax.`,
this.el
);
}
this.hasLoggedDeprecationWarning = true;
}
const { color, checked, disabled, el, getSVGPath, indeterminate, inputId, name, value } = this;
const mode = getIonMode(this);
const { label, labelId, labelText } = getAriaLabel(el, inputId);
const path = getSVGPath(mode, indeterminate);
renderHiddenInput(true, el, name, checked ? value : '', disabled);
return (
<Host
aria-labelledby={label ? labelId : null}
@ -176,6 +314,7 @@ export class Checkbox implements ComponentInterface {
'checkbox-checked': checked,
'checkbox-disabled': disabled,
'checkbox-indeterminate': indeterminate,
'legacy-checkbox': true,
interactive: true,
})}
>
@ -196,6 +335,24 @@ export class Checkbox implements ComponentInterface {
</Host>
);
}
private getSVGPath(mode: Mode, indeterminate: boolean): HTMLElement {
let path = indeterminate ? (
<path d="M6 12L18 12" part="mark" />
) : (
<path d="M5.9,12.5l3.8,3.8l8.8-8.8" part="mark" />
);
if (mode === 'md') {
path = indeterminate ? (
<path d="M2 12H22" part="mark" />
) : (
<path d="M1.73,12.91 8.1,19.28 22.79,4.59" part="mark" />
);
}
return path;
}
}
let checkboxIds = 0;