Skip to content

Commit

Permalink
docs: organize combobox attribute docs
Browse files Browse the repository at this point in the history
  • Loading branch information
@jordanjones243
jordanjones243 committed Jan 17, 2025
1 parent 1ec308e commit 2203caf
Show file tree
Hide file tree
Showing 3 changed files with 108 additions and 108 deletions.
28 changes: 14 additions & 14 deletions components/combobox/demo/api.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,20 +7,20 @@

| Property | Attribute | Type | Default | Description |
|---------------------------------|---------------------------------|-----------|-------------|--------------------------------------------------|
| [checkmark](#checkmark) | `checkmark` | `Boolean` | | When attribute is present auro-menu will apply checkmarks to selected options. |
| [disabled](#disabled) | `disabled` | `Boolean` | | If set, disables the combobox. |
| [error](#error) | `error` | `String` | | When defined, sets persistent validity to `customError` and sets the validation message to the attribute value. |
| [noFilter](#noFilter) | `noFilter` | `Boolean` | false | If set, combobox will not filter menuoptions based in input. |
| [noValidate](#noValidate) | `noValidate` | `Boolean` | | If set, disables auto-validation on blur. |
| [optionSelected](#optionSelected) | `optionSelected` | `Object` | null | Specifies the current selected option. |
| [required](#required) | `required` | `Boolean` | | Populates the `required` attribute on the input. Used for client-side validation. |
| [setCustomValidity](#setCustomValidity) | `setCustomValidity` | `String` | | Sets a custom help text message to display for all validityStates. |
| [setCustomValidityCustomError](#setCustomValidityCustomError) | `setCustomValidityCustomError` | `String` | | Custom help text message to display when validity = `customError`. |
| [setCustomValidityValueMissing](#setCustomValidityValueMissing) | `setCustomValidityValueMissing` | `String` | | Custom help text message to display when validity = `valueMissing`. |
| [triggerIcon](#triggerIcon) | `triggerIcon` | `Boolean` | | If set, the `icon` attribute will be applied to the trigger `auro-input` element. |
| [type](#type) | `type` | `String` | | Applies the defined value as the type attribute on auro-input. |
| [validity](#validity) | `validity` | `String` | "undefined" | Specifies the `validityState` this element is in. |
| [value](#value) | `value` | `String` | null | Value selected for the dropdown menu. |
| [checkmark](#checkmark) | `checkmark` | `boolean` | | When attribute is present auro-menu will apply checkmarks to selected options. |
| [disabled](#disabled) | `disabled` | `boolean` | | If set, disables the combobox. |
| [error](#error) | `error` | `string` | | When defined, sets persistent validity to `customError` and sets the validation message to the attribute value. |
| [noFilter](#noFilter) | `noFilter` | `boolean` | false | If set, combobox will not filter menuoptions based in input. |
| [noValidate](#noValidate) | `noValidate` | `boolean` | | If set, disables auto-validation on blur. |
| [optionSelected](#optionSelected) | `optionSelected` | `object` | null | Specifies the current selected option. |
| [required](#required) | `required` | `boolean` | | Populates the `required` attribute on the input. Used for client-side validation. |
| [setCustomValidity](#setCustomValidity) | `setCustomValidity` | `string` | | Sets a custom help text message to display for all validityStates. |
| [setCustomValidityCustomError](#setCustomValidityCustomError) | `setCustomValidityCustomError` | `string` | | Custom help text message to display when validity = `customError`. |
| [setCustomValidityValueMissing](#setCustomValidityValueMissing) | `setCustomValidityValueMissing` | `string` | | Custom help text message to display when validity = `valueMissing`. |
| [triggerIcon](#triggerIcon) | `triggerIcon` | `boolean` | | If set, the `icon` attribute will be applied to the trigger `auro-input` element. |
| [type](#type) | `type` | `string` | | Applies the defined value as the type attribute on auro-input. |
| [validity](#validity) | `validity` | `string` | "undefined" | Specifies the `validityState` this element is in. |
| [value](#value) | `value` | `string` | null | Value selected for the dropdown menu. |

## Methods

Expand Down
28 changes: 14 additions & 14 deletions components/combobox/docs/api.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,20 +4,20 @@

| Property | Attribute | Type | Default | Description |
|---------------------------------|---------------------------------|-----------|-------------|--------------------------------------------------|
| `checkmark` | `checkmark` | `Boolean` | | When attribute is present auro-menu will apply checkmarks to selected options. |
| `disabled` | `disabled` | `Boolean` | | If set, disables the combobox. |
| `error` | `error` | `String` | | When defined, sets persistent validity to `customError` and sets the validation message to the attribute value. |
| `noFilter` | `noFilter` | `Boolean` | false | If set, combobox will not filter menuoptions based in input. |
| `noValidate` | `noValidate` | `Boolean` | | If set, disables auto-validation on blur. |
| `optionSelected` | `optionSelected` | `Object` | null | Specifies the current selected option. |
| `required` | `required` | `Boolean` | | Populates the `required` attribute on the input. 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`. |
| `triggerIcon` | `triggerIcon` | `Boolean` | | If set, the `icon` attribute will be applied to the trigger `auro-input` element. |
| `type` | `type` | `String` | | Applies the defined value as the type attribute on auro-input. |
| `validity` | `validity` | `String` | "undefined" | Specifies the `validityState` this element is in. |
| `value` | `value` | `String` | null | Value selected for the dropdown menu. |
| `checkmark` | `checkmark` | `boolean` | | When attribute is present auro-menu will apply checkmarks to selected options. |
| `disabled` | `disabled` | `boolean` | | If set, disables the combobox. |
| `error` | `error` | `string` | | When defined, sets persistent validity to `customError` and sets the validation message to the attribute value. |
| `noFilter` | `noFilter` | `boolean` | false | If set, combobox will not filter menuoptions based in input. |
| `noValidate` | `noValidate` | `boolean` | | If set, disables auto-validation on blur. |
| `optionSelected` | `optionSelected` | `object` | null | Specifies the current selected option. |
| `required` | `required` | `boolean` | | Populates the `required` attribute on the input. 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`. |
| `triggerIcon` | `triggerIcon` | `boolean` | | If set, the `icon` attribute will be applied to the trigger `auro-input` element. |
| `type` | `type` | `string` | | Applies the defined value as the type attribute on auro-input. |
| `validity` | `validity` | `string` | "undefined" | Specifies the `validityState` this element is in. |
| `value` | `value` | `string` | null | Value selected for the dropdown menu. |

## Methods

Expand Down
160 changes: 80 additions & 80 deletions components/combobox/src/auro-combobox.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,20 +24,6 @@ import styleCss from "./styles/style-css.js";

// See https://git.io/JJ6SJ for "How to document your components using JSDoc"
/**
* @prop {Object} optionSelected - Specifies the current selected option.
* @prop {String} value - Value selected for the dropdown menu.
* @prop {Boolean} checkmark - When attribute is present auro-menu will apply checkmarks to selected options.
* @attr {String} error - When defined, sets persistent validity to `customError` and sets the validation message to the attribute value.
* @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 {Boolean} disabled - If set, disables the combobox.
* @attr {Boolean} noFilter - If set, combobox will not filter menuoptions based in input.
* @attr {Boolean} noValidate - If set, disables auto-validation on blur.
* @attr {Boolean} required - Populates the `required` attribute on the input. Used for client-side validation.
* @attr {Boolean} triggerIcon - If set, the `icon` attribute will be applied to the trigger `auro-input` element.
* @attr {String} type - Applies the defined value as the type attribute on auro-input.
* @slot - Default slot for the menu content.
* @slot label - Defines the content of the label.
* @slot helpText - Defines the content of the helpText.
Expand All @@ -56,28 +42,6 @@ export class AuroCombobox extends LitElement {
this.optionSelected = null;

this.privateDefaults();

/**
* @private
*/
this.validation = new AuroFormValidation();

/**
* @private
*/
this.runtimeUtils = new AuroLibraryRuntimeUtils();

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

/**
* Generate unique names for dependency components.
*/
const versioning = new AuroDependencyVersioning();
this.dropdownTag = versioning.generateTag('auro-dropdown', dropdownVersion, AuroDropdown);
this.inputTag = versioning.generateTag('auro-input', inputVersion, AuroInput);
}

/**
Expand All @@ -88,6 +52,17 @@ export class AuroCombobox extends LitElement {
this.availableOptions = [];
this.optionActive = null;
this.msgSelectionMissing = 'Please select an option.';

this.validation = new AuroFormValidation();

this.runtimeUtils = new AuroLibraryRuntimeUtils();

this.isHiddenWhileLoading = false;

const versioning = new AuroDependencyVersioning();

this.dropdownTag = versioning.generateTag('auro-dropdown', dropdownVersion, AuroDropdown);
this.inputTag = versioning.generateTag('auro-input', inputVersion, AuroInput);
}

// This function is to define props used within the scope of this component
Expand All @@ -96,87 +71,112 @@ export class AuroCombobox extends LitElement {
static get properties() {
return {
// ...super.properties,
error: {
type: String,
reflect: true
},
setCustomValidity: {
type: String
},
setCustomValidityCustomError: {
type: String
},
setCustomValidityValueMissing: {
type: String
},
validity: {
type: String,
reflect: true
},
disabled: {

/**
* When attribute is present auro-menu will apply checkmarks to selected options.
*/
checkmark: {
type: Boolean,
reflect: true
},
noFilter: {

/**
* If set, disables the combobox.
*/
disabled: {
type: Boolean,
reflect: true
},
optionSelected: { type: Object },
noValidate: { type: Boolean },
required: {
type: Boolean,

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

/**
* If set, combobox will not filter menuoptions based in input.
*/
noFilter: {
type: Boolean,
reflect: true
},
type: {
type: String,
reflect: true

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

/**
* Specifies the current selected option.
*/
optionSelected: {
type: Object
},
checkmark: {

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

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

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

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

/**
* @private
* If set, the `icon` attribute will be applied to the trigger `auro-input` element.
*/
dropdownElementName: { type: String },
triggerIcon: {
type: Boolean,
reflect: true
},

/**
* @private
* Applies the defined value as the type attribute on auro-input.
*/
dropdownTag: { type: Object },
type: {
type: String,
reflect: true
},

/**
* @private
* Specifies the `validityState` this element is in.
*/
inputElementName: { type: String },
validity: {
type: String,
reflect: true
},

/**
* @private
* Value selected for the dropdown menu.
*/
inputTag: { type: Object }
value: {
type: String
}
};
}

Expand Down

0 comments on commit 2203caf

Please sign in to comment.