Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Implement formvalidation repo #130

Merged
merged 15 commits into from
May 10, 2024
Merged

Implement formvalidation repo #130

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
cd3ddb2
feat(validation): implement formvalidation repo #129
jordanjones243 Apr 2, 2024
45e5d50
perf(deps): update dependencies
jordanjones243 Apr 2, 2024
3905418
docs(jsdocs): update documentation on api page
jordanjones243 Apr 2, 2024
fa02db1
docs: update location of JSDoc descriptions
blackfalcon Apr 3, 2024
573e9a8
build: update test and publish scripts
blackfalcon Apr 3, 2024
df145b5
chore: update dependencies
blackfalcon Apr 3, 2024
1cbbf0c
fix(border): update focus border styles #127
jordanjones243 Apr 29, 2024
8749d4f
perf(validation): update validation logic for checkbox border #129
jordanjones243 Apr 29, 2024
f24755e
docs(checkbox): remove unnecessary checkbox documentation
jordanjones243 Apr 29, 2024
996d08d
feat(library): add auro-library functionality to repo
jordanjones243 Apr 29, 2024
6e76bd4
docs(error): remove individual error example
jordanjones243 Apr 29, 2024
d3c1be9
docs(event): add events to jsdocs
jordanjones243 Apr 30, 2024
9bb5a39
chore: update dependencies
jordanjones243 May 3, 2024
0fc3d15
perf(validity): update tests and validation for error and required #129
jordanjones243 May 8, 2024
6ec6fd4
chore: update dependencies
jordanjones243 May 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion .github/workflows/testPublish.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ jobs:
node-version: ${{ matrix.node-version }}
- run: npm ci
- run: npm run build
- run: npm run build:test

release:
# Only release on push to master
Expand All @@ -39,7 +40,7 @@ jobs:
with:
node-version: 20.x
- run: npm ci
- run: npm run build
- run: npm run build:release
- uses: cycjimmy/semantic-release-action@v4
env:
GITHUB_TOKEN: ${{ secrets.ACCESS_TOKEN }}
Expand Down
1 change: 0 additions & 1 deletion apiExamples/error.html
View file
Open in desktop

This file was deleted.

138 changes: 74 additions & 64 deletions demo/api.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,40 @@
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../api.md) -->
<!-- The below content is automatically added from ./../api.md -->

# auro-checkbox-group

The auro-checkbox-group element is a wrapper for auro-checkbox element.

## Properties

| Property | Attribute | Type | Default | Description |
|---------------------------------|---------------------------------|-----------|-------------|--------------------------------------------------|
| [disabled](#disabled) | `disabled` | `boolean` | false | |
| [error](#error) | `error` | `String` | | When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value. |
| [horizontal](#horizontal) | `horizontal` | `Boolean` | false | If set, checkboxes will be aligned horizontally. |
| [noValidate](#noValidate) | `noValidate` | `Boolean` | | If set, disables auto-validation on blur. |
| [required](#required) | `required` | `Boolean` | false | Populates the `required` attribute on the element. 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`. |
| [validity](#validity) | `validity` | `String` | "undefined" | Specifies the `validityState` this element is in. |
| [value](#value) | `value` | `array` | "undefined" | |

## Events

| Event | Type | Description |
|-----------------------------|--------------------|--------------------------------------------------|
| `auroFormElement-validated` | | Notifies that the `validity` and `errorMessage` values have changed. |
| [input](#input) | `CustomEvent<any>` | |

## Slots

| Name | Description |
|-----------------|-------------------------------------------------|
| [helpText](#helpText) | Allows for the helper text to be overridden. |
| [legend](#legend) | Allows for the legend to be overridden. |
| [optionalLabel](#optionalLabel) | Allows for the optional label to be overridden. |

# auro-checkbox

Custom element for the purpose of allowing users to select one or more options of a limited number of choices.
Expand All @@ -14,17 +48,14 @@ Custom element for the purpose of allowing users to select one or more options o
| [error](#error) | `error` | `Boolean` | false | If set to true, sets an error state on the checkbox. |
| [id](#id) | `id` | `String` | | Sets the individual `id` per element. |
| [name](#name) | `name` | `String` | | Accepts any string, `DOMString` representing the value of the input. |
| [required](#required) | `required` | `Boolean` | false | Populates the `required` attribute on the checkbox. Used for client-side validation. |
| [value](#value) | `value` | `String` | | Sets the element's input value. |

## Methods

| Method | Type |
|----------------|--------------------------------------|
| [handleChange](#handleChange) | `(event: any): void` |
| [handleInput](#handleInput) | `(event: any): void` |
| [invalid](#invalid) | `(error: any): "true" \| "false"` |
| [isRequired](#isRequired) | `(required: any): "true" \| "false"` |
| Method | Type |
|----------------|----------------------|
| [handleChange](#handleChange) | `(event: any): void` |
| [handleInput](#handleInput) | `(event: any): void` |

## Events

Expand Down Expand Up @@ -146,65 +177,11 @@ The `disabled` attribute used to disable a single `<auro-checkbox>` element.
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>

### Error

Use the `error` attribute to force an error state on the element.

#### Checkbox Group with Error
### Form Validation

The `error` attribute used to set error state on the entire `<auro-checkbox-group>`. If using the `error` attribute on an `<auro-checkbox-group>`, a string with the error message needs to be passed along with the attribute.
In the `auro-checkbox-group` element, the `required` and `error` states are the tqo possible validation states.

<div class="exampleWrapper">
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/errorGroup.html) -->
<!-- The below content is automatically added from ./../../apiExamples/errorGroup.html -->
<auro-checkbox-group error="custom error">
<span slot="legend">Form label goes here</span>
<auro-checkbox value="error checkbox option" name="example1" id="checkbox-errorGroup1">Error checkbox option</auro-checkbox>
<auro-checkbox value="error checkbox option" name="example2" id="checkbox-errorGroup2">Error checkbox option</auro-checkbox>
<auro-checkbox value="error checkbox option" name="example3" id="checkbox-errorGroup3">Error checkbox option</auro-checkbox>
<auro-checkbox value="error checkbox option" name="example4" id="checkbox-errorGroup4" checked>Error checkbox option</auro-checkbox>
</auro-checkbox-group>
<!-- AURO-GENERATED-CONTENT:END -->
</div>
<auro-accordion alignRight>
<span slot="trigger">See code</span>
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/errorGroup.html) -->
<!-- The below code snippet is automatically added from ./../../apiExamples/errorGroup.html -->

```html
<auro-checkbox-group error="custom error">
<span slot="legend">Form label goes here</span>
<auro-checkbox value="error checkbox option" name="example1" id="checkbox-errorGroup1">Error checkbox option</auro-checkbox>
<auro-checkbox value="error checkbox option" name="example2" id="checkbox-errorGroup2">Error checkbox option</auro-checkbox>
<auro-checkbox value="error checkbox option" name="example3" id="checkbox-errorGroup3">Error checkbox option</auro-checkbox>
<auro-checkbox value="error checkbox option" name="example4" id="checkbox-errorGroup4" checked>Error checkbox option</auro-checkbox>
</auro-checkbox-group>
```
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>

#### Checkbox with Error Outside of Group

The `error` attribute used to set an error state on a single `<auro-checkbox>` element.

**Note**: Error messages are not supported outside of an `<auro-checkbox-group>`.

<div class="exampleWrapper">
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/error.html) -->
<!-- The below content is automatically added from ./../../apiExamples/error.html -->
<auro-checkbox value="error checkbox option" name="example3" id="checkbox-error1" error>Error checkbox option</auro-checkbox>
<!-- AURO-GENERATED-CONTENT:END -->
</div>
<auro-accordion alignRight>
<span slot="trigger">See code</span>
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/error.html) -->
<!-- The below code snippet is automatically added from ./../../apiExamples/error.html -->

```html
<auro-checkbox value="error checkbox option" name="example3" id="checkbox-error1" error>Error checkbox option</auro-checkbox>
```
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>
It should be noted that form validation is only supported within an `auro-checkbox-group` element. In order to support validation on a single `auro-checkbox` element, it must be wrapped in an `auro-checkbox-group`.

#### Required

Expand Down Expand Up @@ -238,3 +215,36 @@ When present, the `required` attribute specifies that at least one or more `<aur
```
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>

#### Error

The `error` attribute used to set error state on the entire `<auro-checkbox-group>`. If using the `error` attribute on an `<auro-checkbox-group>`, a string with the error message needs to be passed along with the attribute.

<div class="exampleWrapper">
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/errorGroup.html) -->
<!-- The below content is automatically added from ./../../apiExamples/errorGroup.html -->
<auro-checkbox-group error="custom error">
<span slot="legend">Form label goes here</span>
<auro-checkbox value="error checkbox option" name="example1" id="checkbox-errorGroup1">Error checkbox option</auro-checkbox>
<auro-checkbox value="error checkbox option" name="example2" id="checkbox-errorGroup2">Error checkbox option</auro-checkbox>
<auro-checkbox value="error checkbox option" name="example3" id="checkbox-errorGroup3">Error checkbox option</auro-checkbox>
<auro-checkbox value="error checkbox option" name="example4" id="checkbox-errorGroup4" checked>Error checkbox option</auro-checkbox>
</auro-checkbox-group>
<!-- AURO-GENERATED-CONTENT:END -->
</div>
<auro-accordion alignRight>
<span slot="trigger">See code</span>
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/errorGroup.html) -->
<!-- The below code snippet is automatically added from ./../../apiExamples/errorGroup.html -->

```html
<auro-checkbox-group error="custom error">
<span slot="legend">Form label goes here</span>
<auro-checkbox value="error checkbox option" name="example1" id="checkbox-errorGroup1">Error checkbox option</auro-checkbox>
<auro-checkbox value="error checkbox option" name="example2" id="checkbox-errorGroup2">Error checkbox option</auro-checkbox>
<auro-checkbox value="error checkbox option" name="example3" id="checkbox-errorGroup3">Error checkbox option</auro-checkbox>
<auro-checkbox value="error checkbox option" name="example4" id="checkbox-errorGroup4" checked>Error checkbox option</auro-checkbox>
</auro-checkbox-group>
```
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>
23 changes: 0 additions & 23 deletions demo/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -196,29 +196,6 @@ The `error` attribute used to set error state on the entire `<auro-checkbox-grou
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>

#### Checkbox with Error Outside of Group

The `error` attribute used to set an error state on a single `<auro-checkbox>` element.

**Note**: Error messages are not supported outside of an `<auro-checkbox-group>`.

<div class="exampleWrapper">
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/error.html) -->
<!-- The below content is automatically added from ./../../apiExamples/error.html -->
<auro-checkbox value="error checkbox option" name="example3" id="checkbox-error1" error>Error checkbox option</auro-checkbox>
<!-- AURO-GENERATED-CONTENT:END -->
</div>
<auro-accordion alignRight>
<span slot="trigger">See code</span>
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/error.html) -->
<!-- The below code snippet is automatically added from ./../../apiExamples/error.html -->

```html
<auro-checkbox value="error checkbox option" name="example3" id="checkbox-error1" error>Error checkbox option</auro-checkbox>
```
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>

### Horizontal Group

Using the `horizontal` attribute will render the checkbox options on a horizontal line.
Expand Down
46 changes: 39 additions & 7 deletions docs/api.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,38 @@
# auro-checkbox-group

The auro-checkbox-group element is a wrapper for auro-checkbox element.

## Properties

| Property | Attribute | Type | Default | Description |
|---------------------------------|---------------------------------|-----------|-------------|--------------------------------------------------|
| `disabled` | `disabled` | `boolean` | false | |
| `error` | `error` | `String` | | When defined, sets persistent validity to `customError` and sets `setCustomValidity` = 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" | |

## Events

| Event | Type | Description |
|-----------------------------|--------------------|--------------------------------------------------|
| `auroFormElement-validated` | | Notifies that the `validity` and `errorMessage` values have changed. |
| `input` | `CustomEvent<any>` | |

## Slots

| Name | Description |
|-----------------|-------------------------------------------------|
| `helpText` | Allows for the helper text to be overridden. |
| `legend` | Allows for the legend to be overridden. |
| `optionalLabel` | Allows for the optional label to be overridden. |


# auro-checkbox

Custom element for the purpose of allowing users to select one or more options of a limited number of choices.
Expand All @@ -11,17 +46,14 @@ Custom element for the purpose of allowing users to select one or more options o
| `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, `DOMString` representing the value of the input. |
| `required` | `required` | `Boolean` | false | Populates the `required` attribute on the checkbox. Used for client-side validation. |
| `value` | `value` | `String` | | Sets the element's input value. |

## Methods

| Method | Type |
|----------------|--------------------------------------|
| `handleChange` | `(event: any): void` |
| `handleInput` | `(event: any): void` |
| `invalid` | `(error: any): "true" \| "false"` |
| `isRequired` | `(required: any): "true" \| "false"` |
| Method | Type |
|----------------|----------------------|
| `handleChange` | `(event: any): void` |
| `handleInput` | `(event: any): void` |

## Events

Expand Down
41 changes: 12 additions & 29 deletions docs/partials/api.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,58 +55,41 @@ The `disabled` attribute used to disable a single `<auro-checkbox>` element.

</auro-accordion>

### Error
### Form Validation

Use the `error` attribute to force an error state on the element.
In the `auro-checkbox-group` element, the `required` and `error` states are the tqo possible validation states.

#### Checkbox Group with Error
It should be noted that form validation is only supported within an `auro-checkbox-group` element. In order to support validation on a single `auro-checkbox` element, it must be wrapped in an `auro-checkbox-group`.

The `error` attribute used to set error state on the entire `<auro-checkbox-group>`. If using the `error` attribute on an `<auro-checkbox-group>`, a string with the error message needs to be passed along with the attribute.

<div class="exampleWrapper">
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/errorGroup.html) -->
<!-- AURO-GENERATED-CONTENT:END -->
</div>

<auro-accordion alignRight>
<span slot="trigger">See code</span>

<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/errorGroup.html) -->
<!-- AURO-GENERATED-CONTENT:END -->

</auro-accordion>

#### Checkbox with Error Outside of Group

The `error` attribute used to set an error state on a single `<auro-checkbox>` element.
#### Required

**Note**: Error messages are not supported outside of an `<auro-checkbox-group>`.
jason-capsule42 marked this conversation as resolved.
Show resolved Hide resolved
When present, the `required` attribute specifies that at least one or more `<auro-checkbox>` elements within the `<auro-checkbox-group>` must be checked.

<div class="exampleWrapper">
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/error.html) -->
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/required.html) -->
<!-- AURO-GENERATED-CONTENT:END -->
</div>

<auro-accordion alignRight>
<span slot="trigger">See code</span>

<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/error.html) -->
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/required.html) -->
<!-- AURO-GENERATED-CONTENT:END -->

</auro-accordion>

#### Required
#### Error

When present, the `required` attribute specifies that at least one or more `<auro-checkbox>` elements within the `<auro-checkbox-group>` must be checked.
The `error` attribute used to set error state on the entire `<auro-checkbox-group>`. If using the `error` attribute on an `<auro-checkbox-group>`, a string with the error message needs to be passed along with the attribute.

<div class="exampleWrapper">
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/required.html) -->
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/errorGroup.html) -->
<!-- AURO-GENERATED-CONTENT:END -->
</div>

<auro-accordion alignRight>
<span slot="trigger">See code</span>

<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/required.html) -->
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/errorGroup.html) -->
<!-- AURO-GENERATED-CONTENT:END -->

</auro-accordion>
Expand Down
Loading
Loading