From 5bb99998ab24d54c830be9c5b7166d96387e0126 Mon Sep 17 00:00:00 2001 From: Hussam Ghazzi Date: Mon, 4 Nov 2024 22:02:39 +0000 Subject: [PATCH 01/46] feat(TextInput): Convert TextInput to CSS module behind feature flag --- packages/react/src/Spinner/Spinner.tsx | 7 ++- .../TextInputInnerAction.module.css | 32 +++++++++++ .../components/TextInputInnerAction.tsx | 25 ++++++-- .../TextInputInnerVisualSlot.module.css | 19 +++++++ .../components/TextInputInnerVisualSlot.tsx | 57 +++++++++++++------ .../components/UnstyledTextInput.module.css | 13 +++++ .../internal/components/UnstyledTextInput.tsx | 48 +++++++++++----- 7 files changed, 161 insertions(+), 40 deletions(-) create mode 100644 packages/react/src/internal/components/TextInputInnerAction.module.css create mode 100644 packages/react/src/internal/components/TextInputInnerVisualSlot.module.css create mode 100644 packages/react/src/internal/components/UnstyledTextInput.module.css diff --git a/packages/react/src/Spinner/Spinner.tsx b/packages/react/src/Spinner/Spinner.tsx index 6292234b6fe..499e0a4a2c3 100644 --- a/packages/react/src/Spinner/Spinner.tsx +++ b/packages/react/src/Spinner/Spinner.tsx @@ -7,6 +7,7 @@ import {useId} from '../hooks' import {useFeatureFlag} from '../FeatureFlags' import classes from './Spinner.module.css' import Box from '../Box' +import {clsx} from 'clsx' const sizeMap = { small: '16px', @@ -87,14 +88,14 @@ const StyledComponentSpinner = styled(Spinner)` ${sx} ` -function StyledSpinner({sx, ...props}: SpinnerProps) { +function StyledSpinner({sx, className, ...props}: SpinnerProps) { const enabled = useFeatureFlag('primer_react_css_modules_team') if (enabled) { if (sx) { - return + return } - return + return } return diff --git a/packages/react/src/internal/components/TextInputInnerAction.module.css b/packages/react/src/internal/components/TextInputInnerAction.module.css new file mode 100644 index 00000000000..6a6e6331e6d --- /dev/null +++ b/packages/react/src/internal/components/TextInputInnerAction.module.css @@ -0,0 +1,32 @@ +.Invisible { + position: relative; + padding-top: var(--base-size-2); + padding-right: var(--base-size-4); + padding-bottom: var(--base-size-2); + padding-left: var(--base-size-4); + color: var(--fgColor-muted); + background-color: transparent; + + &:hover, &:focus { + color: var(--fgColor-default) + } + + &[data-component="IconButton"] { + /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */ + width: var(--inner-action-size); + /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */ + height: var(--inner-action-size); + } + + @media (pointer: coarse) { + ::after { + position: absolute; + top: 50%; + right: 0; + left: 0; + min-height: 44px; + content: ''; + transform: translateY(-50%); + } + } +} diff --git a/packages/react/src/internal/components/TextInputInnerAction.tsx b/packages/react/src/internal/components/TextInputInnerAction.tsx index 75fcb22349f..6a24a24f4c2 100644 --- a/packages/react/src/internal/components/TextInputInnerAction.tsx +++ b/packages/react/src/internal/components/TextInputInnerAction.tsx @@ -6,6 +6,11 @@ import {Tooltip} from '../../TooltipV2' import type {ButtonProps} from '../../Button' import type {BetterSystemStyleObject, SxProp} from '../../sx' import {merge} from '../../sx' +import {clsx} from 'clsx' + +import styles from './TextInputInnerAction.module.css' +import {useFeatureFlag} from '../../FeatureFlags' +import {TEXT_INPUT_CSS_MODULES_FEATURE_FLAG} from './UnstyledTextInput' type TextInputActionProps = Omit< React.ButtonHTMLAttributes, @@ -89,15 +94,23 @@ const TextInputAction = forwardRef( children, icon, sx: sxProp, + className, variant = 'invisible', ...rest }, forwardedRef, ) => { - const sx = - variant === 'invisible' - ? merge(invisibleButtonStyleOverrides, sxProp || {}) - : sxProp || {} + const enabled = useFeatureFlag(TEXT_INPUT_CSS_MODULES_FEATURE_FLAG) + + const styleProps = enabled + ? {className: clsx(variant === 'invisible' && styles.Invisible, className), sx: sxProp || {}} + : { + className, + sx: + variant === 'invisible' + ? merge(invisibleButtonStyleOverrides, sxProp || {}) + : sxProp || {}, + } if ((icon && !ariaLabel) || (!children && !ariaLabel)) { // eslint-disable-next-line no-console @@ -122,13 +135,13 @@ const TextInputAction = forwardRef( type="button" icon={icon} size="small" - sx={sx} + {...styleProps} {...rest} ref={forwardedRef} /> ) : ( - diff --git a/packages/react/src/internal/components/TextInputInnerVisualSlot.module.css b/packages/react/src/internal/components/TextInputInnerVisualSlot.module.css new file mode 100644 index 00000000000..409fdd4020b --- /dev/null +++ b/packages/react/src/internal/components/TextInputInnerVisualSlot.module.css @@ -0,0 +1,19 @@ +.Spinner { + position: absolute; + top: 0; + right: 0; + max-width: 100%; + height: 100%; +} + +.SpinnerLeading { + left: 0; +} + +.SpinnerHidden { + visibility: hidden; +} + +.SpinnerVisible { + visibility: visible; +} \ No newline at end of file diff --git a/packages/react/src/internal/components/TextInputInnerVisualSlot.tsx b/packages/react/src/internal/components/TextInputInnerVisualSlot.tsx index 13e6342a6fc..44cd3758c76 100644 --- a/packages/react/src/internal/components/TextInputInnerVisualSlot.tsx +++ b/packages/react/src/internal/components/TextInputInnerVisualSlot.tsx @@ -1,8 +1,13 @@ import React from 'react' import Box from '../../Box' import Spinner from '../../Spinner' +import {clsx} from 'clsx' import type {TextInputNonPassthroughProps} from '../../TextInput' +import styles from './TextInputInnerVisualSlot.module.css' +import {useFeatureFlag} from '../../FeatureFlags' +import {TEXT_INPUT_CSS_MODULES_FEATURE_FLAG} from './UnstyledTextInput' + const TextInputInnerVisualSlot: React.FC< React.PropsWithChildren<{ /** Whether the input is expected to ever show a loading indicator */ @@ -15,7 +20,9 @@ const TextInputInnerVisualSlot: React.FC< id?: string }> > = ({children, hasLoadingIndicator, showLoadingIndicator, visualPosition, id}) => { - if ((!children && !hasLoadingIndicator) || (visualPosition === 'leading' && !children && !showLoadingIndicator)) { + const enabled = useFeatureFlag(TEXT_INPUT_CSS_MODULES_FEATURE_FLAG) + const isLeading = visualPosition === 'leading' + if ((!children && !hasLoadingIndicator) || (isLeading && !children && !showLoadingIndicator)) { return null } @@ -27,26 +34,40 @@ const TextInputInnerVisualSlot: React.FC< ) } + const boxStyleProps = enabled + ? {className: clsx(showLoadingIndicator ? styles.SpinnerHidden : styles.SpinnerVisible)} + : { + sx: { + visibility: showLoadingIndicator ? 'hidden' : 'visible', + }, + } + + const spinnerStyleProps = enabled + ? { + className: clsx( + showLoadingIndicator ? styles.SpinnerVisible : styles.SpinnerHidden, + children && styles.Spinner, + children && isLeading && styles.SpinnerLeading, + ), + } + : { + sx: children + ? { + position: 'absolute', + top: 0, + height: '100%', + maxWidth: '100%', + visibility: showLoadingIndicator ? 'visible' : 'hidden', + ...(isLeading ? {left: 0} : {right: 0}), + } + : {visibility: showLoadingIndicator ? 'visible' : 'hidden'}, + } + return ( - {children && {children}} - + {children && {children}} + ) diff --git a/packages/react/src/internal/components/UnstyledTextInput.module.css b/packages/react/src/internal/components/UnstyledTextInput.module.css new file mode 100644 index 00000000000..c0b100c57fa --- /dev/null +++ b/packages/react/src/internal/components/UnstyledTextInput.module.css @@ -0,0 +1,13 @@ +.Input { + width: 100%; + font-family: inherit; + font-size: inherit; + color: inherit; + background-color: transparent; + border: 0; + appearance: none; + + &:focus { + outline: 0; + } +} diff --git a/packages/react/src/internal/components/UnstyledTextInput.tsx b/packages/react/src/internal/components/UnstyledTextInput.tsx index 5e924e00a61..d8b59b67614 100644 --- a/packages/react/src/internal/components/UnstyledTextInput.tsx +++ b/packages/react/src/internal/components/UnstyledTextInput.tsx @@ -1,19 +1,41 @@ import styled from 'styled-components' import sx from '../../sx' +import {toggleStyledComponent} from '../utils/toggleStyledComponent' +import React from 'react' +import {useFeatureFlag} from '../../FeatureFlags' -const UnstyledTextInput = styled.input` - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; - &:focus { - outline: 0; - } +import styles from './UnstyledTextInput.module.css' +import {clsx} from 'clsx' - ${sx}; -` +export const TEXT_INPUT_CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_team' + +const ToggledUnstyledTextInput = toggleStyledComponent( + TEXT_INPUT_CSS_MODULES_FEATURE_FLAG, + 'input', + styled.input` + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; + &:focus { + outline: 0; + } + + ${sx}; + `, +) + +const UnstyledTextInput = React.forwardRef>( + function UnstyledTextInput({className, ...rest}, forwardRef) { + const enabled = useFeatureFlag(TEXT_INPUT_CSS_MODULES_FEATURE_FLAG) + return ( + + ) + }, +) +UnstyledTextInput.displayName = 'UnstyledTextInput' export default UnstyledTextInput From 2faab3fd8882d896737879753ce16275aa32436d Mon Sep 17 00:00:00 2001 From: Hussam Ghazzi Date: Mon, 4 Nov 2024 22:06:10 +0000 Subject: [PATCH 02/46] lint fixes --- .../internal/components/TextInputInnerAction.module.css | 7 ++++--- .../components/TextInputInnerVisualSlot.module.css | 2 +- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/react/src/internal/components/TextInputInnerAction.module.css b/packages/react/src/internal/components/TextInputInnerAction.module.css index 6a6e6331e6d..00cf96171ed 100644 --- a/packages/react/src/internal/components/TextInputInnerAction.module.css +++ b/packages/react/src/internal/components/TextInputInnerAction.module.css @@ -7,11 +7,12 @@ color: var(--fgColor-muted); background-color: transparent; - &:hover, &:focus { - color: var(--fgColor-default) + &:hover, + &:focus { + color: var(--fgColor-default); } - &[data-component="IconButton"] { + &[data-component='IconButton'] { /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */ width: var(--inner-action-size); /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */ diff --git a/packages/react/src/internal/components/TextInputInnerVisualSlot.module.css b/packages/react/src/internal/components/TextInputInnerVisualSlot.module.css index 409fdd4020b..acf4539155a 100644 --- a/packages/react/src/internal/components/TextInputInnerVisualSlot.module.css +++ b/packages/react/src/internal/components/TextInputInnerVisualSlot.module.css @@ -16,4 +16,4 @@ .SpinnerVisible { visibility: visible; -} \ No newline at end of file +} From 7e146e57d4e47313689b4b86710bd56827da7958 Mon Sep 17 00:00:00 2001 From: Hussam Ghazzi Date: Mon, 4 Nov 2024 22:21:23 +0000 Subject: [PATCH 03/46] update snapshots and fix spinner --- packages/react/src/Spinner/Spinner.tsx | 2 +- .../__snapshots__/Autocomplete.test.tsx.snap | 210 ++-- .../__snapshots__/TextInput.test.tsx.snap | 904 +++++++++--------- .../TextInputWithTokens.test.tsx.snap | 750 +++++++-------- .../internal/components/UnstyledTextInput.tsx | 19 +- 5 files changed, 943 insertions(+), 942 deletions(-) diff --git a/packages/react/src/Spinner/Spinner.tsx b/packages/react/src/Spinner/Spinner.tsx index 499e0a4a2c3..c95ecd52031 100644 --- a/packages/react/src/Spinner/Spinner.tsx +++ b/packages/react/src/Spinner/Spinner.tsx @@ -98,7 +98,7 @@ function StyledSpinner({sx, className, ...props}: SpinnerProps) { return } - return + return } StyledSpinner.displayName = 'Spinner' diff --git a/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap index c3dd83b8058..550a5c7db31 100644 --- a/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap +++ b/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap @@ -2,7 +2,21 @@ exports[`snapshots renders a custom empty state message 1`] = ` [ - .c0 { + .c2 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c2:focus { + outline: 0; +} + +.c0 { font-size: 14px; line-height: 20px; color: var(--fgColor-default,var(--color-fg-default,#1F2328)); @@ -95,20 +109,6 @@ exports[`snapshots renders a custom empty state message 1`] = ` padding-right: 12px; } -.c2 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; -} - -.c2:focus { - outline: 0; -} - @media (min-width:768px) { .c0 { font-size: 14px; @@ -177,7 +177,21 @@ exports[`snapshots renders a custom empty state message 1`] = ` exports[`snapshots renders a loading state 1`] = ` [ - .c0 { + .c2 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c2:focus { + outline: 0; +} + +.c0 { font-size: 14px; line-height: 20px; color: var(--fgColor-default,var(--color-fg-default,#1F2328)); @@ -270,20 +284,6 @@ exports[`snapshots renders a loading state 1`] = ` padding-right: 12px; } -.c2 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; -} - -.c2:focus { - outline: 0; -} - @media (min-width:768px) { .c0 { font-size: 14px; @@ -409,7 +409,21 @@ exports[`snapshots renders a loading state 1`] = ` exports[`snapshots renders a menu that contains an item to add to the menu 1`] = ` [ - .c0 { + .c2 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c2:focus { + outline: 0; +} + +.c0 { font-size: 14px; line-height: 20px; color: var(--fgColor-default,var(--color-fg-default,#1F2328)); @@ -502,20 +516,6 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] = padding-right: 12px; } -.c2 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; -} - -.c2:focus { - outline: 0; -} - @media (forced-colors:active) { } @@ -1260,7 +1260,21 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] = exports[`snapshots renders a multiselect input 1`] = ` [ - .c0 { + .c2 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c2:focus { + outline: 0; +} + +.c0 { font-size: 14px; line-height: 20px; color: var(--fgColor-default,var(--color-fg-default,#1F2328)); @@ -1353,20 +1367,6 @@ exports[`snapshots renders a multiselect input 1`] = ` padding-right: 12px; } -.c2 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; -} - -.c2:focus { - outline: 0; -} - @media (forced-colors:active) { } @@ -1989,7 +1989,21 @@ exports[`snapshots renders a multiselect input 1`] = ` exports[`snapshots renders a multiselect input with selected menu items 1`] = ` [ - .c0 { + .c2 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c2:focus { + outline: 0; +} + +.c0 { font-size: 14px; line-height: 20px; color: var(--fgColor-default,var(--color-fg-default,#1F2328)); @@ -2082,20 +2096,6 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = ` padding-right: 12px; } -.c2 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; -} - -.c2:focus { - outline: 0; -} - @media (forced-colors:active) { } @@ -2901,7 +2901,21 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = ` exports[`snapshots renders a single select input 1`] = ` [ - .c0 { + .c2 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c2:focus { + outline: 0; +} + +.c0 { font-size: 14px; line-height: 20px; color: var(--fgColor-default,var(--color-fg-default,#1F2328)); @@ -2994,20 +3008,6 @@ exports[`snapshots renders a single select input 1`] = ` padding-right: 12px; } -.c2 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; -} - -.c2:focus { - outline: 0; -} - @media (forced-colors:active) { } @@ -4005,7 +4005,21 @@ exports[`snapshots renders with a custom text input component 1`] = ` exports[`snapshots renders with an input value 1`] = ` [ - .c0 { + .c2 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c2:focus { + outline: 0; +} + +.c0 { font-size: 14px; line-height: 20px; color: var(--fgColor-default,var(--color-fg-default,#1F2328)); @@ -4098,20 +4112,6 @@ exports[`snapshots renders with an input value 1`] = ` padding-right: 12px; } -.c2 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; -} - -.c2:focus { - outline: 0; -} - @media (forced-colors:active) { } diff --git a/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap index 2c67fb764da..589d6b3e906 100644 --- a/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap +++ b/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap @@ -1,6 +1,20 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`TextInput renders 1`] = ` +.c2 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c2:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -94,20 +108,6 @@ exports[`TextInput renders 1`] = ` padding-right: 12px; } -.c2 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; -} - -.c2:focus { - outline: 0; -} - @media (min-width:768px) { .c0 { font-size: 14px; @@ -131,6 +131,20 @@ exports[`TextInput renders 1`] = ` `; exports[`TextInput renders block 1`] = ` +.c2 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c2:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -232,20 +246,6 @@ exports[`TextInput renders block 1`] = ` padding-right: 12px; } -.c2 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; -} - -.c2:focus { - outline: 0; -} - @media (min-width:768px) { .c0 { font-size: 14px; @@ -269,6 +269,20 @@ exports[`TextInput renders block 1`] = ` `; exports[`TextInput renders contrast 1`] = ` +.c2 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c2:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -363,20 +377,6 @@ exports[`TextInput renders contrast 1`] = ` padding-right: 12px; } -.c2 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; -} - -.c2:focus { - outline: 0; -} - @media (min-width:768px) { .c0 { font-size: 14px; @@ -400,6 +400,20 @@ exports[`TextInput renders contrast 1`] = ` `; exports[`TextInput renders error 1`] = ` +.c2 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c2:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -500,20 +514,6 @@ exports[`TextInput renders error 1`] = ` padding-right: 12px; } -.c2 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; -} - -.c2:focus { - outline: 0; -} - @media (min-width:768px) { .c0 { font-size: 14px; @@ -538,6 +538,20 @@ exports[`TextInput renders error 1`] = ` `; exports[`TextInput renders large 1`] = ` +.c2 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c2:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -637,20 +651,6 @@ exports[`TextInput renders large 1`] = ` padding-right: 12px; } -.c2 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; -} - -.c2:focus { - outline: 0; -} - @media (min-width:768px) { .c0 { font-size: 14px; @@ -675,6 +675,20 @@ exports[`TextInput renders large 1`] = ` `; exports[`TextInput renders leadingVisual 1`] = ` +.c2 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c2:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -768,20 +782,6 @@ exports[`TextInput renders leadingVisual 1`] = ` padding-right: 12px; } -.c2 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; -} - -.c2:focus { - outline: 0; -} - @media (min-width:768px) { .c0 { font-size: 14px; @@ -834,6 +834,20 @@ exports[`TextInput renders leadingVisual 1`] = ` `; exports[`TextInput renders leadingVisual 2`] = ` +.c2 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c2:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -927,20 +941,6 @@ exports[`TextInput renders leadingVisual 2`] = ` padding-right: 12px; } -.c2 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; -} - -.c2:focus { - outline: 0; -} - @media (min-width:768px) { .c0 { font-size: 14px; @@ -993,6 +993,20 @@ exports[`TextInput renders leadingVisual 2`] = ` `; exports[`TextInput renders leadingVisual 3`] = ` +.c2 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c2:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -1086,20 +1100,6 @@ exports[`TextInput renders leadingVisual 3`] = ` padding-right: 12px; } -.c2 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; -} - -.c2:focus { - outline: 0; -} - @media (min-width:768px) { .c0 { font-size: 14px; @@ -1134,6 +1134,20 @@ exports[`TextInput renders leadingVisual 3`] = ` `; exports[`TextInput renders leadingVisual 4`] = ` +.c2 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c2:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -1227,20 +1241,6 @@ exports[`TextInput renders leadingVisual 4`] = ` padding-right: 12px; } -.c2 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; -} - -.c2:focus { - outline: 0; -} - @media (min-width:768px) { .c0 { font-size: 14px; @@ -1275,6 +1275,20 @@ exports[`TextInput renders leadingVisual 4`] = ` `; exports[`TextInput renders monospace 1`] = ` +.c2 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c2:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -1369,20 +1383,6 @@ exports[`TextInput renders monospace 1`] = ` padding-right: 12px; } -.c2 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; -} - -.c2:focus { - outline: 0; -} - @media (min-width:768px) { .c0 { font-size: 14px; @@ -1406,6 +1406,20 @@ exports[`TextInput renders monospace 1`] = ` `; exports[`TextInput renders placeholder 1`] = ` +.c2 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c2:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -1499,20 +1513,6 @@ exports[`TextInput renders placeholder 1`] = ` padding-right: 12px; } -.c2 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; -} - -.c2:focus { - outline: 0; -} - @media (min-width:768px) { .c0 { font-size: 14px; @@ -1537,6 +1537,20 @@ exports[`TextInput renders placeholder 1`] = ` `; exports[`TextInput renders small 1`] = ` +.c2 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c2:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -1638,20 +1652,6 @@ exports[`TextInput renders small 1`] = ` padding-right: 12px; } -.c2 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; -} - -.c2:focus { - outline: 0; -} - @media (min-width:768px) { .c0 { font-size: 14px; @@ -2099,6 +2099,20 @@ exports[`TextInput renders trailingAction icon button 1`] = ` animation-delay: 0s; } +.c2 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c2:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -2186,20 +2200,6 @@ exports[`TextInput renders trailingAction icon button 1`] = ` padding-right: 0; } -.c2 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; -} - -.c2:focus { - outline: 0; -} - @media (forced-colors:active) { .c4:focus { outline: solid 1px transparent; @@ -2626,6 +2626,20 @@ exports[`TextInput renders trailingAction text button 1`] = ` height: var(--inner-action-size); } +.c2 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c2:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -2713,20 +2727,6 @@ exports[`TextInput renders trailingAction text button 1`] = ` padding-right: 0; } -.c2 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; -} - -.c2:focus { - outline: 0; -} - @media (forced-colors:active) { .c4:focus { outline: solid 1px transparent; @@ -3232,6 +3232,20 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = ` animation-delay: 0s; } +.c2 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c2:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -3319,20 +3333,6 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = ` padding-right: 0; } -.c2 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; -} - -.c2:focus { - outline: 0; -} - @media (forced-colors:active) { .c4:focus { outline: solid 1px transparent; @@ -3428,6 +3428,20 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = ` `; exports[`TextInput renders trailingVisual 1`] = ` +.c2 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c2:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -3521,20 +3535,6 @@ exports[`TextInput renders trailingVisual 1`] = ` padding-right: 0; } -.c2 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; -} - -.c2:focus { - outline: 0; -} - @media (min-width:768px) { .c0 { font-size: 14px; @@ -3587,6 +3587,20 @@ exports[`TextInput renders trailingVisual 1`] = ` `; exports[`TextInput renders trailingVisual 2`] = ` +.c2 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c2:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -3680,20 +3694,6 @@ exports[`TextInput renders trailingVisual 2`] = ` padding-right: 0; } -.c2 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; -} - -.c2:focus { - outline: 0; -} - @media (min-width:768px) { .c0 { font-size: 14px; @@ -3746,6 +3746,20 @@ exports[`TextInput renders trailingVisual 2`] = ` `; exports[`TextInput renders trailingVisual 3`] = ` +.c2 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c2:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -3839,20 +3853,6 @@ exports[`TextInput renders trailingVisual 3`] = ` padding-right: 0; } -.c2 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; -} - -.c2:focus { - outline: 0; -} - @media (min-width:768px) { .c0 { font-size: 14px; @@ -3887,6 +3887,20 @@ exports[`TextInput renders trailingVisual 3`] = ` `; exports[`TextInput renders trailingVisual 4`] = ` +.c2 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c2:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -3980,20 +3994,6 @@ exports[`TextInput renders trailingVisual 4`] = ` padding-right: 0; } -.c2 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; -} - -.c2:focus { - outline: 0; -} - @media (min-width:768px) { .c0 { font-size: 14px; @@ -4056,6 +4056,20 @@ exports[`TextInput renders with a loading indicator 1`] = ` border-width: 0; } +.c2 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c2:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -4149,20 +4163,6 @@ exports[`TextInput renders with a loading indicator 1`] = ` padding-right: 0; } -.c2 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; -} - -.c2:focus { - outline: 0; -} - @media (min-width:768px) { .c0 { font-size: 14px; @@ -4274,6 +4274,20 @@ exports[`TextInput renders with a loading indicator 1`] = ` border-width: 0; } +.c4 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c4:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -4367,20 +4381,6 @@ exports[`TextInput renders with a loading indicator 1`] = ` padding-right: 12px; } -.c4 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; -} - -.c4:focus { - outline: 0; -} - @media (min-width:768px) { .c0 { font-size: 14px; @@ -4530,6 +4530,20 @@ exports[`TextInput renders with a loading indicator 1`] = ` border-width: 0; } +.c2 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c2:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -4623,20 +4637,6 @@ exports[`TextInput renders with a loading indicator 1`] = ` padding-right: 0; } -.c2 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; -} - -.c2:focus { - outline: 0; -} - @media (min-width:768px) { .c0 { font-size: 14px; @@ -4757,6 +4757,20 @@ exports[`TextInput renders with a loading indicator 1`] = ` border-width: 0; } +.c5 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c5:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -4844,24 +4858,10 @@ exports[`TextInput renders with a loading indicator 1`] = ` flex-shrink: 0; } -.c1 > input, -.c1 > select { - padding-left: 0; - padding-right: 12px; -} - -.c5 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; -} - -.c5:focus { - outline: 0; +.c1 > input, +.c1 > select { + padding-left: 0; + padding-right: 12px; } @media (min-width:768px) { @@ -5058,6 +5058,20 @@ exports[`TextInput renders with a loading indicator 1`] = ` border-width: 0; } +.c5 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c5:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -5151,20 +5165,6 @@ exports[`TextInput renders with a loading indicator 1`] = ` padding-right: 12px; } -.c5 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; -} - -.c5:focus { - outline: 0; -} - @media (min-width:768px) { .c0 { font-size: 14px; @@ -5359,6 +5359,20 @@ exports[`TextInput renders with a loading indicator 1`] = ` border-width: 0; } +.c5 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c5:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -5452,20 +5466,6 @@ exports[`TextInput renders with a loading indicator 1`] = ` padding-right: 0; } -.c5 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; -} - -.c5:focus { - outline: 0; -} - @media (min-width:768px) { .c0 { font-size: 14px; @@ -5654,6 +5654,20 @@ exports[`TextInput renders with a loading indicator 1`] = ` border-width: 0; } +.c2 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c2:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -5747,20 +5761,6 @@ exports[`TextInput renders with a loading indicator 1`] = ` padding-right: 0; } -.c2 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; -} - -.c2:focus { - outline: 0; -} - @media (min-width:768px) { .c0 { font-size: 14px; @@ -5911,6 +5911,20 @@ exports[`TextInput renders with a loading indicator 1`] = ` border-width: 0; } +.c4 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c4:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -6004,20 +6018,6 @@ exports[`TextInput renders with a loading indicator 1`] = ` padding-right: 0; } -.c4 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; -} - -.c4:focus { - outline: 0; -} - @media (min-width:768px) { .c0 { font-size: 14px; @@ -6206,6 +6206,20 @@ exports[`TextInput renders with a loading indicator 1`] = ` border-width: 0; } +.c2 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c2:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -6299,20 +6313,6 @@ exports[`TextInput renders with a loading indicator 1`] = ` padding-right: 0; } -.c2 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; -} - -.c2:focus { - outline: 0; -} - @media (min-width:768px) { .c0 { font-size: 14px; @@ -6472,6 +6472,20 @@ exports[`TextInput renders with a loading indicator 1`] = ` border-width: 0; } +.c5 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c5:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -6573,20 +6587,6 @@ exports[`TextInput renders with a loading indicator 1`] = ` padding-right: 0; } -.c5 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; -} - -.c5:focus { - outline: 0; -} - @media (min-width:768px) { } @@ -6821,6 +6821,20 @@ exports[`TextInput renders with a loading indicator 1`] = ` border-width: 0; } +.c5 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c5:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -6914,20 +6928,6 @@ exports[`TextInput renders with a loading indicator 1`] = ` padding-right: 0; } -.c5 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; -} - -.c5:focus { - outline: 0; -} - @media (min-width:768px) { .c0 { font-size: 14px; @@ -7161,6 +7161,20 @@ exports[`TextInput renders with a loading indicator 1`] = ` border-width: 0; } +.c5 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c5:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -7260,20 +7274,6 @@ exports[`TextInput renders with a loading indicator 1`] = ` padding-right: 0; } -.c5 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; -} - -.c5:focus { - outline: 0; -} - @media (min-width:768px) { } @@ -7461,6 +7461,20 @@ exports[`TextInput renders with a loading indicator 1`] = ` `; exports[`TextInput should render a password input 1`] = ` +.c2 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c2:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -7554,20 +7568,6 @@ exports[`TextInput should render a password input 1`] = ` padding-right: 12px; } -.c2 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; -} - -.c2:focus { - outline: 0; -} - @media (min-width:768px) { .c0 { font-size: 14px; diff --git a/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap index 14af2deae2f..bbec12480ae 100644 --- a/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap +++ b/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap @@ -52,6 +52,21 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = ` border-width: 0; } +.c4 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; + height: 100%; +} + +.c4:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -152,21 +167,6 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = ` padding-right: 0; } -.c4 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; - height: 100%; -} - -.c4:focus { - outline: 0; -} - .c5 { -webkit-align-items: center; -webkit-box-align: center; @@ -864,6 +864,21 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = ` border-width: 0; } +.c4 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; + height: 100%; +} + +.c4:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -964,21 +979,6 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = ` padding-right: 12px; } -.c4 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; - height: 100%; -} - -.c4:focus { - outline: 0; -} - .c5 { -webkit-align-items: center; -webkit-box-align: center; @@ -1283,6 +1283,21 @@ exports[`TextInputWithTokens renders as block layout 1`] = ` flex-grow: 1; } +.c4 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; + height: 100%; +} + +.c4:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -1401,21 +1416,6 @@ exports[`TextInputWithTokens renders as block layout 1`] = ` padding-right: 12px; } -.c4 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; - height: 100%; -} - -.c4:focus { - outline: 0; -} - @media (min-width:768px) { .c0 { font-size: 14px; @@ -1499,6 +1499,21 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = ` border-width: 0; } +.c4 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; + height: 100%; +} + +.c4:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -1603,21 +1618,6 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = ` padding-right: 12px; } -.c4 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; - height: 100%; -} - -.c4:focus { - outline: 0; -} - .c5 { -webkit-align-items: center; -webkit-box-align: center; @@ -2227,6 +2227,21 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = ` border-width: 0; } +.c4 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; + height: 100%; +} + +.c4:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -2334,21 +2349,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = ` padding-right: 12px; } -.c4 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; - height: 100%; -} - -.c4:focus { - outline: 0; -} - .c5 { -webkit-align-items: center; -webkit-box-align: center; @@ -2956,6 +2956,21 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = ` border-width: 0; } +.c4 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; + height: 100%; +} + +.c4:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -3063,21 +3078,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = ` padding-right: 12px; } -.c4 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; - height: 100%; -} - -.c4:focus { - outline: 0; -} - .c5 { -webkit-align-items: center; -webkit-box-align: center; @@ -3685,6 +3685,21 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = ` border-width: 0; } +.c4 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; + height: 100%; +} + +.c4:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -3785,21 +3800,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = ` padding-right: 12px; } -.c4 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; - height: 100%; -} - -.c4:focus { - outline: 0; -} - .c5 { -webkit-align-items: center; -webkit-box-align: center; @@ -4411,6 +4411,21 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = ` border-width: 0; } +.c4 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; + height: 100%; +} + +.c4:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -4511,21 +4526,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = ` padding-right: 12px; } -.c4 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; - height: 100%; -} - -.c4:focus { - outline: 0; -} - .c5 { -webkit-align-items: center; -webkit-box-align: center; @@ -5139,6 +5139,21 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`] border-width: 0; } +.c4 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; + height: 100%; +} + +.c4:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -5241,21 +5256,6 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`] padding-right: 12px; } -.c4 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; - height: 100%; -} - -.c4:focus { - outline: 0; -} - .c5 { -webkit-align-items: center; -webkit-box-align: center; @@ -5865,6 +5865,21 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi border-width: 0; } +.c4 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; + height: 100%; +} + +.c4:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -5965,21 +5980,6 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi padding-right: 12px; } -.c4 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; - height: 100%; -} - -.c4:focus { - outline: 0; -} - .c5 { -webkit-align-items: center; -webkit-box-align: center; @@ -6322,6 +6322,21 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` border-width: 0; } +.c4 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; + height: 100%; +} + +.c4:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -6422,21 +6437,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-right: 0; } -.c4 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; - height: 100%; -} - -.c4:focus { - outline: 0; -} - .c5 { -webkit-align-items: center; -webkit-box-align: center; @@ -7110,6 +7110,21 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` border-width: 0; } +.c6 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; + height: 100%; +} + +.c6:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -7210,21 +7225,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-right: 12px; } -.c6 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; - height: 100%; -} - -.c6:focus { - outline: 0; -} - .c7 { -webkit-align-items: center; -webkit-box-align: center; @@ -7935,6 +7935,21 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` border-width: 0; } +.c4 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; + height: 100%; +} + +.c4:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -8035,21 +8050,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-right: 0; } -.c4 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; - height: 100%; -} - -.c4:focus { - outline: 0; -} - .c5 { -webkit-align-items: center; -webkit-box-align: center; @@ -8732,6 +8732,21 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` border-width: 0; } +.c7 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; + height: 100%; +} + +.c7:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -8832,21 +8847,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-right: 12px; } -.c7 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; - height: 100%; -} - -.c7:focus { - outline: 0; -} - .c8 { -webkit-align-items: center; -webkit-box-align: center; @@ -9602,6 +9602,21 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` border-width: 0; } +.c7 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; + height: 100%; +} + +.c7:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -9702,21 +9717,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-right: 12px; } -.c7 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; - height: 100%; -} - -.c7:focus { - outline: 0; -} - .c8 { -webkit-align-items: center; -webkit-box-align: center; @@ -10472,6 +10472,21 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` border-width: 0; } +.c7 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; + height: 100%; +} + +.c7:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -10572,21 +10587,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-right: 0; } -.c7 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; - height: 100%; -} - -.c7:focus { - outline: 0; -} - .c8 { -webkit-align-items: center; -webkit-box-align: center; @@ -11336,6 +11336,21 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` border-width: 0; } +.c4 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; + height: 100%; +} + +.c4:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -11436,21 +11451,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-right: 0; } -.c4 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; - height: 100%; -} - -.c4:focus { - outline: 0; -} - .c5 { -webkit-align-items: center; -webkit-box-align: center; @@ -12163,6 +12163,21 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` border-width: 0; } +.c6 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; + height: 100%; +} + +.c6:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -12263,21 +12278,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-right: 0; } -.c6 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; - height: 100%; -} - -.c6:focus { - outline: 0; -} - .c7 { -webkit-align-items: center; -webkit-box-align: center; @@ -13027,6 +13027,21 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` border-width: 0; } +.c4 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; + height: 100%; +} + +.c4:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -13127,21 +13142,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-right: 0; } -.c4 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; - height: 100%; -} - -.c4:focus { - outline: 0; -} - .c5 { -webkit-align-items: center; -webkit-box-align: center; @@ -13863,6 +13863,21 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` border-width: 0; } +.c7 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; + height: 100%; +} + +.c7:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -13970,21 +13985,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-right: 0; } -.c7 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; - height: 100%; -} - -.c7:focus { - outline: 0; -} - .c8 { -webkit-align-items: center; -webkit-box-align: center; @@ -14777,6 +14777,21 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` border-width: 0; } +.c7 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; + height: 100%; +} + +.c7:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -14877,21 +14892,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-right: 0; } -.c7 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; - height: 100%; -} - -.c7:focus { - outline: 0; -} - .c8 { -webkit-align-items: center; -webkit-box-align: center; @@ -15686,6 +15686,21 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` border-width: 0; } +.c7 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; + height: 100%; +} + +.c7:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -15786,21 +15801,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-right: 0; } -.c7 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; - height: 100%; -} - -.c7:focus { - outline: 0; -} - .c8 { -webkit-align-items: center; -webkit-box-align: center; @@ -16559,6 +16559,21 @@ exports[`TextInputWithTokens renders with tokens 1`] = ` border-width: 0; } +.c4 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; + height: 100%; +} + +.c4:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -16659,21 +16674,6 @@ exports[`TextInputWithTokens renders with tokens 1`] = ` padding-right: 12px; } -.c4 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; - height: 100%; -} - -.c4:focus { - outline: 0; -} - .c5 { -webkit-align-items: center; -webkit-box-align: center; @@ -17270,6 +17270,21 @@ exports[`TextInputWithTokens renders with tokens using a custom token component flex-grow: 1; } +.c4 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; + height: 100%; +} + +.c4:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -17370,21 +17385,6 @@ exports[`TextInputWithTokens renders with tokens using a custom token component padding-right: 12px; } -.c4 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; - height: 100%; -} - -.c4:focus { - outline: 0; -} - .c5 { -webkit-align-items: center; -webkit-box-align: center; @@ -17953,6 +17953,21 @@ exports[`TextInputWithTokens renders without tokens 1`] = ` flex-grow: 1; } +.c4 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; + height: 100%; +} + +.c4:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -18053,21 +18068,6 @@ exports[`TextInputWithTokens renders without tokens 1`] = ` padding-right: 12px; } -.c4 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; - height: 100%; -} - -.c4:focus { - outline: 0; -} - @media (min-width:768px) { .c0 { font-size: 14px; diff --git a/packages/react/src/internal/components/UnstyledTextInput.tsx b/packages/react/src/internal/components/UnstyledTextInput.tsx index d8b59b67614..c81b23d567d 100644 --- a/packages/react/src/internal/components/UnstyledTextInput.tsx +++ b/packages/react/src/internal/components/UnstyledTextInput.tsx @@ -1,5 +1,5 @@ import styled from 'styled-components' -import sx from '../../sx' +import sx, {type SxProp} from '../../sx' import {toggleStyledComponent} from '../utils/toggleStyledComponent' import React from 'react' import {useFeatureFlag} from '../../FeatureFlags' @@ -9,6 +9,8 @@ import {clsx} from 'clsx' export const TEXT_INPUT_CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_team' +type ToggledUnstyledTextInputProps = React.ComponentPropsWithoutRef<'input'> & SxProp + const ToggledUnstyledTextInput = toggleStyledComponent( TEXT_INPUT_CSS_MODULES_FEATURE_FLAG, 'input', @@ -28,14 +30,13 @@ const ToggledUnstyledTextInput = toggleStyledComponent( `, ) -const UnstyledTextInput = React.forwardRef>( - function UnstyledTextInput({className, ...rest}, forwardRef) { - const enabled = useFeatureFlag(TEXT_INPUT_CSS_MODULES_FEATURE_FLAG) - return ( - - ) - }, -) +const UnstyledTextInput = React.forwardRef(function UnstyledTextInput( + {className, ...rest}, + forwardRef, +) { + const enabled = useFeatureFlag(TEXT_INPUT_CSS_MODULES_FEATURE_FLAG) + return +}) UnstyledTextInput.displayName = 'UnstyledTextInput' export default UnstyledTextInput From 83ed14e34066f772813ecb2904c48da127f16517 Mon Sep 17 00:00:00 2001 From: Hussam Ghazzi Date: Mon, 4 Nov 2024 22:23:13 +0000 Subject: [PATCH 04/46] stylelint fix --- .../src/internal/components/TextInputInnerAction.module.css | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/react/src/internal/components/TextInputInnerAction.module.css b/packages/react/src/internal/components/TextInputInnerAction.module.css index 00cf96171ed..f312c132f3e 100644 --- a/packages/react/src/internal/components/TextInputInnerAction.module.css +++ b/packages/react/src/internal/components/TextInputInnerAction.module.css @@ -13,9 +13,7 @@ } &[data-component='IconButton'] { - /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */ width: var(--inner-action-size); - /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */ height: var(--inner-action-size); } From 76852c83ae19b6fe20ca3c4677eaeb1ece9533be Mon Sep 17 00:00:00 2001 From: Hussam Ghazzi Date: Mon, 4 Nov 2024 22:24:16 +0000 Subject: [PATCH 05/46] changeset --- .changeset/dry-seals-count.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/dry-seals-count.md diff --git a/.changeset/dry-seals-count.md b/.changeset/dry-seals-count.md new file mode 100644 index 00000000000..87b384272ce --- /dev/null +++ b/.changeset/dry-seals-count.md @@ -0,0 +1,5 @@ +--- +"@primer/react": minor +--- + +Convert TextInput to CSS module behind feature flag From 87d76af5084a286bb21c523d2d42cc586b26b212 Mon Sep 17 00:00:00 2001 From: Hussam Ghazzi Date: Tue, 5 Nov 2024 22:01:21 +0000 Subject: [PATCH 06/46] Update wrappers to use css modules --- .../TextInputWithTokens.tsx | 6 +- .../components/TextInputWrapper.module.css | 194 ++++++++++++ .../internal/components/TextInputWrapper.tsx | 284 +++++++++++------- 3 files changed, 368 insertions(+), 116 deletions(-) create mode 100644 packages/react/src/internal/components/TextInputWrapper.module.css diff --git a/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx b/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx index e2c97ac77f1..d59873b26c6 100644 --- a/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx +++ b/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx @@ -13,7 +13,7 @@ import Token from '../Token/Token' import type {TokenSizeKeys} from '../Token/TokenBase' import type {TextInputSizes} from '../internal/components/TextInputWrapper' -import TextInputWrapper, {textInputHorizPadding} from '../internal/components/TextInputWrapper' +import TextInputWrapper from '../internal/components/TextInputWrapper' import UnstyledTextInput from '../internal/components/UnstyledTextInput' import TextInputInnerVisualSlot from '../internal/components/TextInputInnerVisualSlot' @@ -266,8 +266,8 @@ function TextInputWithTokensInnerComponent textarea { + padding: var(--base-size-12); + } + + &:where([data-contrast='true']) { + background-color: var(--bgColor-inset); + } + + &:where([data-disabled='true']) { + color: var(--fgColor-disabled); + background-color: var(--control-bgColor-disabled); + border-color: var(--control-borderColor-disabled); + box-shadow: none; + + input, + textarea, + select { + cursor: not-allowed; + } + } + + &:where([data-monospace='true']) { + font-family: var(--fontStack-monospace); + } + + &:where([data-validation='error']) { + border-color: var(--borderColor-danger-emphasis); + + /* TODO: verify */ + &:where([data-trailing-action="true"][data-focused="true"]), &:where(:not([data-trailing-action="true"])):focus-within { + /* stylelint-disable-next-line primer/colors */ + border-color: var(--fgColor-accent); + outline: 2px solid var(--fgColor-accent); + outline-offset: -1px; + } + } + + &:where([data-validation='success']) { + border-color: var(--borderColor-success-emphasis); + } + + &:where([data-block='true']) { + display: flex; + width: 100%; + align-self: stretch; + } + + /* Ensures inputs don' t zoom on mobile but are body-font size on desktop */ + @media (min-width: var(--breakpoint-medium)) { + font-size: var(--text-body-size-medium); + } + + &:where([data-size='small']) { + --inner-action-size: var(--base-size-20); + + min-height: var(--base-size-28); + /* stylelint-disable-next-line primer/spacing */ + padding-top: 3px; + padding-right: var(--base-size-8); + /* stylelint-disable-next-line primer/spacing */ + padding-bottom: 3px; + padding-left: var(--base-size-8); + font-size: var(--text-body-size-small); + /* stylelint-disable-next-line primer/typography */ + line-height: var(--base-size-20); + } + + &:where([data-size='medium']) { + --inner-action-size: var(--base-size-24); + } + + &:where([data-size='large']) { + --inner-action-size: var(--base-size-28); + + height: var(--base-size-40); + /* stylelint-disable-next-line primer/spacing */ + padding-top: 10px; + padding-right: var(--base-size-8); + /* stylelint-disable-next-line primer/spacing */ + padding-bottom: 10px; + padding-left: var(--base-size-8); + } + + /* Deprecated */ + &:where([data-variant='small']) { + min-height: 28px; + /* stylelint-disable-next-line primer/spacing */ + padding-top: 3px; + padding-right: var(--base-size-8); + /* stylelint-disable-next-line primer/spacing */ + padding-bottom: 3px; + padding-left: var(--base-size-8); + font-size: (--text-body-size-small); + /* stylelint-disable-next-line primer/typography */ + line-height: var(--base-size-20); + } + + /* Deprecated */ + &:where([data-variant='large']) { + /* stylelint-disable-next-line primer/spacing */ + padding-top: 10px; + padding-right: var(--base-size-8); + /* stylelint-disable-next-line primer/spacing */ + padding-bottom: 10px; + padding-left: var(--base-size-8); + font-size: var(--text-title-size-medium); + } +} + +.TextInputWrapper { + padding-right: 0; + padding-left: 0; + + /* Repeat and position set for form states (success, error, etc) */ + background-repeat: no-repeat; + + /* For form validation. This keeps images 8px from right and centered vertically. */ + background-position: right 8px center; + + + & > :not(:last-child) { + margin-right: var(--base-size-8); + } + + :global(.TextInput-icon), + :global(.TextInput-action) { + align-self: center; + color: var(--fgColor-muted); + flex-shrink: 0; + } + + &:where([data-visual="leading"]) { + padding-left: var(--base-size-12); + } + + &:where([data-visual="trailing"]:not([data-trailing-action="true"])) { + padding-right: var(--base-size-12); + } + + &:where(:not([data-visual="leading"])) { + > input, + > select { + padding-left: var(--base-size-12); + } + } + + &:where(:not([data-visual="trailing"]):not([data-trailing-action="true"])) { + > input, + > select { + padding-right: var(--base-size-12); + } + } +} \ No newline at end of file diff --git a/packages/react/src/internal/components/TextInputWrapper.tsx b/packages/react/src/internal/components/TextInputWrapper.tsx index 2ae20272b5b..b7c31ff4d8f 100644 --- a/packages/react/src/internal/components/TextInputWrapper.tsx +++ b/packages/react/src/internal/components/TextInputWrapper.tsx @@ -5,6 +5,13 @@ import {get} from '../../constants' import type {SxProp} from '../../sx' import sx from '../../sx' import type {FormValidationStatus} from '../../utils/types/FormValidationStatus' +import {TEXT_INPUT_CSS_MODULES_FEATURE_FLAG} from './UnstyledTextInput' +import {toggleStyledComponent} from '../utils/toggleStyledComponent' +import React, {type ComponentProps, type ComponentPropsWithoutRef} from 'react' +import {useFeatureFlag} from '../../FeatureFlags' +import {clsx} from 'clsx' + +import styles from './TextInputWrapper.module.css' export type TextInputSizes = 'small' | 'medium' | 'large' @@ -48,7 +55,7 @@ const sizeVariants = variant({ }, }) -export type StyledBaseWrapperProps = { +type StyledTextInputBaseWrapperProps = { block?: boolean contrast?: boolean disabled?: boolean @@ -56,21 +63,21 @@ export type StyledBaseWrapperProps = { isInputFocused?: boolean monospace?: boolean validationStatus?: FormValidationStatus + className?: string + style?: React.CSSProperties } & WidthProps & MinWidthProps & MaxWidthProps & - SxProp + SxProp & + ComponentPropsWithoutRef<'span'> -export type StyledWrapperProps = { +type StyledTextInputWrapperProps = { hasLeadingVisual?: boolean hasTrailingVisual?: boolean /** @deprecated Use `size` prop instead */ variant?: TextInputSizes size?: TextInputSizes -} & StyledBaseWrapperProps - -const textInputBasePadding = '12px' -export const textInputHorizPadding = textInputBasePadding +} & StyledTextInputBaseWrapperProps const renderFocusStyles = (hasTrailingAction: boolean, isInputFocused: boolean) => { if (hasTrailingAction) { @@ -92,133 +99,184 @@ const renderFocusStyles = (hasTrailingAction: boolean, isInputFocused: boolean) ` } -export const TextInputBaseWrapper = styled.span` - font-size: ${get('fontSizes.1')}; - line-height: 20px; - color: ${get('colors.fg.default')}; - vertical-align: middle; - background-color: ${get('colors.canvas.default')}; - border: 1px solid var(--control-borderColor-rest, ${get('colors.border.default')}); - border-radius: ${get('radii.2')}; - outline: none; - box-shadow: ${get('shadows.primer.shadow.inset')}; - display: inline-flex; - align-items: stretch; - min-height: 32px; - overflow: hidden; - - input, - textarea { - cursor: text; - } +const StyledTextInputBaseWrapper = toggleStyledComponent( + TEXT_INPUT_CSS_MODULES_FEATURE_FLAG, + 'span', + styled.span` + font-size: ${get('fontSizes.1')}; + line-height: 20px; + color: ${get('colors.fg.default')}; + vertical-align: middle; + background-color: ${get('colors.canvas.default')}; + border: 1px solid var(--control-borderColor-rest, ${get('colors.border.default')}); + border-radius: ${get('radii.2')}; + outline: none; + box-shadow: ${get('shadows.primer.shadow.inset')}; + display: inline-flex; + align-items: stretch; + min-height: 32px; + overflow: hidden; - select { - cursor: pointer; - } + input, + textarea { + cursor: text; + } - input, - textarea, - select { - &::placeholder { - color: var(---control-fgColor-placeholder, ${get('colors.fg.muted')}); + select { + cursor: pointer; } - } - ${props => renderFocusStyles(Boolean(props.hasTrailingAction), Boolean(props.isInputFocused))} + input, + textarea, + select { + &::placeholder { + color: var(---control-fgColor-placeholder, ${get('colors.fg.muted')}); + } + } - > textarea { - padding: ${textInputBasePadding}; - } + ${props => renderFocusStyles(Boolean(props.hasTrailingAction), Boolean(props.isInputFocused))} - ${props => - props.contrast && - css` - background-color: ${get('colors.canvas.inset')}; - `} + > textarea { + padding: 12px; + } - ${props => - props.disabled && - css` - color: ${get('colors.primer.fg.disabled')}; - background-color: ${get('colors.input.disabledBg')}; - box-shadow: none; - border-color: var(--control-borderColor-disabled, ${get('colors.border.default')}); - - input, - textarea, - select { - cursor: not-allowed; - } - `} + ${props => + props.contrast && + css` + background-color: ${get('colors.canvas.inset')}; + `} ${props => - props.monospace && - css` - font-family: ${get('fonts.mono')}; - `} + props.disabled && + css` + color: ${get('colors.primer.fg.disabled')}; + background-color: ${get('colors.input.disabledBg')}; + box-shadow: none; + border-color: var(--control-borderColor-disabled, ${get('colors.border.default')}); - ${props => - props.validationStatus === 'error' && - css` - border-color: ${get('colors.danger.emphasis')}; - ${renderFocusStyles(Boolean(props.hasTrailingAction), Boolean(props.isInputFocused))} - `} + input, + textarea, + select { + cursor: not-allowed; + } + `} + ${props => + props.monospace && + css` + font-family: ${get('fonts.mono')}; + `} - ${props => - props.validationStatus === 'success' && - css` - border-color: ${get('colors.success.emphasis')}; - `} + ${props => + props.validationStatus === 'error' && + css` + border-color: ${get('colors.danger.emphasis')}; + ${renderFocusStyles(Boolean(props.hasTrailingAction), Boolean(props.isInputFocused))} + `} - ${props => - props.block && - css` - width: 100%; - display: flex; - align-self: stretch; - `} - // 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')}; - } + ${props => + props.validationStatus === 'success' && + css` + border-color: ${get('colors.success.emphasis')}; + `} - ${width} - ${minWidth} - ${maxWidth} - ${sizeDeprecatedVariants} - ${sizeVariants} - ${sx}; -` + ${props => + props.block && + css` + width: 100%; + display: flex; + align-self: stretch; + `} -const TextInputWrapper = styled(TextInputBaseWrapper)` - 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. + // 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')}; + } - & > :not(:last-child) { - margin-right: ${get('space.2')}; - } + ${width} + ${minWidth} + ${maxWidth} + ${sizeDeprecatedVariants} + ${sizeVariants} + ${sx}; + `, +) - .TextInput-icon, - .TextInput-action { - align-self: center; - color: ${get('colors.fg.muted')}; - flex-shrink: 0; - } +export const TextInputBaseWrapper = React.forwardRef( + function TextInputBaseWrapper({className, ...rest}, forwardRef) { + const enabled = useFeatureFlag(TEXT_INPUT_CSS_MODULES_FEATURE_FLAG) - ${props => css` - padding-left: ${props.hasLeadingVisual ? textInputHorizPadding : 0}; - padding-right: ${props.hasTrailingVisual && !props.hasTrailingAction ? textInputHorizPadding : 0}; + // TODO: Handle WidthProps & MinWidthProps & MaxWidthProps + return ( + + ) + }, +) +TextInputBaseWrapper.displayName = 'TextInputBaseWrapper' + +const StyledTextInputWrapper = toggleStyledComponent( + TEXT_INPUT_CSS_MODULES_FEATURE_FLAG, + TextInputBaseWrapper, + styled(TextInputBaseWrapper)` + 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. + + & > :not(:last-child) { + margin-right: ${get('space.2')}; + } - > input, - > select { - padding-left: ${!props.hasLeadingVisual ? textInputHorizPadding : 0}; - padding-right: ${!props.hasTrailingVisual && !props.hasTrailingAction ? textInputHorizPadding : 0}; + .TextInput-icon, + .TextInput-action { + align-self: center; + color: ${get('colors.fg.muted')}; + flex-shrink: 0; } - `} - ${sx}; -` + ${props => css` + padding-left: ${props.hasLeadingVisual ? '12px' : 0}; + padding-right: ${props.hasTrailingVisual && !props.hasTrailingAction ? '12px' : 0}; + + > input, + > select { + padding-left: ${!props.hasLeadingVisual ? '12px' : 0}; + padding-right: ${!props.hasTrailingVisual && !props.hasTrailingAction ? '12px' : 0}; + } + `} + + ${sx}; + `, +) + +export const TextInputWrapper = React.forwardRef(function TextInputWrapper( + {className, ...rest}, + forwardRef, +) { + const enabled = useFeatureFlag(TEXT_INPUT_CSS_MODULES_FEATURE_FLAG) + + return ( + + ) +}) +export type StyledBaseWrapperProps = ComponentProps +export type StyledWrapperProps = ComponentProps export default TextInputWrapper From 4c6393371aa265d06e54b1d1416465f460f0b6ec Mon Sep 17 00:00:00 2001 From: Hussam Ghazzi Date: Wed, 6 Nov 2024 13:57:41 +0000 Subject: [PATCH 07/46] lint fixes --- .../TextInputWithTokens.tsx | 2 +- .../components/TextInputWrapper.module.css | 29 ++++++++++--------- 2 files changed, 16 insertions(+), 15 deletions(-) diff --git a/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx b/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx index d59873b26c6..fa03c61a48e 100644 --- a/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx +++ b/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx @@ -267,7 +267,7 @@ function TextInputWithTokensInnerComponent :not(:last-child) { margin-right: var(--base-size-8); @@ -170,25 +171,25 @@ flex-shrink: 0; } - &:where([data-visual="leading"]) { + &:where([data-visual='leading']) { padding-left: var(--base-size-12); } - &:where([data-visual="trailing"]:not([data-trailing-action="true"])) { + &:where([data-visual='trailing']:not([data-trailing-action='true'])) { padding-right: var(--base-size-12); } - &:where(:not([data-visual="leading"])) { + &:where(:not([data-visual='leading'])) { > input, > select { - padding-left: var(--base-size-12); - } + padding-left: var(--base-size-12); + } } - &:where(:not([data-visual="trailing"]):not([data-trailing-action="true"])) { + &:where(:not([data-visual='trailing']):not([data-trailing-action='true'])) { > input, > select { padding-right: var(--base-size-12); } } -} \ No newline at end of file +} From 669d8f914078e1459eb539efb5951746ac902ac1 Mon Sep 17 00:00:00 2001 From: Hussam Ghazzi Date: Wed, 6 Nov 2024 17:12:12 +0000 Subject: [PATCH 08/46] chore(TextInput): Update TextInput to use data attributes for styling --- .../react/src/__tests__/Textarea.test.tsx | 8 +- .../__snapshots__/Autocomplete.test.tsx.snap | 1162 +++- .../__snapshots__/TextInput.test.tsx.snap | 5555 +++++++++++++---- .../TextInputWithTokens.test.tsx.snap | 4520 +++++++++++--- .../internal/components/TextInputWrapper.tsx | 300 +- packages/react/src/utils/testing.tsx | 12 +- 6 files changed, 9189 insertions(+), 2368 deletions(-) diff --git a/packages/react/src/__tests__/Textarea.test.tsx b/packages/react/src/__tests__/Textarea.test.tsx index 2bc0c7f6e20..b460655558c 100644 --- a/packages/react/src/__tests__/Textarea.test.tsx +++ b/packages/react/src/__tests__/Textarea.test.tsx @@ -84,11 +84,11 @@ describe('Textarea', () => { width: '100%', display: 'flex', } - const defaultStyles = renderStyles(