Skip to content

Commit

Permalink
docs: refactor checkbox property docs
Browse files Browse the repository at this point in the history
  • Loading branch information
@jordanjones243
jordanjones243 committed Jan 14, 2025
1 parent 81642db commit 15dbd51
Show file tree
Hide file tree
Showing 3 changed files with 88 additions and 44 deletions.
30 changes: 14 additions & 16 deletions components/checkbox/docs/api.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,15 @@ The auro-checkbox-group element is a wrapper for auro-checkbox element.

| Property | Attribute | Type | Default | Description |
|---------------------------------|---------------------------------|-----------|-------------|--------------------------------------------------|
| `disabled` | `disabled` | `boolean` | "undefined" | |
| `error` | `error` | `String` | | When defined, sets persistent validity to `customError` and sets the validity message to the attribute value. |
| `horizontal` | `horizontal` | `Boolean` | false | If set, checkboxes will be aligned horizontally. |
| `noValidate` | `noValidate` | `Boolean` | | If set, disables auto-validation on blur. |
| `required` | `required` | `Boolean` | false | Populates the `required` attribute on the element. Used for client-side validation. |
| `setCustomValidity` | `setCustomValidity` | `String` | | Sets a custom help text message to display for all validityStates. |
| `setCustomValidityCustomError` | `setCustomValidityCustomError` | `String` | | Custom help text message to display when validity = `customError`. |
| `setCustomValidityValueMissing` | `setCustomValidityValueMissing` | `String` | | Custom help text message to display when validity = `valueMissing`. |
| `validity` | `validity` | `String` | "undefined" | Specifies the `validityState` this element is in. |
| `value` | `value` | `array` | "undefined" | |
| `disabled` | `disabled` | `boolean` | "undefined" | If set, disables the checkbox group. |
| `error` | `error` | `string` | | When defined, sets persistent validity to `customError` and sets the validation message to the attribute value. |
| `horizontal` | `horizontal` | `boolean` | false | If set, checkboxes will be aligned horizontally. |
| `noValidate` | `noValidate` | `boolean` | | If set, disables auto-validation on blur. |
| `required` | `required` | `boolean` | false | Populates the `required` attribute on the element. Used for client-side validation. |
| `setCustomValidity` | `setCustomValidity` | `string` | | Sets a custom help text message to display for all validityStates. |
| `setCustomValidityCustomError` | `setCustomValidityCustomError` | `string` | | Custom help text message to display when validity = `customError`. |
| `setCustomValidityValueMissing` | `setCustomValidityValueMissing` | `string` | | Custom help text message to display when validity = `valueMissing`. |
| `validity` | `validity` | `string` | "undefined" | Specifies the `validityState` this element is in. |

## Methods

Expand Down Expand Up @@ -47,12 +46,11 @@ Custom element for the purpose of allowing users to select one or more options o

| Property | Attribute | Type | Default | Description |
|------------|------------|-----------|---------|--------------------------------------------------|
| `checked` | `checked` | `Boolean` | false | If set to true, the checkbox will be filled with a checkmark. |
| `disabled` | `disabled` | `Boolean` | false | If set to true, the checkbox will not be clickable. |
| `error` | `error` | `Boolean` | false | If set to true, sets an error state on the checkbox. |
| `id` | `id` | `String` | | Sets the individual `id` per element. |
| `name` | `name` | `String` | | Accepts any string and is used to identify related checkboxes when submitting form data. |
| `value` | `value` | `String` | | Sets the element's input value. Must be unique within an auro-checkbox-group element. |
| `checked` | `checked` | `boolean` | false | If set to true, the checkbox will be filled with a checkmark. |
| `disabled` | `disabled` | `boolean` | false | If set to true, the checkbox will not be clickable. |
| `id` | `id` | `string` | | Sets the individual `id` per element. |
| `name` | `name` | `string` | | Accepts any string and is used to identify related checkboxes when submitting form data. |
| `value` | `value` | `string` | | Sets the element's input value. Must be unique within an auro-checkbox-group element. |

## Methods

Expand Down
61 changes: 45 additions & 16 deletions components/checkbox/src/auro-checkbox-group.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,14 +19,6 @@ import tokensCss from "./styles/tokens-css.js";
/**
* The auro-checkbox-group element is a wrapper for auro-checkbox element.
*
* @attr {String} validity - Specifies the `validityState` this element is in.
* @attr {String} setCustomValidity - Sets a custom help text message to display for all validityStates.
* @attr {String} setCustomValidityCustomError - Custom help text message to display when validity = `customError`.
* @attr {String} setCustomValidityValueMissing - Custom help text message to display when validity = `valueMissing`.
* @attr {String} error - When defined, sets persistent validity to `customError` and sets the validity message to the attribute value.
* @attr {Boolean} noValidate - If set, disables auto-validation on blur.
* @attr {Boolean} required - Populates the `required` attribute on the element. Used for client-side validation.
* @attr {Boolean} horizontal - If set, checkboxes will be aligned horizontally.
* @slot {HTMLSlotElement} legend - Allows for the legend to be overridden.
* @slot {HTMLSlotElement} optionalLabel - Allows for the optional label to be overridden.
* @slot {HTMLSlotElement} helpText - Allows for the helper text to be overridden.
Expand All @@ -38,11 +30,15 @@ export class AuroCheckboxGroup extends LitElement {
super();

this.validity = undefined;
this.value = undefined;
this.disabled = undefined;
this.required = false;
this.horizontal = false;

/**
* @private
*/
this.value = undefined;

/**
* @private
*/
Expand Down Expand Up @@ -74,38 +70,71 @@ export class AuroCheckboxGroup extends LitElement {

static get properties() {
return {

/**
* If set, disables the checkbox group.
*/
disabled: {
type: Boolean,
reflect: true
},

/**
* When defined, sets persistent validity to `customError` and sets the validation message to the attribute value.
*/
error: {
type: String,
reflect: true
},

/**
* If set, checkboxes will be aligned horizontally.
*/
horizontal: {
type: Boolean,
reflect: true
},
value: {
type: Array
},

/**
* If set, disables auto-validation on blur.
*/
noValidate: {
type: Boolean,
reflect: true
},

/**
* Populates the `required` attribute on the element. Used for client-side validation.
*/
required: {
type: Boolean,
reflect: true
},
error: {
type: String,
reflect: true
},

/**
* Sets a custom help text message to display for all validityStates.
*/
setCustomValidity: {
type: String
},

/**
* Custom help text message to display when validity = `customError`.
*/
setCustomValidityCustomError: {
type: String
},

/**
* Custom help text message to display when validity = `valueMissing`.
*/
setCustomValidityValueMissing: {
type: String
},

/**
* Specifies the `validityState` this element is in.
*/
validity: {
type: String,
reflect: true
Expand Down
41 changes: 29 additions & 12 deletions components/checkbox/src/auro-checkbox.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,12 +18,6 @@ import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/util
/**
* Custom element for the purpose of allowing users to select one or more options of a limited number of choices.
*
* @attr {Boolean} checked - If set to true, the checkbox will be filled with a checkmark.
* @attr {Boolean} disabled - If set to true, the checkbox will not be clickable.
* @attr {Boolean} error - If set to true, sets an error state on the checkbox.
* @attr {String} id - Sets the individual `id` per element.
* @attr {String} name - Accepts any string and is used to identify related checkboxes when submitting form data.
* @attr {String} value - Sets the element's input value. Must be unique within an auro-checkbox-group element.
* @csspart checkbox - apply css to a specific checkbox.
* @csspart checkbox-input - apply css to a specific checkbox's input.
* @csspart checkbox-label - apply css to a specific checkbox's label.
Expand All @@ -35,6 +29,10 @@ export class AuroCheckbox extends LitElement {
super();
this.checked = false;
this.disabled = false;

/**
* @private
*/
this.error = false;

/**
Expand All @@ -54,21 +52,40 @@ export class AuroCheckbox extends LitElement {
// function to define props used within the scope of this component
static get properties() {
return {

/**
* If set to true, the checkbox will be filled with a checkmark.
*/
checked: {
type: Boolean,
reflect: true
},

/**
* If set to true, the checkbox will not be clickable.
*/
disabled: {
type: Boolean,
reflect: true
},
error: {
type: Boolean,

/**
* Sets the individual `id` per element.
*/
id: { type: String },

/**
* Accepts any string and is used to identify related checkboxes when submitting form data.
*/
name: { type: String },

/**
* Sets the element's input value. Must be unique within an auro-checkbox-group element.
*/
value: {
type: String,
reflect: true
},
id: { type: String },
name: { type: String },
value: { type: String }
}
};
}

Expand Down

0 comments on commit 15dbd51

Please sign in to comment.