From c9f34f1b7daa625f805f4c19eec9e7005f947b49 Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Wed, 2 Mar 2022 10:49:35 -0500 Subject: [PATCH 01/24] adds loading indicator to text inputs --- src/TextInput.tsx | 99 +++++++++++++++++++++---------- src/TextInputWithTokens.tsx | 41 ++++++++----- src/_TextInputInnerVisualSlot.tsx | 45 ++++++++++++++ 3 files changed, 141 insertions(+), 44 deletions(-) create mode 100644 src/_TextInputInnerVisualSlot.tsx diff --git a/src/TextInput.tsx b/src/TextInput.tsx index e647a3ac4dd..7a3ceead366 100644 --- a/src/TextInput.tsx +++ b/src/TextInput.tsx @@ -1,14 +1,31 @@ import classnames from 'classnames' -import React from 'react' +import React, {MouseEventHandler} from 'react' import {ComponentProps, Merge} from './utils/types' import UnstyledTextInput from './_UnstyledTextInput' import TextInputWrapper from './_TextInputWrapper' +import TextInputInnerVisualSlot from './_TextInputInnerVisualSlot' +import {useProvidedRefOrCreate} from './hooks' -type NonPassthroughProps = { +export type TextInputNonPassthroughProps = { className?: string /** @deprecated Use `leadingVisual` or `trailingVisual` prop instead */ icon?: React.ComponentType<{className?: string}> + /** Whether the to show a loading indicator in the input */ + isLoading?: boolean + /** + * Which position to render the loading indicator + * 'auto' (default): at the end of the input, unless a `leadingVisual` is passed. Then, it will render at the beginning + * 'leading': at the beginning of the input + * 'trailing': at the end of the input + **/ + loadingIndicatorPosition?: 'auto' | 'leading' | 'trailing' // TODO: come up with a shorter name + /** + * A visual that renders inside the input before the typing area + */ leadingVisual?: string | React.ComponentType<{className?: string}> + /** + * A visual that renders inside the input after the typing area + */ trailingVisual?: string | React.ComponentType<{className?: string}> } & Pick< ComponentProps, @@ -16,7 +33,10 @@ type NonPassthroughProps = { > // Note: using ComponentProps instead of ComponentPropsWithoutRef here would cause a type issue where `css` is a required prop. -type TextInputInternalProps = Merge, NonPassthroughProps> +type TextInputInternalProps = Merge< + React.ComponentPropsWithoutRef, + TextInputNonPassthroughProps +> // using forwardRef is important so that other components (ex. SelectMenu) can autofocus the input const TextInput = React.forwardRef( @@ -29,6 +49,8 @@ const TextInput = React.forwardRef( className, contrast, disabled, + isLoading, + loadingIndicatorPosition, validationStatus, sx: sxProp, size: sizeProp, @@ -42,44 +64,61 @@ const TextInput = React.forwardRef( }, ref ) => { + const inputRef = useProvidedRefOrCreate(ref as React.RefObject) // this class is necessary to style FilterSearch, plz no touchy! const wrapperClasses = classnames(className, 'TextInput-wrapper') + const showLeadingLoadingIndicator = + isLoading && + (loadingIndicatorPosition === 'leading' || Boolean(LeadingVisual && loadingIndicatorPosition !== 'trailing')) + const showTrailingLoadingIndicator = + isLoading && (loadingIndicatorPosition === 'trailing' || (loadingIndicatorPosition === 'auto' && !LeadingVisual)) + const focusInput: MouseEventHandler = () => { + inputRef.current?.focus() + } return ( - - {IconComponent && } - {LeadingVisual && ( - +
+ + {IconComponent && } + {typeof LeadingVisual === 'function' ? : LeadingVisual} - - )} - - {TrailingVisual && ( - + + + {typeof TrailingVisual === 'function' ? : TrailingVisual} - - )} - + + +
) } ) TextInput.defaultProps = { - type: 'text' + type: 'text', + loadingIndicatorPosition: 'auto' } TextInput.displayName = 'TextInput' diff --git a/src/TextInputWithTokens.tsx b/src/TextInputWithTokens.tsx index d3812497332..bb9497ba19a 100644 --- a/src/TextInputWithTokens.tsx +++ b/src/TextInputWithTokens.tsx @@ -1,6 +1,7 @@ import React, {FocusEventHandler, KeyboardEventHandler, MouseEventHandler, RefObject, useRef, useState} from 'react' import {omit} from '@styled-system/props' import {FocusKeys} from '@primer/behaviors' +import {isFocusable} from '@primer/behaviors/utils' import {useCombinedRefs} from './hooks/useCombinedRefs' import {useFocusZone} from './hooks/useFocusZone' import {ComponentProps} from './utils/types' @@ -12,7 +13,7 @@ import UnstyledTextInput from './_UnstyledTextInput' import TextInputWrapper, {textInputHorizPadding, TextInputSizes} from './_TextInputWrapper' import Box from './Box' import Text from './Text' -import {isFocusable} from '@primer/behaviors/utils' +import TextInputInnerVisualSlot from './_TextInputInnerVisualSlot' // eslint-disable-next-line @typescript-eslint/no-explicit-any type AnyReactComponent = React.ComponentType @@ -68,6 +69,8 @@ function TextInputWithTokensInnerComponent {IconComponent && !LeadingVisual && } - {LeadingVisual && !IconComponent && ( - - {typeof LeadingVisual === 'function' ? : LeadingVisual} - - )} + + {typeof LeadingVisual === 'function' ? : LeadingVisual} + } display="flex" @@ -352,11 +362,13 @@ function TextInputWithTokensInnerComponent ) : null} - {TrailingVisual && ( - - {typeof TrailingVisual === 'function' ? : TrailingVisual} - - )} + + {typeof TrailingVisual === 'function' ? : TrailingVisual} + ) } @@ -367,7 +379,8 @@ TextInputWithTokens.defaultProps = { tokenComponent: Token, size: 'extralarge', hideTokenRemoveButtons: false, - preventTokenWrapping: false + preventTokenWrapping: false, + loadingIndicatorPosition: 'auto' } TextInputWithTokens.displayName = 'TextInputWithTokens' diff --git a/src/_TextInputInnerVisualSlot.tsx b/src/_TextInputInnerVisualSlot.tsx new file mode 100644 index 00000000000..901bba3c134 --- /dev/null +++ b/src/_TextInputInnerVisualSlot.tsx @@ -0,0 +1,45 @@ +import React from 'react' +import {Box, Spinner} from '.' +import {TextInputNonPassthroughProps} from './TextInput' + +const TextInputInnerVisualSlot: React.FC<{ + /** Whether the input is expected to ever show a loading indicator */ + hasLoadingIndicator: boolean + /** Whether the to show the loading indicator */ + showLoadingIndicator: TextInputNonPassthroughProps['isLoading'] + /** Which side of this visual is being rendered */ + visualPosition: 'leading' | 'trailing' +}> = ({children, hasLoadingIndicator, showLoadingIndicator, visualPosition}) => { + if ((!children && !hasLoadingIndicator) || (visualPosition === 'leading' && !children && !showLoadingIndicator)) { + return null + } + + if (!hasLoadingIndicator) { + return {children} + } + + return ( + + + {children && {children}} + + + + ) +} + +export default TextInputInnerVisualSlot From 26976c74b2e088677da1fd1241391d3235bcc476 Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Wed, 2 Mar 2022 11:00:51 -0500 Subject: [PATCH 02/24] removes style debugging div --- src/TextInput.tsx | 66 +++++++++++++++++++++++------------------------ 1 file changed, 32 insertions(+), 34 deletions(-) diff --git a/src/TextInput.tsx b/src/TextInput.tsx index 7a3ceead366..53fe02830b8 100644 --- a/src/TextInput.tsx +++ b/src/TextInput.tsx @@ -77,41 +77,39 @@ const TextInput = React.forwardRef( } return ( -
- + {IconComponent && } + - {IconComponent && } - - {typeof LeadingVisual === 'function' ? : LeadingVisual} - - - - {typeof TrailingVisual === 'function' ? : TrailingVisual} - - -
+ {typeof LeadingVisual === 'function' ? : LeadingVisual} + + + + {typeof TrailingVisual === 'function' ? : TrailingVisual} + + ) } ) From 51570872befe6aa2c5268d5ce3b83c5235b0c218 Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Wed, 2 Mar 2022 13:05:10 -0500 Subject: [PATCH 03/24] updates stories and docs --- docs/content/TextInput.mdx | 194 +++++++++++++++++--- docs/content/TextInputWithTokens.mdx | 153 +++++++++++++++ src/stories/TextInput.stories.tsx | 166 +++++++++++++++-- src/stories/TextInputWithTokens.stories.tsx | 70 ++++++- 4 files changed, 534 insertions(+), 49 deletions(-) diff --git a/docs/content/TextInput.mdx b/docs/content/TextInput.mdx index e74cf6a3006..97cdff5c171 100644 --- a/docs/content/TextInput.mdx +++ b/docs/content/TextInput.mdx @@ -47,6 +47,113 @@ TextInput is a form component to add default styling to the native text input. ``` +## Text Input with visuals and loading indicators + +```javascript live noinline +const WithIconAndLoadingIndicator = () => { + const [isLoading, setIsLoading] = React.useState(true) + + const toggleLoadingState = () => { + setIsLoading(!isLoading) + } + + return ( + <> + + + + +

No visual

+ + + + + + + + + + +

Leading visual

+ + + + + + + + + + +

Trailing visual

+ + + + + + + + + + +

Both visuals

+ + + + + + + + + + + ) +} + +render() +``` + ## Text Input with error and warning states ```jsx live @@ -91,11 +198,7 @@ TextInput is a form component to add default styling to the native text input. name="block" type="boolean" defaultValue="false" - description={ - <> - Creates a full width input element - - } + description={<>Creates a full width input element} /> - - -string | React.ComponentType} - description="Visual positioned on the left edge inside the input" -/> -string | React.ComponentType} - description="Visual positioned on the right edge inside the input" -/> - - - - + + + ( + <> +
Which position to render the loading indicator
+
    +
  • + 'auto' (default): at the end of the input, unless a `leadingVisual` is passed. Then, it will render at the + beginning +
    • +
  • 'leading': at the beginning of the input
    • +
  • 'trailing': at the end of the input
    • +
+ + )} + /> + string | React.ComponentType} + description={() => ( + <> +
Which position to render the loading indicator
+
    +
  • + 'auto' (default): at the end of the input, unless a `leadingVisual` is passed. Then, it will render at the + beginning +
    • +
  • 'leading': at the beginning of the input
    • +
  • 'trailing': at the end of the input
    • +
+ + )} + /> + string | React.ComponentType} + description="Visual positioned on the right edge inside the input" + /> + + { render(LeadingVisualExample) ``` +## With visuals and loading indicators + +```javascript live noinline +const WithIconAndLoadingIndicator = () => { + const [dates, setDates] = React.useState([ + {text: '01 Jan', id: 0}, + {text: '01 Feb', id: 1}, + {text: '01 Mar', id: 2} + ]) + const onDateRemove = tokenId => { + setDates(dates.filter(token => token.id !== tokenId)) + } + + const [isLoading, setIsLoading] = React.useState(true) + const toggleLoadingState = () => { + setIsLoading(!isLoading) + } + + return ( + <> + + + + +

No visual

+ + + + + + + + + + +

Leading visual

+ + + + + + + + + + +

Trailing visual

+ + + + + + + + + + +

Both visuals

+ + + + + + + + + + + ) +} + +render() +``` + ## Props diff --git a/src/stories/TextInput.stories.tsx b/src/stories/TextInput.stories.tsx index 02fdd3d92f5..42200e5c7af 100644 --- a/src/stories/TextInput.stories.tsx +++ b/src/stories/TextInput.stories.tsx @@ -1,9 +1,9 @@ import React, {useState, ReactNode} from 'react' import {Meta} from '@storybook/react' -import {BaseStyles, Box, ThemeProvider, Text} from '..' +import {BaseStyles, Box, ThemeProvider, Text, FormControl} from '..' import TextInput, {TextInputProps} from '../TextInput' -import {CheckIcon} from '@primer/octicons-react' +import {CalendarIcon, CheckIcon} from '@primer/octicons-react' export default { title: 'Forms/Text Input', @@ -39,6 +39,21 @@ export default { type: 'boolean' } }, + isLoading: { + name: 'isLoading', + defaultValue: false, + control: { + type: 'boolean' + } + }, + loadingIndicatorPosition: { + name: 'loadingIndicatorPosition', + defaultValue: 'auto', + options: ['auto', 'leading', 'trailing'], + control: { + type: 'radio' + } + }, variant: { name: 'Variants', options: ['small', 'medium', 'large'], @@ -65,29 +80,107 @@ const Label = ({htmlFor, children}: {htmlFor: string; children: ReactNode}) => ( ) -export const Default = (args: TextInputProps) => { - const [value, setValue] = useState('') +export const Default = () => { + const [isLoading, setIsLoading] = useState(false) - const handleChange = (event: React.ChangeEvent) => { - setValue(event.target.value) + const toggleLoadingState = () => { + setIsLoading(!isLoading) } - const inputId = 'basic-text-input' - return ( -
-
-
- -
-
- -
-
-
+ <> + + +

No visual

+ + + + + + + + + + +

Leading visual

+ + + + + + + + + + +

Trailing visual

+ + + + + + + + + + +

Both visuals

+ + + + + + + + } + trailingVisual={() => } + isLoading={isLoading} + loadingIndicatorPosition="trailing" + value="trailing" + /> + + ) } +Default.parameters = {controls: {exclude: ['isLoading', 'loadingIndicatorPosition']}} + export const WithLeadingVisual = (args: TextInputProps) => { const [value, setValue] = useState('') @@ -138,6 +231,43 @@ export const WithTrailingIcon = (args: TextInputProps) => { ) } +export const WithLoadingIndicator = (args: TextInputProps) => { + const [isLoading, setIsLoading] = useState(true) + + const toggleLoadingState = () => { + setIsLoading(!isLoading) + } + + return ( +
+ + + + + + + No visual + + + + + Leading visual + + + + + Both visuals + + + +
+ ) +} + +WithLoadingIndicator.parameters = {controls: {exclude: ['isLoading']}} + export const ContrastTextInput = (args: TextInputProps) => { const [value, setValue] = useState('') diff --git a/src/stories/TextInputWithTokens.stories.tsx b/src/stories/TextInputWithTokens.stories.tsx index 88359ee0d97..32442a61eb6 100644 --- a/src/stories/TextInputWithTokens.stories.tsx +++ b/src/stories/TextInputWithTokens.stories.tsx @@ -2,7 +2,7 @@ import React, {useCallback, useState} from 'react' import {Meta} from '@storybook/react' import {CheckIcon, NumberIcon} from '@primer/octicons-react' -import {BaseStyles, Box, ThemeProvider} from '..' +import {BaseStyles, Box, FormControl, ThemeProvider} from '..' import TextInputWithTokens, {TextInputWithTokensProps} from '../TextInputWithTokens' import IssueLabelToken from '../Token/IssueLabelToken' @@ -47,6 +47,21 @@ export default { type: 'boolean' } }, + isLoading: { + name: 'isLoading', + defaultValue: false, + control: { + type: 'boolean' + } + }, + loadingIndicatorPosition: { + name: 'loadingIndicatorPosition', + defaultValue: 'auto', + options: ['auto', 'leading', 'trailing'], + control: { + type: 'radio' + } + }, size: { name: 'size (token size)', defaultValue: 'extralarge', @@ -121,6 +136,59 @@ export const WithTrailingVisual = (args: TextInputWithTokensProps) => { WithTrailingVisual.parameters = {controls: {exclude: [excludedControls, 'maxHeight']}} +export const WithLoadingIndicator = (args: TextInputWithTokensProps) => { + const [tokens, setTokens] = useState([...mockTokens].slice(0, 3)) + const [isLoading, setIsLoading] = useState(true) + const onTokenRemove: (tokenId: string | number) => void = tokenId => { + setTokens(tokens.filter(token => token.id !== tokenId)) + } + const toggleLoadingState = () => { + setIsLoading(!isLoading) + } + + return ( +
+ + + + + + + No visual + + + + + Leading visual + + + + + Both visuals + + + +
+ ) +} + +WithLoadingIndicator.parameters = {controls: {exclude: [excludedControls, 'maxHeight', 'isLoading']}} + export const UsingIssueLabelTokens = (args: TextInputWithTokensProps) => { const [tokens, setTokens] = useState([ {text: 'enhancement', id: 1, fillColor: '#a2eeef'}, From 258ed6c13fecd41a60af2aa8a78b02b10fb9768c Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Wed, 2 Mar 2022 13:51:25 -0500 Subject: [PATCH 04/24] updates tests --- src/__tests__/TextInput.test.tsx | 60 +- src/__tests__/TextInputWithTokens.test.tsx | 99 + .../__snapshots__/Autocomplete.test.tsx.snap | 7 + .../__snapshots__/TextInput.test.tsx.snap | 12 + .../TextInputWithTokens.test.tsx.snap | 9520 +++++++++++++++++ 5 files changed, 9697 insertions(+), 1 deletion(-) diff --git a/src/__tests__/TextInput.test.tsx b/src/__tests__/TextInput.test.tsx index 3e8b071e3c4..977d9e38440 100644 --- a/src/__tests__/TextInput.test.tsx +++ b/src/__tests__/TextInput.test.tsx @@ -1,7 +1,7 @@ import React from 'react' import {TextInput} from '..' import {render, mount, behavesAsComponent, checkExports} from '../utils/testing' -import {render as HTMLRender, cleanup} from '@testing-library/react' +import {render as HTMLRender, cleanup, fireEvent} from '@testing-library/react' import {axe, toHaveNoViolations} from 'jest-axe' import 'babel-polyfill' import {SearchIcon} from '@primer/octicons-react' @@ -61,6 +61,64 @@ describe('TextInput', () => { expect(render()).toMatchSnapshot() }) + it('focuses the text input if you do not click the input element', () => { + const {container, getByLabelText} = HTMLRender( + <> + {/* eslint-disable-next-line jsx-a11y/label-has-for */} + + + + ) + + const icon = container.querySelector('svg')! + fireEvent.click(icon) + + expect(getByLabelText('Search')).toEqual(document.activeElement) + }) + + // it('renders with a loading indicator', () => { + // expect( + // render( + // <> + // + + // + + // + + // + + // + + // + + // + + // + + // + + // + + // + + // + // + // ) + // ).toMatchSnapshot() + // }) + it('should call onChange prop with input value', () => { const onChangeMock = jest.fn() const component = mount() diff --git a/src/__tests__/TextInputWithTokens.test.tsx b/src/__tests__/TextInputWithTokens.test.tsx index 79cf68a2bad..b8c998f8bc4 100644 --- a/src/__tests__/TextInputWithTokens.test.tsx +++ b/src/__tests__/TextInputWithTokens.test.tsx @@ -109,6 +109,105 @@ describe('TextInputWithTokens', () => { ).toMatchSnapshot() }) + it('renders with a loading indicator', () => { + const onRemoveMock = jest.fn() + expect( + render( + <> + + + + + + + + + + + + + + + + + + + + + + + + + ) + ).toMatchSnapshot() + }) + it('focuses the previous token when keying ArrowLeft', () => { const onRemoveMock = jest.fn() const {getByLabelText, getByText} = HTMLRender( diff --git a/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap b/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap index ed74f706514..f664497098b 100644 --- a/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap +++ b/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap @@ -95,6 +95,7 @@ Array [ `; +exports[`TextInputWithTokens renders with a loading indicator 1`] = ` +Array [ + .c1 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-left: -0.25rem; + margin-bottom: -0.25rem; + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; +} + +.c1 > * { + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + margin-left: 0.25rem; + margin-bottom: 0.25rem; +} + +.c2 { + -webkit-order: 1; + -ms-flex-order: 1; + order: 1; + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; +} + +.c7 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + position: relative; +} + +.c3 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; + height: 100%; +} + +.c3:focus { + outline: 0; +} + +.c0 { + font-size: 14px; + line-height: 20px; + color: #24292f; + vertical-align: middle; + background-color: #ffffff; + border: 1px solid #d0d7de; + border-radius: 6px; + outline: none; + box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); + cursor: text; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: stretch; + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; + min-height: 32px; + padding-left: 12px; + padding-top: calc(12px / 2); + padding-bottom: calc(12px / 2); + background-repeat: no-repeat; + background-position: right 8px center; + padding-left: 0; + padding-right: 12px; + padding-left: 12px; + padding-top: calc(12px / 2); + padding-bottom: calc(12px / 2); +} + +.c0::-webkit-input-placeholder { + color: #6e7781; +} + +.c0::-moz-placeholder { + color: #6e7781; +} + +.c0:-ms-input-placeholder { + color: #6e7781; +} + +.c0::placeholder { + color: #6e7781; +} + +.c0:focus-within { + border-color: #0969da; + box-shadow: 0 0 0 3px rgba(9,105,218,0.3); +} + +.c0 > textarea { + padding: 12px; +} + +.c0 >:not(:last-child) { + margin-right: 8px; +} + +.c0 .TextInput-icon { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + color: #57606a; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; +} + +.c0 > input, +.c0 > select { + padding-left: 12px; + padding-right: 0; +} + +.c8 { + -webkit-animation: rotate-keyframes 1s linear infinite; + animation: rotate-keyframes 1s linear infinite; + visibility: visible; +} + +.c6 { + background-color: transparent; + font-family: inherit; + color: currentColor; + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + -webkit-text-decoration: none; + text-decoration: none; + padding: 0; + -webkit-transform: translate(1px,-1px); + -ms-transform: translate(1px,-1px); + transform: translate(1px,-1px); + -webkit-align-self: baseline; + -ms-flex-item-align: baseline; + align-self: baseline; + border: 0; + border-radius: 999px; + margin-left: 8px; + height: 32px; + width: 32px; + position: relative; + z-index: 1; +} + +.c6:hover, +.c6:focus { + background-color: rgba(175,184,193,0.2); +} + +.c6:active { + background-color: rgba(234,238,242,0.5); +} + +.c5 { + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + background: transparent; + border: none; + color: inherit; + font: inherit; + margin: 0; + overflow: visible; + padding: 0; + width: auto; + -webkit-font-smoothing: inherit; + -moz-osx-font-smoothing: inherit; + -webkit-appearance: none; + line-height: 1; + color: currentColor; + -webkit-text-decoration: none; + text-decoration: none; +} + +.c5:is(a,button,[tabIndex='0']) { + cursor: pointer; +} + +.c5:is(a,button,[tabIndex='0']):after { + content: ''; + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; +} + +.c4 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + border-radius: 999px; + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + font-weight: 600; + font-family: inherit; + -webkit-text-decoration: none; + text-decoration: none; + white-space: nowrap; + font-size: 14px; + height: 32px; + line-height: 32px; + padding-left: 16px; + padding-right: 16px; + padding-top: 0; + padding-bottom: 0; + background-color: rgba(234,238,242,0.5); + border-color: rgba(27,31,36,0.15); + border-style: solid; + border-width: 1px; + color: #57606a; + max-width: 100%; + padding-right: 0; + position: relative; +} + +.c4:hover { + background-color: rgba(175,184,193,0.2); + color: #24292f; +} + +@media (min-width:768px) { + .c0 { + font-size: 14px; + } +} + + +
+
+ +
+ + + zero + + + + + + one + + + + + + two + + + + + + three + + + + + + four + + + + + + five + + + + + + six + + + + + + seven + + + +
+ +
+ + + + +
+ + , + .c3 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-left: -0.25rem; + margin-bottom: -0.25rem; + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; +} + +.c3 > * { + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + margin-left: 0.25rem; + margin-bottom: 0.25rem; +} + +.c4 { + -webkit-order: 1; + -ms-flex-order: 1; + order: 1; + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; +} + +.c1 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + position: relative; +} + +.c5 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; + height: 100%; +} + +.c5:focus { + outline: 0; +} + +.c0 { + font-size: 14px; + line-height: 20px; + color: #24292f; + vertical-align: middle; + background-color: #ffffff; + border: 1px solid #d0d7de; + border-radius: 6px; + outline: none; + box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); + cursor: text; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: stretch; + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; + min-height: 32px; + padding-left: 12px; + padding-top: calc(12px / 2); + padding-bottom: calc(12px / 2); + background-repeat: no-repeat; + background-position: right 8px center; + padding-left: 12px; + padding-right: 0; + padding-left: 12px; + padding-top: calc(12px / 2); + padding-bottom: calc(12px / 2); +} + +.c0::-webkit-input-placeholder { + color: #6e7781; +} + +.c0::-moz-placeholder { + color: #6e7781; +} + +.c0:-ms-input-placeholder { + color: #6e7781; +} + +.c0::placeholder { + color: #6e7781; +} + +.c0:focus-within { + border-color: #0969da; + box-shadow: 0 0 0 3px rgba(9,105,218,0.3); +} + +.c0 > textarea { + padding: 12px; +} + +.c0 >:not(:last-child) { + margin-right: 8px; +} + +.c0 .TextInput-icon { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + color: #57606a; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; +} + +.c0 > input, +.c0 > select { + padding-left: 0; + padding-right: 12px; +} + +.c2 { + -webkit-animation: rotate-keyframes 1s linear infinite; + animation: rotate-keyframes 1s linear infinite; + visibility: visible; +} + +.c9 { + -webkit-animation: rotate-keyframes 1s linear infinite; + animation: rotate-keyframes 1s linear infinite; + visibility: hidden; +} + +.c8 { + background-color: transparent; + font-family: inherit; + color: currentColor; + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + -webkit-text-decoration: none; + text-decoration: none; + padding: 0; + -webkit-transform: translate(1px,-1px); + -ms-transform: translate(1px,-1px); + transform: translate(1px,-1px); + -webkit-align-self: baseline; + -ms-flex-item-align: baseline; + align-self: baseline; + border: 0; + border-radius: 999px; + margin-left: 8px; + height: 32px; + width: 32px; + position: relative; + z-index: 1; +} + +.c8:hover, +.c8:focus { + background-color: rgba(175,184,193,0.2); +} + +.c8:active { + background-color: rgba(234,238,242,0.5); +} + +.c7 { + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + background: transparent; + border: none; + color: inherit; + font: inherit; + margin: 0; + overflow: visible; + padding: 0; + width: auto; + -webkit-font-smoothing: inherit; + -moz-osx-font-smoothing: inherit; + -webkit-appearance: none; + line-height: 1; + color: currentColor; + -webkit-text-decoration: none; + text-decoration: none; +} + +.c7:is(a,button,[tabIndex='0']) { + cursor: pointer; +} + +.c7:is(a,button,[tabIndex='0']):after { + content: ''; + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; +} + +.c6 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + border-radius: 999px; + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + font-weight: 600; + font-family: inherit; + -webkit-text-decoration: none; + text-decoration: none; + white-space: nowrap; + font-size: 14px; + height: 32px; + line-height: 32px; + padding-left: 16px; + padding-right: 16px; + padding-top: 0; + padding-bottom: 0; + background-color: rgba(234,238,242,0.5); + border-color: rgba(27,31,36,0.15); + border-style: solid; + border-width: 1px; + color: #57606a; + max-width: 100%; + padding-right: 0; + position: relative; +} + +.c6:hover { + background-color: rgba(175,184,193,0.2); + color: #24292f; +} + +@media (min-width:768px) { + .c0 { + font-size: 14px; + } +} + + + +
+ + + + +
+ +
+
+ +
+ + + zero + + + + + + one + + + + + + two + + + + + + three + + + + + + four + + + + + + five + + + + + + six + + + + + + seven + + + +
+ +
+ + + + +
+ + , + .c1 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-left: -0.25rem; + margin-bottom: -0.25rem; + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; +} + +.c1 > * { + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + margin-left: 0.25rem; + margin-bottom: 0.25rem; +} + +.c2 { + -webkit-order: 1; + -ms-flex-order: 1; + order: 1; + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; +} + +.c7 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + position: relative; +} + +.c3 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; + height: 100%; +} + +.c3:focus { + outline: 0; +} + +.c0 { + font-size: 14px; + line-height: 20px; + color: #24292f; + vertical-align: middle; + background-color: #ffffff; + border: 1px solid #d0d7de; + border-radius: 6px; + outline: none; + box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); + cursor: text; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: stretch; + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; + min-height: 32px; + padding-left: 12px; + padding-top: calc(12px / 2); + padding-bottom: calc(12px / 2); + background-repeat: no-repeat; + background-position: right 8px center; + padding-left: 0; + padding-right: 12px; + padding-left: 12px; + padding-top: calc(12px / 2); + padding-bottom: calc(12px / 2); +} + +.c0::-webkit-input-placeholder { + color: #6e7781; +} + +.c0::-moz-placeholder { + color: #6e7781; +} + +.c0:-ms-input-placeholder { + color: #6e7781; +} + +.c0::placeholder { + color: #6e7781; +} + +.c0:focus-within { + border-color: #0969da; + box-shadow: 0 0 0 3px rgba(9,105,218,0.3); +} + +.c0 > textarea { + padding: 12px; +} + +.c0 >:not(:last-child) { + margin-right: 8px; +} + +.c0 .TextInput-icon { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + color: #57606a; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; +} + +.c0 > input, +.c0 > select { + padding-left: 12px; + padding-right: 0; +} + +.c8 { + -webkit-animation: rotate-keyframes 1s linear infinite; + animation: rotate-keyframes 1s linear infinite; + visibility: visible; +} + +.c6 { + background-color: transparent; + font-family: inherit; + color: currentColor; + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + -webkit-text-decoration: none; + text-decoration: none; + padding: 0; + -webkit-transform: translate(1px,-1px); + -ms-transform: translate(1px,-1px); + transform: translate(1px,-1px); + -webkit-align-self: baseline; + -ms-flex-item-align: baseline; + align-self: baseline; + border: 0; + border-radius: 999px; + margin-left: 8px; + height: 32px; + width: 32px; + position: relative; + z-index: 1; +} + +.c6:hover, +.c6:focus { + background-color: rgba(175,184,193,0.2); +} + +.c6:active { + background-color: rgba(234,238,242,0.5); +} + +.c5 { + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + background: transparent; + border: none; + color: inherit; + font: inherit; + margin: 0; + overflow: visible; + padding: 0; + width: auto; + -webkit-font-smoothing: inherit; + -moz-osx-font-smoothing: inherit; + -webkit-appearance: none; + line-height: 1; + color: currentColor; + -webkit-text-decoration: none; + text-decoration: none; +} + +.c5:is(a,button,[tabIndex='0']) { + cursor: pointer; +} + +.c5:is(a,button,[tabIndex='0']):after { + content: ''; + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; +} + +.c4 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + border-radius: 999px; + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + font-weight: 600; + font-family: inherit; + -webkit-text-decoration: none; + text-decoration: none; + white-space: nowrap; + font-size: 14px; + height: 32px; + line-height: 32px; + padding-left: 16px; + padding-right: 16px; + padding-top: 0; + padding-bottom: 0; + background-color: rgba(234,238,242,0.5); + border-color: rgba(27,31,36,0.15); + border-style: solid; + border-width: 1px; + color: #57606a; + max-width: 100%; + padding-right: 0; + position: relative; +} + +.c4:hover { + background-color: rgba(175,184,193,0.2); + color: #24292f; +} + +@media (min-width:768px) { + .c0 { + font-size: 14px; + } +} + + +
+
+ +
+ + + zero + + + + + + one + + + + + + two + + + + + + three + + + + + + four + + + + + + five + + + + + + six + + + + + + seven + + + +
+ +
+ + + + +
+ + , + .c4 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-left: -0.25rem; + margin-bottom: -0.25rem; + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; +} + +.c4 > * { + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + margin-left: 0.25rem; + margin-bottom: 0.25rem; +} + +.c5 { + -webkit-order: 1; + -ms-flex-order: 1; + order: 1; + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; +} + +.c1 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + position: relative; +} + +.c2 { + visibility: hidden; +} + +.c6 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; + height: 100%; +} + +.c6:focus { + outline: 0; +} + +.c0 { + font-size: 14px; + line-height: 20px; + color: #24292f; + vertical-align: middle; + background-color: #ffffff; + border: 1px solid #d0d7de; + border-radius: 6px; + outline: none; + box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); + cursor: text; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: stretch; + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; + min-height: 32px; + padding-left: 12px; + padding-top: calc(12px / 2); + padding-bottom: calc(12px / 2); + background-repeat: no-repeat; + background-position: right 8px center; + padding-left: 12px; + padding-right: 0; + padding-left: 12px; + padding-top: calc(12px / 2); + padding-bottom: calc(12px / 2); +} + +.c0::-webkit-input-placeholder { + color: #6e7781; +} + +.c0::-moz-placeholder { + color: #6e7781; +} + +.c0:-ms-input-placeholder { + color: #6e7781; +} + +.c0::placeholder { + color: #6e7781; +} + +.c0:focus-within { + border-color: #0969da; + box-shadow: 0 0 0 3px rgba(9,105,218,0.3); +} + +.c0 > textarea { + padding: 12px; +} + +.c0 >:not(:last-child) { + margin-right: 8px; +} + +.c0 .TextInput-icon { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + color: #57606a; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; +} + +.c0 > input, +.c0 > select { + padding-left: 0; + padding-right: 12px; +} + +.c10 { + -webkit-animation: rotate-keyframes 1s linear infinite; + animation: rotate-keyframes 1s linear infinite; + visibility: hidden; +} + +.c3 { + -webkit-animation: rotate-keyframes 1s linear infinite; + animation: rotate-keyframes 1s linear infinite; + position: absolute; + top: 0; + height: 100%; + max-width: 100%; + visibility: visible; + left: 0; +} + +.c9 { + background-color: transparent; + font-family: inherit; + color: currentColor; + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + -webkit-text-decoration: none; + text-decoration: none; + padding: 0; + -webkit-transform: translate(1px,-1px); + -ms-transform: translate(1px,-1px); + transform: translate(1px,-1px); + -webkit-align-self: baseline; + -ms-flex-item-align: baseline; + align-self: baseline; + border: 0; + border-radius: 999px; + margin-left: 8px; + height: 32px; + width: 32px; + position: relative; + z-index: 1; +} + +.c9:hover, +.c9:focus { + background-color: rgba(175,184,193,0.2); +} + +.c9:active { + background-color: rgba(234,238,242,0.5); +} + +.c8 { + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + background: transparent; + border: none; + color: inherit; + font: inherit; + margin: 0; + overflow: visible; + padding: 0; + width: auto; + -webkit-font-smoothing: inherit; + -moz-osx-font-smoothing: inherit; + -webkit-appearance: none; + line-height: 1; + color: currentColor; + -webkit-text-decoration: none; + text-decoration: none; +} + +.c8:is(a,button,[tabIndex='0']) { + cursor: pointer; +} + +.c8:is(a,button,[tabIndex='0']):after { + content: ''; + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; +} + +.c7 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + border-radius: 999px; + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + font-weight: 600; + font-family: inherit; + -webkit-text-decoration: none; + text-decoration: none; + white-space: nowrap; + font-size: 14px; + height: 32px; + line-height: 32px; + padding-left: 16px; + padding-right: 16px; + padding-top: 0; + padding-bottom: 0; + background-color: rgba(234,238,242,0.5); + border-color: rgba(27,31,36,0.15); + border-style: solid; + border-width: 1px; + color: #57606a; + max-width: 100%; + padding-right: 0; + position: relative; +} + +.c7:hover { + background-color: rgba(175,184,193,0.2); + color: #24292f; +} + +@media (min-width:768px) { + .c0 { + font-size: 14px; + } +} + + + +
+
+
+ + + + +
+ +
+
+ +
+ + + zero + + + + + + one + + + + + + two + + + + + + three + + + + + + four + + + + + + five + + + + + + six + + + + + + seven + + + +
+ +
+ + + + +
+ + , + .c4 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-left: -0.25rem; + margin-bottom: -0.25rem; + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; +} + +.c4 > * { + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + margin-left: 0.25rem; + margin-bottom: 0.25rem; +} + +.c5 { + -webkit-order: 1; + -ms-flex-order: 1; + order: 1; + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; +} + +.c1 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + position: relative; +} + +.c2 { + visibility: hidden; +} + +.c6 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; + height: 100%; +} + +.c6:focus { + outline: 0; +} + +.c0 { + font-size: 14px; + line-height: 20px; + color: #24292f; + vertical-align: middle; + background-color: #ffffff; + border: 1px solid #d0d7de; + border-radius: 6px; + outline: none; + box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); + cursor: text; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: stretch; + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; + min-height: 32px; + padding-left: 12px; + padding-top: calc(12px / 2); + padding-bottom: calc(12px / 2); + background-repeat: no-repeat; + background-position: right 8px center; + padding-left: 12px; + padding-right: 0; + padding-left: 12px; + padding-top: calc(12px / 2); + padding-bottom: calc(12px / 2); +} + +.c0::-webkit-input-placeholder { + color: #6e7781; +} + +.c0::-moz-placeholder { + color: #6e7781; +} + +.c0:-ms-input-placeholder { + color: #6e7781; +} + +.c0::placeholder { + color: #6e7781; +} + +.c0:focus-within { + border-color: #0969da; + box-shadow: 0 0 0 3px rgba(9,105,218,0.3); +} + +.c0 > textarea { + padding: 12px; +} + +.c0 >:not(:last-child) { + margin-right: 8px; +} + +.c0 .TextInput-icon { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + color: #57606a; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; +} + +.c0 > input, +.c0 > select { + padding-left: 0; + padding-right: 12px; +} + +.c10 { + -webkit-animation: rotate-keyframes 1s linear infinite; + animation: rotate-keyframes 1s linear infinite; + visibility: hidden; +} + +.c3 { + -webkit-animation: rotate-keyframes 1s linear infinite; + animation: rotate-keyframes 1s linear infinite; + position: absolute; + top: 0; + height: 100%; + max-width: 100%; + visibility: visible; + left: 0; +} + +.c9 { + background-color: transparent; + font-family: inherit; + color: currentColor; + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + -webkit-text-decoration: none; + text-decoration: none; + padding: 0; + -webkit-transform: translate(1px,-1px); + -ms-transform: translate(1px,-1px); + transform: translate(1px,-1px); + -webkit-align-self: baseline; + -ms-flex-item-align: baseline; + align-self: baseline; + border: 0; + border-radius: 999px; + margin-left: 8px; + height: 32px; + width: 32px; + position: relative; + z-index: 1; +} + +.c9:hover, +.c9:focus { + background-color: rgba(175,184,193,0.2); +} + +.c9:active { + background-color: rgba(234,238,242,0.5); +} + +.c8 { + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + background: transparent; + border: none; + color: inherit; + font: inherit; + margin: 0; + overflow: visible; + padding: 0; + width: auto; + -webkit-font-smoothing: inherit; + -moz-osx-font-smoothing: inherit; + -webkit-appearance: none; + line-height: 1; + color: currentColor; + -webkit-text-decoration: none; + text-decoration: none; +} + +.c8:is(a,button,[tabIndex='0']) { + cursor: pointer; +} + +.c8:is(a,button,[tabIndex='0']):after { + content: ''; + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; +} + +.c7 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + border-radius: 999px; + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + font-weight: 600; + font-family: inherit; + -webkit-text-decoration: none; + text-decoration: none; + white-space: nowrap; + font-size: 14px; + height: 32px; + line-height: 32px; + padding-left: 16px; + padding-right: 16px; + padding-top: 0; + padding-bottom: 0; + background-color: rgba(234,238,242,0.5); + border-color: rgba(27,31,36,0.15); + border-style: solid; + border-width: 1px; + color: #57606a; + max-width: 100%; + padding-right: 0; + position: relative; +} + +.c7:hover { + background-color: rgba(175,184,193,0.2); + color: #24292f; +} + +@media (min-width:768px) { + .c0 { + font-size: 14px; + } +} + + + +
+
+
+ + + + +
+ +
+
+ +
+ + + zero + + + + + + one + + + + + + two + + + + + + three + + + + + + four + + + + + + five + + + + + + six + + + + + + seven + + + +
+ +
+ + + + +
+ + , + .c4 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-left: -0.25rem; + margin-bottom: -0.25rem; + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; +} + +.c4 > * { + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + margin-left: 0.25rem; + margin-bottom: 0.25rem; +} + +.c5 { + -webkit-order: 1; + -ms-flex-order: 1; + order: 1; + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; +} + +.c1 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + position: relative; +} + +.c2 { + visibility: visible; +} + +.c6 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; + height: 100%; +} + +.c6:focus { + outline: 0; +} + +.c0 { + font-size: 14px; + line-height: 20px; + color: #24292f; + vertical-align: middle; + background-color: #ffffff; + border: 1px solid #d0d7de; + border-radius: 6px; + outline: none; + box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); + cursor: text; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: stretch; + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; + min-height: 32px; + padding-left: 12px; + padding-top: calc(12px / 2); + padding-bottom: calc(12px / 2); + background-repeat: no-repeat; + background-position: right 8px center; + padding-left: 12px; + padding-right: 12px; + padding-left: 12px; + padding-top: calc(12px / 2); + padding-bottom: calc(12px / 2); +} + +.c0::-webkit-input-placeholder { + color: #6e7781; +} + +.c0::-moz-placeholder { + color: #6e7781; +} + +.c0:-ms-input-placeholder { + color: #6e7781; +} + +.c0::placeholder { + color: #6e7781; +} + +.c0:focus-within { + border-color: #0969da; + box-shadow: 0 0 0 3px rgba(9,105,218,0.3); +} + +.c0 > textarea { + padding: 12px; +} + +.c0 >:not(:last-child) { + margin-right: 8px; +} + +.c0 .TextInput-icon { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + color: #57606a; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; +} + +.c0 > input, +.c0 > select { + padding-left: 0; + padding-right: 0; +} + +.c10 { + -webkit-animation: rotate-keyframes 1s linear infinite; + animation: rotate-keyframes 1s linear infinite; + visibility: visible; +} + +.c3 { + -webkit-animation: rotate-keyframes 1s linear infinite; + animation: rotate-keyframes 1s linear infinite; + position: absolute; + top: 0; + height: 100%; + max-width: 100%; + visibility: hidden; + left: 0; +} + +.c9 { + background-color: transparent; + font-family: inherit; + color: currentColor; + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + -webkit-text-decoration: none; + text-decoration: none; + padding: 0; + -webkit-transform: translate(1px,-1px); + -ms-transform: translate(1px,-1px); + transform: translate(1px,-1px); + -webkit-align-self: baseline; + -ms-flex-item-align: baseline; + align-self: baseline; + border: 0; + border-radius: 999px; + margin-left: 8px; + height: 32px; + width: 32px; + position: relative; + z-index: 1; +} + +.c9:hover, +.c9:focus { + background-color: rgba(175,184,193,0.2); +} + +.c9:active { + background-color: rgba(234,238,242,0.5); +} + +.c8 { + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + background: transparent; + border: none; + color: inherit; + font: inherit; + margin: 0; + overflow: visible; + padding: 0; + width: auto; + -webkit-font-smoothing: inherit; + -moz-osx-font-smoothing: inherit; + -webkit-appearance: none; + line-height: 1; + color: currentColor; + -webkit-text-decoration: none; + text-decoration: none; +} + +.c8:is(a,button,[tabIndex='0']) { + cursor: pointer; +} + +.c8:is(a,button,[tabIndex='0']):after { + content: ''; + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; +} + +.c7 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + border-radius: 999px; + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + font-weight: 600; + font-family: inherit; + -webkit-text-decoration: none; + text-decoration: none; + white-space: nowrap; + font-size: 14px; + height: 32px; + line-height: 32px; + padding-left: 16px; + padding-right: 16px; + padding-top: 0; + padding-bottom: 0; + background-color: rgba(234,238,242,0.5); + border-color: rgba(27,31,36,0.15); + border-style: solid; + border-width: 1px; + color: #57606a; + max-width: 100%; + padding-right: 0; + position: relative; +} + +.c7:hover { + background-color: rgba(175,184,193,0.2); + color: #24292f; +} + +@media (min-width:768px) { + .c0 { + font-size: 14px; + } +} + + + +
+
+
+ + + + +
+ +
+
+ +
+ + + zero + + + + + + one + + + + + + two + + + + + + three + + + + + + four + + + + + + five + + + + + + six + + + + + + seven + + + +
+ +
+ + + + +
+ + , + .c1 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-left: -0.25rem; + margin-bottom: -0.25rem; + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; +} + +.c1 > * { + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + margin-left: 0.25rem; + margin-bottom: 0.25rem; +} + +.c2 { + -webkit-order: 1; + -ms-flex-order: 1; + order: 1; + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; +} + +.c7 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + position: relative; +} + +.c8 { + visibility: hidden; +} + +.c3 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; + height: 100%; +} + +.c3:focus { + outline: 0; +} + +.c0 { + font-size: 14px; + line-height: 20px; + color: #24292f; + vertical-align: middle; + background-color: #ffffff; + border: 1px solid #d0d7de; + border-radius: 6px; + outline: none; + box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); + cursor: text; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: stretch; + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; + min-height: 32px; + padding-left: 12px; + padding-top: calc(12px / 2); + padding-bottom: calc(12px / 2); + background-repeat: no-repeat; + background-position: right 8px center; + padding-left: 0; + padding-right: 12px; + padding-left: 12px; + padding-top: calc(12px / 2); + padding-bottom: calc(12px / 2); +} + +.c0::-webkit-input-placeholder { + color: #6e7781; +} + +.c0::-moz-placeholder { + color: #6e7781; +} + +.c0:-ms-input-placeholder { + color: #6e7781; +} + +.c0::placeholder { + color: #6e7781; +} + +.c0:focus-within { + border-color: #0969da; + box-shadow: 0 0 0 3px rgba(9,105,218,0.3); +} + +.c0 > textarea { + padding: 12px; +} + +.c0 >:not(:last-child) { + margin-right: 8px; +} + +.c0 .TextInput-icon { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + color: #57606a; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; +} + +.c0 > input, +.c0 > select { + padding-left: 12px; + padding-right: 0; +} + +.c9 { + -webkit-animation: rotate-keyframes 1s linear infinite; + animation: rotate-keyframes 1s linear infinite; + position: absolute; + top: 0; + height: 100%; + max-width: 100%; + visibility: visible; + right: 0; +} + +.c6 { + background-color: transparent; + font-family: inherit; + color: currentColor; + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + -webkit-text-decoration: none; + text-decoration: none; + padding: 0; + -webkit-transform: translate(1px,-1px); + -ms-transform: translate(1px,-1px); + transform: translate(1px,-1px); + -webkit-align-self: baseline; + -ms-flex-item-align: baseline; + align-self: baseline; + border: 0; + border-radius: 999px; + margin-left: 8px; + height: 32px; + width: 32px; + position: relative; + z-index: 1; +} + +.c6:hover, +.c6:focus { + background-color: rgba(175,184,193,0.2); +} + +.c6:active { + background-color: rgba(234,238,242,0.5); +} + +.c5 { + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + background: transparent; + border: none; + color: inherit; + font: inherit; + margin: 0; + overflow: visible; + padding: 0; + width: auto; + -webkit-font-smoothing: inherit; + -moz-osx-font-smoothing: inherit; + -webkit-appearance: none; + line-height: 1; + color: currentColor; + -webkit-text-decoration: none; + text-decoration: none; +} + +.c5:is(a,button,[tabIndex='0']) { + cursor: pointer; +} + +.c5:is(a,button,[tabIndex='0']):after { + content: ''; + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; +} + +.c4 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + border-radius: 999px; + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + font-weight: 600; + font-family: inherit; + -webkit-text-decoration: none; + text-decoration: none; + white-space: nowrap; + font-size: 14px; + height: 32px; + line-height: 32px; + padding-left: 16px; + padding-right: 16px; + padding-top: 0; + padding-bottom: 0; + background-color: rgba(234,238,242,0.5); + border-color: rgba(27,31,36,0.15); + border-style: solid; + border-width: 1px; + color: #57606a; + max-width: 100%; + padding-right: 0; + position: relative; +} + +.c4:hover { + background-color: rgba(175,184,193,0.2); + color: #24292f; +} + +@media (min-width:768px) { + .c0 { + font-size: 14px; + } +} + + +
+
+ +
+ + + zero + + + + + + one + + + + + + two + + + + + + three + + + + + + four + + + + + + five + + + + + + six + + + + + + seven + + + +
+ +
+
+
+ + + + +
+ + , + .c3 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-left: -0.25rem; + margin-bottom: -0.25rem; + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; +} + +.c3 > * { + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + margin-left: 0.25rem; + margin-bottom: 0.25rem; +} + +.c4 { + -webkit-order: 1; + -ms-flex-order: 1; + order: 1; + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; +} + +.c1 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + position: relative; +} + +.c9 { + visibility: visible; +} + +.c5 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; + height: 100%; +} + +.c5:focus { + outline: 0; +} + +.c0 { + font-size: 14px; + line-height: 20px; + color: #24292f; + vertical-align: middle; + background-color: #ffffff; + border: 1px solid #d0d7de; + border-radius: 6px; + outline: none; + box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); + cursor: text; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: stretch; + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; + min-height: 32px; + padding-left: 12px; + padding-top: calc(12px / 2); + padding-bottom: calc(12px / 2); + background-repeat: no-repeat; + background-position: right 8px center; + padding-left: 12px; + padding-right: 12px; + padding-left: 12px; + padding-top: calc(12px / 2); + padding-bottom: calc(12px / 2); +} + +.c0::-webkit-input-placeholder { + color: #6e7781; +} + +.c0::-moz-placeholder { + color: #6e7781; +} + +.c0:-ms-input-placeholder { + color: #6e7781; +} + +.c0::placeholder { + color: #6e7781; +} + +.c0:focus-within { + border-color: #0969da; + box-shadow: 0 0 0 3px rgba(9,105,218,0.3); +} + +.c0 > textarea { + padding: 12px; +} + +.c0 >:not(:last-child) { + margin-right: 8px; +} + +.c0 .TextInput-icon { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + color: #57606a; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; +} + +.c0 > input, +.c0 > select { + padding-left: 0; + padding-right: 0; +} + +.c2 { + -webkit-animation: rotate-keyframes 1s linear infinite; + animation: rotate-keyframes 1s linear infinite; + visibility: visible; +} + +.c10 { + -webkit-animation: rotate-keyframes 1s linear infinite; + animation: rotate-keyframes 1s linear infinite; + position: absolute; + top: 0; + height: 100%; + max-width: 100%; + visibility: hidden; + right: 0; +} + +.c8 { + background-color: transparent; + font-family: inherit; + color: currentColor; + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + -webkit-text-decoration: none; + text-decoration: none; + padding: 0; + -webkit-transform: translate(1px,-1px); + -ms-transform: translate(1px,-1px); + transform: translate(1px,-1px); + -webkit-align-self: baseline; + -ms-flex-item-align: baseline; + align-self: baseline; + border: 0; + border-radius: 999px; + margin-left: 8px; + height: 32px; + width: 32px; + position: relative; + z-index: 1; +} + +.c8:hover, +.c8:focus { + background-color: rgba(175,184,193,0.2); +} + +.c8:active { + background-color: rgba(234,238,242,0.5); +} + +.c7 { + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + background: transparent; + border: none; + color: inherit; + font: inherit; + margin: 0; + overflow: visible; + padding: 0; + width: auto; + -webkit-font-smoothing: inherit; + -moz-osx-font-smoothing: inherit; + -webkit-appearance: none; + line-height: 1; + color: currentColor; + -webkit-text-decoration: none; + text-decoration: none; +} + +.c7:is(a,button,[tabIndex='0']) { + cursor: pointer; +} + +.c7:is(a,button,[tabIndex='0']):after { + content: ''; + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; +} + +.c6 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + border-radius: 999px; + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + font-weight: 600; + font-family: inherit; + -webkit-text-decoration: none; + text-decoration: none; + white-space: nowrap; + font-size: 14px; + height: 32px; + line-height: 32px; + padding-left: 16px; + padding-right: 16px; + padding-top: 0; + padding-bottom: 0; + background-color: rgba(234,238,242,0.5); + border-color: rgba(27,31,36,0.15); + border-style: solid; + border-width: 1px; + color: #57606a; + max-width: 100%; + padding-right: 0; + position: relative; +} + +.c6:hover { + background-color: rgba(175,184,193,0.2); + color: #24292f; +} + +@media (min-width:768px) { + .c0 { + font-size: 14px; + } +} + + + +
+ + + + +
+ +
+
+ +
+ + + zero + + + + + + one + + + + + + two + + + + + + three + + + + + + four + + + + + + five + + + + + + six + + + + + + seven + + + +
+ +
+
+
+ + + + +
+ + , + .c1 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-left: -0.25rem; + margin-bottom: -0.25rem; + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; +} + +.c1 > * { + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + margin-left: 0.25rem; + margin-bottom: 0.25rem; +} + +.c2 { + -webkit-order: 1; + -ms-flex-order: 1; + order: 1; + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; +} + +.c7 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + position: relative; +} + +.c8 { + visibility: hidden; +} + +.c3 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; + height: 100%; +} + +.c3:focus { + outline: 0; +} + +.c0 { + font-size: 14px; + line-height: 20px; + color: #24292f; + vertical-align: middle; + background-color: #ffffff; + border: 1px solid #d0d7de; + border-radius: 6px; + outline: none; + box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); + cursor: text; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: stretch; + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; + min-height: 32px; + padding-left: 12px; + padding-top: calc(12px / 2); + padding-bottom: calc(12px / 2); + background-repeat: no-repeat; + background-position: right 8px center; + padding-left: 0; + padding-right: 12px; + padding-left: 12px; + padding-top: calc(12px / 2); + padding-bottom: calc(12px / 2); +} + +.c0::-webkit-input-placeholder { + color: #6e7781; +} + +.c0::-moz-placeholder { + color: #6e7781; +} + +.c0:-ms-input-placeholder { + color: #6e7781; +} + +.c0::placeholder { + color: #6e7781; +} + +.c0:focus-within { + border-color: #0969da; + box-shadow: 0 0 0 3px rgba(9,105,218,0.3); +} + +.c0 > textarea { + padding: 12px; +} + +.c0 >:not(:last-child) { + margin-right: 8px; +} + +.c0 .TextInput-icon { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + color: #57606a; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; +} + +.c0 > input, +.c0 > select { + padding-left: 12px; + padding-right: 0; +} + +.c9 { + -webkit-animation: rotate-keyframes 1s linear infinite; + animation: rotate-keyframes 1s linear infinite; + position: absolute; + top: 0; + height: 100%; + max-width: 100%; + visibility: visible; + right: 0; +} + +.c6 { + background-color: transparent; + font-family: inherit; + color: currentColor; + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + -webkit-text-decoration: none; + text-decoration: none; + padding: 0; + -webkit-transform: translate(1px,-1px); + -ms-transform: translate(1px,-1px); + transform: translate(1px,-1px); + -webkit-align-self: baseline; + -ms-flex-item-align: baseline; + align-self: baseline; + border: 0; + border-radius: 999px; + margin-left: 8px; + height: 32px; + width: 32px; + position: relative; + z-index: 1; +} + +.c6:hover, +.c6:focus { + background-color: rgba(175,184,193,0.2); +} + +.c6:active { + background-color: rgba(234,238,242,0.5); +} + +.c5 { + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + background: transparent; + border: none; + color: inherit; + font: inherit; + margin: 0; + overflow: visible; + padding: 0; + width: auto; + -webkit-font-smoothing: inherit; + -moz-osx-font-smoothing: inherit; + -webkit-appearance: none; + line-height: 1; + color: currentColor; + -webkit-text-decoration: none; + text-decoration: none; +} + +.c5:is(a,button,[tabIndex='0']) { + cursor: pointer; +} + +.c5:is(a,button,[tabIndex='0']):after { + content: ''; + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; +} + +.c4 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + border-radius: 999px; + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + font-weight: 600; + font-family: inherit; + -webkit-text-decoration: none; + text-decoration: none; + white-space: nowrap; + font-size: 14px; + height: 32px; + line-height: 32px; + padding-left: 16px; + padding-right: 16px; + padding-top: 0; + padding-bottom: 0; + background-color: rgba(234,238,242,0.5); + border-color: rgba(27,31,36,0.15); + border-style: solid; + border-width: 1px; + color: #57606a; + max-width: 100%; + padding-right: 0; + position: relative; +} + +.c4:hover { + background-color: rgba(175,184,193,0.2); + color: #24292f; +} + +@media (min-width:768px) { + .c0 { + font-size: 14px; + } +} + + +
+
+ +
+ + + zero + + + + + + one + + + + + + two + + + + + + three + + + + + + four + + + + + + five + + + + + + six + + + + + + seven + + + +
+ +
+
+
+ + + + +
+ + , + .c4 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-left: -0.25rem; + margin-bottom: -0.25rem; + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; +} + +.c4 > * { + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + margin-left: 0.25rem; + margin-bottom: 0.25rem; +} + +.c5 { + -webkit-order: 1; + -ms-flex-order: 1; + order: 1; + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; +} + +.c1 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + position: relative; +} + +.c2 { + visibility: hidden; +} + +.c10 { + visibility: visible; +} + +.c6 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; + height: 100%; +} + +.c6:focus { + outline: 0; +} + +.c0 { + font-size: 14px; + line-height: 20px; + color: #24292f; + vertical-align: middle; + background-color: #ffffff; + border: 1px solid #d0d7de; + border-radius: 6px; + outline: none; + box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); + cursor: text; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: stretch; + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; + min-height: 32px; + min-height: 28px; + padding-left: 8px; + padding-right: 8px; + padding-top: 3px; + padding-bottom: 3px; + font-size: 12px; + line-height: 20px; + padding-left: 12px; + padding-top: calc(12px / 2); + padding-bottom: calc(12px / 2); + background-repeat: no-repeat; + background-position: right 8px center; + padding-left: 12px; + padding-right: 12px; + padding-left: 12px; + padding-top: calc(12px / 2); + padding-bottom: calc(12px / 2); +} + +.c0::-webkit-input-placeholder { + color: #6e7781; +} + +.c0::-moz-placeholder { + color: #6e7781; +} + +.c0:-ms-input-placeholder { + color: #6e7781; +} + +.c0::placeholder { + color: #6e7781; +} + +.c0:focus-within { + border-color: #0969da; + box-shadow: 0 0 0 3px rgba(9,105,218,0.3); +} + +.c0 > textarea { + padding: 12px; +} + +.c0 >:not(:last-child) { + margin-right: 8px; +} + +.c0 .TextInput-icon { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + color: #57606a; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; +} + +.c0 > input, +.c0 > select { + padding-left: 0; + padding-right: 0; +} + +.c3 { + -webkit-animation: rotate-keyframes 1s linear infinite; + animation: rotate-keyframes 1s linear infinite; + position: absolute; + top: 0; + height: 100%; + max-width: 100%; + visibility: visible; + left: 0; +} + +.c11 { + -webkit-animation: rotate-keyframes 1s linear infinite; + animation: rotate-keyframes 1s linear infinite; + position: absolute; + top: 0; + height: 100%; + max-width: 100%; + visibility: hidden; + right: 0; +} + +.c9 { + background-color: transparent; + font-family: inherit; + color: currentColor; + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + -webkit-text-decoration: none; + text-decoration: none; + padding: 0; + -webkit-transform: translate(1px,-1px); + -ms-transform: translate(1px,-1px); + transform: translate(1px,-1px); + -webkit-align-self: baseline; + -ms-flex-item-align: baseline; + align-self: baseline; + border: 0; + border-radius: 999px; + margin-left: 4px; + height: 16px; + width: 16px; + position: relative; + z-index: 1; +} + +.c9:hover, +.c9:focus { + background-color: rgba(175,184,193,0.2); +} + +.c9:active { + background-color: rgba(234,238,242,0.5); +} + +.c8 { + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + background: transparent; + border: none; + color: inherit; + font: inherit; + margin: 0; + overflow: visible; + padding: 0; + width: auto; + -webkit-font-smoothing: inherit; + -moz-osx-font-smoothing: inherit; + -webkit-appearance: none; + line-height: 1; + color: currentColor; + -webkit-text-decoration: none; + text-decoration: none; +} + +.c8:is(a,button,[tabIndex='0']) { + cursor: pointer; +} + +.c8:is(a,button,[tabIndex='0']):after { + content: ''; + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; +} + +.c7 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + border-radius: 999px; + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + font-weight: 600; + font-family: inherit; + -webkit-text-decoration: none; + text-decoration: none; + white-space: nowrap; + font-size: 12px; + height: 16px; + line-height: 16px; + padding-left: 4px; + padding-right: 4px; + padding-top: 0; + padding-bottom: 0; + background-color: rgba(234,238,242,0.5); + border-color: rgba(27,31,36,0.15); + border-style: solid; + border-width: 1px; + color: #57606a; + max-width: 100%; + padding-right: 0; + position: relative; +} + +.c7:hover { + background-color: rgba(175,184,193,0.2); + color: #24292f; +} + +@media (min-width:768px) { + .c0 { + font-size: 14px; + } +} + + + +
+
+
+ + + + +
+ +
+
+ +
+ + + zero + + + + + + one + + + + + + two + + + + + + three + + + + + + four + + + + + + five + + + + + + six + + + + + + seven + + + +
+ +
+
+
+ + + + +
+ + , + .c4 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-left: -0.25rem; + margin-bottom: -0.25rem; + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; +} + +.c4 > * { + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + margin-left: 0.25rem; + margin-bottom: 0.25rem; +} + +.c5 { + -webkit-order: 1; + -ms-flex-order: 1; + order: 1; + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; +} + +.c1 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + position: relative; +} + +.c2 { + visibility: hidden; +} + +.c10 { + visibility: visible; +} + +.c6 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; + height: 100%; +} + +.c6:focus { + outline: 0; +} + +.c0 { + font-size: 14px; + line-height: 20px; + color: #24292f; + vertical-align: middle; + background-color: #ffffff; + border: 1px solid #d0d7de; + border-radius: 6px; + outline: none; + box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); + cursor: text; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: stretch; + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; + min-height: 32px; + padding-left: 12px; + padding-top: calc(12px / 2); + padding-bottom: calc(12px / 2); + background-repeat: no-repeat; + background-position: right 8px center; + padding-left: 12px; + padding-right: 12px; + padding-left: 12px; + padding-top: calc(12px / 2); + padding-bottom: calc(12px / 2); +} + +.c0::-webkit-input-placeholder { + color: #6e7781; +} + +.c0::-moz-placeholder { + color: #6e7781; +} + +.c0:-ms-input-placeholder { + color: #6e7781; +} + +.c0::placeholder { + color: #6e7781; +} + +.c0:focus-within { + border-color: #0969da; + box-shadow: 0 0 0 3px rgba(9,105,218,0.3); +} + +.c0 > textarea { + padding: 12px; +} + +.c0 >:not(:last-child) { + margin-right: 8px; +} + +.c0 .TextInput-icon { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + color: #57606a; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; +} + +.c0 > input, +.c0 > select { + padding-left: 0; + padding-right: 0; +} + +.c3 { + -webkit-animation: rotate-keyframes 1s linear infinite; + animation: rotate-keyframes 1s linear infinite; + position: absolute; + top: 0; + height: 100%; + max-width: 100%; + visibility: visible; + left: 0; +} + +.c11 { + -webkit-animation: rotate-keyframes 1s linear infinite; + animation: rotate-keyframes 1s linear infinite; + position: absolute; + top: 0; + height: 100%; + max-width: 100%; + visibility: hidden; + right: 0; +} + +.c9 { + background-color: transparent; + font-family: inherit; + color: currentColor; + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + -webkit-text-decoration: none; + text-decoration: none; + padding: 0; + -webkit-transform: translate(1px,-1px); + -ms-transform: translate(1px,-1px); + transform: translate(1px,-1px); + -webkit-align-self: baseline; + -ms-flex-item-align: baseline; + align-self: baseline; + border: 0; + border-radius: 999px; + margin-left: 8px; + height: 32px; + width: 32px; + position: relative; + z-index: 1; +} + +.c9:hover, +.c9:focus { + background-color: rgba(175,184,193,0.2); +} + +.c9:active { + background-color: rgba(234,238,242,0.5); +} + +.c8 { + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + background: transparent; + border: none; + color: inherit; + font: inherit; + margin: 0; + overflow: visible; + padding: 0; + width: auto; + -webkit-font-smoothing: inherit; + -moz-osx-font-smoothing: inherit; + -webkit-appearance: none; + line-height: 1; + color: currentColor; + -webkit-text-decoration: none; + text-decoration: none; +} + +.c8:is(a,button,[tabIndex='0']) { + cursor: pointer; +} + +.c8:is(a,button,[tabIndex='0']):after { + content: ''; + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; +} + +.c7 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + border-radius: 999px; + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + font-weight: 600; + font-family: inherit; + -webkit-text-decoration: none; + text-decoration: none; + white-space: nowrap; + font-size: 14px; + height: 32px; + line-height: 32px; + padding-left: 16px; + padding-right: 16px; + padding-top: 0; + padding-bottom: 0; + background-color: rgba(234,238,242,0.5); + border-color: rgba(27,31,36,0.15); + border-style: solid; + border-width: 1px; + color: #57606a; + max-width: 100%; + padding-right: 0; + position: relative; +} + +.c7:hover { + background-color: rgba(175,184,193,0.2); + color: #24292f; +} + +@media (min-width:768px) { + .c0 { + font-size: 14px; + } +} + + + +
+
+
+ + + + +
+ +
+
+ +
+ + + zero + + + + + + one + + + + + + two + + + + + + three + + + + + + four + + + + + + five + + + + + + six + + + + + + seven + + + +
+ +
+
+
+ + + + +
+ + , + .c4 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-left: -0.25rem; + margin-bottom: -0.25rem; + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; +} + +.c4 > * { + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + margin-left: 0.25rem; + margin-bottom: 0.25rem; +} + +.c5 { + -webkit-order: 1; + -ms-flex-order: 1; + order: 1; + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; +} + +.c1 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + position: relative; +} + +.c10 { + visibility: hidden; +} + +.c2 { + visibility: visible; +} + +.c6 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; + height: 100%; +} + +.c6:focus { + outline: 0; +} + +.c0 { + font-size: 14px; + line-height: 20px; + color: #24292f; + vertical-align: middle; + background-color: #ffffff; + border: 1px solid #d0d7de; + border-radius: 6px; + outline: none; + box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); + cursor: text; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: stretch; + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; + min-height: 32px; + padding-left: 12px; + padding-top: calc(12px / 2); + padding-bottom: calc(12px / 2); + background-repeat: no-repeat; + background-position: right 8px center; + padding-left: 12px; + padding-right: 12px; + padding-left: 12px; + padding-top: calc(12px / 2); + padding-bottom: calc(12px / 2); +} + +.c0::-webkit-input-placeholder { + color: #6e7781; +} + +.c0::-moz-placeholder { + color: #6e7781; +} + +.c0:-ms-input-placeholder { + color: #6e7781; +} + +.c0::placeholder { + color: #6e7781; +} + +.c0:focus-within { + border-color: #0969da; + box-shadow: 0 0 0 3px rgba(9,105,218,0.3); +} + +.c0 > textarea { + padding: 12px; +} + +.c0 >:not(:last-child) { + margin-right: 8px; +} + +.c0 .TextInput-icon { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + color: #57606a; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; +} + +.c0 > input, +.c0 > select { + padding-left: 0; + padding-right: 0; +} + +.c3 { + -webkit-animation: rotate-keyframes 1s linear infinite; + animation: rotate-keyframes 1s linear infinite; + position: absolute; + top: 0; + height: 100%; + max-width: 100%; + visibility: hidden; + left: 0; +} + +.c11 { + -webkit-animation: rotate-keyframes 1s linear infinite; + animation: rotate-keyframes 1s linear infinite; + position: absolute; + top: 0; + height: 100%; + max-width: 100%; + visibility: visible; + right: 0; +} + +.c9 { + background-color: transparent; + font-family: inherit; + color: currentColor; + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + -webkit-text-decoration: none; + text-decoration: none; + padding: 0; + -webkit-transform: translate(1px,-1px); + -ms-transform: translate(1px,-1px); + transform: translate(1px,-1px); + -webkit-align-self: baseline; + -ms-flex-item-align: baseline; + align-self: baseline; + border: 0; + border-radius: 999px; + margin-left: 8px; + height: 24px; + width: 24px; + position: relative; + z-index: 1; +} + +.c9:hover, +.c9:focus { + background-color: rgba(175,184,193,0.2); +} + +.c9:active { + background-color: rgba(234,238,242,0.5); +} + +.c8 { + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + background: transparent; + border: none; + color: inherit; + font: inherit; + margin: 0; + overflow: visible; + padding: 0; + width: auto; + -webkit-font-smoothing: inherit; + -moz-osx-font-smoothing: inherit; + -webkit-appearance: none; + line-height: 1; + color: currentColor; + -webkit-text-decoration: none; + text-decoration: none; +} + +.c8:is(a,button,[tabIndex='0']) { + cursor: pointer; +} + +.c8:is(a,button,[tabIndex='0']):after { + content: ''; + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; +} + +.c7 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + border-radius: 999px; + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + font-weight: 600; + font-family: inherit; + -webkit-text-decoration: none; + text-decoration: none; + white-space: nowrap; + font-size: 12px; + height: 24px; + line-height: 24px; + padding-left: 8px; + padding-right: 8px; + padding-top: 0; + padding-bottom: 0; + background-color: rgba(234,238,242,0.5); + border-color: rgba(27,31,36,0.15); + border-style: solid; + border-width: 1px; + color: #57606a; + max-width: 100%; + padding-right: 0; + position: relative; +} + +.c7:hover { + background-color: rgba(175,184,193,0.2); + color: #24292f; +} + +@media (min-width:768px) { + .c0 { + font-size: 14px; + } +} + + + +
+
+
+ + + + +
+ +
+
+ +
+ + + zero + + + + + + one + + + + + + two + + + + + + three + + + + + + four + + + + + + five + + + + + + six + + + + + + seven + + + +
+ +
+
+
+ + + + +
+ + , +] +`; + exports[`TextInputWithTokens renders with tokens 1`] = ` .c1 { display: -webkit-box; From 245b56835491bda52bc9301bb4639a65042550e8 Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Wed, 2 Mar 2022 13:53:03 -0500 Subject: [PATCH 05/24] fixes silly test mistakes --- src/__tests__/TextInput.test.tsx | 65 +- .../__snapshots__/TextInput.test.tsx.snap | 2687 +++++++++++++++++ 2 files changed, 2720 insertions(+), 32 deletions(-) diff --git a/src/__tests__/TextInput.test.tsx b/src/__tests__/TextInput.test.tsx index 977d9e38440..faaed2e6c33 100644 --- a/src/__tests__/TextInput.test.tsx +++ b/src/__tests__/TextInput.test.tsx @@ -71,53 +71,54 @@ describe('TextInput', () => { ) const icon = container.querySelector('svg')! - fireEvent.click(icon) + expect(getByLabelText('Search')).not.toEqual(document.activeElement) + fireEvent.click(icon) expect(getByLabelText('Search')).toEqual(document.activeElement) }) - // it('renders with a loading indicator', () => { - // expect( - // render( - // <> - // + it('renders with a loading indicator', () => { + expect( + render( + <> + - // + - // + - // + - // + - // + - // + - // + - // + - // + - // + - // - // - // ) - // ).toMatchSnapshot() - // }) + + + ) + ).toMatchSnapshot() + }) it('should call onChange prop with input value', () => { const onChangeMock = jest.fn() diff --git a/src/__tests__/__snapshots__/TextInput.test.tsx.snap b/src/__tests__/__snapshots__/TextInput.test.tsx.snap index 73520a5a9cb..18373591cc3 100644 --- a/src/__tests__/__snapshots__/TextInput.test.tsx.snap +++ b/src/__tests__/__snapshots__/TextInput.test.tsx.snap @@ -1228,6 +1228,2693 @@ exports[`TextInput renders warning 1`] = ` `; +exports[`TextInput renders with a loading indicator 1`] = ` +Array [ + .c2 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + position: relative; +} + +.c1 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c1:focus { + outline: 0; +} + +.c0 { + font-size: 14px; + line-height: 20px; + color: #24292f; + vertical-align: middle; + background-color: #ffffff; + border: 1px solid #d0d7de; + border-radius: 6px; + outline: none; + box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); + cursor: text; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: stretch; + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; + min-height: 32px; + background-repeat: no-repeat; + background-position: right 8px center; + padding-left: 0; + padding-right: 12px; +} + +.c0::-webkit-input-placeholder { + color: #6e7781; +} + +.c0::-moz-placeholder { + color: #6e7781; +} + +.c0:-ms-input-placeholder { + color: #6e7781; +} + +.c0::placeholder { + color: #6e7781; +} + +.c0:focus-within { + border-color: #0969da; + box-shadow: 0 0 0 3px rgba(9,105,218,0.3); +} + +.c0 > textarea { + padding: 12px; +} + +.c0 >:not(:last-child) { + margin-right: 8px; +} + +.c0 .TextInput-icon { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + color: #57606a; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; +} + +.c0 > input, +.c0 > select { + padding-left: 12px; + padding-right: 0; +} + +.c3 { + -webkit-animation: rotate-keyframes 1s linear infinite; + animation: rotate-keyframes 1s linear infinite; + visibility: visible; +} + +@media (min-width:768px) { + .c0 { + font-size: 14px; + } +} + + + + +
+ + + + +
+ + , + .c1 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + position: relative; +} + +.c3 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c3:focus { + outline: 0; +} + +.c0 { + font-size: 14px; + line-height: 20px; + color: #24292f; + vertical-align: middle; + background-color: #ffffff; + border: 1px solid #d0d7de; + border-radius: 6px; + outline: none; + box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); + cursor: text; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: stretch; + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; + min-height: 32px; + background-repeat: no-repeat; + background-position: right 8px center; + padding-left: 12px; + padding-right: 0; +} + +.c0::-webkit-input-placeholder { + color: #6e7781; +} + +.c0::-moz-placeholder { + color: #6e7781; +} + +.c0:-ms-input-placeholder { + color: #6e7781; +} + +.c0::placeholder { + color: #6e7781; +} + +.c0:focus-within { + border-color: #0969da; + box-shadow: 0 0 0 3px rgba(9,105,218,0.3); +} + +.c0 > textarea { + padding: 12px; +} + +.c0 >:not(:last-child) { + margin-right: 8px; +} + +.c0 .TextInput-icon { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + color: #57606a; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; +} + +.c0 > input, +.c0 > select { + padding-left: 0; + padding-right: 12px; +} + +.c2 { + -webkit-animation: rotate-keyframes 1s linear infinite; + animation: rotate-keyframes 1s linear infinite; + visibility: visible; +} + +.c4 { + -webkit-animation: rotate-keyframes 1s linear infinite; + animation: rotate-keyframes 1s linear infinite; + visibility: hidden; +} + +@media (min-width:768px) { + .c0 { + font-size: 14px; + } +} + + + +
+ + + + +
+ + + +
+ + + + +
+ + , + .c2 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + position: relative; +} + +.c1 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c1:focus { + outline: 0; +} + +.c0 { + font-size: 14px; + line-height: 20px; + color: #24292f; + vertical-align: middle; + background-color: #ffffff; + border: 1px solid #d0d7de; + border-radius: 6px; + outline: none; + box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); + cursor: text; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: stretch; + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; + min-height: 32px; + background-repeat: no-repeat; + background-position: right 8px center; + padding-left: 0; + padding-right: 12px; +} + +.c0::-webkit-input-placeholder { + color: #6e7781; +} + +.c0::-moz-placeholder { + color: #6e7781; +} + +.c0:-ms-input-placeholder { + color: #6e7781; +} + +.c0::placeholder { + color: #6e7781; +} + +.c0:focus-within { + border-color: #0969da; + box-shadow: 0 0 0 3px rgba(9,105,218,0.3); +} + +.c0 > textarea { + padding: 12px; +} + +.c0 >:not(:last-child) { + margin-right: 8px; +} + +.c0 .TextInput-icon { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + color: #57606a; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; +} + +.c0 > input, +.c0 > select { + padding-left: 12px; + padding-right: 0; +} + +.c3 { + -webkit-animation: rotate-keyframes 1s linear infinite; + animation: rotate-keyframes 1s linear infinite; + visibility: visible; +} + +@media (min-width:768px) { + .c0 { + font-size: 14px; + } +} + + + + +
+ + + + +
+ + , + .c1 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + position: relative; +} + +.c2 { + visibility: hidden; +} + +.c4 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c4:focus { + outline: 0; +} + +.c0 { + font-size: 14px; + line-height: 20px; + color: #24292f; + vertical-align: middle; + background-color: #ffffff; + border: 1px solid #d0d7de; + border-radius: 6px; + outline: none; + box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); + cursor: text; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: stretch; + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; + min-height: 32px; + background-repeat: no-repeat; + background-position: right 8px center; + padding-left: 12px; + padding-right: 0; +} + +.c0::-webkit-input-placeholder { + color: #6e7781; +} + +.c0::-moz-placeholder { + color: #6e7781; +} + +.c0:-ms-input-placeholder { + color: #6e7781; +} + +.c0::placeholder { + color: #6e7781; +} + +.c0:focus-within { + border-color: #0969da; + box-shadow: 0 0 0 3px rgba(9,105,218,0.3); +} + +.c0 > textarea { + padding: 12px; +} + +.c0 >:not(:last-child) { + margin-right: 8px; +} + +.c0 .TextInput-icon { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + color: #57606a; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; +} + +.c0 > input, +.c0 > select { + padding-left: 0; + padding-right: 12px; +} + +.c5 { + -webkit-animation: rotate-keyframes 1s linear infinite; + animation: rotate-keyframes 1s linear infinite; + visibility: hidden; +} + +.c3 { + -webkit-animation: rotate-keyframes 1s linear infinite; + animation: rotate-keyframes 1s linear infinite; + position: absolute; + top: 0; + height: 100%; + max-width: 100%; + visibility: visible; + left: 0; +} + +@media (min-width:768px) { + .c0 { + font-size: 14px; + } +} + + + +
+
+
+ + + + +
+ + + +
+ + + + +
+ + , + .c1 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + position: relative; +} + +.c2 { + visibility: hidden; +} + +.c4 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c4:focus { + outline: 0; +} + +.c0 { + font-size: 14px; + line-height: 20px; + color: #24292f; + vertical-align: middle; + background-color: #ffffff; + border: 1px solid #d0d7de; + border-radius: 6px; + outline: none; + box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); + cursor: text; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: stretch; + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; + min-height: 32px; + background-repeat: no-repeat; + background-position: right 8px center; + padding-left: 12px; + padding-right: 0; +} + +.c0::-webkit-input-placeholder { + color: #6e7781; +} + +.c0::-moz-placeholder { + color: #6e7781; +} + +.c0:-ms-input-placeholder { + color: #6e7781; +} + +.c0::placeholder { + color: #6e7781; +} + +.c0:focus-within { + border-color: #0969da; + box-shadow: 0 0 0 3px rgba(9,105,218,0.3); +} + +.c0 > textarea { + padding: 12px; +} + +.c0 >:not(:last-child) { + margin-right: 8px; +} + +.c0 .TextInput-icon { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + color: #57606a; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; +} + +.c0 > input, +.c0 > select { + padding-left: 0; + padding-right: 12px; +} + +.c5 { + -webkit-animation: rotate-keyframes 1s linear infinite; + animation: rotate-keyframes 1s linear infinite; + visibility: hidden; +} + +.c3 { + -webkit-animation: rotate-keyframes 1s linear infinite; + animation: rotate-keyframes 1s linear infinite; + position: absolute; + top: 0; + height: 100%; + max-width: 100%; + visibility: visible; + left: 0; +} + +@media (min-width:768px) { + .c0 { + font-size: 14px; + } +} + + + +
+
+
+ + + + +
+ + + +
+ + + + +
+ + , + .c1 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + position: relative; +} + +.c2 { + visibility: visible; +} + +.c4 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c4:focus { + outline: 0; +} + +.c0 { + font-size: 14px; + line-height: 20px; + color: #24292f; + vertical-align: middle; + background-color: #ffffff; + border: 1px solid #d0d7de; + border-radius: 6px; + outline: none; + box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); + cursor: text; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: stretch; + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; + min-height: 32px; + background-repeat: no-repeat; + background-position: right 8px center; + padding-left: 12px; + padding-right: 12px; +} + +.c0::-webkit-input-placeholder { + color: #6e7781; +} + +.c0::-moz-placeholder { + color: #6e7781; +} + +.c0:-ms-input-placeholder { + color: #6e7781; +} + +.c0::placeholder { + color: #6e7781; +} + +.c0:focus-within { + border-color: #0969da; + box-shadow: 0 0 0 3px rgba(9,105,218,0.3); +} + +.c0 > textarea { + padding: 12px; +} + +.c0 >:not(:last-child) { + margin-right: 8px; +} + +.c0 .TextInput-icon { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + color: #57606a; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; +} + +.c0 > input, +.c0 > select { + padding-left: 0; + padding-right: 0; +} + +.c5 { + -webkit-animation: rotate-keyframes 1s linear infinite; + animation: rotate-keyframes 1s linear infinite; + visibility: visible; +} + +.c3 { + -webkit-animation: rotate-keyframes 1s linear infinite; + animation: rotate-keyframes 1s linear infinite; + position: absolute; + top: 0; + height: 100%; + max-width: 100%; + visibility: hidden; + left: 0; +} + +@media (min-width:768px) { + .c0 { + font-size: 14px; + } +} + + + +
+
+
+ + + + +
+ + + +
+ + + + +
+ + , + .c2 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + position: relative; +} + +.c3 { + visibility: hidden; +} + +.c1 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c1:focus { + outline: 0; +} + +.c0 { + font-size: 14px; + line-height: 20px; + color: #24292f; + vertical-align: middle; + background-color: #ffffff; + border: 1px solid #d0d7de; + border-radius: 6px; + outline: none; + box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); + cursor: text; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: stretch; + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; + min-height: 32px; + background-repeat: no-repeat; + background-position: right 8px center; + padding-left: 0; + padding-right: 12px; +} + +.c0::-webkit-input-placeholder { + color: #6e7781; +} + +.c0::-moz-placeholder { + color: #6e7781; +} + +.c0:-ms-input-placeholder { + color: #6e7781; +} + +.c0::placeholder { + color: #6e7781; +} + +.c0:focus-within { + border-color: #0969da; + box-shadow: 0 0 0 3px rgba(9,105,218,0.3); +} + +.c0 > textarea { + padding: 12px; +} + +.c0 >:not(:last-child) { + margin-right: 8px; +} + +.c0 .TextInput-icon { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + color: #57606a; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; +} + +.c0 > input, +.c0 > select { + padding-left: 12px; + padding-right: 0; +} + +.c4 { + -webkit-animation: rotate-keyframes 1s linear infinite; + animation: rotate-keyframes 1s linear infinite; + position: absolute; + top: 0; + height: 100%; + max-width: 100%; + visibility: visible; + right: 0; +} + +@media (min-width:768px) { + .c0 { + font-size: 14px; + } +} + + + + +
+
+
+ + + + +
+ + , + .c1 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + position: relative; +} + +.c4 { + visibility: visible; +} + +.c3 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c3:focus { + outline: 0; +} + +.c0 { + font-size: 14px; + line-height: 20px; + color: #24292f; + vertical-align: middle; + background-color: #ffffff; + border: 1px solid #d0d7de; + border-radius: 6px; + outline: none; + box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); + cursor: text; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: stretch; + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; + min-height: 32px; + background-repeat: no-repeat; + background-position: right 8px center; + padding-left: 12px; + padding-right: 12px; +} + +.c0::-webkit-input-placeholder { + color: #6e7781; +} + +.c0::-moz-placeholder { + color: #6e7781; +} + +.c0:-ms-input-placeholder { + color: #6e7781; +} + +.c0::placeholder { + color: #6e7781; +} + +.c0:focus-within { + border-color: #0969da; + box-shadow: 0 0 0 3px rgba(9,105,218,0.3); +} + +.c0 > textarea { + padding: 12px; +} + +.c0 >:not(:last-child) { + margin-right: 8px; +} + +.c0 .TextInput-icon { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + color: #57606a; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; +} + +.c0 > input, +.c0 > select { + padding-left: 0; + padding-right: 0; +} + +.c2 { + -webkit-animation: rotate-keyframes 1s linear infinite; + animation: rotate-keyframes 1s linear infinite; + visibility: visible; +} + +.c5 { + -webkit-animation: rotate-keyframes 1s linear infinite; + animation: rotate-keyframes 1s linear infinite; + position: absolute; + top: 0; + height: 100%; + max-width: 100%; + visibility: hidden; + right: 0; +} + +@media (min-width:768px) { + .c0 { + font-size: 14px; + } +} + + + +
+ + + + +
+ + + +
+
+
+ + + + +
+ + , + .c2 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + position: relative; +} + +.c3 { + visibility: hidden; +} + +.c1 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c1:focus { + outline: 0; +} + +.c0 { + font-size: 14px; + line-height: 20px; + color: #24292f; + vertical-align: middle; + background-color: #ffffff; + border: 1px solid #d0d7de; + border-radius: 6px; + outline: none; + box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); + cursor: text; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: stretch; + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; + min-height: 32px; + background-repeat: no-repeat; + background-position: right 8px center; + padding-left: 0; + padding-right: 12px; +} + +.c0::-webkit-input-placeholder { + color: #6e7781; +} + +.c0::-moz-placeholder { + color: #6e7781; +} + +.c0:-ms-input-placeholder { + color: #6e7781; +} + +.c0::placeholder { + color: #6e7781; +} + +.c0:focus-within { + border-color: #0969da; + box-shadow: 0 0 0 3px rgba(9,105,218,0.3); +} + +.c0 > textarea { + padding: 12px; +} + +.c0 >:not(:last-child) { + margin-right: 8px; +} + +.c0 .TextInput-icon { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + color: #57606a; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; +} + +.c0 > input, +.c0 > select { + padding-left: 12px; + padding-right: 0; +} + +.c4 { + -webkit-animation: rotate-keyframes 1s linear infinite; + animation: rotate-keyframes 1s linear infinite; + position: absolute; + top: 0; + height: 100%; + max-width: 100%; + visibility: visible; + right: 0; +} + +@media (min-width:768px) { + .c0 { + font-size: 14px; + } +} + + + + +
+
+
+ + + + +
+ + , + .c1 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + position: relative; +} + +.c2 { + visibility: hidden; +} + +.c5 { + visibility: visible; +} + +.c4 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c4:focus { + outline: 0; +} + +.c0 { + font-size: 14px; + line-height: 20px; + color: #24292f; + vertical-align: middle; + background-color: #ffffff; + border: 1px solid #d0d7de; + border-radius: 6px; + outline: none; + box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); + cursor: text; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: stretch; + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; + min-height: 32px; + min-height: 28px; + padding-left: 8px; + padding-right: 8px; + padding-top: 3px; + padding-bottom: 3px; + font-size: 12px; + line-height: 20px; + background-repeat: no-repeat; + background-position: right 8px center; + padding-left: 12px; + padding-right: 12px; +} + +.c0::-webkit-input-placeholder { + color: #6e7781; +} + +.c0::-moz-placeholder { + color: #6e7781; +} + +.c0:-ms-input-placeholder { + color: #6e7781; +} + +.c0::placeholder { + color: #6e7781; +} + +.c0:focus-within { + border-color: #0969da; + box-shadow: 0 0 0 3px rgba(9,105,218,0.3); +} + +.c0 > textarea { + padding: 12px; +} + +.c0 >:not(:last-child) { + margin-right: 8px; +} + +.c0 .TextInput-icon { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + color: #57606a; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; +} + +.c0 > input, +.c0 > select { + padding-left: 0; + padding-right: 0; +} + +.c3 { + -webkit-animation: rotate-keyframes 1s linear infinite; + animation: rotate-keyframes 1s linear infinite; + position: absolute; + top: 0; + height: 100%; + max-width: 100%; + visibility: visible; + left: 0; +} + +.c6 { + -webkit-animation: rotate-keyframes 1s linear infinite; + animation: rotate-keyframes 1s linear infinite; + position: absolute; + top: 0; + height: 100%; + max-width: 100%; + visibility: hidden; + right: 0; +} + +@media (min-width:768px) { + .c0 { + font-size: 14px; + } +} + + + +
+
+
+ + + + +
+ + + +
+
+
+ + + + +
+ + , + .c1 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + position: relative; +} + +.c2 { + visibility: hidden; +} + +.c5 { + visibility: visible; +} + +.c4 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c4:focus { + outline: 0; +} + +.c0 { + font-size: 14px; + line-height: 20px; + color: #24292f; + vertical-align: middle; + background-color: #ffffff; + border: 1px solid #d0d7de; + border-radius: 6px; + outline: none; + box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); + cursor: text; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: stretch; + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; + min-height: 32px; + background-repeat: no-repeat; + background-position: right 8px center; + padding-left: 12px; + padding-right: 12px; +} + +.c0::-webkit-input-placeholder { + color: #6e7781; +} + +.c0::-moz-placeholder { + color: #6e7781; +} + +.c0:-ms-input-placeholder { + color: #6e7781; +} + +.c0::placeholder { + color: #6e7781; +} + +.c0:focus-within { + border-color: #0969da; + box-shadow: 0 0 0 3px rgba(9,105,218,0.3); +} + +.c0 > textarea { + padding: 12px; +} + +.c0 >:not(:last-child) { + margin-right: 8px; +} + +.c0 .TextInput-icon { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + color: #57606a; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; +} + +.c0 > input, +.c0 > select { + padding-left: 0; + padding-right: 0; +} + +.c3 { + -webkit-animation: rotate-keyframes 1s linear infinite; + animation: rotate-keyframes 1s linear infinite; + position: absolute; + top: 0; + height: 100%; + max-width: 100%; + visibility: visible; + left: 0; +} + +.c6 { + -webkit-animation: rotate-keyframes 1s linear infinite; + animation: rotate-keyframes 1s linear infinite; + position: absolute; + top: 0; + height: 100%; + max-width: 100%; + visibility: hidden; + right: 0; +} + +@media (min-width:768px) { + .c0 { + font-size: 14px; + } +} + + + +
+
+
+ + + + +
+ + + +
+
+
+ + + + +
+ + , + .c1 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + position: relative; +} + +.c5 { + visibility: hidden; +} + +.c2 { + visibility: visible; +} + +.c4 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c4:focus { + outline: 0; +} + +.c0 { + font-size: 14px; + line-height: 20px; + color: #24292f; + vertical-align: middle; + background-color: #ffffff; + border: 1px solid #d0d7de; + border-radius: 6px; + outline: none; + box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); + cursor: text; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: stretch; + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; + min-height: 32px; + padding-left: 8px; + padding-right: 8px; + padding-top: 10px; + padding-bottom: 10px; + font-size: 20px; + background-repeat: no-repeat; + background-position: right 8px center; + padding-left: 12px; + padding-right: 12px; +} + +.c0::-webkit-input-placeholder { + color: #6e7781; +} + +.c0::-moz-placeholder { + color: #6e7781; +} + +.c0:-ms-input-placeholder { + color: #6e7781; +} + +.c0::placeholder { + color: #6e7781; +} + +.c0:focus-within { + border-color: #0969da; + box-shadow: 0 0 0 3px rgba(9,105,218,0.3); +} + +.c0 > textarea { + padding: 12px; +} + +.c0 >:not(:last-child) { + margin-right: 8px; +} + +.c0 .TextInput-icon { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + color: #57606a; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; +} + +.c0 > input, +.c0 > select { + padding-left: 0; + padding-right: 0; +} + +.c3 { + -webkit-animation: rotate-keyframes 1s linear infinite; + animation: rotate-keyframes 1s linear infinite; + position: absolute; + top: 0; + height: 100%; + max-width: 100%; + visibility: hidden; + left: 0; +} + +.c6 { + -webkit-animation: rotate-keyframes 1s linear infinite; + animation: rotate-keyframes 1s linear infinite; + position: absolute; + top: 0; + height: 100%; + max-width: 100%; + visibility: visible; + right: 0; +} + +@media (min-width:768px) { + .c0 { + font-size: 14px; + } +} + + + +
+
+
+ + + + +
+ + + +
+
+
+ + + + +
+ + , +] +`; + exports[`TextInput should render a password input 1`] = ` .c1 { border: 0; From 6c1f3586b8b1d3dbde36bfee6777bce1db727221 Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Wed, 2 Mar 2022 13:57:58 -0500 Subject: [PATCH 06/24] revert default textinput story --- src/stories/TextInput.stories.tsx | 110 +++++------------------------- 1 file changed, 16 insertions(+), 94 deletions(-) diff --git a/src/stories/TextInput.stories.tsx b/src/stories/TextInput.stories.tsx index 42200e5c7af..96a73a12d42 100644 --- a/src/stories/TextInput.stories.tsx +++ b/src/stories/TextInput.stories.tsx @@ -80,107 +80,29 @@ const Label = ({htmlFor, children}: {htmlFor: string; children: ReactNode}) => ( ) -export const Default = () => { - const [isLoading, setIsLoading] = useState(false) +export const Default = (args: TextInputProps) => { + const [value, setValue] = useState('') - const toggleLoadingState = () => { - setIsLoading(!isLoading) + const handleChange = (event: React.ChangeEvent) => { + setValue(event.target.value) } - return ( - <> - - -

No visual

- - - - - - - - - - -

Leading visual

- - - - - - - - - - -

Trailing visual

- - - - - - - - - + const inputId = 'basic-text-input' -

Both visuals

- - - - - - - - } - trailingVisual={() => } - isLoading={isLoading} - loadingIndicatorPosition="trailing" - value="trailing" - /> - - + return ( +
+
+
+ +
+
+ +
+
+
) } -Default.parameters = {controls: {exclude: ['isLoading', 'loadingIndicatorPosition']}} - export const WithLeadingVisual = (args: TextInputProps) => { const [value, setValue] = useState('') From 81a1022f8303ecc2bf97bb5774a8c9c2a5a0665d Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Wed, 2 Mar 2022 14:30:40 -0500 Subject: [PATCH 07/24] adds changeset --- .changeset/smooth-lemons-brake.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/smooth-lemons-brake.md diff --git a/.changeset/smooth-lemons-brake.md b/.changeset/smooth-lemons-brake.md new file mode 100644 index 00000000000..4a68284bebf --- /dev/null +++ b/.changeset/smooth-lemons-brake.md @@ -0,0 +1,5 @@ +--- +'@primer/react': minor +--- + +Adds a loadings state to our text input components From 5388500f21073cb4a2852eef14b2dbcfae1035fe Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Tue, 8 Mar 2022 11:42:08 -0500 Subject: [PATCH 08/24] Update src/TextInput.tsx Co-authored-by: Pavithra Kodmad --- src/TextInput.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/TextInput.tsx b/src/TextInput.tsx index 53fe02830b8..64fce470d63 100644 --- a/src/TextInput.tsx +++ b/src/TextInput.tsx @@ -71,7 +71,7 @@ const TextInput = React.forwardRef( isLoading && (loadingIndicatorPosition === 'leading' || Boolean(LeadingVisual && loadingIndicatorPosition !== 'trailing')) const showTrailingLoadingIndicator = - isLoading && (loadingIndicatorPosition === 'trailing' || (loadingIndicatorPosition === 'auto' && !LeadingVisual)) + isLoading && (loadingIndicatorPosition === 'trailing' || Boolean(loadingIndicatorPosition === 'auto' && !LeadingVisual)) const focusInput: MouseEventHandler = () => { inputRef.current?.focus() } From 070612fe8d94c39f1464b23dd3c03a930ec02a5d Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Tue, 8 Mar 2022 11:45:10 -0500 Subject: [PATCH 09/24] updates component API --- docs/content/TextInput.mdx | 38 +++++---------------- docs/content/TextInputWithTokens.mdx | 16 ++++----- src/TextInput.tsx | 11 +++--- src/TextInputWithTokens.tsx | 9 +++-- src/__tests__/TextInput.test.tsx | 21 +++++------- src/__tests__/TextInputWithTokens.test.tsx | 26 +++++--------- src/stories/TextInput.stories.tsx | 4 +-- src/stories/TextInputWithTokens.stories.tsx | 4 +-- 8 files changed, 46 insertions(+), 83 deletions(-) diff --git a/docs/content/TextInput.mdx b/docs/content/TextInput.mdx index 97cdff5c171..e4f6852b18c 100644 --- a/docs/content/TextInput.mdx +++ b/docs/content/TextInput.mdx @@ -70,10 +70,10 @@ const WithIconAndLoadingIndicator = () => { - + - +

Leading visual

@@ -81,20 +81,10 @@ const WithIconAndLoadingIndicator = () => { - + - +

Trailing visual

@@ -102,20 +92,10 @@ const WithIconAndLoadingIndicator = () => { - + - +

Both visuals

@@ -133,7 +113,7 @@ const WithIconAndLoadingIndicator = () => { leadingVisual={SearchIcon} trailingVisual={SearchIcon} isLoading={isLoading} - loadingIndicatorPosition="leading" + loaderPosition="leading" value="leading" /> @@ -143,7 +123,7 @@ const WithIconAndLoadingIndicator = () => { leadingVisual={SearchIcon} trailingVisual={SearchIcon} isLoading={isLoading} - loadingIndicatorPosition="trailing" + loaderPosition="trailing" value="trailing" /> @@ -213,7 +193,7 @@ render() /> ( <> diff --git a/docs/content/TextInputWithTokens.mdx b/docs/content/TextInputWithTokens.mdx index 22c43c5cafc..e119f218502 100644 --- a/docs/content/TextInputWithTokens.mdx +++ b/docs/content/TextInputWithTokens.mdx @@ -275,7 +275,7 @@ const WithIconAndLoadingIndicator = () => { onTokenRemove={onDateRemove} value="leading" isLoading={isLoading} - loadingIndicatorPosition="leading" + loaderPosition="leading" /> @@ -284,7 +284,7 @@ const WithIconAndLoadingIndicator = () => { onTokenRemove={onDateRemove} value="trailing" isLoading={isLoading} - loadingIndicatorPosition="trailing" + loaderPosition="trailing" /> @@ -304,7 +304,7 @@ const WithIconAndLoadingIndicator = () => { onTokenRemove={onDateRemove} leadingVisual={CalendarIcon} isLoading={isLoading} - loadingIndicatorPosition="leading" + loaderPosition="leading" value="leading" /> @@ -314,7 +314,7 @@ const WithIconAndLoadingIndicator = () => { onTokenRemove={onDateRemove} leadingVisual={CalendarIcon} isLoading={isLoading} - loadingIndicatorPosition="trailing" + loaderPosition="trailing" value="trailing" /> @@ -335,7 +335,7 @@ const WithIconAndLoadingIndicator = () => { onTokenRemove={onDateRemove} trailingVisual={CalendarIcon} isLoading={isLoading} - loadingIndicatorPosition="leading" + loaderPosition="leading" value="leading" /> @@ -345,7 +345,7 @@ const WithIconAndLoadingIndicator = () => { onTokenRemove={onDateRemove} trailingVisual={CalendarIcon} isLoading={isLoading} - loadingIndicatorPosition="trailing" + loaderPosition="trailing" value="trailing" /> @@ -369,7 +369,7 @@ const WithIconAndLoadingIndicator = () => { leadingVisual={CalendarIcon} trailingVisual={CalendarIcon} isLoading={isLoading} - loadingIndicatorPosition="leading" + loaderPosition="leading" value="leading" /> @@ -381,7 +381,7 @@ const WithIconAndLoadingIndicator = () => { leadingVisual={CalendarIcon} trailingVisual={CalendarIcon} isLoading={isLoading} - loadingIndicatorPosition="trailing" + loaderPosition="trailing" value="trailing" /> diff --git a/src/TextInput.tsx b/src/TextInput.tsx index 64fce470d63..5863a205f08 100644 --- a/src/TextInput.tsx +++ b/src/TextInput.tsx @@ -18,7 +18,7 @@ export type TextInputNonPassthroughProps = { * 'leading': at the beginning of the input * 'trailing': at the end of the input **/ - loadingIndicatorPosition?: 'auto' | 'leading' | 'trailing' // TODO: come up with a shorter name + loaderPosition?: 'auto' | 'leading' | 'trailing' /** * A visual that renders inside the input before the typing area */ @@ -50,7 +50,7 @@ const TextInput = React.forwardRef( contrast, disabled, isLoading, - loadingIndicatorPosition, + loaderPosition, validationStatus, sx: sxProp, size: sizeProp, @@ -68,10 +68,9 @@ const TextInput = React.forwardRef( // this class is necessary to style FilterSearch, plz no touchy! const wrapperClasses = classnames(className, 'TextInput-wrapper') const showLeadingLoadingIndicator = - isLoading && - (loadingIndicatorPosition === 'leading' || Boolean(LeadingVisual && loadingIndicatorPosition !== 'trailing')) + isLoading && (loaderPosition === 'leading' || Boolean(LeadingVisual && loaderPosition !== 'trailing')) const showTrailingLoadingIndicator = - isLoading && (loadingIndicatorPosition === 'trailing' || Boolean(loadingIndicatorPosition === 'auto' && !LeadingVisual)) + isLoading && (loaderPosition === 'trailing' || Boolean(loaderPosition === 'auto' && !LeadingVisual)) const focusInput: MouseEventHandler = () => { inputRef.current?.focus() } @@ -116,7 +115,7 @@ const TextInput = React.forwardRef( TextInput.defaultProps = { type: 'text', - loadingIndicatorPosition: 'auto' + loaderPosition: 'auto' } TextInput.displayName = 'TextInput' diff --git a/src/TextInputWithTokens.tsx b/src/TextInputWithTokens.tsx index bb9497ba19a..f5f68b9dfde 100644 --- a/src/TextInputWithTokens.tsx +++ b/src/TextInputWithTokens.tsx @@ -70,7 +70,7 @@ function TextInputWithTokensInnerComponent { <> - + - + - + - + - + - + - + ) diff --git a/src/__tests__/TextInputWithTokens.test.tsx b/src/__tests__/TextInputWithTokens.test.tsx index b8c998f8bc4..0cb9f0c43f3 100644 --- a/src/__tests__/TextInputWithTokens.test.tsx +++ b/src/__tests__/TextInputWithTokens.test.tsx @@ -116,19 +116,9 @@ describe('TextInputWithTokens', () => { <> - + - + { onTokenRemove={onRemoveMock} isLoading leadingVisual={MarkGithubIcon} - loadingIndicatorPosition="leading" + loaderPosition="leading" /> { onTokenRemove={onRemoveMock} isLoading leadingVisual={MarkGithubIcon} - loadingIndicatorPosition="trailing" + loaderPosition="trailing" /> { onTokenRemove={onRemoveMock} isLoading trailingVisual={MarkGithubIcon} - loadingIndicatorPosition="leading" + loaderPosition="leading" /> { onTokenRemove={onRemoveMock} isLoading trailingVisual={MarkGithubIcon} - loadingIndicatorPosition="trailing" + loaderPosition="trailing" /> { isLoading leadingVisual={MarkGithubIcon} trailingVisual={MarkGithubIcon} - loadingIndicatorPosition="leading" + loaderPosition="leading" /> { size="large" leadingVisual={MarkGithubIcon} trailingVisual={MarkGithubIcon} - loadingIndicatorPosition="trailing" + loaderPosition="trailing" /> ) diff --git a/src/stories/TextInput.stories.tsx b/src/stories/TextInput.stories.tsx index 96a73a12d42..c4066b5b4c5 100644 --- a/src/stories/TextInput.stories.tsx +++ b/src/stories/TextInput.stories.tsx @@ -46,8 +46,8 @@ export default { type: 'boolean' } }, - loadingIndicatorPosition: { - name: 'loadingIndicatorPosition', + loaderPosition: { + name: 'loaderPosition', defaultValue: 'auto', options: ['auto', 'leading', 'trailing'], control: { diff --git a/src/stories/TextInputWithTokens.stories.tsx b/src/stories/TextInputWithTokens.stories.tsx index 32442a61eb6..5642565c2e0 100644 --- a/src/stories/TextInputWithTokens.stories.tsx +++ b/src/stories/TextInputWithTokens.stories.tsx @@ -54,8 +54,8 @@ export default { type: 'boolean' } }, - loadingIndicatorPosition: { - name: 'loadingIndicatorPosition', + loaderPosition: { + name: 'loaderPosition', defaultValue: 'auto', options: ['auto', 'leading', 'trailing'], control: { From 79fbe769d17f40adb966a60d2e9a537da66ace0e Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Thu, 10 Mar 2022 12:08:52 -0500 Subject: [PATCH 10/24] addresses PR feedback --- docs/content/TextInput.mdx | 81 +++++++++++------------------ src/stories/TextInput.stories.tsx | 86 ++++++++++++++++++++++++------- 2 files changed, 95 insertions(+), 72 deletions(-) diff --git a/docs/content/TextInput.mdx b/docs/content/TextInput.mdx index e4f6852b18c..7935ece0380 100644 --- a/docs/content/TextInput.mdx +++ b/docs/content/TextInput.mdx @@ -59,72 +59,49 @@ const WithIconAndLoadingIndicator = () => { return ( <> - + -

No visual

- - - - - - - - + + No visual + + + -

Leading visual

- - - - - - - - + + Leading visual + + + -

Trailing visual

- - - - - - - - + + Trailing visual + + + -

Both visuals

- - + + Both visuals + + + - - - - + + + Both visuals, position overriden + + @@ -195,7 +172,7 @@ render() ( + description={ <>
Which position to render the loading indicator
    @@ -207,7 +184,7 @@ render()
  • 'trailing': at the end of the input
- )} + } /> { ) } -export const WithLoadingIndicator = (args: TextInputProps) => { - const [isLoading, setIsLoading] = useState(true) +export const WithLoadingIndicator = () => { + const [isLoading, setIsLoading] = React.useState(true) const toggleLoadingState = () => { setIsLoading(!isLoading) } return ( -
- + <> + - - - No visual - - - - - Leading visual - - - - - Both visuals - - +

No visual

+ + - + + + + + + + +

Leading visual

+ + + + + + + + + + +

Trailing visual

+ + + + + + + + + + +

Both visuals

+ + + + + + + + + + ) } From 4a4fcc09907505f54d9040f8b5b47a07911ea91f Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Thu, 10 Mar 2022 12:12:41 -0500 Subject: [PATCH 11/24] fixes linting error --- src/stories/TextInput.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/stories/TextInput.stories.tsx b/src/stories/TextInput.stories.tsx index f06dbc64c18..c8bf8c00a77 100644 --- a/src/stories/TextInput.stories.tsx +++ b/src/stories/TextInput.stories.tsx @@ -1,7 +1,7 @@ import React, {useState, ReactNode} from 'react' import {Meta} from '@storybook/react' -import {BaseStyles, Box, ThemeProvider, Text, FormControl} from '..' +import {BaseStyles, Box, ThemeProvider, Text} from '..' import TextInput, {TextInputProps} from '../TextInput' import {CalendarIcon, CheckIcon} from '@primer/octicons-react' From 1bdf6d1f60816f807edfc4f1ac68a25d070aac2a Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Thu, 10 Mar 2022 12:44:31 -0500 Subject: [PATCH 12/24] indicate a busy status to assistive technology --- src/TextInput.tsx | 2 ++ src/__tests__/TextInput.test.tsx | 12 ++++++++++++ 2 files changed, 14 insertions(+) diff --git a/src/TextInput.tsx b/src/TextInput.tsx index 5863a205f08..4778208300f 100644 --- a/src/TextInput.tsx +++ b/src/TextInput.tsx @@ -91,6 +91,8 @@ const TextInput = React.forwardRef( hasLeadingVisual={Boolean(LeadingVisual || showLeadingLoadingIndicator)} hasTrailingVisual={Boolean(TrailingVisual || showTrailingLoadingIndicator)} onClick={focusInput} + aria-live="polite" + aria-busy={isLoading} > {IconComponent && } { ).toMatchSnapshot() }) + it('indicates a busy status to assistive technology', () => { + const {container} = HTMLRender( + <> + {/* eslint-disable-next-line jsx-a11y/label-has-for */} + + + + ) + + expect(container.querySelector('span[aria-busy=true]')).not.toBeNull() + }) + it('should call onChange prop with input value', () => { const onChangeMock = jest.fn() const component = mount() From 3464982b167ef8262550eb24e17a6466960b6e87 Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Fri, 11 Mar 2022 10:59:09 -0500 Subject: [PATCH 13/24] updates snaps --- src/TextInput.tsx | 2 +- .../__snapshots__/Autocomplete.test.tsx.snap | 14 +++++ .../__snapshots__/TextInput.test.tsx.snap | 51 +++++++++++++++++++ 3 files changed, 66 insertions(+), 1 deletion(-) diff --git a/src/TextInput.tsx b/src/TextInput.tsx index f16f5c95108..6ebabbe971f 100644 --- a/src/TextInput.tsx +++ b/src/TextInput.tsx @@ -94,7 +94,7 @@ const TextInput = React.forwardRef( hasTrailingVisual={Boolean(TrailingVisual || showTrailingLoadingIndicator)} onClick={focusInput} aria-live="polite" - aria-busy={isLoading} + aria-busy={Boolean(isLoading)} > {IconComponent && } @@ -241,6 +243,8 @@ Array [ } @@ -423,6 +427,8 @@ Array [ } @@ -1368,6 +1374,8 @@ Array [ } @@ -2223,6 +2231,8 @@ Array [ } @@ -3089,6 +3099,8 @@ Array [ } @@ -4085,6 +4097,8 @@ Array [ } diff --git a/src/__tests__/__snapshots__/TextInput.test.tsx.snap b/src/__tests__/__snapshots__/TextInput.test.tsx.snap index e83cff71fff..e8dbdc959dd 100644 --- a/src/__tests__/__snapshots__/TextInput.test.tsx.snap +++ b/src/__tests__/__snapshots__/TextInput.test.tsx.snap @@ -93,6 +93,8 @@ exports[`TextInput renders 1`] = ` } @@ -203,6 +205,8 @@ exports[`TextInput renders block 1`] = ` } @@ -308,6 +312,8 @@ exports[`TextInput renders consistently 1`] = ` } @@ -413,6 +419,8 @@ exports[`TextInput renders contrast 1`] = ` } @@ -518,6 +526,8 @@ exports[`TextInput renders error 1`] = ` } @@ -628,6 +638,8 @@ exports[`TextInput renders large 1`] = ` } @@ -867,7 +881,10 @@ exports[`TextInput renders monospace 1`] = ` } @@ -1084,6 +1103,8 @@ exports[`TextInput renders small 1`] = ` } @@ -1322,6 +1345,8 @@ exports[`TextInput renders warning 1`] = ` } @@ -1442,6 +1467,8 @@ Array [ } @@ -1601,6 +1628,8 @@ Array [ } @@ -1792,6 +1821,8 @@ Array [ } @@ -1960,6 +1991,8 @@ Array [ } @@ -2197,6 +2230,8 @@ Array [ } @@ -2434,6 +2469,8 @@ Array [ } @@ -2665,6 +2702,8 @@ Array [ } @@ -2864,6 +2903,8 @@ Array [ } @@ -3095,6 +3136,8 @@ Array [ } @@ -3310,6 +3353,8 @@ Array [ } @@ -3870,6 +3917,8 @@ Array [ } From d586a80e9af65ee652fe283eedf598c287c9b313 Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Tue, 15 Mar 2022 13:12:28 -0400 Subject: [PATCH 14/24] renames 'isLoading' prop to 'loading' --- docs/content/TextInput.mdx | 31 +++++++++--------- docs/content/TextInputWithTokens.mdx | 30 ++++++++--------- src/TextInput.tsx | 14 ++++---- src/TextInputWithTokens.tsx | 10 +++--- src/_TextInputInnerVisualSlot.tsx | 2 +- src/__tests__/TextInput.test.tsx | 26 +++++++-------- src/__tests__/TextInputWithTokens.test.tsx | 24 +++++++------- src/stories/TextInput.stories.tsx | 36 ++++++++++----------- src/stories/TextInputWithTokens.stories.tsx | 18 +++++------ 9 files changed, 96 insertions(+), 95 deletions(-) diff --git a/docs/content/TextInput.mdx b/docs/content/TextInput.mdx index 23f6f1f2a77..2781cfae43f 100644 --- a/docs/content/TextInput.mdx +++ b/docs/content/TextInput.mdx @@ -51,17 +51,17 @@ TextInput is a form component to add default styling to the native text input. ```javascript live noinline const WithIconAndLoadingIndicator = () => { - const [isLoading, setIsLoading] = React.useState(true) + const [loading, setLoading] = React.useState(true) const toggleLoadingState = () => { - setIsLoading(!isLoading) + setLoading(!loading) } return ( <> @@ -69,40 +69,35 @@ const WithIconAndLoadingIndicator = () => { No visual - + Leading visual - + Trailing visual - + Both visuals - + Both visuals, position overriden - + ) @@ -178,7 +173,8 @@ render() {' '} - + + ) type="'error' | 'success' | 'warning'" description="Style the input to match the status" /> - + { setDates(dates.filter(token => token.id !== tokenId)) } - const [isLoading, setIsLoading] = React.useState(true) + const [loading, setLoading] = React.useState(true) const toggleLoadingState = () => { - setIsLoading(!isLoading) + setLoading(!loading) } return ( <>

No visual

- + @@ -281,7 +281,7 @@ const WithIconAndLoadingIndicator = () => { tokens={dates} onTokenRemove={onDateRemove} value="trailing" - isLoading={isLoading} + loading={loading} loaderPosition="trailing" /> @@ -292,7 +292,7 @@ const WithIconAndLoadingIndicator = () => { tokens={dates} onTokenRemove={onDateRemove} leadingVisual={CalendarIcon} - isLoading={isLoading} + loading={loading} value="auto" />
@@ -301,7 +301,7 @@ const WithIconAndLoadingIndicator = () => { tokens={dates} onTokenRemove={onDateRemove} leadingVisual={CalendarIcon} - isLoading={isLoading} + loading={loading} loaderPosition="leading" value="leading" /> @@ -311,7 +311,7 @@ const WithIconAndLoadingIndicator = () => { tokens={dates} onTokenRemove={onDateRemove} leadingVisual={CalendarIcon} - isLoading={isLoading} + loading={loading} loaderPosition="trailing" value="trailing" /> @@ -323,7 +323,7 @@ const WithIconAndLoadingIndicator = () => { tokens={dates} onTokenRemove={onDateRemove} trailingVisual={CalendarIcon} - isLoading={isLoading} + loading={loading} value="auto" /> @@ -332,7 +332,7 @@ const WithIconAndLoadingIndicator = () => { tokens={dates} onTokenRemove={onDateRemove} trailingVisual={CalendarIcon} - isLoading={isLoading} + loading={loading} loaderPosition="leading" value="leading" /> @@ -342,7 +342,7 @@ const WithIconAndLoadingIndicator = () => { tokens={dates} onTokenRemove={onDateRemove} trailingVisual={CalendarIcon} - isLoading={isLoading} + loading={loading} loaderPosition="trailing" value="trailing" /> @@ -356,7 +356,7 @@ const WithIconAndLoadingIndicator = () => { size="small" leadingVisual={CalendarIcon} trailingVisual={CalendarIcon} - isLoading={isLoading} + loading={loading} value="auto" /> @@ -366,7 +366,7 @@ const WithIconAndLoadingIndicator = () => { onTokenRemove={onDateRemove} leadingVisual={CalendarIcon} trailingVisual={CalendarIcon} - isLoading={isLoading} + loading={loading} loaderPosition="leading" value="leading" /> @@ -378,7 +378,7 @@ const WithIconAndLoadingIndicator = () => { size="large" leadingVisual={CalendarIcon} trailingVisual={CalendarIcon} - isLoading={isLoading} + loading={loading} loaderPosition="trailing" value="trailing" /> diff --git a/src/TextInput.tsx b/src/TextInput.tsx index 6ebabbe971f..6143cf0b28c 100644 --- a/src/TextInput.tsx +++ b/src/TextInput.tsx @@ -11,7 +11,7 @@ export type TextInputNonPassthroughProps = { /** @deprecated Use `leadingVisual` or `trailingVisual` prop instead */ icon?: React.ComponentType<{className?: string}> /** Whether the to show a loading indicator in the input */ - isLoading?: boolean + loading?: boolean /** * Which position to render the loading indicator * 'auto' (default): at the end of the input, unless a `leadingVisual` is passed. Then, it will render at the beginning @@ -49,7 +49,7 @@ const TextInput = React.forwardRef( className, contrast, disabled, - isLoading, + loading, loaderPosition, monospace, validationStatus, @@ -69,9 +69,9 @@ const TextInput = React.forwardRef( // this class is necessary to style FilterSearch, plz no touchy! const wrapperClasses = classnames(className, 'TextInput-wrapper') const showLeadingLoadingIndicator = - isLoading && (loaderPosition === 'leading' || Boolean(LeadingVisual && loaderPosition !== 'trailing')) + loading && (loaderPosition === 'leading' || Boolean(LeadingVisual && loaderPosition !== 'trailing')) const showTrailingLoadingIndicator = - isLoading && (loaderPosition === 'trailing' || Boolean(loaderPosition === 'auto' && !LeadingVisual)) + loading && (loaderPosition === 'trailing' || Boolean(loaderPosition === 'auto' && !LeadingVisual)) const focusInput: MouseEventHandler = () => { inputRef.current?.focus() } @@ -94,13 +94,13 @@ const TextInput = React.forwardRef( hasTrailingVisual={Boolean(TrailingVisual || showTrailingLoadingIndicator)} onClick={focusInput} aria-live="polite" - aria-busy={Boolean(isLoading)} + aria-busy={Boolean(loading)} > {IconComponent && } {typeof LeadingVisual === 'function' ? : LeadingVisual} @@ -108,7 +108,7 @@ const TextInput = React.forwardRef( {typeof TrailingVisual === 'function' ? : TrailingVisual} diff --git a/src/TextInputWithTokens.tsx b/src/TextInputWithTokens.tsx index f5f68b9dfde..ca4828cccce 100644 --- a/src/TextInputWithTokens.tsx +++ b/src/TextInputWithTokens.tsx @@ -69,7 +69,7 @@ function TextInputWithTokensInnerComponent {IconComponent && !LeadingVisual && } @@ -362,7 +362,7 @@ function TextInputWithTokensInnerComponent diff --git a/src/_TextInputInnerVisualSlot.tsx b/src/_TextInputInnerVisualSlot.tsx index 901bba3c134..aac487b11e8 100644 --- a/src/_TextInputInnerVisualSlot.tsx +++ b/src/_TextInputInnerVisualSlot.tsx @@ -6,7 +6,7 @@ const TextInputInnerVisualSlot: React.FC<{ /** Whether the input is expected to ever show a loading indicator */ hasLoadingIndicator: boolean /** Whether the to show the loading indicator */ - showLoadingIndicator: TextInputNonPassthroughProps['isLoading'] + showLoadingIndicator: TextInputNonPassthroughProps['loading'] /** Which side of this visual is being rendered */ visualPosition: 'leading' | 'trailing' }> = ({children, hasLoadingIndicator, showLoadingIndicator, visualPosition}) => { diff --git a/src/__tests__/TextInput.test.tsx b/src/__tests__/TextInput.test.tsx index 79b591b2a63..9a55083cd97 100644 --- a/src/__tests__/TextInput.test.tsx +++ b/src/__tests__/TextInput.test.tsx @@ -84,30 +84,30 @@ describe('TextInput', () => { expect( render( <> - + - + - + - + - + - + - + - + - + - + - + { <> {/* eslint-disable-next-line jsx-a11y/label-has-for */} - + ) diff --git a/src/__tests__/TextInputWithTokens.test.tsx b/src/__tests__/TextInputWithTokens.test.tsx index 0cb9f0c43f3..51cbfd28fc7 100644 --- a/src/__tests__/TextInputWithTokens.test.tsx +++ b/src/__tests__/TextInputWithTokens.test.tsx @@ -114,23 +114,23 @@ describe('TextInputWithTokens', () => { expect( render( <> - + - + - + @@ -138,7 +138,7 @@ describe('TextInputWithTokens', () => { @@ -146,14 +146,14 @@ describe('TextInputWithTokens', () => { @@ -161,7 +161,7 @@ describe('TextInputWithTokens', () => { @@ -169,7 +169,7 @@ describe('TextInputWithTokens', () => { { { { } export const WithLoadingIndicator = () => { - const [isLoading, setIsLoading] = React.useState(true) + const [loading, setLoading] = React.useState(true) const toggleLoadingState = () => { - setIsLoading(!isLoading) + setLoading(!loading) } return ( <>

No visual

- + - + - +

Leading visual

- + - + - +

Trailing visual

- + - + - +

Both visuals

@@ -214,7 +214,7 @@ export const WithLoadingIndicator = () => { size="small" leadingVisual={CalendarIcon} trailingVisual={CalendarIcon} - isLoading={isLoading} + loading={loading} value="auto" /> @@ -222,7 +222,7 @@ export const WithLoadingIndicator = () => { @@ -232,7 +232,7 @@ export const WithLoadingIndicator = () => { size="large" leadingVisual={CalendarIcon} trailingVisual={CalendarIcon} - isLoading={isLoading} + loading={loading} loaderPosition="trailing" value="trailing" /> @@ -241,7 +241,7 @@ export const WithLoadingIndicator = () => { ) } -WithLoadingIndicator.parameters = {controls: {exclude: ['isLoading']}} +WithLoadingIndicator.parameters = {controls: {exclude: ['loading']}} export const ContrastTextInput = (args: TextInputProps) => { const [value, setValue] = useState('') diff --git a/src/stories/TextInputWithTokens.stories.tsx b/src/stories/TextInputWithTokens.stories.tsx index 5642565c2e0..5a5ac418f5f 100644 --- a/src/stories/TextInputWithTokens.stories.tsx +++ b/src/stories/TextInputWithTokens.stories.tsx @@ -47,8 +47,8 @@ export default { type: 'boolean' } }, - isLoading: { - name: 'isLoading', + loading: { + name: 'loading', defaultValue: false, control: { type: 'boolean' @@ -138,26 +138,26 @@ WithTrailingVisual.parameters = {controls: {exclude: [excludedControls, 'maxHeig export const WithLoadingIndicator = (args: TextInputWithTokensProps) => { const [tokens, setTokens] = useState([...mockTokens].slice(0, 3)) - const [isLoading, setIsLoading] = useState(true) + const [loading, setLoading] = useState(true) const onTokenRemove: (tokenId: string | number) => void = tokenId => { setTokens(tokens.filter(token => token.id !== tokenId)) } const toggleLoadingState = () => { - setIsLoading(!isLoading) + setLoading(!loading) } return (
No visual - + @@ -165,7 +165,7 @@ export const WithLoadingIndicator = (args: TextInputWithTokensProps) => { @@ -176,7 +176,7 @@ export const WithLoadingIndicator = (args: TextInputWithTokensProps) => { { ) } -WithLoadingIndicator.parameters = {controls: {exclude: [excludedControls, 'maxHeight', 'isLoading']}} +WithLoadingIndicator.parameters = {controls: {exclude: [excludedControls, 'maxHeight', 'loading']}} export const UsingIssueLabelTokens = (args: TextInputWithTokensProps) => { const [tokens, setTokens] = useState([ From 8bc639e5311a0c4bcebc5e0977af264c2002f0c9 Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Mon, 21 Mar 2022 14:21:17 -0400 Subject: [PATCH 15/24] Update docs/content/TextInput.mdx Co-authored-by: Cole Bemis --- docs/content/TextInput.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/content/TextInput.mdx b/docs/content/TextInput.mdx index 2781cfae43f..1ff90b33cf8 100644 --- a/docs/content/TextInput.mdx +++ b/docs/content/TextInput.mdx @@ -162,7 +162,7 @@ render() name="block" type="boolean" defaultValue="false" - description={<>Creates a full width input element} + description="Creates a full-width input element" /> Date: Mon, 21 Mar 2022 14:21:27 -0400 Subject: [PATCH 16/24] Update docs/content/TextInput.mdx Co-authored-by: Cole Bemis --- docs/content/TextInput.mdx | 2 -- 1 file changed, 2 deletions(-) diff --git a/docs/content/TextInput.mdx b/docs/content/TextInput.mdx index 1ff90b33cf8..6d9676d49dd 100644 --- a/docs/content/TextInput.mdx +++ b/docs/content/TextInput.mdx @@ -172,8 +172,6 @@ render() /> -{' '} - Date: Mon, 21 Mar 2022 14:21:39 -0400 Subject: [PATCH 17/24] Update docs/content/TextInput.mdx Co-authored-by: Cole Bemis --- docs/content/TextInput.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/content/TextInput.mdx b/docs/content/TextInput.mdx index 6d9676d49dd..8a13b4120df 100644 --- a/docs/content/TextInput.mdx +++ b/docs/content/TextInput.mdx @@ -172,7 +172,7 @@ render() /> - + Date: Mon, 21 Mar 2022 14:22:54 -0400 Subject: [PATCH 18/24] Update docs/content/TextInput.mdx Co-authored-by: Cole Bemis --- docs/content/TextInput.mdx | 14 +------------- 1 file changed, 1 insertion(+), 13 deletions(-) diff --git a/docs/content/TextInput.mdx b/docs/content/TextInput.mdx index 8a13b4120df..d87040431f6 100644 --- a/docs/content/TextInput.mdx +++ b/docs/content/TextInput.mdx @@ -193,19 +193,7 @@ render() string | React.ComponentType} - description={() => ( - <> -
Which position to render the loading indicator
-
    -
  • - 'auto' (default): at the end of the input, unless a `leadingVisual` is passed. Then, it will render at the - beginning -
    • -
  • 'leading': at the beginning of the input
    • -
  • 'trailing': at the end of the input
    • -
- - )} + description="Visual positioned on the left edge inside the input" /> Date: Mon, 21 Mar 2022 14:23:01 -0400 Subject: [PATCH 19/24] Update docs/content/TextInput.mdx Co-authored-by: Cole Bemis --- docs/content/TextInput.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/content/TextInput.mdx b/docs/content/TextInput.mdx index d87040431f6..a99088752c7 100644 --- a/docs/content/TextInput.mdx +++ b/docs/content/TextInput.mdx @@ -175,7 +175,7 @@ render()
Which position to render the loading indicator
From 8bf281de7de6c9507c28065d7d5168b7ae41e79c Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Mon, 21 Mar 2022 14:31:48 -0400 Subject: [PATCH 20/24] updates snapshots --- .../__snapshots__/TextInput.test.tsx.snap | 336 ++++++++-------- .../TextInputWithTokens.test.tsx.snap | 380 +++++++++--------- 2 files changed, 358 insertions(+), 358 deletions(-) diff --git a/src/__tests__/__snapshots__/TextInput.test.tsx.snap b/src/__tests__/__snapshots__/TextInput.test.tsx.snap index 428f988f6b8..9b90d3ef97f 100644 --- a/src/__tests__/__snapshots__/TextInput.test.tsx.snap +++ b/src/__tests__/__snapshots__/TextInput.test.tsx.snap @@ -1381,20 +1381,6 @@ Array [ position: relative; } -.c1 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; -} - -.c1:focus { - outline: 0; -} - .c0 { font-size: 14px; line-height: 20px; @@ -1466,6 +1452,20 @@ Array [ padding-right: 0; } +.c1 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c1:focus { + outline: 0; +} + .c3 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; @@ -1536,20 +1536,6 @@ Array [ position: relative; } -.c3 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; -} - -.c3:focus { - outline: 0; -} - .c0 { font-size: 14px; line-height: 20px; @@ -1621,6 +1607,20 @@ Array [ padding-right: 12px; } +.c3 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c3:focus { + outline: 0; +} + .c2 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; @@ -1735,20 +1735,6 @@ Array [ position: relative; } -.c1 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; -} - -.c1:focus { - outline: 0; -} - .c0 { font-size: 14px; line-height: 20px; @@ -1820,6 +1806,20 @@ Array [ padding-right: 0; } +.c1 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c1:focus { + outline: 0; +} + .c3 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; @@ -1894,20 +1894,6 @@ Array [ visibility: hidden; } -.c4 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; -} - -.c4:focus { - outline: 0; -} - .c0 { font-size: 14px; line-height: 20px; @@ -1979,6 +1965,20 @@ Array [ padding-right: 12px; } +.c4 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c4:focus { + outline: 0; +} + .c5 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; @@ -2133,20 +2133,6 @@ Array [ visibility: hidden; } -.c4 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; -} - -.c4:focus { - outline: 0; -} - .c0 { font-size: 14px; line-height: 20px; @@ -2218,6 +2204,20 @@ Array [ padding-right: 12px; } +.c4 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c4:focus { + outline: 0; +} + .c5 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; @@ -2372,20 +2372,6 @@ Array [ visibility: visible; } -.c4 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; -} - -.c4:focus { - outline: 0; -} - .c0 { font-size: 14px; line-height: 20px; @@ -2457,6 +2443,20 @@ Array [ padding-right: 0; } +.c4 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c4:focus { + outline: 0; +} + .c5 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; @@ -2611,20 +2611,6 @@ Array [ visibility: hidden; } -.c1 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; -} - -.c1:focus { - outline: 0; -} - .c0 { font-size: 14px; line-height: 20px; @@ -2696,6 +2682,20 @@ Array [ padding-right: 0; } +.c1 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c1:focus { + outline: 0; +} + .c4 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; @@ -2806,20 +2806,6 @@ Array [ visibility: visible; } -.c3 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; -} - -.c3:focus { - outline: 0; -} - .c0 { font-size: 14px; line-height: 20px; @@ -2891,6 +2877,20 @@ Array [ padding-right: 0; } +.c3 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c3:focus { + outline: 0; +} + .c2 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; @@ -3045,20 +3045,6 @@ Array [ visibility: hidden; } -.c1 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; -} - -.c1:focus { - outline: 0; -} - .c0 { font-size: 14px; line-height: 20px; @@ -3130,6 +3116,20 @@ Array [ padding-right: 0; } +.c1 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c1:focus { + outline: 0; +} + .c4 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; @@ -3244,20 +3244,6 @@ Array [ visibility: visible; } -.c4 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; -} - -.c4:focus { - outline: 0; -} - .c0 { font-size: 14px; line-height: 20px; @@ -3336,6 +3322,20 @@ Array [ padding-right: 0; } +.c4 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c4:focus { + outline: 0; +} + .c3 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; @@ -3531,20 +3531,6 @@ Array [ visibility: visible; } -.c4 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; -} - -.c4:focus { - outline: 0; -} - .c0 { font-size: 14px; line-height: 20px; @@ -3616,6 +3602,20 @@ Array [ padding-right: 0; } +.c4 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c4:focus { + outline: 0; +} + .c3 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; @@ -3810,20 +3810,6 @@ Array [ visibility: visible; } -.c4 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; -} - -.c4:focus { - outline: 0; -} - .c0 { font-size: 14px; line-height: 20px; @@ -3900,6 +3886,20 @@ Array [ padding-right: 0; } +.c4 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c4:focus { + outline: 0; +} + .c3 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; diff --git a/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap b/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap index db91a0b7eb0..c4f02a602bc 100644 --- a/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap +++ b/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap @@ -5796,21 +5796,6 @@ Array [ position: relative; } -.c3 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; - height: 100%; -} - -.c3:focus { - outline: 0; -} - .c0 { font-size: 14px; line-height: 20px; @@ -5837,7 +5822,7 @@ Array [ background-repeat: no-repeat; background-position: right 8px center; padding-left: 0; - padding-right: 12px; + padding-right: 0; padding-left: 12px; padding-top: calc(12px / 2); padding-bottom: calc(12px / 2); @@ -5885,7 +5870,22 @@ Array [ .c0 > input, .c0 > select { padding-left: 12px; - padding-right: 0; + padding-right: 12px; +} + +.c3 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; + height: 100%; +} + +.c3:focus { + outline: 0; } .c8 { @@ -6519,21 +6519,6 @@ Array [ position: relative; } -.c5 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; - height: 100%; -} - -.c5:focus { - outline: 0; -} - .c0 { font-size: 14px; line-height: 20px; @@ -6559,7 +6544,7 @@ Array [ padding-bottom: calc(12px / 2); background-repeat: no-repeat; background-position: right 8px center; - padding-left: 12px; + padding-left: 0; padding-right: 0; padding-left: 12px; padding-top: calc(12px / 2); @@ -6607,10 +6592,25 @@ Array [ .c0 > input, .c0 > select { - padding-left: 0; + padding-left: 12px; padding-right: 12px; } +.c5 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; + height: 100%; +} + +.c5:focus { + outline: 0; +} + .c2 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; @@ -7286,21 +7286,6 @@ Array [ position: relative; } -.c3 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; - height: 100%; -} - -.c3:focus { - outline: 0; -} - .c0 { font-size: 14px; line-height: 20px; @@ -7327,7 +7312,7 @@ Array [ background-repeat: no-repeat; background-position: right 8px center; padding-left: 0; - padding-right: 12px; + padding-right: 0; padding-left: 12px; padding-top: calc(12px / 2); padding-bottom: calc(12px / 2); @@ -7375,7 +7360,22 @@ Array [ .c0 > input, .c0 > select { padding-left: 12px; - padding-right: 0; + padding-right: 12px; +} + +.c3 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; + height: 100%; +} + +.c3:focus { + outline: 0; } .c8 { @@ -8013,21 +8013,6 @@ Array [ visibility: hidden; } -.c6 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; - height: 100%; -} - -.c6:focus { - outline: 0; -} - .c0 { font-size: 14px; line-height: 20px; @@ -8105,6 +8090,21 @@ Array [ padding-right: 12px; } +.c6 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; + height: 100%; +} + +.c6:focus { + outline: 0; +} + .c10 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; @@ -8820,21 +8820,6 @@ Array [ visibility: hidden; } -.c6 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; - height: 100%; -} - -.c6:focus { - outline: 0; -} - .c0 { font-size: 14px; line-height: 20px; @@ -8912,6 +8897,21 @@ Array [ padding-right: 12px; } +.c6 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; + height: 100%; +} + +.c6:focus { + outline: 0; +} + .c10 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; @@ -9627,21 +9627,6 @@ Array [ visibility: visible; } -.c6 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; - height: 100%; -} - -.c6:focus { - outline: 0; -} - .c0 { font-size: 14px; line-height: 20px; @@ -9668,7 +9653,7 @@ Array [ background-repeat: no-repeat; background-position: right 8px center; padding-left: 12px; - padding-right: 12px; + padding-right: 0; padding-left: 12px; padding-top: calc(12px / 2); padding-bottom: calc(12px / 2); @@ -9716,7 +9701,22 @@ Array [ .c0 > input, .c0 > select { padding-left: 0; - padding-right: 0; + padding-right: 12px; +} + +.c6 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; + height: 100%; +} + +.c6:focus { + outline: 0; } .c10 { @@ -10434,21 +10434,6 @@ Array [ visibility: hidden; } -.c3 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; - height: 100%; -} - -.c3:focus { - outline: 0; -} - .c0 { font-size: 14px; line-height: 20px; @@ -10526,6 +10511,21 @@ Array [ padding-right: 0; } +.c3 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; + height: 100%; +} + +.c3:focus { + outline: 0; +} + .c9 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; @@ -11197,21 +11197,6 @@ Array [ visibility: visible; } -.c5 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; - height: 100%; -} - -.c5:focus { - outline: 0; -} - .c0 { font-size: 14px; line-height: 20px; @@ -11237,7 +11222,7 @@ Array [ padding-bottom: calc(12px / 2); background-repeat: no-repeat; background-position: right 8px center; - padding-left: 12px; + padding-left: 0; padding-right: 12px; padding-left: 12px; padding-top: calc(12px / 2); @@ -11285,10 +11270,25 @@ Array [ .c0 > input, .c0 > select { - padding-left: 0; + padding-left: 12px; padding-right: 0; } +.c5 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; + height: 100%; +} + +.c5:focus { + outline: 0; +} + .c2 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; @@ -12004,21 +12004,6 @@ Array [ visibility: hidden; } -.c3 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; - height: 100%; -} - -.c3:focus { - outline: 0; -} - .c0 { font-size: 14px; line-height: 20px; @@ -12096,6 +12081,21 @@ Array [ padding-right: 0; } +.c3 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; + height: 100%; +} + +.c3:focus { + outline: 0; +} + .c9 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; @@ -12771,21 +12771,6 @@ Array [ visibility: visible; } -.c6 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; - height: 100%; -} - -.c6:focus { - outline: 0; -} - .c0 { font-size: 14px; line-height: 20px; @@ -12870,6 +12855,21 @@ Array [ padding-right: 0; } +.c6 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; + height: 100%; +} + +.c6:focus { + outline: 0; +} + .c3 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; @@ -13625,21 +13625,6 @@ Array [ visibility: visible; } -.c6 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; - height: 100%; -} - -.c6:focus { - outline: 0; -} - .c0 { font-size: 14px; line-height: 20px; @@ -13717,6 +13702,21 @@ Array [ padding-right: 0; } +.c6 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; + height: 100%; +} + +.c6:focus { + outline: 0; +} + .c3 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; @@ -14472,21 +14472,6 @@ Array [ visibility: visible; } -.c6 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; - height: 100%; -} - -.c6:focus { - outline: 0; -} - .c0 { font-size: 14px; line-height: 20px; @@ -14564,6 +14549,21 @@ Array [ padding-right: 0; } +.c6 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; + height: 100%; +} + +.c6:focus { + outline: 0; +} + .c3 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; From e785ccdd926cf5e123df82e7e6ec21912b764660 Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Mon, 21 Mar 2022 14:34:12 -0400 Subject: [PATCH 21/24] nests examples under an 'Examples' heading --- docs/content/TextInput.mdx | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/docs/content/TextInput.mdx b/docs/content/TextInput.mdx index a99088752c7..bb98bb7113c 100644 --- a/docs/content/TextInput.mdx +++ b/docs/content/TextInput.mdx @@ -9,13 +9,15 @@ TextInput is a form component to add default styling to the native text input. **Note:** Don't forget to set `aria-label` to make the TextInput accessible to screen reader users. -## Default example +## Examples + +### Basic ```jsx live ``` -## Text Input with icons +### With icons ```jsx live <> @@ -37,7 +39,7 @@ TextInput is a form component to add default styling to the native text input. ``` -## Text Input with text visuals +### With text visuals ```jsx live <> @@ -47,7 +49,7 @@ TextInput is a form component to add default styling to the native text input. ``` -## Text Input with visuals and loading indicators +### With visuals and loading indicators ```javascript live noinline const WithIconAndLoadingIndicator = () => { @@ -106,7 +108,7 @@ const WithIconAndLoadingIndicator = () => { render() ``` -## Text Input with error and warning states +### With error and warning states ```jsx live <> @@ -128,19 +130,19 @@ render() ``` -## Block text input +### Block text input ```jsx live ``` -## Contrast text input +### Contrast text input ```jsx live ``` -## Monospace text input +### Monospace text input ```jsx live Date: Mon, 21 Mar 2022 14:39:33 -0400 Subject: [PATCH 22/24] export TextInput non-pass-through props --- src/TextInput.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/TextInput.tsx b/src/TextInput.tsx index 671fcc9097f..212a7e65499 100644 --- a/src/TextInput.tsx +++ b/src/TextInput.tsx @@ -8,7 +8,7 @@ import {Merge} from './utils/types' import TextInputWrapper, {StyledWrapperProps} from './_TextInputWrapper' import UnstyledTextInput from './_UnstyledTextInput' -type NonPassthroughProps = { +export type TextInputNonPassthroughProps = { /** @deprecated Use `leadingVisual` or `trailingVisual` prop instead */ icon?: React.ComponentType<{className?: string}> /** Whether the to show a loading indicator in the input */ From fffa7641349a427ec40a5a67b74e8ef3eb866216 Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Mon, 21 Mar 2022 14:42:44 -0400 Subject: [PATCH 23/24] fix undefined type usage --- src/TextInput.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/TextInput.tsx b/src/TextInput.tsx index 212a7e65499..08f59f3ea89 100644 --- a/src/TextInput.tsx +++ b/src/TextInput.tsx @@ -43,7 +43,7 @@ export type TextInputNonPassthroughProps = { | 'validationStatus' > -export type TextInputProps = Merge, NonPassthroughProps> +export type TextInputProps = Merge, TextInputNonPassthroughProps> // using forwardRef is important so that other components (ex. SelectMenu) can autofocus the input const TextInput = React.forwardRef( From f9ad318d202b2d81fc0ebc5ca231838000527699 Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Mon, 21 Mar 2022 15:12:02 -0400 Subject: [PATCH 24/24] fixes story types --- src/stories/TextInputWithTokens.stories.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/stories/TextInputWithTokens.stories.tsx b/src/stories/TextInputWithTokens.stories.tsx index 7285d8b0d1a..084d3179f90 100644 --- a/src/stories/TextInputWithTokens.stories.tsx +++ b/src/stories/TextInputWithTokens.stories.tsx @@ -157,29 +157,29 @@ export const WithLoadingIndicator = (args: TextInputWithTokensProps) => { No visual - + Leading visual Both visuals