From 75bf0c62a3818ff8db6b17bf9458d089ecfcfe00 Mon Sep 17 00:00:00 2001 From: Pavithra Kodmad Date: Mon, 29 Nov 2021 21:18:29 +1100 Subject: [PATCH 01/10] Enhance text input component --- src/TextInput.tsx | 20 +++++-- src/_TextInputWrapper.tsx | 87 ++++++++++++++++++++++--------- src/stories/TextInput.stories.tsx | 68 +++++++++++++++++++++++- 3 files changed, 144 insertions(+), 31 deletions(-) diff --git a/src/TextInput.tsx b/src/TextInput.tsx index 4b30f76fe12..51ca326d3a3 100644 --- a/src/TextInput.tsx +++ b/src/TextInput.tsx @@ -6,10 +6,13 @@ import TextInputWrapper from './_TextInputWrapper' type NonPassthroughProps = { className?: string + // deprecate icon prop icon?: React.ComponentType<{className?: string}> + leadingIcon?: React.ComponentType<{className?: string}> + trailingIcon?: React.ComponentType<{className?: string}> } & Pick< ComponentProps, - 'block' | 'contrast' | 'disabled' | 'sx' | 'theme' | 'width' | 'maxWidth' | 'minWidth' | 'variant' + 'block' | 'contrast' | 'disabled' | 'sx' | 'theme' | 'width' | 'maxWidth' | 'minWidth' | 'variant' | 'size' > // Note: using ComponentProps instead of ComponentPropsWithoutRef here would cause a type issue where `css` is a required prop. @@ -20,16 +23,22 @@ const TextInput = React.forwardRef( ( { icon: IconComponent, + leadingIcon: LeadingIconComponent, + trailingIcon: TrailingIconComponent, block, className, contrast, disabled, + status, sx: sxProp, theme, + size: sizeProp, + // start deprecated props width: widthProp, minWidth: minWidthProp, maxWidth: maxWidthProp, variant: variantProp, + // end deprecated props ...inputProps }, ref @@ -41,9 +50,10 @@ const TextInput = React.forwardRef( ( maxWidth={maxWidthProp} variant={variantProp} > - {IconComponent && } - + {IconComponent && } + {LeadingIconComponent && } + + {TrailingIconComponent && } ) } diff --git a/src/_TextInputWrapper.tsx b/src/_TextInputWrapper.tsx index fbc4da61e13..727cb74b20c 100644 --- a/src/_TextInputWrapper.tsx +++ b/src/_TextInputWrapper.tsx @@ -3,7 +3,25 @@ import {maxWidth, MaxWidthProps, minWidth, MinWidthProps, variant, width, WidthP import {get} from './constants' import sx, {SxProp} from './sx' +const sizeDeprecatedVariants = variant({ + variants: { + small: { + minHeight: '28px', + px: 2, + py: '3px', + fontSize: 0, + lineHeight: '20px' + }, + large: { + px: 2, + py: '10px', + fontSize: 3 + } + } +}) + const sizeVariants = variant({ + prop: 'size', variants: { small: { minHeight: '28px', @@ -25,20 +43,22 @@ type StyledWrapperProps = { hasIcon?: boolean block?: boolean contrast?: boolean + status?: 'error' | 'warning' variant?: 'small' | 'large' + size?: 'small' | 'large' } & WidthProps & MinWidthProps & MaxWidthProps & SxProp const TextInputWrapper = styled.span` - display: inline-flex; - align-items: stretch; + width: max-content; min-height: 34px; font-size: ${get('fontSizes.1')}; line-height: 20px; color: ${get('colors.fg.default')}; vertical-align: middle; + background-color: ${get('colors.input.bg')}; background-repeat: no-repeat; // Repeat and position set for form states (success, error, etc) background-position: right 8px center; // For form validation. This keeps images 8px from right and centered vertically. border: 1px solid ${get('colors.border.default')}; @@ -46,24 +66,26 @@ const TextInputWrapper = styled.span` outline: none; box-shadow: ${get('shadows.primer.shadow.inset')}; cursor: text; + padding: 6px 12px; + display: grid; + grid-template-areas: 'leadingIcon input trailingIcon'; + & > :not(:last-child) { + margin-right: ${get('space.2')}; + } + [data-component='input'] { + grid-area: input; + } - ${props => { - if (props.hasIcon) { - return css` - padding: 0; - ` - } else { - return css` - padding: 6px 12px; - ` - } - }} + .TextInput-leading-icon { + align-self: center; + color: ${get('colors.fg.muted')}; + grid-area: leadingIcon; + } - .TextInput-icon { + .TextInput-trailing-icon { align-self: center; color: ${get('colors.fg.muted')}; - margin: 0 ${get('space.2')}; - flex-shrink: 0; + grid-area: trailingIcon; } &:focus-within { @@ -84,19 +106,31 @@ const TextInputWrapper = styled.span` background-color: ${get('colors.input.disabledBg')}; border-color: ${get('colors.border.default')}; `} - - ${props => - props.block && + + ${props => + props.status === 'error' && css` - display: block; - width: 100%; + border-color: ${get('colors.danger.emphasis')}; + &:focus-within { + border-color: ${get('colors.danger.emphasis')}; + box-shadow: ${get('shadows.btn.danger.focusShadow')}; + } `} + ${props => + props.status === 'warning' && + css` + border-color: ${get('colors.attention.emphasis')}; + &:focus-within { + border-color: ${get('colors.attention.emphasis')}; + box-shadow: 0 0 0 3px ${get('colors.attention.muted')}; + } + `} + ${props => props.block && - props.hasIcon && css` - display: flex; + width: 100%; `} // Ensures inputs don't zoom on mobile but are body-font size on desktop @@ -105,9 +139,10 @@ const TextInputWrapper = styled.span` } ${width} ${minWidth} - ${maxWidth} - ${sizeVariants} - ${sx}; + ${maxWidth} + ${sizeDeprecatedVariants} + ${sizeVariants} + ${sx}; ` export default TextInputWrapper diff --git a/src/stories/TextInput.stories.tsx b/src/stories/TextInput.stories.tsx index 0d8c9fb8fdc..1a69109669b 100644 --- a/src/stories/TextInput.stories.tsx +++ b/src/stories/TextInput.stories.tsx @@ -43,6 +43,18 @@ export default { name: 'Variants', options: ['small', 'medium', 'large'], control: {type: 'radio'} + }, + status: { + name: 'Status', + options: ['warning', 'error'], + control: {type: 'radio'} + }, + placeholder: { + name: 'Placeholder', + defaultValue: 'Hello!', + control: { + type: 'text' + } } } } as Meta @@ -89,7 +101,43 @@ export const WithLeadingIcon = (args: TextInputProps) => {

- + + + ) +} + +export const WithTrailingIcon = (args: TextInputProps) => { + const [value, setValue] = useState('') + + const handleChange = (event: React.ChangeEvent) => { + setValue(event.target.value) + } + + const inputId = 'basic-text-input-with-trailing-icon' + + return ( +
+ +
+ + + ) +} + +export const ContrastTextInput = (args: TextInputProps) => { + const [value, setValue] = useState('') + + const handleChange = (event: React.ChangeEvent) => { + setValue(event.target.value) + } + + const inputId = 'contrast-text-input' + + return ( +
+ +
+ ) } @@ -111,3 +159,21 @@ export const Password = (args: TextInputProps) => { ) } + +export const TextInputInWarningState = (args: TextInputProps) => { + const [value, setValue] = useState('') + + const handleChange = (event: React.ChangeEvent) => { + setValue(event.target.value) + } + + const inputId = 'text-input-with-warning' + + return ( +
+ +
+ + + ) +} From 2b357ca304d30438e2100250d50678a50c080e94 Mon Sep 17 00:00:00 2001 From: Pavithra Kodmad Date: Mon, 29 Nov 2021 21:26:35 +1100 Subject: [PATCH 02/10] Add tests --- src/TextInput.tsx | 1 + src/_TextInputWrapper.tsx | 2 +- src/__tests__/TextInput.test.tsx | 29 +- .../__snapshots__/Autocomplete.test.tsx.snap | 259 ++++-- .../__snapshots__/TextInput.test.tsx.snap | 790 ++++++++++++++++-- .../TextInputWithTokens.test.tsx.snap | 433 ++++++---- src/stories/TextInput.stories.tsx | 2 +- 7 files changed, 1174 insertions(+), 342 deletions(-) diff --git a/src/TextInput.tsx b/src/TextInput.tsx index 51ca326d3a3..87627efd10d 100644 --- a/src/TextInput.tsx +++ b/src/TextInput.tsx @@ -56,6 +56,7 @@ const TextInput = React.forwardRef( hasIcon={!!IconComponent || !!(LeadingIconComponent || TrailingIconComponent)} sx={sxProp} theme={theme} + size={sizeProp} width={widthProp} minWidth={minWidthProp} maxWidth={maxWidthProp} diff --git a/src/_TextInputWrapper.tsx b/src/_TextInputWrapper.tsx index 727cb74b20c..d23f8056719 100644 --- a/src/_TextInputWrapper.tsx +++ b/src/_TextInputWrapper.tsx @@ -58,7 +58,7 @@ const TextInputWrapper = styled.span` line-height: 20px; color: ${get('colors.fg.default')}; vertical-align: middle; - background-color: ${get('colors.input.bg')}; + background-color: ${get('colors.canvas.default')}; background-repeat: no-repeat; // Repeat and position set for form states (success, error, etc) background-position: right 8px center; // For form validation. This keeps images 8px from right and centered vertically. border: 1px solid ${get('colors.border.default')}; diff --git a/src/__tests__/TextInput.test.tsx b/src/__tests__/TextInput.test.tsx index 7427a76569d..9f8765a878b 100644 --- a/src/__tests__/TextInput.test.tsx +++ b/src/__tests__/TextInput.test.tsx @@ -4,6 +4,7 @@ import {render, mount, behavesAsComponent, checkExports} from '../utils/testing' import {render as HTMLRender, cleanup} from '@testing-library/react' import {axe, toHaveNoViolations} from 'jest-axe' import 'babel-polyfill' +import {SearchIcon} from '@primer/octicons-react' expect.extend(toHaveNoViolations) describe('TextInput', () => { @@ -25,17 +26,41 @@ describe('TextInput', () => { }) it('renders small', () => { - expect(render()).toMatchSnapshot() + expect(render()).toMatchSnapshot() }) it('renders large', () => { - expect(render()).toMatchSnapshot() + expect(render()).toMatchSnapshot() }) it('renders block', () => { expect(render()).toMatchSnapshot() }) + it('renders warning', () => { + expect(render()).toMatchSnapshot() + }) + + it('renders error', () => { + expect(render()).toMatchSnapshot() + }) + + it('renders contrast', () => { + expect(render()).toMatchSnapshot() + }) + + it('renders placeholder', () => { + expect(render()).toMatchSnapshot() + }) + + it('renders leadingIcon', () => { + expect(render()).toMatchSnapshot() + }) + + it('renders trailingIcon', () => { + expect(render()).toMatchSnapshot() + }) + it('should call onChange prop with input value', () => { const onChangeMock = jest.fn() const component = mount() diff --git a/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap b/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap index 81eed5d4814..ee70a47c557 100644 --- a/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap +++ b/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap @@ -17,14 +17,9 @@ Array [ } .c0 { - 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; + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; min-height: 34px; font-size: 14px; line-height: 20px; @@ -38,17 +33,32 @@ Array [ box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); cursor: text; padding: 6px 12px; + display: grid; + grid-template-areas: 'leadingIcon input trailingIcon'; } -.c0 .TextInput-icon { +.c0 >:not(:last-child) { + margin-right: 8px; +} + +.c0 [data-component='input'] { + grid-area: input; +} + +.c0 .TextInput-leading-icon { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - margin: 0 8px; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; + grid-area: leadingIcon; +} + +.c0 .TextInput-trailing-icon { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + color: #57606a; + grid-area: trailingIcon; } .c0:focus-within { @@ -72,6 +82,7 @@ Array [ aria-haspopup="listbox" aria-owns="autocompleteId-listbox" className="c1" + data-component="input" onBlur={[Function]} onChange={[Function]} onFocus={[Function]} @@ -130,14 +141,9 @@ Array [ } .c0 { - 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; + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; min-height: 34px; font-size: 14px; line-height: 20px; @@ -151,17 +157,32 @@ Array [ box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); cursor: text; padding: 6px 12px; + display: grid; + grid-template-areas: 'leadingIcon input trailingIcon'; +} + +.c0 >:not(:last-child) { + margin-right: 8px; +} + +.c0 [data-component='input'] { + grid-area: input; } -.c0 .TextInput-icon { +.c0 .TextInput-leading-icon { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - margin: 0 8px; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; + grid-area: leadingIcon; +} + +.c0 .TextInput-trailing-icon { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + color: #57606a; + grid-area: trailingIcon; } .c0:focus-within { @@ -185,6 +206,7 @@ Array [ aria-haspopup="listbox" aria-owns="autocompleteId-listbox" className="c1" + data-component="input" onBlur={[Function]} onChange={[Function]} onFocus={[Function]} @@ -278,14 +300,9 @@ Array [ } .c0 { - 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; + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; min-height: 34px; font-size: 14px; line-height: 20px; @@ -299,17 +316,32 @@ Array [ box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); cursor: text; padding: 6px 12px; + display: grid; + grid-template-areas: 'leadingIcon input trailingIcon'; +} + +.c0 >:not(:last-child) { + margin-right: 8px; } -.c0 .TextInput-icon { +.c0 [data-component='input'] { + grid-area: input; +} + +.c0 .TextInput-leading-icon { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - margin: 0 8px; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; + grid-area: leadingIcon; +} + +.c0 .TextInput-trailing-icon { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + color: #57606a; + grid-area: trailingIcon; } .c0:focus-within { @@ -333,6 +365,7 @@ Array [ aria-haspopup="listbox" aria-owns="autocompleteId-listbox" className="c1" + data-component="input" onBlur={[Function]} onChange={[Function]} onFocus={[Function]} @@ -1189,14 +1222,9 @@ Array [ } .c0 { - 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; + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; min-height: 34px; font-size: 14px; line-height: 20px; @@ -1210,17 +1238,32 @@ Array [ box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); cursor: text; padding: 6px 12px; + display: grid; + grid-template-areas: 'leadingIcon input trailingIcon'; +} + +.c0 >:not(:last-child) { + margin-right: 8px; +} + +.c0 [data-component='input'] { + grid-area: input; } -.c0 .TextInput-icon { +.c0 .TextInput-leading-icon { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - margin: 0 8px; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; + grid-area: leadingIcon; +} + +.c0 .TextInput-trailing-icon { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + color: #57606a; + grid-area: trailingIcon; } .c0:focus-within { @@ -1244,6 +1287,7 @@ Array [ aria-haspopup="listbox" aria-owns="autocompleteId-listbox" className="c1" + data-component="input" onBlur={[Function]} onChange={[Function]} onFocus={[Function]} @@ -2010,14 +2054,9 @@ Array [ } .c0 { - 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; + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; min-height: 34px; font-size: 14px; line-height: 20px; @@ -2031,17 +2070,32 @@ Array [ box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); cursor: text; padding: 6px 12px; + display: grid; + grid-template-areas: 'leadingIcon input trailingIcon'; } -.c0 .TextInput-icon { +.c0 >:not(:last-child) { + margin-right: 8px; +} + +.c0 [data-component='input'] { + grid-area: input; +} + +.c0 .TextInput-leading-icon { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - margin: 0 8px; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; + grid-area: leadingIcon; +} + +.c0 .TextInput-trailing-icon { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + color: #57606a; + grid-area: trailingIcon; } .c0:focus-within { @@ -2065,6 +2119,7 @@ Array [ aria-haspopup="listbox" aria-owns="autocompleteId-listbox" className="c1" + data-component="input" onBlur={[Function]} onChange={[Function]} onFocus={[Function]} @@ -2842,14 +2897,9 @@ Array [ } .c0 { - 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; + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; min-height: 34px; font-size: 14px; line-height: 20px; @@ -2863,17 +2913,32 @@ Array [ box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); cursor: text; padding: 6px 12px; + display: grid; + grid-template-areas: 'leadingIcon input trailingIcon'; +} + +.c0 >:not(:last-child) { + margin-right: 8px; } -.c0 .TextInput-icon { +.c0 [data-component='input'] { + grid-area: input; +} + +.c0 .TextInput-leading-icon { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - margin: 0 8px; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; + grid-area: leadingIcon; +} + +.c0 .TextInput-trailing-icon { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + color: #57606a; + grid-area: trailingIcon; } .c0:focus-within { @@ -2897,6 +2962,7 @@ Array [ aria-haspopup="listbox" aria-owns="autocompleteId-listbox" className="c1" + data-component="input" onBlur={[Function]} onChange={[Function]} onFocus={[Function]} @@ -3804,14 +3870,9 @@ Array [ } .c0 { - 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; + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; min-height: 34px; font-size: 14px; line-height: 20px; @@ -3825,17 +3886,32 @@ Array [ box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); cursor: text; padding: 6px 12px; + display: grid; + grid-template-areas: 'leadingIcon input trailingIcon'; +} + +.c0 >:not(:last-child) { + margin-right: 8px; +} + +.c0 [data-component='input'] { + grid-area: input; } -.c0 .TextInput-icon { +.c0 .TextInput-leading-icon { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - margin: 0 8px; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; + grid-area: leadingIcon; +} + +.c0 .TextInput-trailing-icon { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + color: #57606a; + grid-area: trailingIcon; } .c0:focus-within { @@ -3859,6 +3935,7 @@ Array [ aria-haspopup="listbox" aria-owns="autocompleteId-listbox" className="c1" + data-component="input" onBlur={[Function]} onChange={[Function]} onFocus={[Function]} diff --git a/src/__tests__/__snapshots__/TextInput.test.tsx.snap b/src/__tests__/__snapshots__/TextInput.test.tsx.snap index 5e1a7138d61..6bc69f43feb 100644 --- a/src/__tests__/__snapshots__/TextInput.test.tsx.snap +++ b/src/__tests__/__snapshots__/TextInput.test.tsx.snap @@ -16,14 +16,9 @@ exports[`TextInput renders 1`] = ` } .c0 { - 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; + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; min-height: 34px; font-size: 14px; line-height: 20px; @@ -37,17 +32,32 @@ exports[`TextInput renders 1`] = ` box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); cursor: text; padding: 6px 12px; + display: grid; + grid-template-areas: 'leadingIcon input trailingIcon'; } -.c0 .TextInput-icon { +.c0 >:not(:last-child) { + margin-right: 8px; +} + +.c0 [data-component='input'] { + grid-area: input; +} + +.c0 .TextInput-leading-icon { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - margin: 0 8px; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; + grid-area: leadingIcon; +} + +.c0 .TextInput-trailing-icon { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + color: #57606a; + grid-area: trailingIcon; } .c0:focus-within { @@ -66,6 +76,7 @@ exports[`TextInput renders 1`] = ` > @@ -88,14 +99,9 @@ exports[`TextInput renders block 1`] = ` } .c0 { - 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; + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; min-height: 34px; font-size: 14px; line-height: 20px; @@ -109,19 +115,33 @@ exports[`TextInput renders block 1`] = ` box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); cursor: text; padding: 6px 12px; - display: block; + display: grid; + grid-template-areas: 'leadingIcon input trailingIcon'; width: 100%; } -.c0 .TextInput-icon { +.c0 >:not(:last-child) { + margin-right: 8px; +} + +.c0 [data-component='input'] { + grid-area: input; +} + +.c0 .TextInput-leading-icon { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + color: #57606a; + grid-area: leadingIcon; +} + +.c0 .TextInput-trailing-icon { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - margin: 0 8px; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; + grid-area: trailingIcon; } .c0:focus-within { @@ -140,6 +160,7 @@ exports[`TextInput renders block 1`] = ` > @@ -162,14 +183,9 @@ exports[`TextInput renders consistently 1`] = ` } .c0 { - 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; + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; min-height: 34px; font-size: 14px; line-height: 20px; @@ -183,17 +199,32 @@ exports[`TextInput renders consistently 1`] = ` box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); cursor: text; padding: 6px 12px; + display: grid; + grid-template-areas: 'leadingIcon input trailingIcon'; +} + +.c0 >:not(:last-child) { + margin-right: 8px; +} + +.c0 [data-component='input'] { + grid-area: input; +} + +.c0 .TextInput-leading-icon { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + color: #57606a; + grid-area: leadingIcon; } -.c0 .TextInput-icon { +.c0 .TextInput-trailing-icon { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - margin: 0 8px; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; + grid-area: trailingIcon; } .c0:focus-within { @@ -212,6 +243,179 @@ exports[`TextInput renders consistently 1`] = ` > + +`; + +exports[`TextInput renders contrast 1`] = ` +.c1 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c1:focus { + outline: 0; +} + +.c0 { + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; + min-height: 34px; + font-size: 14px; + line-height: 20px; + color: #24292f; + vertical-align: middle; + background-repeat: no-repeat; + background-position: right 8px center; + border: 1px solid #d0d7de; + border-radius: 6px; + outline: none; + box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); + cursor: text; + padding: 6px 12px; + display: grid; + grid-template-areas: 'leadingIcon input trailingIcon'; +} + +.c0 >:not(:last-child) { + margin-right: 8px; +} + +.c0 [data-component='input'] { + grid-area: input; +} + +.c0 .TextInput-leading-icon { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + color: #57606a; + grid-area: leadingIcon; +} + +.c0 .TextInput-trailing-icon { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + color: #57606a; + grid-area: trailingIcon; +} + +.c0:focus-within { + border-color: #0969da; + box-shadow: 0 0 0 3px rgba(9,105,218,0.3); +} + +@media (min-width:768px) { + .c0 { + font-size: 14px; + } +} + + + + +`; + +exports[`TextInput renders error 1`] = ` +.c1 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c1:focus { + outline: 0; +} + +.c0 { + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; + min-height: 34px; + font-size: 14px; + line-height: 20px; + color: #24292f; + vertical-align: middle; + background-repeat: no-repeat; + background-position: right 8px center; + border: 1px solid #d0d7de; + border-radius: 6px; + outline: none; + box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); + cursor: text; + padding: 6px 12px; + display: grid; + grid-template-areas: 'leadingIcon input trailingIcon'; + border-color: #cf222e; +} + +.c0 >:not(:last-child) { + margin-right: 8px; +} + +.c0 [data-component='input'] { + grid-area: input; +} + +.c0 .TextInput-leading-icon { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + color: #57606a; + grid-area: leadingIcon; +} + +.c0 .TextInput-trailing-icon { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + color: #57606a; + grid-area: trailingIcon; +} + +.c0:focus-within { + border-color: #0969da; + box-shadow: 0 0 0 3px rgba(9,105,218,0.3); +} + +.c0:focus-within { + border-color: #cf222e; + box-shadow: 0 0 0 3px rgba(164,14,38,0.4); +} + +@media (min-width:768px) { + .c0 { + font-size: 14px; + } +} + + + @@ -233,14 +437,9 @@ exports[`TextInput renders large 1`] = ` } .c0 { - 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; + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; min-height: 34px; font-size: 14px; line-height: 20px; @@ -254,22 +453,32 @@ exports[`TextInput renders large 1`] = ` box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); cursor: text; padding: 6px 12px; - padding-left: 8px; - padding-right: 8px; - padding-top: 10px; - padding-bottom: 10px; - font-size: 20px; + display: grid; + grid-template-areas: 'leadingIcon input trailingIcon'; +} + +.c0 >:not(:last-child) { + margin-right: 8px; +} + +.c0 [data-component='input'] { + grid-area: input; +} + +.c0 .TextInput-leading-icon { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + color: #57606a; + grid-area: leadingIcon; } -.c0 .TextInput-icon { +.c0 .TextInput-trailing-icon { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - margin: 0 8px; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; + grid-area: trailingIcon; } .c0:focus-within { @@ -288,12 +497,203 @@ exports[`TextInput renders large 1`] = ` > `; +exports[`TextInput renders leadingIcon 1`] = ` +.c1 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c1:focus { + outline: 0; +} + +.c0 { + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; + min-height: 34px; + font-size: 14px; + line-height: 20px; + color: #24292f; + vertical-align: middle; + background-repeat: no-repeat; + background-position: right 8px center; + border: 1px solid #d0d7de; + border-radius: 6px; + outline: none; + box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); + cursor: text; + padding: 6px 12px; + display: grid; + grid-template-areas: 'leadingIcon input trailingIcon'; +} + +.c0 >:not(:last-child) { + margin-right: 8px; +} + +.c0 [data-component='input'] { + grid-area: input; +} + +.c0 .TextInput-leading-icon { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + color: #57606a; + grid-area: leadingIcon; +} + +.c0 .TextInput-trailing-icon { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + color: #57606a; + grid-area: trailingIcon; +} + +.c0:focus-within { + border-color: #0969da; + box-shadow: 0 0 0 3px rgba(9,105,218,0.3); +} + +@media (min-width:768px) { + .c0 { + font-size: 14px; + } +} + + + +`; + +exports[`TextInput renders placeholder 1`] = ` +.c1 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c1:focus { + outline: 0; +} + +.c0 { + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; + min-height: 34px; + font-size: 14px; + line-height: 20px; + color: #24292f; + vertical-align: middle; + background-repeat: no-repeat; + background-position: right 8px center; + border: 1px solid #d0d7de; + border-radius: 6px; + outline: none; + box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); + cursor: text; + padding: 6px 12px; + display: grid; + grid-template-areas: 'leadingIcon input trailingIcon'; +} + +.c0 >:not(:last-child) { + margin-right: 8px; +} + +.c0 [data-component='input'] { + grid-area: input; +} + +.c0 .TextInput-leading-icon { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + color: #57606a; + grid-area: leadingIcon; +} + +.c0 .TextInput-trailing-icon { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + color: #57606a; + grid-area: trailingIcon; +} + +.c0:focus-within { + border-color: #0969da; + box-shadow: 0 0 0 3px rgba(9,105,218,0.3); +} + +@media (min-width:768px) { + .c0 { + font-size: 14px; + } +} + + + + +`; + exports[`TextInput renders small 1`] = ` .c1 { border: 0; @@ -310,14 +710,92 @@ exports[`TextInput renders small 1`] = ` } .c0 { - 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; + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; + min-height: 34px; + font-size: 14px; + line-height: 20px; + color: #24292f; + vertical-align: middle; + background-repeat: no-repeat; + background-position: right 8px center; + border: 1px solid #d0d7de; + border-radius: 6px; + outline: none; + box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); + cursor: text; + padding: 6px 12px; + display: grid; + grid-template-areas: 'leadingIcon input trailingIcon'; +} + +.c0 >:not(:last-child) { + margin-right: 8px; +} + +.c0 [data-component='input'] { + grid-area: input; +} + +.c0 .TextInput-leading-icon { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + color: #57606a; + grid-area: leadingIcon; +} + +.c0 .TextInput-trailing-icon { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + color: #57606a; + grid-area: trailingIcon; +} + +.c0:focus-within { + border-color: #0969da; + box-shadow: 0 0 0 3px rgba(9,105,218,0.3); +} + +@media (min-width:768px) { + .c0 { + font-size: 14px; + } +} + + + + +`; + +exports[`TextInput renders trailingIcon 1`] = ` +.c1 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c1:focus { + outline: 0; +} + +.c0 { + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; min-height: 34px; font-size: 14px; line-height: 20px; @@ -331,24 +809,139 @@ exports[`TextInput renders small 1`] = ` box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); cursor: text; padding: 6px 12px; - min-height: 28px; - padding-left: 8px; - padding-right: 8px; - padding-top: 3px; - padding-bottom: 3px; - font-size: 12px; + display: grid; + grid-template-areas: 'leadingIcon input trailingIcon'; +} + +.c0 >:not(:last-child) { + margin-right: 8px; +} + +.c0 [data-component='input'] { + grid-area: input; +} + +.c0 .TextInput-leading-icon { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + color: #57606a; + grid-area: leadingIcon; +} + +.c0 .TextInput-trailing-icon { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + color: #57606a; + grid-area: trailingIcon; +} + +.c0:focus-within { + border-color: #0969da; + box-shadow: 0 0 0 3px rgba(9,105,218,0.3); +} + +@media (min-width:768px) { + .c0 { + font-size: 14px; + } +} + + + + +`; + +exports[`TextInput renders warning 1`] = ` +.c1 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c1:focus { + outline: 0; +} + +.c0 { + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; + min-height: 34px; + font-size: 14px; line-height: 20px; + color: #24292f; + vertical-align: middle; + background-repeat: no-repeat; + background-position: right 8px center; + border: 1px solid #d0d7de; + border-radius: 6px; + outline: none; + box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); + cursor: text; + padding: 6px 12px; + display: grid; + grid-template-areas: 'leadingIcon input trailingIcon'; + border-color: #bf8700; +} + +.c0 >:not(:last-child) { + margin-right: 8px; } -.c0 .TextInput-icon { +.c0 [data-component='input'] { + grid-area: input; +} + +.c0 .TextInput-leading-icon { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - margin: 0 8px; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; + grid-area: leadingIcon; +} + +.c0 .TextInput-trailing-icon { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + color: #57606a; + grid-area: trailingIcon; } .c0:focus-within { @@ -356,6 +949,11 @@ exports[`TextInput renders small 1`] = ` box-shadow: 0 0 0 3px rgba(9,105,218,0.3); } +.c0:focus-within { + border-color: #bf8700; + box-shadow: 0 0 0 3px rgba(212,167,44,0.4); +} + @media (min-width:768px) { .c0 { font-size: 14px; @@ -367,6 +965,7 @@ exports[`TextInput renders small 1`] = ` > @@ -389,14 +988,9 @@ exports[`TextInput should render a password input 1`] = ` } .c0 { - 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; + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; min-height: 34px; font-size: 14px; line-height: 20px; @@ -410,17 +1004,32 @@ exports[`TextInput should render a password input 1`] = ` box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); cursor: text; padding: 6px 12px; + display: grid; + grid-template-areas: 'leadingIcon input trailingIcon'; +} + +.c0 >:not(:last-child) { + margin-right: 8px; +} + +.c0 [data-component='input'] { + grid-area: input; +} + +.c0 .TextInput-leading-icon { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + color: #57606a; + grid-area: leadingIcon; } -.c0 .TextInput-icon { +.c0 .TextInput-trailing-icon { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - margin: 0 8px; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; + grid-area: trailingIcon; } .c0:focus-within { @@ -439,6 +1048,7 @@ exports[`TextInput should render a password input 1`] = ` > diff --git a/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap b/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap index c7e0556b8db..774cfc8b66a 100644 --- a/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap +++ b/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap @@ -55,14 +55,9 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = ` } .c0 { - 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; + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; min-height: 34px; font-size: 14px; line-height: 20px; @@ -76,17 +71,32 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = ` box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); cursor: text; padding: 6px 12px; + display: grid; + grid-template-areas: 'leadingIcon input trailingIcon'; } -.c0 .TextInput-icon { +.c0 >:not(:last-child) { + margin-right: 8px; +} + +.c0 [data-component='input'] { + grid-area: input; +} + +.c0 .TextInput-leading-icon { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - margin: 0 8px; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; + grid-area: leadingIcon; +} + +.c0 .TextInput-trailing-icon { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + color: #57606a; + grid-area: trailingIcon; } .c0:focus-within { @@ -415,14 +425,9 @@ exports[`TextInputWithTokens renders as block layout 1`] = ` } .c0 { - 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; + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; min-height: 34px; font-size: 14px; line-height: 20px; @@ -436,7 +441,8 @@ exports[`TextInputWithTokens renders as block layout 1`] = ` box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); cursor: text; padding: 6px 12px; - display: block; + display: grid; + grid-template-areas: 'leadingIcon input trailingIcon'; width: 100%; display: -webkit-box; display: -webkit-flex; @@ -445,15 +451,28 @@ exports[`TextInputWithTokens renders as block layout 1`] = ` width: 100%; } -.c0 .TextInput-icon { +.c0 >:not(:last-child) { + margin-right: 8px; +} + +.c0 [data-component='input'] { + grid-area: input; +} + +.c0 .TextInput-leading-icon { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - margin: 0 8px; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; + grid-area: leadingIcon; +} + +.c0 .TextInput-trailing-icon { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + color: #57606a; + grid-area: trailingIcon; } .c0:focus-within { @@ -545,14 +564,9 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = ` } .c0 { - 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; + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; min-height: 34px; font-size: 14px; line-height: 20px; @@ -566,19 +580,34 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = ` box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); cursor: text; padding: 6px 12px; + display: grid; + grid-template-areas: 'leadingIcon input trailingIcon'; max-height: 20px; overflow: auto; } -.c0 .TextInput-icon { +.c0 >:not(:last-child) { + margin-right: 8px; +} + +.c0 [data-component='input'] { + grid-area: input; +} + +.c0 .TextInput-leading-icon { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - margin: 0 8px; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; + grid-area: leadingIcon; +} + +.c0 .TextInput-trailing-icon { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + color: #57606a; + grid-area: trailingIcon; } .c0:focus-within { @@ -1182,14 +1211,9 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = ` } .c0 { - 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; + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; min-height: 34px; font-size: 14px; line-height: 20px; @@ -1203,17 +1227,32 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = ` box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); cursor: text; padding: 6px 12px; + display: grid; + grid-template-areas: 'leadingIcon input trailingIcon'; } -.c0 .TextInput-icon { +.c0 >:not(:last-child) { + margin-right: 8px; +} + +.c0 [data-component='input'] { + grid-area: input; +} + +.c0 .TextInput-leading-icon { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - margin: 0 8px; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; + grid-area: leadingIcon; +} + +.c0 .TextInput-trailing-icon { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + color: #57606a; + grid-area: trailingIcon; } .c0:focus-within { @@ -1817,14 +1856,9 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = ` } .c0 { - 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; + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; min-height: 34px; font-size: 14px; line-height: 20px; @@ -1838,17 +1872,32 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = ` box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); cursor: text; padding: 6px 12px; + display: grid; + grid-template-areas: 'leadingIcon input trailingIcon'; +} + +.c0 >:not(:last-child) { + margin-right: 8px; } -.c0 .TextInput-icon { +.c0 [data-component='input'] { + grid-area: input; +} + +.c0 .TextInput-leading-icon { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - margin: 0 8px; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; + grid-area: leadingIcon; +} + +.c0 .TextInput-trailing-icon { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + color: #57606a; + grid-area: trailingIcon; } .c0:focus-within { @@ -2452,14 +2501,9 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = ` } .c0 { - 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; + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; min-height: 34px; font-size: 14px; line-height: 20px; @@ -2473,17 +2517,32 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = ` box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); cursor: text; padding: 6px 12px; + display: grid; + grid-template-areas: 'leadingIcon input trailingIcon'; } -.c0 .TextInput-icon { +.c0 >:not(:last-child) { + margin-right: 8px; +} + +.c0 [data-component='input'] { + grid-area: input; +} + +.c0 .TextInput-leading-icon { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - margin: 0 8px; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; + grid-area: leadingIcon; +} + +.c0 .TextInput-trailing-icon { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + color: #57606a; + grid-area: trailingIcon; } .c0:focus-within { @@ -3087,14 +3146,9 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = ` } .c0 { - 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; + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; min-height: 34px; font-size: 14px; line-height: 20px; @@ -3108,17 +3162,32 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = ` box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); cursor: text; padding: 6px 12px; + display: grid; + grid-template-areas: 'leadingIcon input trailingIcon'; } -.c0 .TextInput-icon { +.c0 >:not(:last-child) { + margin-right: 8px; +} + +.c0 [data-component='input'] { + grid-area: input; +} + +.c0 .TextInput-leading-icon { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - margin: 0 8px; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; + grid-area: leadingIcon; +} + +.c0 .TextInput-trailing-icon { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + color: #57606a; + grid-area: trailingIcon; } .c0:focus-within { @@ -3722,14 +3791,9 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`] } .c0 { - 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; + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; min-height: 34px; font-size: 14px; line-height: 20px; @@ -3743,18 +3807,33 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`] box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); cursor: text; padding: 6px 12px; + display: grid; + grid-template-areas: 'leadingIcon input trailingIcon'; overflow: auto; } -.c0 .TextInput-icon { +.c0 >:not(:last-child) { + margin-right: 8px; +} + +.c0 [data-component='input'] { + grid-area: input; +} + +.c0 .TextInput-leading-icon { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - margin: 0 8px; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; + grid-area: leadingIcon; +} + +.c0 .TextInput-trailing-icon { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + color: #57606a; + grid-area: trailingIcon; } .c0:focus-within { @@ -4358,14 +4437,9 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi } .c0 { - 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; + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; min-height: 34px; font-size: 14px; line-height: 20px; @@ -4379,17 +4453,32 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); cursor: text; padding: 6px 12px; + display: grid; + grid-template-areas: 'leadingIcon input trailingIcon'; } -.c0 .TextInput-icon { +.c0 >:not(:last-child) { + margin-right: 8px; +} + +.c0 [data-component='input'] { + grid-area: input; +} + +.c0 .TextInput-leading-icon { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - margin: 0 8px; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; + grid-area: leadingIcon; +} + +.c0 .TextInput-trailing-icon { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + color: #57606a; + grid-area: trailingIcon; } .c0:focus-within { @@ -4701,14 +4790,9 @@ exports[`TextInputWithTokens renders with tokens 1`] = ` } .c0 { - 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; + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; min-height: 34px; font-size: 14px; line-height: 20px; @@ -4722,17 +4806,32 @@ exports[`TextInputWithTokens renders with tokens 1`] = ` box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); cursor: text; padding: 6px 12px; + display: grid; + grid-template-areas: 'leadingIcon input trailingIcon'; } -.c0 .TextInput-icon { +.c0 >:not(:last-child) { + margin-right: 8px; +} + +.c0 [data-component='input'] { + grid-area: input; +} + +.c0 .TextInput-leading-icon { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - margin: 0 8px; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; + grid-area: leadingIcon; +} + +.c0 .TextInput-trailing-icon { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + color: #57606a; + grid-area: trailingIcon; } .c0:focus-within { @@ -5336,14 +5435,9 @@ exports[`TextInputWithTokens renders with tokens using a custom token component } .c0 { - 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; + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; min-height: 34px; font-size: 14px; line-height: 20px; @@ -5357,17 +5451,32 @@ exports[`TextInputWithTokens renders with tokens using a custom token component box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); cursor: text; padding: 6px 12px; + display: grid; + grid-template-areas: 'leadingIcon input trailingIcon'; +} + +.c0 >:not(:last-child) { + margin-right: 8px; } -.c0 .TextInput-icon { +.c0 [data-component='input'] { + grid-area: input; +} + +.c0 .TextInput-leading-icon { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - margin: 0 8px; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; + grid-area: leadingIcon; +} + +.c0 .TextInput-trailing-icon { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + color: #57606a; + grid-area: trailingIcon; } .c0:focus-within { @@ -5976,14 +6085,9 @@ exports[`TextInputWithTokens renders without tokens 1`] = ` } .c0 { - 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; + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; min-height: 34px; font-size: 14px; line-height: 20px; @@ -5997,17 +6101,32 @@ exports[`TextInputWithTokens renders without tokens 1`] = ` box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); cursor: text; padding: 6px 12px; + display: grid; + grid-template-areas: 'leadingIcon input trailingIcon'; } -.c0 .TextInput-icon { +.c0 >:not(:last-child) { + margin-right: 8px; +} + +.c0 [data-component='input'] { + grid-area: input; +} + +.c0 .TextInput-leading-icon { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - margin: 0 8px; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; + grid-area: leadingIcon; +} + +.c0 .TextInput-trailing-icon { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + color: #57606a; + grid-area: trailingIcon; } .c0:focus-within { diff --git a/src/stories/TextInput.stories.tsx b/src/stories/TextInput.stories.tsx index 1a69109669b..9288dd95672 100644 --- a/src/stories/TextInput.stories.tsx +++ b/src/stories/TextInput.stories.tsx @@ -173,7 +173,7 @@ export const TextInputInWarningState = (args: TextInputProps) => {

- + ) } From f3f9d6e4ee3608a81ffd597920fc6a4006a91b91 Mon Sep 17 00:00:00 2001 From: Pavithra Kodmad Date: Tue, 30 Nov 2021 19:20:34 +1100 Subject: [PATCH 03/10] Fix up review comments --- src/TextInput.tsx | 10 ++++------ src/_TextInputWrapper.tsx | 7 ++++--- src/stories/TextInput.stories.tsx | 13 ++++++++++--- 3 files changed, 18 insertions(+), 12 deletions(-) diff --git a/src/TextInput.tsx b/src/TextInput.tsx index 87627efd10d..c373485dc7c 100644 --- a/src/TextInput.tsx +++ b/src/TextInput.tsx @@ -6,13 +6,13 @@ import TextInputWrapper from './_TextInputWrapper' type NonPassthroughProps = { className?: string - // deprecate icon prop + /** @deprecated Use `leadingIcon` or `trailingIcon` prop instead */ icon?: React.ComponentType<{className?: string}> leadingIcon?: React.ComponentType<{className?: string}> trailingIcon?: React.ComponentType<{className?: string}> } & Pick< ComponentProps, - 'block' | 'contrast' | 'disabled' | 'sx' | 'theme' | 'width' | 'maxWidth' | 'minWidth' | 'variant' | 'size' + 'block' | 'contrast' | 'disabled' | 'sx' | 'width' | 'maxWidth' | 'minWidth' | 'variant' | 'size' > // Note: using ComponentProps instead of ComponentPropsWithoutRef here would cause a type issue where `css` is a required prop. @@ -29,9 +29,8 @@ const TextInput = React.forwardRef( className, contrast, disabled, - status, + validationStatus, sx: sxProp, - theme, size: sizeProp, // start deprecated props width: widthProp, @@ -50,12 +49,11 @@ const TextInput = React.forwardRef( ` `} ${props => - props.status === 'error' && + props.validationStatus === 'error' && css` border-color: ${get('colors.danger.emphasis')}; &:focus-within { @@ -118,7 +119,7 @@ const TextInputWrapper = styled.span` `} ${props => - props.status === 'warning' && + props.validationStatus === 'warning' && css` border-color: ${get('colors.attention.emphasis')}; &:focus-within { diff --git a/src/stories/TextInput.stories.tsx b/src/stories/TextInput.stories.tsx index 9288dd95672..18390617ac8 100644 --- a/src/stories/TextInput.stories.tsx +++ b/src/stories/TextInput.stories.tsx @@ -44,8 +44,8 @@ export default { options: ['small', 'medium', 'large'], control: {type: 'radio'} }, - status: { - name: 'Status', + validationStatus: { + name: 'Validation Status', options: ['warning', 'error'], control: {type: 'radio'} }, @@ -173,7 +173,14 @@ export const TextInputInWarningState = (args: TextInputProps) => {

- + ) } From 6c3162c87106bb803e83132846f088d3bc58fd3f Mon Sep 17 00:00:00 2001 From: Pavithra Kodmad Date: Wed, 1 Dec 2021 20:40:15 +1100 Subject: [PATCH 04/10] 1. Add leading and trailing visual 2. Change grid logic 3. Update stories and docs --- src/TextInput.tsx | 25 +- src/_TextInputWrapper.tsx | 19 +- src/__tests__/TextInput.test.tsx | 8 +- .../__snapshots__/Autocomplete.test.tsx.snap | 147 ++++--- .../__snapshots__/TextInput.test.tsx.snap | 370 +++++++++++------- .../TextInputWithTokens.test.tsx.snap | 252 ++++++++---- src/stories/TextInput.stories.tsx | 31 +- 7 files changed, 553 insertions(+), 299 deletions(-) diff --git a/src/TextInput.tsx b/src/TextInput.tsx index c373485dc7c..b31753459b1 100644 --- a/src/TextInput.tsx +++ b/src/TextInput.tsx @@ -6,10 +6,10 @@ import TextInputWrapper from './_TextInputWrapper' type NonPassthroughProps = { className?: string - /** @deprecated Use `leadingIcon` or `trailingIcon` prop instead */ + /** @deprecated Use `leadingVisual` or `trailingVisual` prop instead */ icon?: React.ComponentType<{className?: string}> - leadingIcon?: React.ComponentType<{className?: string}> - trailingIcon?: React.ComponentType<{className?: string}> + leadingVisual?: string | React.ComponentType<{className?: string}> + trailingVisual?: string | React.ComponentType<{className?: string}> } & Pick< ComponentProps, 'block' | 'contrast' | 'disabled' | 'sx' | 'width' | 'maxWidth' | 'minWidth' | 'variant' | 'size' @@ -23,8 +23,8 @@ const TextInput = React.forwardRef( ( { icon: IconComponent, - leadingIcon: LeadingIconComponent, - trailingIcon: TrailingIconComponent, + leadingVisual: LeadingVisual, + trailingVisual: TrailingVisual, block, className, contrast, @@ -52,7 +52,6 @@ const TextInput = React.forwardRef( validationStatus={validationStatus} contrast={contrast} disabled={disabled} - hasIcon={!!IconComponent || !!(LeadingIconComponent || TrailingIconComponent)} sx={sxProp} size={sizeProp} width={widthProp} @@ -60,10 +59,18 @@ const TextInput = React.forwardRef( maxWidth={maxWidthProp} variant={variantProp} > - {IconComponent && } - {LeadingIconComponent && } + {IconComponent && } + {LeadingVisual && ( + + {typeof LeadingVisual === 'function' ? : LeadingVisual} + + )} - {TrailingIconComponent && } + {TrailingVisual && ( + + {typeof TrailingVisual === 'function' ? : TrailingVisual} + + )}
) } diff --git a/src/_TextInputWrapper.tsx b/src/_TextInputWrapper.tsx index 4b89e55ec2f..c0c72ff1391 100644 --- a/src/_TextInputWrapper.tsx +++ b/src/_TextInputWrapper.tsx @@ -69,24 +69,27 @@ const TextInputWrapper = styled.span` cursor: text; padding: 6px 12px; display: grid; - grid-template-areas: 'leadingIcon input trailingIcon'; + grid-template-columns: auto 1fr auto; + justify-items: end; & > :not(:last-child) { margin-right: ${get('space.2')}; } - [data-component='input'] { - grid-area: input; + + [data-component=' leadingVisual '] { + align-self: center; + color: ${get('colors.fg.muted')}; } - .TextInput-leading-icon { + [data-component=' trailingVisual '] { align-self: center; color: ${get('colors.fg.muted')}; - grid-area: leadingIcon; } - .TextInput-trailing-icon { + .TextInput-icon { align-self: center; color: ${get('colors.fg.muted')}; - grid-area: trailingIcon; + margin: 0 ${get('space.2')}; + flex-shrink: 0; } &:focus-within { @@ -134,7 +137,7 @@ const TextInputWrapper = styled.span` width: 100%; `} - // Ensures inputs don't zoom on mobile but are body-font size on desktop + // Ensures inputs don' t zoom on mobile but are body-font size on desktop @media (min-width: ${get('breakpoints.1')}) { font-size: ${get('fontSizes.1')}; } diff --git a/src/__tests__/TextInput.test.tsx b/src/__tests__/TextInput.test.tsx index 9f8765a878b..3e8b071e3c4 100644 --- a/src/__tests__/TextInput.test.tsx +++ b/src/__tests__/TextInput.test.tsx @@ -53,12 +53,12 @@ describe('TextInput', () => { expect(render()).toMatchSnapshot() }) - it('renders leadingIcon', () => { - expect(render()).toMatchSnapshot() + it('renders leadingVisual', () => { + expect(render()).toMatchSnapshot() }) - it('renders trailingIcon', () => { - expect(render()).toMatchSnapshot() + it('renders trailingVisual', () => { + expect(render()).toMatchSnapshot() }) it('should call onChange prop with input value', () => { diff --git a/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap b/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap index ee70a47c557..ecd9445ebae 100644 --- a/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap +++ b/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap @@ -25,6 +25,7 @@ Array [ line-height: 20px; color: #24292f; vertical-align: middle; + background-color: #ffffff; background-repeat: no-repeat; background-position: right 8px center; border: 1px solid #d0d7de; @@ -34,31 +35,37 @@ Array [ cursor: text; padding: 6px 12px; display: grid; - grid-template-areas: 'leadingIcon input trailingIcon'; + grid-template-columns: auto 1fr auto; + justify-items: end; } .c0 >:not(:last-child) { margin-right: 8px; } -.c0 [data-component='input'] { - grid-area: input; +.c0 [data-component=' leadingVisual '] { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + color: #57606a; } -.c0 .TextInput-leading-icon { +.c0 [data-component=' trailingVisual '] { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - grid-area: leadingIcon; } -.c0 .TextInput-trailing-icon { +.c0 .TextInput-icon { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - grid-area: trailingIcon; + margin: 0 8px; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; } .c0:focus-within { @@ -149,6 +156,7 @@ Array [ line-height: 20px; color: #24292f; vertical-align: middle; + background-color: #ffffff; background-repeat: no-repeat; background-position: right 8px center; border: 1px solid #d0d7de; @@ -158,31 +166,37 @@ Array [ cursor: text; padding: 6px 12px; display: grid; - grid-template-areas: 'leadingIcon input trailingIcon'; + grid-template-columns: auto 1fr auto; + justify-items: end; } .c0 >:not(:last-child) { margin-right: 8px; } -.c0 [data-component='input'] { - grid-area: input; +.c0 [data-component=' leadingVisual '] { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + color: #57606a; } -.c0 .TextInput-leading-icon { +.c0 [data-component=' trailingVisual '] { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - grid-area: leadingIcon; } -.c0 .TextInput-trailing-icon { +.c0 .TextInput-icon { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - grid-area: trailingIcon; + margin: 0 8px; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; } .c0:focus-within { @@ -308,6 +322,7 @@ Array [ line-height: 20px; color: #24292f; vertical-align: middle; + background-color: #ffffff; background-repeat: no-repeat; background-position: right 8px center; border: 1px solid #d0d7de; @@ -317,31 +332,37 @@ Array [ cursor: text; padding: 6px 12px; display: grid; - grid-template-areas: 'leadingIcon input trailingIcon'; + grid-template-columns: auto 1fr auto; + justify-items: end; } .c0 >:not(:last-child) { margin-right: 8px; } -.c0 [data-component='input'] { - grid-area: input; +.c0 [data-component=' leadingVisual '] { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + color: #57606a; } -.c0 .TextInput-leading-icon { +.c0 [data-component=' trailingVisual '] { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - grid-area: leadingIcon; } -.c0 .TextInput-trailing-icon { +.c0 .TextInput-icon { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - grid-area: trailingIcon; + margin: 0 8px; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; } .c0:focus-within { @@ -1230,6 +1251,7 @@ Array [ line-height: 20px; color: #24292f; vertical-align: middle; + background-color: #ffffff; background-repeat: no-repeat; background-position: right 8px center; border: 1px solid #d0d7de; @@ -1239,31 +1261,37 @@ Array [ cursor: text; padding: 6px 12px; display: grid; - grid-template-areas: 'leadingIcon input trailingIcon'; + grid-template-columns: auto 1fr auto; + justify-items: end; } .c0 >:not(:last-child) { margin-right: 8px; } -.c0 [data-component='input'] { - grid-area: input; +.c0 [data-component=' leadingVisual '] { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + color: #57606a; } -.c0 .TextInput-leading-icon { +.c0 [data-component=' trailingVisual '] { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - grid-area: leadingIcon; } -.c0 .TextInput-trailing-icon { +.c0 .TextInput-icon { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - grid-area: trailingIcon; + margin: 0 8px; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; } .c0:focus-within { @@ -2062,6 +2090,7 @@ Array [ line-height: 20px; color: #24292f; vertical-align: middle; + background-color: #ffffff; background-repeat: no-repeat; background-position: right 8px center; border: 1px solid #d0d7de; @@ -2071,31 +2100,37 @@ Array [ cursor: text; padding: 6px 12px; display: grid; - grid-template-areas: 'leadingIcon input trailingIcon'; + grid-template-columns: auto 1fr auto; + justify-items: end; } .c0 >:not(:last-child) { margin-right: 8px; } -.c0 [data-component='input'] { - grid-area: input; +.c0 [data-component=' leadingVisual '] { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + color: #57606a; } -.c0 .TextInput-leading-icon { +.c0 [data-component=' trailingVisual '] { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - grid-area: leadingIcon; } -.c0 .TextInput-trailing-icon { +.c0 .TextInput-icon { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - grid-area: trailingIcon; + margin: 0 8px; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; } .c0:focus-within { @@ -2905,6 +2940,7 @@ Array [ line-height: 20px; color: #24292f; vertical-align: middle; + background-color: #ffffff; background-repeat: no-repeat; background-position: right 8px center; border: 1px solid #d0d7de; @@ -2914,31 +2950,37 @@ Array [ cursor: text; padding: 6px 12px; display: grid; - grid-template-areas: 'leadingIcon input trailingIcon'; + grid-template-columns: auto 1fr auto; + justify-items: end; } .c0 >:not(:last-child) { margin-right: 8px; } -.c0 [data-component='input'] { - grid-area: input; +.c0 [data-component=' leadingVisual '] { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + color: #57606a; } -.c0 .TextInput-leading-icon { +.c0 [data-component=' trailingVisual '] { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - grid-area: leadingIcon; } -.c0 .TextInput-trailing-icon { +.c0 .TextInput-icon { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - grid-area: trailingIcon; + margin: 0 8px; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; } .c0:focus-within { @@ -3878,6 +3920,7 @@ Array [ line-height: 20px; color: #24292f; vertical-align: middle; + background-color: #ffffff; background-repeat: no-repeat; background-position: right 8px center; border: 1px solid #d0d7de; @@ -3887,31 +3930,37 @@ Array [ cursor: text; padding: 6px 12px; display: grid; - grid-template-areas: 'leadingIcon input trailingIcon'; + grid-template-columns: auto 1fr auto; + justify-items: end; } .c0 >:not(:last-child) { margin-right: 8px; } -.c0 [data-component='input'] { - grid-area: input; +.c0 [data-component=' leadingVisual '] { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + color: #57606a; } -.c0 .TextInput-leading-icon { +.c0 [data-component=' trailingVisual '] { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - grid-area: leadingIcon; } -.c0 .TextInput-trailing-icon { +.c0 .TextInput-icon { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - grid-area: trailingIcon; + margin: 0 8px; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; } .c0:focus-within { diff --git a/src/__tests__/__snapshots__/TextInput.test.tsx.snap b/src/__tests__/__snapshots__/TextInput.test.tsx.snap index 6bc69f43feb..3886349ea42 100644 --- a/src/__tests__/__snapshots__/TextInput.test.tsx.snap +++ b/src/__tests__/__snapshots__/TextInput.test.tsx.snap @@ -24,6 +24,7 @@ exports[`TextInput renders 1`] = ` line-height: 20px; color: #24292f; vertical-align: middle; + background-color: #ffffff; background-repeat: no-repeat; background-position: right 8px center; border: 1px solid #d0d7de; @@ -33,31 +34,37 @@ exports[`TextInput renders 1`] = ` cursor: text; padding: 6px 12px; display: grid; - grid-template-areas: 'leadingIcon input trailingIcon'; + grid-template-columns: auto 1fr auto; + justify-items: end; } .c0 >:not(:last-child) { margin-right: 8px; } -.c0 [data-component='input'] { - grid-area: input; +.c0 [data-component=' leadingVisual '] { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + color: #57606a; } -.c0 .TextInput-leading-icon { +.c0 [data-component=' trailingVisual '] { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - grid-area: leadingIcon; } -.c0 .TextInput-trailing-icon { +.c0 .TextInput-icon { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - grid-area: trailingIcon; + margin: 0 8px; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; } .c0:focus-within { @@ -107,6 +114,7 @@ exports[`TextInput renders block 1`] = ` line-height: 20px; color: #24292f; vertical-align: middle; + background-color: #ffffff; background-repeat: no-repeat; background-position: right 8px center; border: 1px solid #d0d7de; @@ -116,7 +124,8 @@ exports[`TextInput renders block 1`] = ` cursor: text; padding: 6px 12px; display: grid; - grid-template-areas: 'leadingIcon input trailingIcon'; + grid-template-columns: auto 1fr auto; + justify-items: end; width: 100%; } @@ -124,24 +133,29 @@ exports[`TextInput renders block 1`] = ` margin-right: 8px; } -.c0 [data-component='input'] { - grid-area: input; +.c0 [data-component=' leadingVisual '] { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + color: #57606a; } -.c0 .TextInput-leading-icon { +.c0 [data-component=' trailingVisual '] { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - grid-area: leadingIcon; } -.c0 .TextInput-trailing-icon { +.c0 .TextInput-icon { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - grid-area: trailingIcon; + margin: 0 8px; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; } .c0:focus-within { @@ -191,6 +205,7 @@ exports[`TextInput renders consistently 1`] = ` line-height: 20px; color: #24292f; vertical-align: middle; + background-color: #ffffff; background-repeat: no-repeat; background-position: right 8px center; border: 1px solid #d0d7de; @@ -200,31 +215,37 @@ exports[`TextInput renders consistently 1`] = ` cursor: text; padding: 6px 12px; display: grid; - grid-template-areas: 'leadingIcon input trailingIcon'; + grid-template-columns: auto 1fr auto; + justify-items: end; } .c0 >:not(:last-child) { margin-right: 8px; } -.c0 [data-component='input'] { - grid-area: input; +.c0 [data-component=' leadingVisual '] { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + color: #57606a; } -.c0 .TextInput-leading-icon { +.c0 [data-component=' trailingVisual '] { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - grid-area: leadingIcon; } -.c0 .TextInput-trailing-icon { +.c0 .TextInput-icon { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - grid-area: trailingIcon; + margin: 0 8px; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; } .c0:focus-within { @@ -273,6 +294,7 @@ exports[`TextInput renders contrast 1`] = ` line-height: 20px; color: #24292f; vertical-align: middle; + background-color: #ffffff; background-repeat: no-repeat; background-position: right 8px center; border: 1px solid #d0d7de; @@ -282,31 +304,37 @@ exports[`TextInput renders contrast 1`] = ` cursor: text; padding: 6px 12px; display: grid; - grid-template-areas: 'leadingIcon input trailingIcon'; + grid-template-columns: auto 1fr auto; + justify-items: end; } .c0 >:not(:last-child) { margin-right: 8px; } -.c0 [data-component='input'] { - grid-area: input; +.c0 [data-component=' leadingVisual '] { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + color: #57606a; } -.c0 .TextInput-leading-icon { +.c0 [data-component=' trailingVisual '] { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - grid-area: leadingIcon; } -.c0 .TextInput-trailing-icon { +.c0 .TextInput-icon { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - grid-area: trailingIcon; + margin: 0 8px; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; } .c0:focus-within { @@ -356,6 +384,7 @@ exports[`TextInput renders error 1`] = ` line-height: 20px; color: #24292f; vertical-align: middle; + background-color: #ffffff; background-repeat: no-repeat; background-position: right 8px center; border: 1px solid #d0d7de; @@ -365,32 +394,37 @@ exports[`TextInput renders error 1`] = ` cursor: text; padding: 6px 12px; display: grid; - grid-template-areas: 'leadingIcon input trailingIcon'; - border-color: #cf222e; + grid-template-columns: auto 1fr auto; + justify-items: end; } .c0 >:not(:last-child) { margin-right: 8px; } -.c0 [data-component='input'] { - grid-area: input; +.c0 [data-component=' leadingVisual '] { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + color: #57606a; } -.c0 .TextInput-leading-icon { +.c0 [data-component=' trailingVisual '] { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - grid-area: leadingIcon; } -.c0 .TextInput-trailing-icon { +.c0 .TextInput-icon { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - grid-area: trailingIcon; + margin: 0 8px; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; } .c0:focus-within { @@ -398,11 +432,6 @@ exports[`TextInput renders error 1`] = ` box-shadow: 0 0 0 3px rgba(9,105,218,0.3); } -.c0:focus-within { - border-color: #cf222e; - box-shadow: 0 0 0 3px rgba(164,14,38,0.4); -} - @media (min-width:768px) { .c0 { font-size: 14px; @@ -445,6 +474,7 @@ exports[`TextInput renders large 1`] = ` line-height: 20px; color: #24292f; vertical-align: middle; + background-color: #ffffff; background-repeat: no-repeat; background-position: right 8px center; border: 1px solid #d0d7de; @@ -454,31 +484,42 @@ exports[`TextInput renders large 1`] = ` cursor: text; padding: 6px 12px; display: grid; - grid-template-areas: 'leadingIcon input trailingIcon'; + grid-template-columns: auto 1fr auto; + justify-items: end; + padding-left: 8px; + padding-right: 8px; + padding-top: 10px; + padding-bottom: 10px; + font-size: 20px; } .c0 >:not(:last-child) { margin-right: 8px; } -.c0 [data-component='input'] { - grid-area: input; +.c0 [data-component=' leadingVisual '] { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + color: #57606a; } -.c0 .TextInput-leading-icon { +.c0 [data-component=' trailingVisual '] { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - grid-area: leadingIcon; } -.c0 .TextInput-trailing-icon { +.c0 .TextInput-icon { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - grid-area: trailingIcon; + margin: 0 8px; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; } .c0:focus-within { @@ -494,6 +535,7 @@ exports[`TextInput renders large 1`] = ` `; -exports[`TextInput renders leadingIcon 1`] = ` +exports[`TextInput renders leadingVisual 1`] = ` .c1 { border: 0; font-size: inherit; @@ -528,6 +570,7 @@ exports[`TextInput renders leadingIcon 1`] = ` line-height: 20px; color: #24292f; vertical-align: middle; + background-color: #ffffff; background-repeat: no-repeat; background-position: right 8px center; border: 1px solid #d0d7de; @@ -537,31 +580,37 @@ exports[`TextInput renders leadingIcon 1`] = ` cursor: text; padding: 6px 12px; display: grid; - grid-template-areas: 'leadingIcon input trailingIcon'; + grid-template-columns: auto 1fr auto; + justify-items: end; } .c0 >:not(:last-child) { margin-right: 8px; } -.c0 [data-component='input'] { - grid-area: input; +.c0 [data-component=' leadingVisual '] { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + color: #57606a; } -.c0 .TextInput-leading-icon { +.c0 [data-component=' trailingVisual '] { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - grid-area: leadingIcon; } -.c0 .TextInput-trailing-icon { +.c0 .TextInput-icon { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - grid-area: trailingIcon; + margin: 0 8px; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; } .c0:focus-within { @@ -578,28 +627,32 @@ exports[`TextInput renders leadingIcon 1`] = ` - + :not(:last-child) { margin-right: 8px; } -.c0 [data-component='input'] { - grid-area: input; +.c0 [data-component=' leadingVisual '] { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + color: #57606a; } -.c0 .TextInput-leading-icon { +.c0 [data-component=' trailingVisual '] { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - grid-area: leadingIcon; } -.c0 .TextInput-trailing-icon { +.c0 .TextInput-icon { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - grid-area: trailingIcon; + margin: 0 8px; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; } .c0:focus-within { @@ -718,6 +778,7 @@ exports[`TextInput renders small 1`] = ` line-height: 20px; color: #24292f; vertical-align: middle; + background-color: #ffffff; background-repeat: no-repeat; background-position: right 8px center; border: 1px solid #d0d7de; @@ -727,31 +788,44 @@ exports[`TextInput renders small 1`] = ` cursor: text; padding: 6px 12px; display: grid; - grid-template-areas: 'leadingIcon input trailingIcon'; + grid-template-columns: auto 1fr auto; + justify-items: end; + min-height: 28px; + padding-left: 8px; + padding-right: 8px; + padding-top: 3px; + padding-bottom: 3px; + font-size: 12px; + line-height: 20px; } .c0 >:not(:last-child) { margin-right: 8px; } -.c0 [data-component='input'] { - grid-area: input; +.c0 [data-component=' leadingVisual '] { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + color: #57606a; } -.c0 .TextInput-leading-icon { +.c0 [data-component=' trailingVisual '] { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - grid-area: leadingIcon; } -.c0 .TextInput-trailing-icon { +.c0 .TextInput-icon { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - grid-area: trailingIcon; + margin: 0 8px; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; } .c0:focus-within { @@ -767,6 +841,7 @@ exports[`TextInput renders small 1`] = ` `; -exports[`TextInput renders trailingIcon 1`] = ` +exports[`TextInput renders trailingVisual 1`] = ` .c1 { border: 0; font-size: inherit; @@ -801,6 +876,7 @@ exports[`TextInput renders trailingIcon 1`] = ` line-height: 20px; color: #24292f; vertical-align: middle; + background-color: #ffffff; background-repeat: no-repeat; background-position: right 8px center; border: 1px solid #d0d7de; @@ -810,31 +886,37 @@ exports[`TextInput renders trailingIcon 1`] = ` cursor: text; padding: 6px 12px; display: grid; - grid-template-areas: 'leadingIcon input trailingIcon'; + grid-template-columns: auto 1fr auto; + justify-items: end; } .c0 >:not(:last-child) { margin-right: 8px; } -.c0 [data-component='input'] { - grid-area: input; +.c0 [data-component=' leadingVisual '] { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + color: #57606a; } -.c0 .TextInput-leading-icon { +.c0 [data-component=' trailingVisual '] { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - grid-area: leadingIcon; } -.c0 .TextInput-trailing-icon { +.c0 .TextInput-icon { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - grid-area: trailingIcon; + margin: 0 8px; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; } .c0:focus-within { @@ -858,28 +940,32 @@ exports[`TextInput renders trailingIcon 1`] = ` placeholder="Search" type="text" /> - + `; @@ -907,6 +993,7 @@ exports[`TextInput renders warning 1`] = ` line-height: 20px; color: #24292f; vertical-align: middle; + background-color: #ffffff; background-repeat: no-repeat; background-position: right 8px center; border: 1px solid #d0d7de; @@ -916,32 +1003,37 @@ exports[`TextInput renders warning 1`] = ` cursor: text; padding: 6px 12px; display: grid; - grid-template-areas: 'leadingIcon input trailingIcon'; - border-color: #bf8700; + grid-template-columns: auto 1fr auto; + justify-items: end; } .c0 >:not(:last-child) { margin-right: 8px; } -.c0 [data-component='input'] { - grid-area: input; +.c0 [data-component=' leadingVisual '] { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + color: #57606a; } -.c0 .TextInput-leading-icon { +.c0 [data-component=' trailingVisual '] { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - grid-area: leadingIcon; } -.c0 .TextInput-trailing-icon { +.c0 .TextInput-icon { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - grid-area: trailingIcon; + margin: 0 8px; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; } .c0:focus-within { @@ -949,11 +1041,6 @@ exports[`TextInput renders warning 1`] = ` box-shadow: 0 0 0 3px rgba(9,105,218,0.3); } -.c0:focus-within { - border-color: #bf8700; - box-shadow: 0 0 0 3px rgba(212,167,44,0.4); -} - @media (min-width:768px) { .c0 { font-size: 14px; @@ -996,6 +1083,7 @@ exports[`TextInput should render a password input 1`] = ` line-height: 20px; color: #24292f; vertical-align: middle; + background-color: #ffffff; background-repeat: no-repeat; background-position: right 8px center; border: 1px solid #d0d7de; @@ -1005,31 +1093,37 @@ exports[`TextInput should render a password input 1`] = ` cursor: text; padding: 6px 12px; display: grid; - grid-template-areas: 'leadingIcon input trailingIcon'; + grid-template-columns: auto 1fr auto; + justify-items: end; } .c0 >:not(:last-child) { margin-right: 8px; } -.c0 [data-component='input'] { - grid-area: input; +.c0 [data-component=' leadingVisual '] { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + color: #57606a; } -.c0 .TextInput-leading-icon { +.c0 [data-component=' trailingVisual '] { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - grid-area: leadingIcon; } -.c0 .TextInput-trailing-icon { +.c0 .TextInput-icon { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - grid-area: trailingIcon; + margin: 0 8px; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; } .c0:focus-within { diff --git a/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap b/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap index 774cfc8b66a..f6bc6430af3 100644 --- a/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap +++ b/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap @@ -63,6 +63,7 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = ` line-height: 20px; color: #24292f; vertical-align: middle; + background-color: #ffffff; background-repeat: no-repeat; background-position: right 8px center; border: 1px solid #d0d7de; @@ -72,31 +73,37 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = ` cursor: text; padding: 6px 12px; display: grid; - grid-template-areas: 'leadingIcon input trailingIcon'; + grid-template-columns: auto 1fr auto; + justify-items: end; } .c0 >:not(:last-child) { margin-right: 8px; } -.c0 [data-component='input'] { - grid-area: input; +.c0 [data-component=' leadingVisual '] { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + color: #57606a; } -.c0 .TextInput-leading-icon { +.c0 [data-component=' trailingVisual '] { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - grid-area: leadingIcon; } -.c0 .TextInput-trailing-icon { +.c0 .TextInput-icon { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - grid-area: trailingIcon; + margin: 0 8px; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; } .c0:focus-within { @@ -433,6 +440,7 @@ exports[`TextInputWithTokens renders as block layout 1`] = ` line-height: 20px; color: #24292f; vertical-align: middle; + background-color: #ffffff; background-repeat: no-repeat; background-position: right 8px center; border: 1px solid #d0d7de; @@ -442,7 +450,8 @@ exports[`TextInputWithTokens renders as block layout 1`] = ` cursor: text; padding: 6px 12px; display: grid; - grid-template-areas: 'leadingIcon input trailingIcon'; + grid-template-columns: auto 1fr auto; + justify-items: end; width: 100%; display: -webkit-box; display: -webkit-flex; @@ -455,24 +464,29 @@ exports[`TextInputWithTokens renders as block layout 1`] = ` margin-right: 8px; } -.c0 [data-component='input'] { - grid-area: input; +.c0 [data-component=' leadingVisual '] { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + color: #57606a; } -.c0 .TextInput-leading-icon { +.c0 [data-component=' trailingVisual '] { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - grid-area: leadingIcon; } -.c0 .TextInput-trailing-icon { +.c0 .TextInput-icon { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - grid-area: trailingIcon; + margin: 0 8px; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; } .c0:focus-within { @@ -572,6 +586,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = ` line-height: 20px; color: #24292f; vertical-align: middle; + background-color: #ffffff; background-repeat: no-repeat; background-position: right 8px center; border: 1px solid #d0d7de; @@ -581,7 +596,8 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = ` cursor: text; padding: 6px 12px; display: grid; - grid-template-areas: 'leadingIcon input trailingIcon'; + grid-template-columns: auto 1fr auto; + justify-items: end; max-height: 20px; overflow: auto; } @@ -590,24 +606,29 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = ` margin-right: 8px; } -.c0 [data-component='input'] { - grid-area: input; +.c0 [data-component=' leadingVisual '] { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + color: #57606a; } -.c0 .TextInput-leading-icon { +.c0 [data-component=' trailingVisual '] { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - grid-area: leadingIcon; } -.c0 .TextInput-trailing-icon { +.c0 .TextInput-icon { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - grid-area: trailingIcon; + margin: 0 8px; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; } .c0:focus-within { @@ -1219,6 +1240,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = ` line-height: 20px; color: #24292f; vertical-align: middle; + background-color: #ffffff; background-repeat: no-repeat; background-position: right 8px center; border: 1px solid #d0d7de; @@ -1228,31 +1250,37 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = ` cursor: text; padding: 6px 12px; display: grid; - grid-template-areas: 'leadingIcon input trailingIcon'; + grid-template-columns: auto 1fr auto; + justify-items: end; } .c0 >:not(:last-child) { margin-right: 8px; } -.c0 [data-component='input'] { - grid-area: input; +.c0 [data-component=' leadingVisual '] { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + color: #57606a; } -.c0 .TextInput-leading-icon { +.c0 [data-component=' trailingVisual '] { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - grid-area: leadingIcon; } -.c0 .TextInput-trailing-icon { +.c0 .TextInput-icon { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - grid-area: trailingIcon; + margin: 0 8px; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; } .c0:focus-within { @@ -1864,6 +1892,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = ` line-height: 20px; color: #24292f; vertical-align: middle; + background-color: #ffffff; background-repeat: no-repeat; background-position: right 8px center; border: 1px solid #d0d7de; @@ -1873,31 +1902,37 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = ` cursor: text; padding: 6px 12px; display: grid; - grid-template-areas: 'leadingIcon input trailingIcon'; + grid-template-columns: auto 1fr auto; + justify-items: end; } .c0 >:not(:last-child) { margin-right: 8px; } -.c0 [data-component='input'] { - grid-area: input; +.c0 [data-component=' leadingVisual '] { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + color: #57606a; } -.c0 .TextInput-leading-icon { +.c0 [data-component=' trailingVisual '] { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - grid-area: leadingIcon; } -.c0 .TextInput-trailing-icon { +.c0 .TextInput-icon { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - grid-area: trailingIcon; + margin: 0 8px; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; } .c0:focus-within { @@ -2509,6 +2544,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = ` line-height: 20px; color: #24292f; vertical-align: middle; + background-color: #ffffff; background-repeat: no-repeat; background-position: right 8px center; border: 1px solid #d0d7de; @@ -2518,31 +2554,37 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = ` cursor: text; padding: 6px 12px; display: grid; - grid-template-areas: 'leadingIcon input trailingIcon'; + grid-template-columns: auto 1fr auto; + justify-items: end; } .c0 >:not(:last-child) { margin-right: 8px; } -.c0 [data-component='input'] { - grid-area: input; +.c0 [data-component=' leadingVisual '] { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + color: #57606a; } -.c0 .TextInput-leading-icon { +.c0 [data-component=' trailingVisual '] { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - grid-area: leadingIcon; } -.c0 .TextInput-trailing-icon { +.c0 .TextInput-icon { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - grid-area: trailingIcon; + margin: 0 8px; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; } .c0:focus-within { @@ -3154,6 +3196,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = ` line-height: 20px; color: #24292f; vertical-align: middle; + background-color: #ffffff; background-repeat: no-repeat; background-position: right 8px center; border: 1px solid #d0d7de; @@ -3163,31 +3206,37 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = ` cursor: text; padding: 6px 12px; display: grid; - grid-template-areas: 'leadingIcon input trailingIcon'; + grid-template-columns: auto 1fr auto; + justify-items: end; } .c0 >:not(:last-child) { margin-right: 8px; } -.c0 [data-component='input'] { - grid-area: input; +.c0 [data-component=' leadingVisual '] { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + color: #57606a; } -.c0 .TextInput-leading-icon { +.c0 [data-component=' trailingVisual '] { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - grid-area: leadingIcon; } -.c0 .TextInput-trailing-icon { +.c0 .TextInput-icon { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - grid-area: trailingIcon; + margin: 0 8px; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; } .c0:focus-within { @@ -3799,6 +3848,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`] line-height: 20px; color: #24292f; vertical-align: middle; + background-color: #ffffff; background-repeat: no-repeat; background-position: right 8px center; border: 1px solid #d0d7de; @@ -3808,7 +3858,8 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`] cursor: text; padding: 6px 12px; display: grid; - grid-template-areas: 'leadingIcon input trailingIcon'; + grid-template-columns: auto 1fr auto; + justify-items: end; overflow: auto; } @@ -3816,24 +3867,29 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`] margin-right: 8px; } -.c0 [data-component='input'] { - grid-area: input; +.c0 [data-component=' leadingVisual '] { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + color: #57606a; } -.c0 .TextInput-leading-icon { +.c0 [data-component=' trailingVisual '] { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - grid-area: leadingIcon; } -.c0 .TextInput-trailing-icon { +.c0 .TextInput-icon { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - grid-area: trailingIcon; + margin: 0 8px; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; } .c0:focus-within { @@ -4445,6 +4501,7 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi line-height: 20px; color: #24292f; vertical-align: middle; + background-color: #ffffff; background-repeat: no-repeat; background-position: right 8px center; border: 1px solid #d0d7de; @@ -4454,31 +4511,37 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi cursor: text; padding: 6px 12px; display: grid; - grid-template-areas: 'leadingIcon input trailingIcon'; + grid-template-columns: auto 1fr auto; + justify-items: end; } .c0 >:not(:last-child) { margin-right: 8px; } -.c0 [data-component='input'] { - grid-area: input; +.c0 [data-component=' leadingVisual '] { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + color: #57606a; } -.c0 .TextInput-leading-icon { +.c0 [data-component=' trailingVisual '] { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - grid-area: leadingIcon; } -.c0 .TextInput-trailing-icon { +.c0 .TextInput-icon { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - grid-area: trailingIcon; + margin: 0 8px; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; } .c0:focus-within { @@ -4798,6 +4861,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = ` line-height: 20px; color: #24292f; vertical-align: middle; + background-color: #ffffff; background-repeat: no-repeat; background-position: right 8px center; border: 1px solid #d0d7de; @@ -4807,31 +4871,37 @@ exports[`TextInputWithTokens renders with tokens 1`] = ` cursor: text; padding: 6px 12px; display: grid; - grid-template-areas: 'leadingIcon input trailingIcon'; + grid-template-columns: auto 1fr auto; + justify-items: end; } .c0 >:not(:last-child) { margin-right: 8px; } -.c0 [data-component='input'] { - grid-area: input; +.c0 [data-component=' leadingVisual '] { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + color: #57606a; } -.c0 .TextInput-leading-icon { +.c0 [data-component=' trailingVisual '] { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - grid-area: leadingIcon; } -.c0 .TextInput-trailing-icon { +.c0 .TextInput-icon { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - grid-area: trailingIcon; + margin: 0 8px; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; } .c0:focus-within { @@ -5443,6 +5513,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component line-height: 20px; color: #24292f; vertical-align: middle; + background-color: #ffffff; background-repeat: no-repeat; background-position: right 8px center; border: 1px solid #d0d7de; @@ -5452,31 +5523,37 @@ exports[`TextInputWithTokens renders with tokens using a custom token component cursor: text; padding: 6px 12px; display: grid; - grid-template-areas: 'leadingIcon input trailingIcon'; + grid-template-columns: auto 1fr auto; + justify-items: end; } .c0 >:not(:last-child) { margin-right: 8px; } -.c0 [data-component='input'] { - grid-area: input; +.c0 [data-component=' leadingVisual '] { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + color: #57606a; } -.c0 .TextInput-leading-icon { +.c0 [data-component=' trailingVisual '] { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - grid-area: leadingIcon; } -.c0 .TextInput-trailing-icon { +.c0 .TextInput-icon { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - grid-area: trailingIcon; + margin: 0 8px; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; } .c0:focus-within { @@ -6093,6 +6170,7 @@ exports[`TextInputWithTokens renders without tokens 1`] = ` line-height: 20px; color: #24292f; vertical-align: middle; + background-color: #ffffff; background-repeat: no-repeat; background-position: right 8px center; border: 1px solid #d0d7de; @@ -6102,31 +6180,37 @@ exports[`TextInputWithTokens renders without tokens 1`] = ` cursor: text; padding: 6px 12px; display: grid; - grid-template-areas: 'leadingIcon input trailingIcon'; + grid-template-columns: auto 1fr auto; + justify-items: end; } .c0 >:not(:last-child) { margin-right: 8px; } -.c0 [data-component='input'] { - grid-area: input; +.c0 [data-component=' leadingVisual '] { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + color: #57606a; } -.c0 .TextInput-leading-icon { +.c0 [data-component=' trailingVisual '] { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - grid-area: leadingIcon; } -.c0 .TextInput-trailing-icon { +.c0 .TextInput-icon { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - grid-area: trailingIcon; + margin: 0 8px; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; } .c0:focus-within { diff --git a/src/stories/TextInput.stories.tsx b/src/stories/TextInput.stories.tsx index 18390617ac8..ca13f4e535e 100644 --- a/src/stories/TextInput.stories.tsx +++ b/src/stories/TextInput.stories.tsx @@ -88,20 +88,24 @@ export const Default = (args: TextInputProps) => { ) } -export const WithLeadingIcon = (args: TextInputProps) => { +export const WithLeadingVisual = (args: TextInputProps) => { const [value, setValue] = useState('') const handleChange = (event: React.ChangeEvent) => { setValue(event.target.value) } - const inputId = 'basic-text-input-with-leading-icon' + const iconInputId = 'text-input-with-leading-icon' + const leadingTextId = 'text-input-with-leading-text' return (
- + +
+ +
- + ) } @@ -113,13 +117,26 @@ export const WithTrailingIcon = (args: TextInputProps) => { setValue(event.target.value) } - const inputId = 'basic-text-input-with-trailing-icon' + const iconInputId = 'text-input-with-trailing-icon' + const trailingTextInputId = 'text-input-with-trailing-text' return (
- + +
+ + +
- + ) } From b28af3ec2c09c2e3abd73ed967ba0d3e03935f56 Mon Sep 17 00:00:00 2001 From: Pavithra Kodmad Date: Thu, 9 Dec 2021 17:03:34 +1100 Subject: [PATCH 05/10] Fix up documentation --- docs/content/TextInput.mdx | 73 ++++++++++++++++++++++++++++++++++---- 1 file changed, 67 insertions(+), 6 deletions(-) diff --git a/docs/content/TextInput.mdx b/docs/content/TextInput.mdx index 806b19caae2..73443d03ce5 100644 --- a/docs/content/TextInput.mdx +++ b/docs/content/TextInput.mdx @@ -8,25 +8,85 @@ 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. -## Examples +## Default example + +```jsx live + +``` + +## Text Input with Icons + +```jsx live +<> + + + + +``` + +## Text Input with Text visuals ```jsx live <> - + - + + +``` + +## Text Input with Error and warning states +```jsx live +<> + + ``` +## Block text input + +```jsx live + +``` + +## Contrast text input + +```jsx live + + ## Props ### TextInput @@ -120,3 +180,4 @@ TextInput is a form component to add default styling to the native text input. hasFigmaComponent: false }} /> +``` From a4d301aac2ad7318f02a7baa6ad19f0c2c3b8bf1 Mon Sep 17 00:00:00 2001 From: Pavithra Kodmad Date: Tue, 14 Dec 2021 12:52:12 +1100 Subject: [PATCH 06/10] Update documentation and css layout --- docs/content/TextInput.mdx | 62 +-- src/TextInput.tsx | 4 +- src/_TextInputWrapper.tsx | 17 +- .../__snapshots__/Autocomplete.test.tsx.snap | 203 +++------- .../__snapshots__/TextInput.test.tsx.snap | 352 +++++------------- .../TextInputWithTokens.test.tsx.snap | 348 +++++------------ src/stories/TextInput.stories.tsx | 7 +- 7 files changed, 293 insertions(+), 700 deletions(-) diff --git a/docs/content/TextInput.mdx b/docs/content/TextInput.mdx index 73443d03ce5..a229c8dce16 100644 --- a/docs/content/TextInput.mdx +++ b/docs/content/TextInput.mdx @@ -14,7 +14,7 @@ TextInput is a form component to add default styling to the native text input. ``` -## Text Input with Icons +## Text Input with icons ```jsx live <> @@ -27,7 +27,6 @@ TextInput is a form component to add default styling to the native text input. /> ``` -## Text Input with Text visuals +## Text Input with text visuals ```jsx live <> - + ``` -## Text Input with Error and warning states +## Text Input with error and warning states ```jsx live <> @@ -66,7 +59,6 @@ TextInput is a form component to add default styling to the native text input. /> +``` ## Props @@ -99,7 +92,7 @@ TextInput is a form component to add default styling to the native text input. defaultValue="false" description={ <> - Adds display: block to element + Creates a full width input element } /> @@ -109,11 +102,27 @@ TextInput is a form component to add default styling to the native text input. defaultValue="false" description="Changes background color to a higher contrast color" /> - + + +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" +/> + + + + Array<string | number> } - description="Set the width of the input" + description="(Use sx prop) Set the width of the input" + deprecated /> Array<string | number> } - description="Set the maximum width of the input" + description="(Use sx prop) Set the maximum width of the input" + deprecated /> Array<string | number> } - description="Set the minimum width of the input" + description="(Use sx prop) Set the minimum width of the input" + deprecated /> -``` diff --git a/src/TextInput.tsx b/src/TextInput.tsx index b31753459b1..a2acd208bf5 100644 --- a/src/TextInput.tsx +++ b/src/TextInput.tsx @@ -61,13 +61,13 @@ const TextInput = React.forwardRef( > {IconComponent && } {LeadingVisual && ( - + {typeof LeadingVisual === 'function' ? : LeadingVisual} )} {TrailingVisual && ( - + {typeof TrailingVisual === 'function' ? : TrailingVisual} )} diff --git a/src/_TextInputWrapper.tsx b/src/_TextInputWrapper.tsx index c0c72ff1391..ac0d9014cc4 100644 --- a/src/_TextInputWrapper.tsx +++ b/src/_TextInputWrapper.tsx @@ -53,7 +53,6 @@ type StyledWrapperProps = { SxProp const TextInputWrapper = styled.span` - width: max-content; min-height: 34px; font-size: ${get('fontSizes.1')}; line-height: 20px; @@ -68,27 +67,15 @@ const TextInputWrapper = styled.span` box-shadow: ${get('shadows.primer.shadow.inset')}; cursor: text; padding: 6px 12px; - display: grid; - grid-template-columns: auto 1fr auto; - justify-items: end; + display: inline-flex; + align-items: stretch; & > :not(:last-child) { margin-right: ${get('space.2')}; } - [data-component=' leadingVisual '] { - align-self: center; - color: ${get('colors.fg.muted')}; - } - - [data-component=' trailingVisual '] { - align-self: center; - color: ${get('colors.fg.muted')}; - } - .TextInput-icon { align-self: center; color: ${get('colors.fg.muted')}; - margin: 0 ${get('space.2')}; flex-shrink: 0; } diff --git a/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap b/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap index ecd9445ebae..9511ca850df 100644 --- a/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap +++ b/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap @@ -17,9 +17,6 @@ Array [ } .c0 { - width: -webkit-max-content; - width: -moz-max-content; - width: max-content; min-height: 34px; font-size: 14px; line-height: 20px; @@ -34,35 +31,25 @@ Array [ box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); cursor: text; padding: 6px 12px; - display: grid; - grid-template-columns: auto 1fr auto; - justify-items: end; + 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; } .c0 >:not(:last-child) { margin-right: 8px; } -.c0 [data-component=' leadingVisual '] { - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; - color: #57606a; -} - -.c0 [data-component=' trailingVisual '] { - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; - color: #57606a; -} - .c0 .TextInput-icon { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - margin: 0 8px; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -148,9 +135,6 @@ Array [ } .c0 { - width: -webkit-max-content; - width: -moz-max-content; - width: max-content; min-height: 34px; font-size: 14px; line-height: 20px; @@ -165,35 +149,25 @@ Array [ box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); cursor: text; padding: 6px 12px; - display: grid; - grid-template-columns: auto 1fr auto; - justify-items: end; + 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; } .c0 >:not(:last-child) { margin-right: 8px; } -.c0 [data-component=' leadingVisual '] { - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; - color: #57606a; -} - -.c0 [data-component=' trailingVisual '] { - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; - color: #57606a; -} - .c0 .TextInput-icon { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - margin: 0 8px; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -314,9 +288,6 @@ Array [ } .c0 { - width: -webkit-max-content; - width: -moz-max-content; - width: max-content; min-height: 34px; font-size: 14px; line-height: 20px; @@ -331,35 +302,25 @@ Array [ box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); cursor: text; padding: 6px 12px; - display: grid; - grid-template-columns: auto 1fr auto; - justify-items: end; + 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; } .c0 >:not(:last-child) { margin-right: 8px; } -.c0 [data-component=' leadingVisual '] { - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; - color: #57606a; -} - -.c0 [data-component=' trailingVisual '] { - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; - color: #57606a; -} - .c0 .TextInput-icon { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - margin: 0 8px; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -1243,9 +1204,6 @@ Array [ } .c0 { - width: -webkit-max-content; - width: -moz-max-content; - width: max-content; min-height: 34px; font-size: 14px; line-height: 20px; @@ -1260,35 +1218,25 @@ Array [ box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); cursor: text; padding: 6px 12px; - display: grid; - grid-template-columns: auto 1fr auto; - justify-items: end; + 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; } .c0 >:not(:last-child) { margin-right: 8px; } -.c0 [data-component=' leadingVisual '] { - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; - color: #57606a; -} - -.c0 [data-component=' trailingVisual '] { - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; - color: #57606a; -} - .c0 .TextInput-icon { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - margin: 0 8px; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -2082,9 +2030,6 @@ Array [ } .c0 { - width: -webkit-max-content; - width: -moz-max-content; - width: max-content; min-height: 34px; font-size: 14px; line-height: 20px; @@ -2099,35 +2044,25 @@ Array [ box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); cursor: text; padding: 6px 12px; - display: grid; - grid-template-columns: auto 1fr auto; - justify-items: end; + 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; } .c0 >:not(:last-child) { margin-right: 8px; } -.c0 [data-component=' leadingVisual '] { - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; - color: #57606a; -} - -.c0 [data-component=' trailingVisual '] { - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; - color: #57606a; -} - .c0 .TextInput-icon { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - margin: 0 8px; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -2932,9 +2867,6 @@ Array [ } .c0 { - width: -webkit-max-content; - width: -moz-max-content; - width: max-content; min-height: 34px; font-size: 14px; line-height: 20px; @@ -2949,35 +2881,25 @@ Array [ box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); cursor: text; padding: 6px 12px; - display: grid; - grid-template-columns: auto 1fr auto; - justify-items: end; + 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; } .c0 >:not(:last-child) { margin-right: 8px; } -.c0 [data-component=' leadingVisual '] { - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; - color: #57606a; -} - -.c0 [data-component=' trailingVisual '] { - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; - color: #57606a; -} - .c0 .TextInput-icon { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - margin: 0 8px; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -3912,9 +3834,6 @@ Array [ } .c0 { - width: -webkit-max-content; - width: -moz-max-content; - width: max-content; min-height: 34px; font-size: 14px; line-height: 20px; @@ -3929,35 +3848,25 @@ Array [ box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); cursor: text; padding: 6px 12px; - display: grid; - grid-template-columns: auto 1fr auto; - justify-items: end; + 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; } .c0 >:not(:last-child) { margin-right: 8px; } -.c0 [data-component=' leadingVisual '] { - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; - color: #57606a; -} - -.c0 [data-component=' trailingVisual '] { - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; - color: #57606a; -} - .c0 .TextInput-icon { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - margin: 0 8px; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; diff --git a/src/__tests__/__snapshots__/TextInput.test.tsx.snap b/src/__tests__/__snapshots__/TextInput.test.tsx.snap index 3886349ea42..c948d8534de 100644 --- a/src/__tests__/__snapshots__/TextInput.test.tsx.snap +++ b/src/__tests__/__snapshots__/TextInput.test.tsx.snap @@ -16,9 +16,6 @@ exports[`TextInput renders 1`] = ` } .c0 { - width: -webkit-max-content; - width: -moz-max-content; - width: max-content; min-height: 34px; font-size: 14px; line-height: 20px; @@ -33,35 +30,25 @@ exports[`TextInput renders 1`] = ` box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); cursor: text; padding: 6px 12px; - display: grid; - grid-template-columns: auto 1fr auto; - justify-items: end; + 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; } .c0 >:not(:last-child) { margin-right: 8px; } -.c0 [data-component=' leadingVisual '] { - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; - color: #57606a; -} - -.c0 [data-component=' trailingVisual '] { - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; - color: #57606a; -} - .c0 .TextInput-icon { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - margin: 0 8px; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -106,9 +93,6 @@ exports[`TextInput renders block 1`] = ` } .c0 { - width: -webkit-max-content; - width: -moz-max-content; - width: max-content; min-height: 34px; font-size: 14px; line-height: 20px; @@ -123,9 +107,14 @@ exports[`TextInput renders block 1`] = ` box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); cursor: text; padding: 6px 12px; - display: grid; - grid-template-columns: auto 1fr auto; - justify-items: end; + 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; width: 100%; } @@ -133,26 +122,11 @@ exports[`TextInput renders block 1`] = ` margin-right: 8px; } -.c0 [data-component=' leadingVisual '] { - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; - color: #57606a; -} - -.c0 [data-component=' trailingVisual '] { - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; - color: #57606a; -} - .c0 .TextInput-icon { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - margin: 0 8px; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -197,9 +171,6 @@ exports[`TextInput renders consistently 1`] = ` } .c0 { - width: -webkit-max-content; - width: -moz-max-content; - width: max-content; min-height: 34px; font-size: 14px; line-height: 20px; @@ -214,35 +185,25 @@ exports[`TextInput renders consistently 1`] = ` box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); cursor: text; padding: 6px 12px; - display: grid; - grid-template-columns: auto 1fr auto; - justify-items: end; + 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; } .c0 >:not(:last-child) { margin-right: 8px; } -.c0 [data-component=' leadingVisual '] { - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; - color: #57606a; -} - -.c0 [data-component=' trailingVisual '] { - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; - color: #57606a; -} - .c0 .TextInput-icon { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - margin: 0 8px; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -286,9 +247,6 @@ exports[`TextInput renders contrast 1`] = ` } .c0 { - width: -webkit-max-content; - width: -moz-max-content; - width: max-content; min-height: 34px; font-size: 14px; line-height: 20px; @@ -303,35 +261,25 @@ exports[`TextInput renders contrast 1`] = ` box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); cursor: text; padding: 6px 12px; - display: grid; - grid-template-columns: auto 1fr auto; - justify-items: end; + 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; } .c0 >:not(:last-child) { margin-right: 8px; } -.c0 [data-component=' leadingVisual '] { - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; - color: #57606a; -} - -.c0 [data-component=' trailingVisual '] { - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; - color: #57606a; -} - .c0 .TextInput-icon { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - margin: 0 8px; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -376,9 +324,6 @@ exports[`TextInput renders error 1`] = ` } .c0 { - width: -webkit-max-content; - width: -moz-max-content; - width: max-content; min-height: 34px; font-size: 14px; line-height: 20px; @@ -393,35 +338,25 @@ exports[`TextInput renders error 1`] = ` box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); cursor: text; padding: 6px 12px; - display: grid; - grid-template-columns: auto 1fr auto; - justify-items: end; + 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; } .c0 >:not(:last-child) { margin-right: 8px; } -.c0 [data-component=' leadingVisual '] { - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; - color: #57606a; -} - -.c0 [data-component=' trailingVisual '] { - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; - color: #57606a; -} - .c0 .TextInput-icon { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - margin: 0 8px; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -466,9 +401,6 @@ exports[`TextInput renders large 1`] = ` } .c0 { - width: -webkit-max-content; - width: -moz-max-content; - width: max-content; min-height: 34px; font-size: 14px; line-height: 20px; @@ -483,9 +415,14 @@ exports[`TextInput renders large 1`] = ` box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); cursor: text; padding: 6px 12px; - display: grid; - grid-template-columns: auto 1fr auto; - justify-items: end; + 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; padding-left: 8px; padding-right: 8px; padding-top: 10px; @@ -497,26 +434,11 @@ exports[`TextInput renders large 1`] = ` margin-right: 8px; } -.c0 [data-component=' leadingVisual '] { - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; - color: #57606a; -} - -.c0 [data-component=' trailingVisual '] { - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; - color: #57606a; -} - .c0 .TextInput-icon { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - margin: 0 8px; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -562,9 +484,6 @@ exports[`TextInput renders leadingVisual 1`] = ` } .c0 { - width: -webkit-max-content; - width: -moz-max-content; - width: max-content; min-height: 34px; font-size: 14px; line-height: 20px; @@ -579,35 +498,25 @@ exports[`TextInput renders leadingVisual 1`] = ` box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); cursor: text; padding: 6px 12px; - display: grid; - grid-template-columns: auto 1fr auto; - justify-items: end; + 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; } .c0 >:not(:last-child) { margin-right: 8px; } -.c0 [data-component=' leadingVisual '] { - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; - color: #57606a; -} - -.c0 [data-component=' trailingVisual '] { - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; - color: #57606a; -} - .c0 .TextInput-icon { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; color: #57606a; - margin: 0 8px; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -628,7 +537,7 @@ exports[`TextInput renders leadingVisual 1`] = ` className="c0 TextInput-wrapper" >
-
+ ) @@ -123,11 +122,9 @@ export const WithTrailingIcon = (args: TextInputProps) => { return (
-
- -
+ Date: Tue, 14 Dec 2021 17:58:47 -0500 Subject: [PATCH 07/10] fixes text input height and padding --- src/TextInputWithTokens.tsx | 5 +- src/_TextInputWrapper.tsx | 9 +- .../__snapshots__/Autocomplete.test.tsx.snap | 49 +++++-- .../__snapshots__/TextInput.test.tsx.snap | 84 ++++++++---- .../TextInputWithTokens.test.tsx.snap | 120 ++++++++++++++---- 5 files changed, 202 insertions(+), 65 deletions(-) diff --git a/src/TextInputWithTokens.tsx b/src/TextInputWithTokens.tsx index ea23630b155..e045840f5cb 100644 --- a/src/TextInputWithTokens.tsx +++ b/src/TextInputWithTokens.tsx @@ -9,10 +9,11 @@ import {TokenSizeKeys} from './Token/TokenBase' import {TextInputProps} from './TextInput' import {useProvidedRefOrCreate} from './hooks' import UnstyledTextInput from './_UnstyledTextInput' -import TextInputWrapper from './_TextInputWrapper' +import TextInputWrapper, {textInputHorizPadding} from './_TextInputWrapper' import Box from './Box' import Text from './Text' import {isFocusable} from '@primer/behaviors/utils' +import {text} from 'stream/consumers' // eslint-disable-next-line @typescript-eslint/no-explicit-any type AnyReactComponent = React.ComponentType @@ -249,6 +250,8 @@ function TextInputWithTokensInnerComponent` - min-height: 34px; + min-height: 32px; font-size: ${get('fontSizes.1')}; line-height: 20px; color: ${get('colors.fg.default')}; @@ -66,13 +68,16 @@ const TextInputWrapper = styled.span` outline: none; box-shadow: ${get('shadows.primer.shadow.inset')}; cursor: text; - padding: 6px 12px; display: inline-flex; align-items: stretch; & > :not(:last-child) { margin-right: ${get('space.2')}; } + > input { + padding: 0 ${textInputHorizPadding}; + } + .TextInput-icon { align-self: center; color: ${get('colors.fg.muted')}; diff --git a/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap b/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap index 9511ca850df..ffa91e370e4 100644 --- a/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap +++ b/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap @@ -17,7 +17,7 @@ Array [ } .c0 { - min-height: 34px; + min-height: 32px; font-size: 14px; line-height: 20px; color: #24292f; @@ -30,7 +30,6 @@ Array [ outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); cursor: text; - padding: 6px 12px; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; @@ -45,6 +44,10 @@ Array [ margin-right: 8px; } +.c0 > input { + padding: 0 12px; +} + .c0 .TextInput-icon { -webkit-align-self: center; -ms-flex-item-align: center; @@ -135,7 +138,7 @@ Array [ } .c0 { - min-height: 34px; + min-height: 32px; font-size: 14px; line-height: 20px; color: #24292f; @@ -148,7 +151,6 @@ Array [ outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); cursor: text; - padding: 6px 12px; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; @@ -163,6 +165,10 @@ Array [ margin-right: 8px; } +.c0 > input { + padding: 0 12px; +} + .c0 .TextInput-icon { -webkit-align-self: center; -ms-flex-item-align: center; @@ -288,7 +294,7 @@ Array [ } .c0 { - min-height: 34px; + min-height: 32px; font-size: 14px; line-height: 20px; color: #24292f; @@ -301,7 +307,6 @@ Array [ outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); cursor: text; - padding: 6px 12px; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; @@ -316,6 +321,10 @@ Array [ margin-right: 8px; } +.c0 > input { + padding: 0 12px; +} + .c0 .TextInput-icon { -webkit-align-self: center; -ms-flex-item-align: center; @@ -1204,7 +1213,7 @@ Array [ } .c0 { - min-height: 34px; + min-height: 32px; font-size: 14px; line-height: 20px; color: #24292f; @@ -1217,7 +1226,6 @@ Array [ outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); cursor: text; - padding: 6px 12px; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; @@ -1232,6 +1240,10 @@ Array [ margin-right: 8px; } +.c0 > input { + padding: 0 12px; +} + .c0 .TextInput-icon { -webkit-align-self: center; -ms-flex-item-align: center; @@ -2030,7 +2042,7 @@ Array [ } .c0 { - min-height: 34px; + min-height: 32px; font-size: 14px; line-height: 20px; color: #24292f; @@ -2043,7 +2055,6 @@ Array [ outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); cursor: text; - padding: 6px 12px; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; @@ -2058,6 +2069,10 @@ Array [ margin-right: 8px; } +.c0 > input { + padding: 0 12px; +} + .c0 .TextInput-icon { -webkit-align-self: center; -ms-flex-item-align: center; @@ -2867,7 +2882,7 @@ Array [ } .c0 { - min-height: 34px; + min-height: 32px; font-size: 14px; line-height: 20px; color: #24292f; @@ -2880,7 +2895,6 @@ Array [ outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); cursor: text; - padding: 6px 12px; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; @@ -2895,6 +2909,10 @@ Array [ margin-right: 8px; } +.c0 > input { + padding: 0 12px; +} + .c0 .TextInput-icon { -webkit-align-self: center; -ms-flex-item-align: center; @@ -3834,7 +3852,7 @@ Array [ } .c0 { - min-height: 34px; + min-height: 32px; font-size: 14px; line-height: 20px; color: #24292f; @@ -3847,7 +3865,6 @@ Array [ outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); cursor: text; - padding: 6px 12px; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; @@ -3862,6 +3879,10 @@ Array [ margin-right: 8px; } +.c0 > input { + padding: 0 12px; +} + .c0 .TextInput-icon { -webkit-align-self: center; -ms-flex-item-align: center; diff --git a/src/__tests__/__snapshots__/TextInput.test.tsx.snap b/src/__tests__/__snapshots__/TextInput.test.tsx.snap index c948d8534de..de9cee93ba3 100644 --- a/src/__tests__/__snapshots__/TextInput.test.tsx.snap +++ b/src/__tests__/__snapshots__/TextInput.test.tsx.snap @@ -16,7 +16,7 @@ exports[`TextInput renders 1`] = ` } .c0 { - min-height: 34px; + min-height: 32px; font-size: 14px; line-height: 20px; color: #24292f; @@ -29,7 +29,6 @@ exports[`TextInput renders 1`] = ` outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); cursor: text; - padding: 6px 12px; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; @@ -44,6 +43,10 @@ exports[`TextInput renders 1`] = ` margin-right: 8px; } +.c0 > input { + padding: 0 12px; +} + .c0 .TextInput-icon { -webkit-align-self: center; -ms-flex-item-align: center; @@ -93,7 +96,7 @@ exports[`TextInput renders block 1`] = ` } .c0 { - min-height: 34px; + min-height: 32px; font-size: 14px; line-height: 20px; color: #24292f; @@ -106,7 +109,6 @@ exports[`TextInput renders block 1`] = ` outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); cursor: text; - padding: 6px 12px; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; @@ -122,6 +124,10 @@ exports[`TextInput renders block 1`] = ` margin-right: 8px; } +.c0 > input { + padding: 0 12px; +} + .c0 .TextInput-icon { -webkit-align-self: center; -ms-flex-item-align: center; @@ -171,7 +177,7 @@ exports[`TextInput renders consistently 1`] = ` } .c0 { - min-height: 34px; + min-height: 32px; font-size: 14px; line-height: 20px; color: #24292f; @@ -184,7 +190,6 @@ exports[`TextInput renders consistently 1`] = ` outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); cursor: text; - padding: 6px 12px; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; @@ -199,6 +204,10 @@ exports[`TextInput renders consistently 1`] = ` margin-right: 8px; } +.c0 > input { + padding: 0 12px; +} + .c0 .TextInput-icon { -webkit-align-self: center; -ms-flex-item-align: center; @@ -247,7 +256,7 @@ exports[`TextInput renders contrast 1`] = ` } .c0 { - min-height: 34px; + min-height: 32px; font-size: 14px; line-height: 20px; color: #24292f; @@ -260,7 +269,6 @@ exports[`TextInput renders contrast 1`] = ` outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); cursor: text; - padding: 6px 12px; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; @@ -275,6 +283,10 @@ exports[`TextInput renders contrast 1`] = ` margin-right: 8px; } +.c0 > input { + padding: 0 12px; +} + .c0 .TextInput-icon { -webkit-align-self: center; -ms-flex-item-align: center; @@ -324,7 +336,7 @@ exports[`TextInput renders error 1`] = ` } .c0 { - min-height: 34px; + min-height: 32px; font-size: 14px; line-height: 20px; color: #24292f; @@ -337,7 +349,6 @@ exports[`TextInput renders error 1`] = ` outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); cursor: text; - padding: 6px 12px; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; @@ -352,6 +363,10 @@ exports[`TextInput renders error 1`] = ` margin-right: 8px; } +.c0 > input { + padding: 0 12px; +} + .c0 .TextInput-icon { -webkit-align-self: center; -ms-flex-item-align: center; @@ -401,7 +416,7 @@ exports[`TextInput renders large 1`] = ` } .c0 { - min-height: 34px; + min-height: 32px; font-size: 14px; line-height: 20px; color: #24292f; @@ -414,7 +429,6 @@ exports[`TextInput renders large 1`] = ` outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); cursor: text; - padding: 6px 12px; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; @@ -434,6 +448,10 @@ exports[`TextInput renders large 1`] = ` margin-right: 8px; } +.c0 > input { + padding: 0 12px; +} + .c0 .TextInput-icon { -webkit-align-self: center; -ms-flex-item-align: center; @@ -484,7 +502,7 @@ exports[`TextInput renders leadingVisual 1`] = ` } .c0 { - min-height: 34px; + min-height: 32px; font-size: 14px; line-height: 20px; color: #24292f; @@ -497,7 +515,6 @@ exports[`TextInput renders leadingVisual 1`] = ` outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); cursor: text; - padding: 6px 12px; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; @@ -512,6 +529,10 @@ exports[`TextInput renders leadingVisual 1`] = ` margin-right: 8px; } +.c0 > input { + padding: 0 12px; +} + .c0 .TextInput-icon { -webkit-align-self: center; -ms-flex-item-align: center; @@ -588,7 +609,7 @@ exports[`TextInput renders placeholder 1`] = ` } .c0 { - min-height: 34px; + min-height: 32px; font-size: 14px; line-height: 20px; color: #24292f; @@ -601,7 +622,6 @@ exports[`TextInput renders placeholder 1`] = ` outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); cursor: text; - padding: 6px 12px; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; @@ -616,6 +636,10 @@ exports[`TextInput renders placeholder 1`] = ` margin-right: 8px; } +.c0 > input { + padding: 0 12px; +} + .c0 .TextInput-icon { -webkit-align-self: center; -ms-flex-item-align: center; @@ -666,7 +690,7 @@ exports[`TextInput renders small 1`] = ` } .c0 { - min-height: 34px; + min-height: 32px; font-size: 14px; line-height: 20px; color: #24292f; @@ -679,7 +703,6 @@ exports[`TextInput renders small 1`] = ` outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); cursor: text; - padding: 6px 12px; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; @@ -701,6 +724,10 @@ exports[`TextInput renders small 1`] = ` margin-right: 8px; } +.c0 > input { + padding: 0 12px; +} + .c0 .TextInput-icon { -webkit-align-self: center; -ms-flex-item-align: center; @@ -751,7 +778,7 @@ exports[`TextInput renders trailingVisual 1`] = ` } .c0 { - min-height: 34px; + min-height: 32px; font-size: 14px; line-height: 20px; color: #24292f; @@ -764,7 +791,6 @@ exports[`TextInput renders trailingVisual 1`] = ` outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); cursor: text; - padding: 6px 12px; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; @@ -779,6 +805,10 @@ exports[`TextInput renders trailingVisual 1`] = ` margin-right: 8px; } +.c0 > input { + padding: 0 12px; +} + .c0 .TextInput-icon { -webkit-align-self: center; -ms-flex-item-align: center; @@ -855,7 +885,7 @@ exports[`TextInput renders warning 1`] = ` } .c0 { - min-height: 34px; + min-height: 32px; font-size: 14px; line-height: 20px; color: #24292f; @@ -868,7 +898,6 @@ exports[`TextInput renders warning 1`] = ` outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); cursor: text; - padding: 6px 12px; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; @@ -883,6 +912,10 @@ exports[`TextInput renders warning 1`] = ` margin-right: 8px; } +.c0 > input { + padding: 0 12px; +} + .c0 .TextInput-icon { -webkit-align-self: center; -ms-flex-item-align: center; @@ -932,7 +965,7 @@ exports[`TextInput should render a password input 1`] = ` } .c0 { - min-height: 34px; + min-height: 32px; font-size: 14px; line-height: 20px; color: #24292f; @@ -945,7 +978,6 @@ exports[`TextInput should render a password input 1`] = ` outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); cursor: text; - padding: 6px 12px; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; @@ -960,6 +992,10 @@ exports[`TextInput should render a password input 1`] = ` margin-right: 8px; } +.c0 > input { + padding: 0 12px; +} + .c0 .TextInput-icon { -webkit-align-self: center; -ms-flex-item-align: center; diff --git a/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap b/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap index c55a4439db2..711cfd04353 100644 --- a/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap +++ b/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap @@ -55,7 +55,7 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = ` } .c0 { - min-height: 34px; + min-height: 32px; font-size: 14px; line-height: 20px; color: #24292f; @@ -68,7 +68,6 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = ` outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); cursor: text; - padding: 6px 12px; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; @@ -77,12 +76,19 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = ` -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; + padding-left: 12px; + padding-top: calc(12px / 2); + padding-bottom: calc(12px / 2); } .c0 >:not(:last-child) { margin-right: 8px; } +.c0 > input { + padding: 0 12px; +} + .c0 .TextInput-icon { -webkit-align-self: center; -ms-flex-item-align: center; @@ -419,7 +425,7 @@ exports[`TextInputWithTokens renders as block layout 1`] = ` } .c0 { - min-height: 34px; + min-height: 32px; font-size: 14px; line-height: 20px; color: #24292f; @@ -432,7 +438,6 @@ exports[`TextInputWithTokens renders as block layout 1`] = ` outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); cursor: text; - padding: 6px 12px; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; @@ -442,6 +447,9 @@ exports[`TextInputWithTokens renders as block layout 1`] = ` -ms-flex-align: stretch; align-items: stretch; width: 100%; + padding-left: 12px; + padding-top: calc(12px / 2); + padding-bottom: calc(12px / 2); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -453,6 +461,10 @@ exports[`TextInputWithTokens renders as block layout 1`] = ` margin-right: 8px; } +.c0 > input { + padding: 0 12px; +} + .c0 .TextInput-icon { -webkit-align-self: center; -ms-flex-item-align: center; @@ -552,7 +564,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = ` } .c0 { - min-height: 34px; + min-height: 32px; font-size: 14px; line-height: 20px; color: #24292f; @@ -565,7 +577,6 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = ` outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); cursor: text; - padding: 6px 12px; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; @@ -574,6 +585,9 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = ` -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; + padding-left: 12px; + padding-top: calc(12px / 2); + padding-bottom: calc(12px / 2); max-height: 20px; overflow: auto; } @@ -582,6 +596,10 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = ` margin-right: 8px; } +.c0 > input { + padding: 0 12px; +} + .c0 .TextInput-icon { -webkit-align-self: center; -ms-flex-item-align: center; @@ -1193,7 +1211,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = ` } .c0 { - min-height: 34px; + min-height: 32px; font-size: 14px; line-height: 20px; color: #24292f; @@ -1206,7 +1224,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = ` outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); cursor: text; - padding: 6px 12px; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; @@ -1215,12 +1232,19 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = ` -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; + padding-left: 12px; + padding-top: calc(12px / 2); + padding-bottom: calc(12px / 2); } .c0 >:not(:last-child) { margin-right: 8px; } +.c0 > input { + padding: 0 12px; +} + .c0 .TextInput-icon { -webkit-align-self: center; -ms-flex-item-align: center; @@ -1832,7 +1856,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = ` } .c0 { - min-height: 34px; + min-height: 32px; font-size: 14px; line-height: 20px; color: #24292f; @@ -1845,7 +1869,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = ` outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); cursor: text; - padding: 6px 12px; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; @@ -1854,12 +1877,19 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = ` -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; + padding-left: 12px; + padding-top: calc(12px / 2); + padding-bottom: calc(12px / 2); } .c0 >:not(:last-child) { margin-right: 8px; } +.c0 > input { + padding: 0 12px; +} + .c0 .TextInput-icon { -webkit-align-self: center; -ms-flex-item-align: center; @@ -2471,7 +2501,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = ` } .c0 { - min-height: 34px; + min-height: 32px; font-size: 14px; line-height: 20px; color: #24292f; @@ -2484,7 +2514,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = ` outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); cursor: text; - padding: 6px 12px; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; @@ -2493,12 +2522,19 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = ` -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; + padding-left: 12px; + padding-top: calc(12px / 2); + padding-bottom: calc(12px / 2); } .c0 >:not(:last-child) { margin-right: 8px; } +.c0 > input { + padding: 0 12px; +} + .c0 .TextInput-icon { -webkit-align-self: center; -ms-flex-item-align: center; @@ -3110,7 +3146,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = ` } .c0 { - min-height: 34px; + min-height: 32px; font-size: 14px; line-height: 20px; color: #24292f; @@ -3123,7 +3159,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = ` outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); cursor: text; - padding: 6px 12px; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; @@ -3132,12 +3167,19 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = ` -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; + padding-left: 12px; + padding-top: calc(12px / 2); + padding-bottom: calc(12px / 2); } .c0 >:not(:last-child) { margin-right: 8px; } +.c0 > input { + padding: 0 12px; +} + .c0 .TextInput-icon { -webkit-align-self: center; -ms-flex-item-align: center; @@ -3749,7 +3791,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`] } .c0 { - min-height: 34px; + min-height: 32px; font-size: 14px; line-height: 20px; color: #24292f; @@ -3762,7 +3804,6 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`] outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); cursor: text; - padding: 6px 12px; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; @@ -3771,6 +3812,9 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`] -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; + padding-left: 12px; + padding-top: calc(12px / 2); + padding-bottom: calc(12px / 2); overflow: auto; } @@ -3778,6 +3822,10 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`] margin-right: 8px; } +.c0 > input { + padding: 0 12px; +} + .c0 .TextInput-icon { -webkit-align-self: center; -ms-flex-item-align: center; @@ -4389,7 +4437,7 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi } .c0 { - min-height: 34px; + min-height: 32px; font-size: 14px; line-height: 20px; color: #24292f; @@ -4402,7 +4450,6 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); cursor: text; - padding: 6px 12px; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; @@ -4411,12 +4458,19 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; + padding-left: 12px; + padding-top: calc(12px / 2); + padding-bottom: calc(12px / 2); } .c0 >:not(:last-child) { margin-right: 8px; } +.c0 > input { + padding: 0 12px; +} + .c0 .TextInput-icon { -webkit-align-self: center; -ms-flex-item-align: center; @@ -4736,7 +4790,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = ` } .c0 { - min-height: 34px; + min-height: 32px; font-size: 14px; line-height: 20px; color: #24292f; @@ -4749,7 +4803,6 @@ exports[`TextInputWithTokens renders with tokens 1`] = ` outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); cursor: text; - padding: 6px 12px; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; @@ -4758,12 +4811,19 @@ exports[`TextInputWithTokens renders with tokens 1`] = ` -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; + padding-left: 12px; + padding-top: calc(12px / 2); + padding-bottom: calc(12px / 2); } .c0 >:not(:last-child) { margin-right: 8px; } +.c0 > input { + padding: 0 12px; +} + .c0 .TextInput-icon { -webkit-align-self: center; -ms-flex-item-align: center; @@ -5375,7 +5435,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component } .c0 { - min-height: 34px; + min-height: 32px; font-size: 14px; line-height: 20px; color: #24292f; @@ -5388,7 +5448,6 @@ exports[`TextInputWithTokens renders with tokens using a custom token component outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); cursor: text; - padding: 6px 12px; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; @@ -5397,12 +5456,19 @@ exports[`TextInputWithTokens renders with tokens using a custom token component -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; + padding-left: 12px; + padding-top: calc(12px / 2); + padding-bottom: calc(12px / 2); } .c0 >:not(:last-child) { margin-right: 8px; } +.c0 > input { + padding: 0 12px; +} + .c0 .TextInput-icon { -webkit-align-self: center; -ms-flex-item-align: center; @@ -6019,7 +6085,7 @@ exports[`TextInputWithTokens renders without tokens 1`] = ` } .c0 { - min-height: 34px; + min-height: 32px; font-size: 14px; line-height: 20px; color: #24292f; @@ -6032,7 +6098,6 @@ exports[`TextInputWithTokens renders without tokens 1`] = ` outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); cursor: text; - padding: 6px 12px; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; @@ -6041,12 +6106,19 @@ exports[`TextInputWithTokens renders without tokens 1`] = ` -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; + padding-left: 12px; + padding-top: calc(12px / 2); + padding-bottom: calc(12px / 2); } .c0 >:not(:last-child) { margin-right: 8px; } +.c0 > input { + padding: 0 12px; +} + .c0 .TextInput-icon { -webkit-align-self: center; -ms-flex-item-align: center; From e92dc07a1ea82e98c29b6a8c0bb9823f360dedf6 Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Tue, 14 Dec 2021 18:09:12 -0500 Subject: [PATCH 08/10] fixes spacing with leading and trailing visuals --- src/TextInput.tsx | 2 + src/TextInputWithTokens.tsx | 4 +- src/_TextInputWrapper.tsx | 16 +++-- .../__snapshots__/Autocomplete.test.tsx.snap | 35 ++++++++--- .../__snapshots__/TextInput.test.tsx.snap | 60 +++++++++++++++---- .../TextInputWithTokens.test.tsx.snap | 60 +++++++++++++++---- 6 files changed, 140 insertions(+), 37 deletions(-) diff --git a/src/TextInput.tsx b/src/TextInput.tsx index a2acd208bf5..e647a3ac4dd 100644 --- a/src/TextInput.tsx +++ b/src/TextInput.tsx @@ -58,6 +58,8 @@ const TextInput = React.forwardRef( minWidth={minWidthProp} maxWidth={maxWidthProp} variant={variantProp} + hasLeadingVisual={Boolean(LeadingVisual)} + hasTrailingVisual={Boolean(TrailingVisual)} > {IconComponent && } {LeadingVisual && ( diff --git a/src/TextInputWithTokens.tsx b/src/TextInputWithTokens.tsx index e045840f5cb..6d81031ab61 100644 --- a/src/TextInputWithTokens.tsx +++ b/src/TextInputWithTokens.tsx @@ -242,7 +242,7 @@ function TextInputWithTokensInnerComponent + {IconComponent && } - {IconComponent && } ` margin-right: ${get('space.2')}; } - > input { - padding: 0 ${textInputHorizPadding}; - } + ${props => + css` + padding-left: ${props.hasLeadingVisual ? textInputHorizPadding : 0}; + padding-right: ${props.hasTrailingVisual ? textInputHorizPadding : 0}; + + > input { + padding-left: ${!props.hasLeadingVisual ? textInputHorizPadding : 0}; + padding-right: ${!props.hasTrailingVisual ? textInputHorizPadding : 0}; + } + `} .TextInput-icon { align-self: center; diff --git a/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap b/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap index ffa91e370e4..9e02e69dbcc 100644 --- a/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap +++ b/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap @@ -38,6 +38,8 @@ Array [ -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; + padding-left: 0; + padding-right: 0; } .c0 >:not(:last-child) { @@ -45,7 +47,8 @@ Array [ } .c0 > input { - padding: 0 12px; + padding-left: 12px; + padding-right: 12px; } .c0 .TextInput-icon { @@ -159,6 +162,8 @@ Array [ -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; + padding-left: 0; + padding-right: 0; } .c0 >:not(:last-child) { @@ -166,7 +171,8 @@ Array [ } .c0 > input { - padding: 0 12px; + padding-left: 12px; + padding-right: 12px; } .c0 .TextInput-icon { @@ -315,6 +321,8 @@ Array [ -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; + padding-left: 0; + padding-right: 0; } .c0 >:not(:last-child) { @@ -322,7 +330,8 @@ Array [ } .c0 > input { - padding: 0 12px; + padding-left: 12px; + padding-right: 12px; } .c0 .TextInput-icon { @@ -1234,6 +1243,8 @@ Array [ -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; + padding-left: 0; + padding-right: 0; } .c0 >:not(:last-child) { @@ -1241,7 +1252,8 @@ Array [ } .c0 > input { - padding: 0 12px; + padding-left: 12px; + padding-right: 12px; } .c0 .TextInput-icon { @@ -2063,6 +2075,8 @@ Array [ -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; + padding-left: 0; + padding-right: 0; } .c0 >:not(:last-child) { @@ -2070,7 +2084,8 @@ Array [ } .c0 > input { - padding: 0 12px; + padding-left: 12px; + padding-right: 12px; } .c0 .TextInput-icon { @@ -2903,6 +2918,8 @@ Array [ -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; + padding-left: 0; + padding-right: 0; } .c0 >:not(:last-child) { @@ -2910,7 +2927,8 @@ Array [ } .c0 > input { - padding: 0 12px; + padding-left: 12px; + padding-right: 12px; } .c0 .TextInput-icon { @@ -3873,6 +3891,8 @@ Array [ -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; + padding-left: 0; + padding-right: 0; } .c0 >:not(:last-child) { @@ -3880,7 +3900,8 @@ Array [ } .c0 > input { - padding: 0 12px; + padding-left: 12px; + padding-right: 12px; } .c0 .TextInput-icon { diff --git a/src/__tests__/__snapshots__/TextInput.test.tsx.snap b/src/__tests__/__snapshots__/TextInput.test.tsx.snap index de9cee93ba3..9bb4af11590 100644 --- a/src/__tests__/__snapshots__/TextInput.test.tsx.snap +++ b/src/__tests__/__snapshots__/TextInput.test.tsx.snap @@ -37,6 +37,8 @@ exports[`TextInput renders 1`] = ` -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; + padding-left: 0; + padding-right: 0; } .c0 >:not(:last-child) { @@ -44,7 +46,8 @@ exports[`TextInput renders 1`] = ` } .c0 > input { - padding: 0 12px; + padding-left: 12px; + padding-right: 12px; } .c0 .TextInput-icon { @@ -117,6 +120,8 @@ exports[`TextInput renders block 1`] = ` -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; + padding-left: 0; + padding-right: 0; width: 100%; } @@ -125,7 +130,8 @@ exports[`TextInput renders block 1`] = ` } .c0 > input { - padding: 0 12px; + padding-left: 12px; + padding-right: 12px; } .c0 .TextInput-icon { @@ -198,6 +204,8 @@ exports[`TextInput renders consistently 1`] = ` -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; + padding-left: 0; + padding-right: 0; } .c0 >:not(:last-child) { @@ -205,7 +213,8 @@ exports[`TextInput renders consistently 1`] = ` } .c0 > input { - padding: 0 12px; + padding-left: 12px; + padding-right: 12px; } .c0 .TextInput-icon { @@ -277,6 +286,8 @@ exports[`TextInput renders contrast 1`] = ` -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; + padding-left: 0; + padding-right: 0; } .c0 >:not(:last-child) { @@ -284,7 +295,8 @@ exports[`TextInput renders contrast 1`] = ` } .c0 > input { - padding: 0 12px; + padding-left: 12px; + padding-right: 12px; } .c0 .TextInput-icon { @@ -357,6 +369,8 @@ exports[`TextInput renders error 1`] = ` -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; + padding-left: 0; + padding-right: 0; } .c0 >:not(:last-child) { @@ -364,7 +378,8 @@ exports[`TextInput renders error 1`] = ` } .c0 > input { - padding: 0 12px; + padding-left: 12px; + padding-right: 12px; } .c0 .TextInput-icon { @@ -437,6 +452,8 @@ exports[`TextInput renders large 1`] = ` -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; + padding-left: 0; + padding-right: 0; padding-left: 8px; padding-right: 8px; padding-top: 10px; @@ -449,7 +466,8 @@ exports[`TextInput renders large 1`] = ` } .c0 > input { - padding: 0 12px; + padding-left: 12px; + padding-right: 12px; } .c0 .TextInput-icon { @@ -523,6 +541,8 @@ exports[`TextInput renders leadingVisual 1`] = ` -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; + padding-left: 12px; + padding-right: 0; } .c0 >:not(:last-child) { @@ -530,7 +550,8 @@ exports[`TextInput renders leadingVisual 1`] = ` } .c0 > input { - padding: 0 12px; + padding-left: 0; + padding-right: 12px; } .c0 .TextInput-icon { @@ -630,6 +651,8 @@ exports[`TextInput renders placeholder 1`] = ` -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; + padding-left: 0; + padding-right: 0; } .c0 >:not(:last-child) { @@ -637,7 +660,8 @@ exports[`TextInput renders placeholder 1`] = ` } .c0 > input { - padding: 0 12px; + padding-left: 12px; + padding-right: 12px; } .c0 .TextInput-icon { @@ -711,6 +735,8 @@ exports[`TextInput renders small 1`] = ` -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; + padding-left: 0; + padding-right: 0; min-height: 28px; padding-left: 8px; padding-right: 8px; @@ -725,7 +751,8 @@ exports[`TextInput renders small 1`] = ` } .c0 > input { - padding: 0 12px; + padding-left: 12px; + padding-right: 12px; } .c0 .TextInput-icon { @@ -799,6 +826,8 @@ exports[`TextInput renders trailingVisual 1`] = ` -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; + padding-left: 0; + padding-right: 12px; } .c0 >:not(:last-child) { @@ -806,7 +835,8 @@ exports[`TextInput renders trailingVisual 1`] = ` } .c0 > input { - padding: 0 12px; + padding-left: 12px; + padding-right: 0; } .c0 .TextInput-icon { @@ -906,6 +936,8 @@ exports[`TextInput renders warning 1`] = ` -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; + padding-left: 0; + padding-right: 0; } .c0 >:not(:last-child) { @@ -913,7 +945,8 @@ exports[`TextInput renders warning 1`] = ` } .c0 > input { - padding: 0 12px; + padding-left: 12px; + padding-right: 12px; } .c0 .TextInput-icon { @@ -986,6 +1019,8 @@ exports[`TextInput should render a password input 1`] = ` -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; + padding-left: 0; + padding-right: 0; } .c0 >:not(:last-child) { @@ -993,7 +1028,8 @@ exports[`TextInput should render a password input 1`] = ` } .c0 > input { - padding: 0 12px; + padding-left: 12px; + padding-right: 12px; } .c0 .TextInput-icon { diff --git a/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap b/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap index 711cfd04353..d5d14e3c24e 100644 --- a/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap +++ b/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap @@ -76,6 +76,8 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = ` -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; + padding-left: 0; + padding-right: 0; padding-left: 12px; padding-top: calc(12px / 2); padding-bottom: calc(12px / 2); @@ -86,7 +88,8 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = ` } .c0 > input { - padding: 0 12px; + padding-left: 12px; + padding-right: 12px; } .c0 .TextInput-icon { @@ -446,6 +449,8 @@ exports[`TextInputWithTokens renders as block layout 1`] = ` -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; + padding-left: 0; + padding-right: 0; width: 100%; padding-left: 12px; padding-top: calc(12px / 2); @@ -462,7 +467,8 @@ exports[`TextInputWithTokens renders as block layout 1`] = ` } .c0 > input { - padding: 0 12px; + padding-left: 12px; + padding-right: 12px; } .c0 .TextInput-icon { @@ -585,6 +591,8 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = ` -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; + padding-left: 0; + padding-right: 0; padding-left: 12px; padding-top: calc(12px / 2); padding-bottom: calc(12px / 2); @@ -597,7 +605,8 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = ` } .c0 > input { - padding: 0 12px; + padding-left: 12px; + padding-right: 12px; } .c0 .TextInput-icon { @@ -1232,6 +1241,8 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = ` -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; + padding-left: 0; + padding-right: 0; padding-left: 12px; padding-top: calc(12px / 2); padding-bottom: calc(12px / 2); @@ -1242,7 +1253,8 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = ` } .c0 > input { - padding: 0 12px; + padding-left: 12px; + padding-right: 12px; } .c0 .TextInput-icon { @@ -1877,6 +1889,8 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = ` -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; + padding-left: 0; + padding-right: 0; padding-left: 12px; padding-top: calc(12px / 2); padding-bottom: calc(12px / 2); @@ -1887,7 +1901,8 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = ` } .c0 > input { - padding: 0 12px; + padding-left: 12px; + padding-right: 12px; } .c0 .TextInput-icon { @@ -2522,6 +2537,8 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = ` -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; + padding-left: 0; + padding-right: 0; padding-left: 12px; padding-top: calc(12px / 2); padding-bottom: calc(12px / 2); @@ -2532,7 +2549,8 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = ` } .c0 > input { - padding: 0 12px; + padding-left: 12px; + padding-right: 12px; } .c0 .TextInput-icon { @@ -3167,6 +3185,8 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = ` -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; + padding-left: 0; + padding-right: 0; padding-left: 12px; padding-top: calc(12px / 2); padding-bottom: calc(12px / 2); @@ -3177,7 +3197,8 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = ` } .c0 > input { - padding: 0 12px; + padding-left: 12px; + padding-right: 12px; } .c0 .TextInput-icon { @@ -3812,6 +3833,8 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`] -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; + padding-left: 0; + padding-right: 0; padding-left: 12px; padding-top: calc(12px / 2); padding-bottom: calc(12px / 2); @@ -3823,7 +3846,8 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`] } .c0 > input { - padding: 0 12px; + padding-left: 12px; + padding-right: 12px; } .c0 .TextInput-icon { @@ -4458,6 +4482,8 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; + padding-left: 0; + padding-right: 0; padding-left: 12px; padding-top: calc(12px / 2); padding-bottom: calc(12px / 2); @@ -4468,7 +4494,8 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi } .c0 > input { - padding: 0 12px; + padding-left: 12px; + padding-right: 12px; } .c0 .TextInput-icon { @@ -4811,6 +4838,8 @@ exports[`TextInputWithTokens renders with tokens 1`] = ` -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; + padding-left: 0; + padding-right: 0; padding-left: 12px; padding-top: calc(12px / 2); padding-bottom: calc(12px / 2); @@ -4821,7 +4850,8 @@ exports[`TextInputWithTokens renders with tokens 1`] = ` } .c0 > input { - padding: 0 12px; + padding-left: 12px; + padding-right: 12px; } .c0 .TextInput-icon { @@ -5456,6 +5486,8 @@ exports[`TextInputWithTokens renders with tokens using a custom token component -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; + padding-left: 0; + padding-right: 0; padding-left: 12px; padding-top: calc(12px / 2); padding-bottom: calc(12px / 2); @@ -5466,7 +5498,8 @@ exports[`TextInputWithTokens renders with tokens using a custom token component } .c0 > input { - padding: 0 12px; + padding-left: 12px; + padding-right: 12px; } .c0 .TextInput-icon { @@ -6106,6 +6139,8 @@ exports[`TextInputWithTokens renders without tokens 1`] = ` -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; + padding-left: 0; + padding-right: 0; padding-left: 12px; padding-top: calc(12px / 2); padding-bottom: calc(12px / 2); @@ -6116,7 +6151,8 @@ exports[`TextInputWithTokens renders without tokens 1`] = ` } .c0 > input { - padding: 0 12px; + padding-left: 12px; + padding-right: 12px; } .c0 .TextInput-icon { From b6f2f6c79d9c9a30cdb52b529556b24bb1324819 Mon Sep 17 00:00:00 2001 From: Pavithra Kodmad Date: Wed, 15 Dec 2021 15:59:12 +1100 Subject: [PATCH 09/10] Lint issues --- src/TextInputWithTokens.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/TextInputWithTokens.tsx b/src/TextInputWithTokens.tsx index 6d81031ab61..3da12f136f7 100644 --- a/src/TextInputWithTokens.tsx +++ b/src/TextInputWithTokens.tsx @@ -13,7 +13,6 @@ import TextInputWrapper, {textInputHorizPadding} from './_TextInputWrapper' import Box from './Box' import Text from './Text' import {isFocusable} from '@primer/behaviors/utils' -import {text} from 'stream/consumers' // eslint-disable-next-line @typescript-eslint/no-explicit-any type AnyReactComponent = React.ComponentType From 34a05faeab1c483c14f910d2591a98328e848208 Mon Sep 17 00:00:00 2001 From: Pavithra Kodmad Date: Wed, 15 Dec 2021 16:08:02 +1100 Subject: [PATCH 10/10] Create clever-shrimps-search.md --- .changeset/clever-shrimps-search.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/clever-shrimps-search.md diff --git a/.changeset/clever-shrimps-search.md b/.changeset/clever-shrimps-search.md new file mode 100644 index 00000000000..300d9abb831 --- /dev/null +++ b/.changeset/clever-shrimps-search.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +Text Input enhancements