-
Notifications
You must be signed in to change notification settings - Fork 221
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore: Merge prerelease/minor into prerelease/major (#2824)
Co-authored-by: @NicholasBoll <[email protected]> Co-authored-by: manuel.carrera <[email protected]> Co-authored-by: @NicholasBoll <[email protected]> Co-authored-by: @mannycarrera4 <[email protected]> Co-authored-by: @snyk-bot <[email protected]> Co-authored-by: @williamjstanton <[email protected]> Co-authored-by: @mannycarrera4 <[email protected]> Co-authored-by: @josh-bagwell <[email protected]>
- Loading branch information
Showing
28 changed files
with
275 additions
and
150 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
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
46 changes: 46 additions & 0 deletions
46
modules/react/_examples/stories/examples/AriaLiveRegions/HiddenLiveRegion.tsx
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,46 @@ | ||
| import React from 'react'; | ||
|
|
||
| import {AccessibleHide, AriaLiveRegion} from '@workday/canvas-kit-react/common'; | ||
| import {PrimaryButton} from '@workday/canvas-kit-react/button'; | ||
| import {FormField} from '@workday/canvas-kit-preview-react/form-field'; | ||
| import {Flex} from '@workday/canvas-kit-react/layout'; | ||
| import {Text} from '@workday/canvas-kit-react/text'; | ||
| import {TextInput} from '@workday/canvas-kit-react/text-input'; | ||
| import {createStyles} from '@workday/canvas-kit-styling'; | ||
| import {system} from '@workday/canvas-tokens-web'; | ||
|
|
||
| let liveRegionStr = ''; | ||
|
|
||
| const flexStyles = createStyles({ | ||
| gap: system.space.x4, | ||
| alignItems: 'center', | ||
| }); | ||
|
|
||
| export const HiddenLiveRegion = () => { | ||
| const [message, setMessage] = React.useState(''); | ||
|
|
||
| function handleChange(e) { | ||
| setMessage(e.target.value); | ||
| } | ||
|
|
||
| function handleSendMessage(e) { | ||
| e.preventDefault(); | ||
| liveRegionStr = message; | ||
| setMessage(''); | ||
| } | ||
|
|
||
| return ( | ||
| <> | ||
| <Flex as="form" aria-label="Hidden Live Region" onSubmit={handleSendMessage} cs={flexStyles}> | ||
| <FormField> | ||
| <FormField.Label>Type your message:</FormField.Label> | ||
| <FormField.Input as={TextInput} onChange={handleChange} value={message} /> | ||
| </FormField> | ||
| <PrimaryButton type="submit">Send Message</PrimaryButton> | ||
| </Flex> | ||
| <AriaLiveRegion> | ||
| <Text as={AccessibleHide}>{liveRegionStr}</Text> | ||
| </AriaLiveRegion> | ||
| </> | ||
| ); | ||
| }; |
File renamed without changes.
31 changes: 31 additions & 0 deletions
31
modules/react/_examples/stories/examples/AriaLiveRegions/TextInputWithLiveError.tsx
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,31 @@ | ||
| import React from 'react'; | ||
| import {AriaLiveRegion, changeFocus} from '@workday/canvas-kit-react/common'; | ||
| import {FormField} from '@workday/canvas-kit-preview-react/form-field'; | ||
| import {PrimaryButton} from '@workday/canvas-kit-react/button'; | ||
| import {TextInput} from '@workday/canvas-kit-react/text-input'; | ||
| import {system} from '@workday/canvas-tokens-web'; | ||
| import {createStyles} from '@workday/canvas-kit-styling'; | ||
|
|
||
| const hintStyles = createStyles({ | ||
| height: system.space.x6, | ||
| }); | ||
| export const TextInputWithLiveError = () => { | ||
| const errMsg = 'Error: First name is required.'; | ||
| const [hasError, setHasError] = React.useState('no'); | ||
| const inputRef = React.useRef(null); | ||
| const handleBlur = e => setHasError(e.target.value.trim().length === 0 ? 'error' : 'no'); | ||
| const handleSubmit = () => hasError && changeFocus(inputRef.current); | ||
|
|
||
| return ( | ||
| <> | ||
| <FormField error={hasError === 'error' ? 'error' : undefined} isRequired={true}> | ||
| <FormField.Label>First Name:</FormField.Label> | ||
| <FormField.Input as={TextInput} onBlur={handleBlur} ref={inputRef} /> | ||
| <FormField.Hint cs={hintStyles}> | ||
| <AriaLiveRegion>{hasError === 'error' && errMsg}</AriaLiveRegion> | ||
| </FormField.Hint> | ||
| </FormField> | ||
| <PrimaryButton onClick={handleSubmit}>Continue</PrimaryButton> | ||
| </> | ||
| ); | ||
| }; |
61 changes: 61 additions & 0 deletions
61
modules/react/_examples/stories/examples/AriaLiveRegions/VisibleLiveRegion.tsx
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,61 @@ | ||
| import React from 'react'; | ||
|
|
||
| import {AriaLiveRegion} from '@workday/canvas-kit-react/common'; | ||
| import {PrimaryButton} from '@workday/canvas-kit-react/button'; | ||
| import {FormField} from '@workday/canvas-kit-preview-react/form-field'; | ||
| import {Flex} from '@workday/canvas-kit-react/layout'; | ||
| import {Text} from '@workday/canvas-kit-react/text'; | ||
| import {TextInput} from '@workday/canvas-kit-react/text-input'; | ||
| import {system, base} from '@workday/canvas-tokens-web'; | ||
| import {createStyles, px2rem, calc} from '@workday/canvas-kit-styling'; | ||
|
|
||
| const liveRegionStyle = createStyles({ | ||
| border: `${px2rem(1)} solid ${system.color.border.caution.default}`, | ||
| backgroundColor: system.color.bg.caution.default, | ||
| padding: system.space.x4, | ||
| display: 'block', | ||
| marginBlockStart: system.space.x4, | ||
| marginBlockEnd: system.space.x4, | ||
| width: calc.multiply(system.space.x16, 7), | ||
| }); | ||
|
|
||
| const flexGapStyles = createStyles({ | ||
| gap: system.space.x4, | ||
| alignItems: 'center', | ||
| }); | ||
|
|
||
| let liveRegionStr = 'This is an ARIA Live Region!'; | ||
|
|
||
| export const VisibleLiveRegion = () => { | ||
| const [message, setMessage] = React.useState(''); | ||
|
|
||
| function handleChange(e) { | ||
| setMessage(e.target.value); | ||
| } | ||
|
|
||
| function handleSendMessage(e) { | ||
| e.preventDefault(); | ||
| liveRegionStr = message; | ||
| setMessage(''); | ||
| } | ||
|
|
||
| return ( | ||
| <> | ||
| <AriaLiveRegion> | ||
| <Text cs={liveRegionStyle}>{liveRegionStr}</Text> | ||
| </AriaLiveRegion> | ||
| <Flex | ||
| as="form" | ||
| aria-label="Visible Live Region" | ||
| onSubmit={handleSendMessage} | ||
| cs={flexGapStyles} | ||
| > | ||
| <FormField> | ||
| <FormField.Label>Type your message:</FormField.Label> | ||
| <FormField.Input as={TextInput} onChange={handleChange} value={message} /> | ||
| </FormField> | ||
| <PrimaryButton type="submit">Send Message</PrimaryButton> | ||
| </Flex> | ||
| </> | ||
| ); | ||
| }; |
Oops, something went wrong.