-
Notifications
You must be signed in to change notification settings - Fork 26
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1408 from dequelabs/release-v6.3.0
chore(cauldron): Release 6.3.0
- Loading branch information
Showing
71 changed files
with
2,547 additions
and
1,322 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,128 @@ | ||
| --- | ||
| title: SearchField | ||
| description: A form element that allows users to type in text for searching. | ||
| source: https://github.com/dequelabs/cauldron/tree/develop/packages/react/src/components/SearchField/index.tsx | ||
| --- | ||
|
|
||
| import { SearchField, FieldWrap } from '@deque/cauldron-react'; | ||
|
|
||
| ```js | ||
| import { SearchField } from '@deque/cauldron-react'; | ||
| ``` | ||
|
|
||
| <Note> | ||
| Use [FieldWrap](./FieldWrap) to wrap all input components. The `SearchField` | ||
| component has been designed specifically to only be used when rendered as a | ||
| child of this component, and may not be completely accessible if rendered | ||
| outside of `FieldWrap`. | ||
| </Note> | ||
|
|
||
| ## Examples | ||
|
|
||
| ### Resting | ||
|
|
||
| ```jsx example | ||
| <FieldWrap> | ||
| <SearchField label="Resting" /> | ||
| </FieldWrap> | ||
| ``` | ||
|
|
||
| ### Disabled | ||
|
|
||
| ```jsx example | ||
| <FieldWrap> | ||
| <SearchField label="Disabled" disabled /> | ||
| </FieldWrap> | ||
| ``` | ||
|
|
||
| ### Label Hidden | ||
|
|
||
| ```jsx example | ||
| <FieldWrap> | ||
| <SearchField label="Hidden" hideLabel /> | ||
| </FieldWrap> | ||
| ``` | ||
|
|
||
| ### Usage in Form | ||
|
|
||
| By default, SearchField is wrapped in a `<form role="search">` to provide better accessibility hints to users of assistive technology. If your search field needs to be placed inside of an existing form, you must use isForm="false". | ||
|
|
||
| ```jsx example | ||
| <form role="search"> | ||
| <FieldWrap> | ||
| <SearchField label="Nested in Form" isForm={false} /> | ||
| </FieldWrap> | ||
| </form> | ||
| ``` | ||
|
|
||
| ### SearchField with trailing children | ||
|
|
||
| We include trailing children to allow for additional input context to be provided, such as texts, buttons, icons, etc. The trailing children will be placed at the right end of SearchField. | ||
|
|
||
| ```jsx example | ||
| <FieldWrap> | ||
| <SearchField | ||
| label="Search Field with trailing children" | ||
| trailingChildren={ | ||
| <span style={{ marginRight: '8px' }}> | ||
| <strong>1</strong> of <strong>1</strong> | ||
| </span> | ||
| } | ||
| /> | ||
| </FieldWrap> | ||
| ``` | ||
|
|
||
| ## Props | ||
|
|
||
| <ComponentProps | ||
| className={true} | ||
| refType="HTMLInputElement" | ||
| props={[ | ||
| { | ||
| name: 'label', | ||
| type: 'ContentNode', | ||
| required: true, | ||
| description: 'Label for the field.' | ||
| }, | ||
| { | ||
| name: 'defaultValue', | ||
| type: 'string', | ||
| description: | ||
| 'The default value to be applied to the field. Optionally used for "uncontrolled" fields.' | ||
| }, | ||
| { | ||
| name: 'value', | ||
| type: 'string', | ||
| description: | ||
| 'The value to be applied to the field. Used for "controlled" fields.' | ||
| }, | ||
| { | ||
| name: 'onChange', | ||
| type: 'function', | ||
| description: "Callback function when the field's value changes." | ||
| }, | ||
| { | ||
| name: 'hideLabel', | ||
| type: 'boolean', | ||
| description: 'If true, the label will be rendered off-screen.', | ||
| defaultValue: 'false' | ||
| }, | ||
| { | ||
| name: 'isForm', | ||
| type: 'boolean', | ||
| description: | ||
| 'If true, the label and input will be rendered in a `<form>` tag. If false, the label and input will be rendered in a `<div>` tag.', | ||
| defaultValue: 'true' | ||
| }, | ||
| { | ||
| name: 'trailingChildren', | ||
| type: 'ReactNode', | ||
| description: | ||
| 'If provided, the children will be slotted into the right end of the field.' | ||
| } | ||
| ]} | ||
| /> | ||
|
|
||
| ## Related Components | ||
|
|
||
| - [FieldWrap](./FieldWrap) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,83 @@ | ||
| --- | ||
| title: TextEllipsis | ||
| description: A utility component to truncate long text and provide an alternative means of accessing hidden text | ||
| source: https://github.com/dequelabs/cauldron/tree/develop/packages/react/src/components/TextEllipsis/index.tsx | ||
| --- | ||
|
|
||
| import { TextEllipsis, Link } from '@deque/cauldron-react' | ||
|
|
||
| ```js | ||
| import { TextEllipsis } from '@deque/cauldron-react' | ||
| ``` | ||
|
|
||
| `TextEllipsis` is a utility component to provide an accessible means of preventing overflow for text that does not fit within a constrained area. | ||
|
|
||
| <Note> | ||
| This component should be used sparingly and only when absolutely necessary. While this component addresses specific accessibility issues ([1.4.10 Reflow](https://www.w3.org/WAI/WCAG22/Understanding/reflow.html), [1.4.12 Text Spacing](https://www.w3.org/WAI/WCAG22/Understanding/text-spacing.html)) that may arise from overflowing text, ellipsizing text can still present usability issues to users as additional interaction is needed to show the full text content. | ||
| </Note> | ||
|
|
||
| Some good examples of where it's appropriate to use this component: | ||
|
|
||
| - Long URL links | ||
| - Long user provided content or names | ||
| - Links that point to a page that contains non-truncated text | ||
|
|
||
| Truncation should **not** be used on headers, labels, error messages, or notifications. | ||
|
|
||
| ## Examples | ||
|
|
||
| ### One-line Ellipsis | ||
|
|
||
| ```jsx example | ||
| <TextEllipsis>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TextEllipsis> | ||
| ``` | ||
|
|
||
| If your component is a Button, Link, or some other kind of interactive element with a `tabIndex`, you _must_ provide your component as a Polymorphic component using the `as` prop to avoid nesting interactive elements: | ||
|
|
||
| ```jsx example | ||
| <TextEllipsis as={Link}>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TextEllipsis> | ||
| ``` | ||
|
|
||
| <Note> | ||
| When using the `as` property it is expected the element getting passed in is an interactive element. Passing an element that is not interactive will result in accessibility issues. | ||
| </Note> | ||
|
|
||
| ### Multi-line Ellipsis | ||
|
|
||
| ```jsx example | ||
| <TextEllipsis maxLines={2}> | ||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. | ||
| </TextEllipsis> | ||
| ``` | ||
|
|
||
| ## Props | ||
|
|
||
| <ComponentProps | ||
| children={{ | ||
| required: true, | ||
| type: 'string' | ||
| }} | ||
| refType="HTMLElement" | ||
| props={[ | ||
| { | ||
| name: 'maxLines', | ||
| type: 'number', | ||
| defaultValue: '1', | ||
| description: 'Sets the maximum number of display line before truncation.' | ||
| }, | ||
| { | ||
| name: 'as', | ||
| type: ['React.ElementType', 'string'], | ||
| description: 'A component to render the TextEllipsis as.', | ||
| }, | ||
| { | ||
| name: 'tooltipProps', | ||
| type: 'object', | ||
| description: 'Props to pass and configure the displayed tooltip.' | ||
| } | ||
| ]} | ||
| /> | ||
|
|
||
| ## Related Components | ||
|
|
||
| - [Tooltip](./Tooltip) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.