Skip to content

Commit

Permalink
fix(input): wrapper color fix now doesn't need background prop
Browse files Browse the repository at this point in the history 
Closes #136
  • Loading branch information
@rikbrowning @jmillar-nanthealth
rikbrowning authored and jmillar-nanthealth committed Aug 31, 2022
1 parent 060044a commit 971d2d9
Show file tree
Hide file tree
Showing 18 changed files with 1,652 additions and 1,104 deletions.
1 change: 0 additions & 1 deletion docs/Components/Autocomplete/README.md
View file
Expand Up @@ -111,7 +111,6 @@ In the example above, we update the value array at the index where the icon need
| loading | when true, Autocomplete will be in a loading state | `Boolean` | `false` | `false` |
| allowNew | when true, Autocomplete will allow new items to be added. Only available in `single` mode | `Boolean` | `false` | `false` |
| highlight | determines how the query is matched in the results. Allowed:`"off"`,`"ignore-case"`. See [Highlighting](#highlighting) section | `String` | `false` | `"off"` |
| background | sets label background color to `background` | `Boolean` | `false` | `false` |
| minChar | will only emit `search` even when query is atleast `minChar` long | `Number` | `false` | `0` |
| newMatcher | if `allowNew` is enabled, this is the function that ascertains if the search term entered is unique/new | `function` | `false` | Compares query and item in lower case |
| selectionLimit | limits the number of items that can be selected. Only takes effect in `multi`. Don't forget to set the label | `Number` | `false` | - |
Expand Down
53 changes: 25 additions & 28 deletions docs/Components/Input/README.md
View file
Expand Up @@ -21,36 +21,35 @@ Inputs can be used as a singular object in a layout, or they can be paired toget

**Label Guidelines:**

* keep label text descriptive, unambiguous and concise
* be consistent with capitalization of label text (title case or sentence case)
* labels should fit on a single line
* use natural language if necessary (e.g. instead of “Issued by” consider “Which bank issued your card?”)
* asterisks should be used on required fields
- keep label text descriptive, unambiguous and concise
- be consistent with capitalization of label text (title case or sentence case)
- labels should fit on a single line
- use natural language if necessary (e.g. instead of “Issued by” consider “Which bank issued your card?”)
- asterisks should be used on required fields

**Field Guidelines:**

* keep field sizes consistent within a page
* one field per row unless the fields are closely related (e.g. First Name and Last Name or City, State)
* where appropriate a max field size and character limit should be included
- keep field sizes consistent within a page
- one field per row unless the fields are closely related (e.g. First Name and Last Name or City, State)
- where appropriate a max field size and character limit should be included

## Input

### Props

| Name | Description | Type | Required | Default |
| ---------- | ------------------------------------------------------------------------------------------------ | --------- | -------- | ------------ |
| modelValue | value to be placed in the Input | `String` | `false` | - |
| label | text label for the Input | `String` | `true` | - |
| hint | hint text to be displayed below the Input | `String` | `false` | - |
| error | error text to be displayed below the Input | `String` | `false` | - |
| clear | label for the clear link that will appear at the end of the Input when it has a value | `String` | `false` | `""` |
| type | type of underlying Input | `String` | `false` | `"text"` |
| background | sets the label background color to `$background`. Use this if control is on a background surface | `Boolean` | `false` | `false` |
| disabled | puts the Input into a disabled state | `Boolean` | `false` | `false` |
| maxlength | maximum amount of characters this Input will accept | `Number` | `false` | 0 - no limit |
| hideLabel | hides the label for the Input in scenarios like tables where it would get in the way | `Boolean` | `false` | - |
| id | an ID that can be will be assigned to the input element | `String` | `false` | - |
| schema | a schema for use in validation | `Object` | `false` | - |
| Name | Description | Type | Required | Default |
| ---------- | ------------------------------------------------------------------------------------- | --------- | -------- | ------------ |
| modelValue | value to be placed in the Input | `String` | `false` | - |
| label | text label for the Input | `String` | `true` | - |
| hint | hint text to be displayed below the Input | `String` | `false` | - |
| error | error text to be displayed below the Input | `String` | `false` | - |
| clear | label for the clear link that will appear at the end of the Input when it has a value | `String` | `false` | `""` |
| type | type of underlying Input | `String` | `false` | `"text"` |
| disabled | puts the Input into a disabled state | `Boolean` | `false` | `false` |
| maxlength | maximum amount of characters this Input will accept | `Number` | `false` | 0 - no limit |
| hideLabel | hides the label for the Input in scenarios like tables where it would get in the way | `Boolean` | `false` | - |
| id | an ID that can be will be assigned to the input element | `String` | `false` | - |
| schema | a schema for use in validation | `Object` | `false` | - |

### Events

Expand All @@ -73,18 +72,16 @@ Inputs can be used as a singular object in a layout, or they can be paired toget

Specifying an `class` or `data-ref-id` attribute will cause them to be applied to the component root container `div`. All other attributes are inherited to the `input` where applicable. Some will be ignored if they conflict with attributes used for accessibility.


## ValidationHeader

This is an element designed to be used in conjunction with forms using the `yup` validation library. This component displays a list of errors and links to the errored fields which helps in best practices for form validation. Please see the examples in the [Form Validation page](/Guides/FormValidation/#examples)

### Props

| Name | Description | Type | Required | Default |
| ---------- | ---------------------------------------------------------------- | ------- | -------- | ------- |
| errorList | an array of yup `ValidationError` objects produced by validation | `Array` | `false` | `[]` |

| Name | Description | Type | Required | Default |
| --------- | ---------------------------------------------------------------- | ------- | -------- | ------- |
| errorList | an array of yup `ValidationError` objects produced by validation | `Array` | `false` | `[]` |

### data-ref-ids

- `feather-validation-header` - the root element

1 change: 0 additions & 1 deletion docs/Components/ProtectedInput/README.md
View file
Expand Up @@ -29,7 +29,6 @@ Used in scenarios where sensitive user information must be entered into a comput
| label | Text label for the input | `String` | `true` | - |
| hint | Hint text to be displayed below the input | `String` | `false` | - |
| error | Error text to be displayed below the input | `String` | `false` | - |
| background | Sets the label background color to `$background`. Use this if control is on a background surface | `Boolean` | `false` | `false` |
| disabled | Puts the input into a disabled state | `Boolean` | `false` | `false` |
| labels | Object containing labels to be used by this component. Mainly used for i18n or customization of labels. See [Labels](#labels) example | `Object` | `false` | See [Labels](#labels) example |

Expand Down
1 change: 0 additions & 1 deletion docs/Components/Select/README.md
View file
Expand Up @@ -79,7 +79,6 @@ The following example allows `10` items to be displayed before scrolling.
| error | error string to display under select | `String` | `false` | - |
| clear | label for the clear link that will appear at the end of the input when this has a value | `String` | `false` | `""` |
| hint | hint string to display under select | `String` | `false` | - |
| background | sets label background color to `background` | `Boolean` | `false` | `false` |
| hideLabel | hides the label for the input in scenarios like tables where it would get in the way | `Boolean` | `false` | - |
| schema | a schema for use in validation | `Object` | `false` | - |

Expand Down
25 changes: 12 additions & 13 deletions docs/Components/Textarea/README.md
View file
Expand Up @@ -23,19 +23,18 @@ Text areas should be used on forms, dialogs, background, and foreground surfaces
### Props
| Name | Description | Type | Required | Default |
| ---------- | ------------------------------------------------------------------------------------------------ | --------- | -------- | ------------ |
| modelValue | value to be placed in the textarea | `String` | `false` | - |
| label | text label for the textarea | `String` | `true` | - |
| hint | hint text to be displayed below the textarea | `String` | `false` | - |
| error | error text to be displayed below the textarea | `String` | `false` | - |
| clear | label for the clear link that will appear at the end of the textarea when this has a value | `String` | `false` | `""` |
| background | sets the label background color to `$background`. Use this if control is on a background surface | `Boolean` | `false` | `false` |
| disabled | puts the textarea into a disabled state | `Boolean` | `false` | `false` |
| maxlength | maximum amount of characters this textarea will accept | `Number` | `false` | 0 - no limit |
| auto | when true the textarea will automatically grow | `Boolean` | `false` | `false` |
| hideLabel | hides the label for the input in scenarios like tables where it would get in the way | `Boolean` | `false` | - |
| schema | a schema for use in validation | `Object` | `false` | - |
| Name | Description | Type | Required | Default |
| ---------- | ------------------------------------------------------------------------------------------ | --------- | -------- | ------------ |
| modelValue | value to be placed in the textarea | `String` | `false` | - |
| label | text label for the textarea | `String` | `true` | - |
| hint | hint text to be displayed below the textarea | `String` | `false` | - |
| error | error text to be displayed below the textarea | `String` | `false` | - |
| clear | label for the clear link that will appear at the end of the textarea when this has a value | `String` | `false` | `""` |
| disabled | puts the textarea into a disabled state | `Boolean` | `false` | `false` |
| maxlength | maximum amount of characters this textarea will accept | `Number` | `false` | 0 - no limit |
| auto | when true the textarea will automatically grow | `Boolean` | `false` | `false` |
| hideLabel | hides the label for the input in scenarios like tables where it would get in the way | `Boolean` | `false` | - |
| schema | a schema for use in validation | `Object` | `false` | - |
### Events
Expand Down

0 comments on commit 971d2d9

Please sign in to comment.