From 00a58a3414354c5f46e307e6582e4961f32775d8 Mon Sep 17 00:00:00 2001 From: Jakub Janicki Date: Tue, 18 Jul 2023 22:25:34 +0200 Subject: [PATCH 1/3] feat: added lg size for input fields --- lib/src/components/combobox/Combobox.test.tsx | 15 + lib/src/components/combobox/ComboboxInput.tsx | 35 +- .../__snapshots__/Combobox.test.tsx.snap | 127 ++++- .../components/date-input/DateInput.test.tsx | 10 + lib/src/components/date-input/DateInput.tsx | 13 +- .../__snapshots__/DateInput.test.tsx.snap | 443 ++++++++++++++++++ lib/src/components/input/Input.test.tsx | 6 + lib/src/components/input/Input.tsx | 5 + .../input/__snapshots__/Input.test.tsx.snap | 66 +++ .../NumberInputField.test.tsx.snap | 69 +-- .../number-input/NumberInput.test.tsx | 6 + .../components/number-input/NumberInput.tsx | 9 +- .../number-input/NumberInputStepper.tsx | 1 + .../__snapshots__/NumberInput.test.tsx.snap | 326 ++++++++++++- .../password-input/PasswordInput.tsx | 11 +- .../search-input/SearchInput.test.tsx | 10 + .../components/search-input/SearchInput.tsx | 18 +- .../__snapshots__/SearchInput.test.tsx.snap | 213 +++++++++ lib/src/components/select/Select.test.tsx | 6 + lib/src/components/select/Select.tsx | 8 + .../select/__snapshots__/Select.test.tsx.snap | 68 +++ .../utilities/style/get-field-icon-size.ts | 10 + lib/src/utilities/style/index.ts | 1 + 23 files changed, 1419 insertions(+), 57 deletions(-) create mode 100644 lib/src/utilities/style/get-field-icon-size.ts diff --git a/lib/src/components/combobox/Combobox.test.tsx b/lib/src/components/combobox/Combobox.test.tsx index a0f8db3b3..68da8da61 100644 --- a/lib/src/components/combobox/Combobox.test.tsx +++ b/lib/src/components/combobox/Combobox.test.tsx @@ -41,4 +41,19 @@ describe('Combobox component', () => { expect(combobox).toHaveValue('Apple') }) + + it('renders with lg size', async () => { + const { container } = render( + + + + + + + + + ) + + expect(container).toMatchSnapshot() + }) }) diff --git a/lib/src/components/combobox/ComboboxInput.tsx b/lib/src/components/combobox/ComboboxInput.tsx index 365b6a604..db44a68d5 100644 --- a/lib/src/components/combobox/ComboboxInput.tsx +++ b/lib/src/components/combobox/ComboboxInput.tsx @@ -1,9 +1,12 @@ +import * as React from 'react' + import { ComboboxInput as BaseComboboxInput } from '@reach/combobox' import { styled, theme } from '~/stitches' +import { Override } from '~/utilities/types' import { encodeBackgroundIcon } from '~/utilities' -export const ComboboxInput = styled(BaseComboboxInput, { +export const StyledComboboxInput = styled(BaseComboboxInput, { boxShadow: 'none', // prevent default iOS default styling fontSize: '$md', // prevent iOS zooming on focus appearance: 'none', @@ -37,6 +40,23 @@ export const ComboboxInput = styled(BaseComboboxInput, { cursor: 'not-allowed' }, variants: { + size: { + sm: { + height: '$3', + fontSize: '$sm', + lineHeight: 1.7 + }, + md: { + height: '$4', + fontSize: '$md', + lineHeight: 2 + }, + lg: { + height: '$5', + fontSize: '$md', + lineHeight: 2 + } + }, state: { error: { border: '1px solid $danger' @@ -44,3 +64,16 @@ export const ComboboxInput = styled(BaseComboboxInput, { } } }) + +export type ComboboxInputProps = Override< + React.ComponentProps, + { + name: string + } +> + +export const ComboboxInput: React.FC = React.forwardRef( + ({ size = 'md', ...rest }, ref) => { + return + } +) diff --git a/lib/src/components/combobox/__snapshots__/Combobox.test.tsx.snap b/lib/src/components/combobox/__snapshots__/Combobox.test.tsx.snap index a7c11646c..a87c13ac0 100644 --- a/lib/src/components/combobox/__snapshots__/Combobox.test.tsx.snap +++ b/lib/src/components/combobox/__snapshots__/Combobox.test.tsx.snap @@ -80,6 +80,14 @@ exports[`Combobox component renders 1`] = ` } } +@media { + .c-bYKHLS-fwoCmE-size-md { + height: var(--sizes-4); + font-size: var(--fontSizes-md); + line-height: 2; + } +} +
+
+`; + +exports[`Combobox component renders with lg size 1`] = ` +@media { + .c-bYKHLS { + box-shadow: none; + font-size: var(--fontSizes-md); + -webkit-appearance: none; + appearance: none; + background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224px%22%20height%3D%2224px%22%20viewBox%3D%220%200%2024%2024%22%20stroke%3D%22%23757575%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20fill%3D%22none%22%20color%3D%22%23757575%22%3E%3Cpolyline%20points%3D%226%2010%2012%2016%2018%2010%22%2F%3E%3C%2Fsvg%3E); + background-position: right var(--space-3) top 50%, 0 0; + background-repeat: no-repeat, repeat; + background-size: 20px auto, 100%; + border: 1px solid var(--colors-tonal300); + border-radius: var(--radii-0); + box-sizing: border-box; + color: var(--colors-tonal600); + cursor: text; + display: block; + font-family: var(--fonts-body); + height: var(--sizes-4); + padding-left: var(--space-3); + padding-right: var(--space-6); + transition: all 100ms ease-out; + width: 100%; + } + + .c-bYKHLS::placeholder { + color: var(--colors-tonal300); + opacity: 1; + } + + .c-bYKHLS:focus-within { + border-color: var(--colors-primary); + outline: none; + } + + .c-bYKHLS[disabled] { + background-color: var(--colors-tonal100); + color: var(--colors-tonal400); + cursor: not-allowed; + } + + .c-jJeEQg { + background: white; + border: solid 1px var(--colors-tonal100); + border-radius: var(--radii-0); + box-shadow: var(--shadows-1); + box-sizing: border-box; + font-family: var(--fonts-body); + font-size: var(--fontSizes-md); + outline: none; + padding: var(--space-1); + transform: translateY(var(--space-2)); + } + + .c-uYIcy { + color: var(--colors-tonal500); + cursor: pointer; + margin: 0; + padding: var(--space-2); + } + + .c-uYIcy:hover, + .c-uYIcy[aria-selected="true"] { + background: var(--colors-tonal50); + border-radius: var(--radii-0); + } + + .c-uYIcy [data-user-value] { + color: var(--colors-primary); + } + + .c-cOrACU { + list-style: none; + margin: 0; + padding: 0; + -webkit-user-select: none; + user-select: none; + } +} + +@media { + .c-bYKHLS-fwoCmE-size-md { + height: var(--sizes-4); + font-size: var(--fontSizes-md); + line-height: 2; + } + + .c-bYKHLS-jAZHIx-size-lg { + height: var(--sizes-5); + font-size: var(--fontSizes-md); + line-height: 2; + } +} + +
+
+ { fireEvent.click(screen.getByText('15')) await waitFor(() => expect(changeSpy).toHaveBeenCalled()) }) + + it('renders lg size', async () => { + const { container } = render( + + + + ) + + expect(container).toMatchSnapshot() + }) }) diff --git a/lib/src/components/date-input/DateInput.tsx b/lib/src/components/date-input/DateInput.tsx index 5db8eb28f..be17ecbc3 100644 --- a/lib/src/components/date-input/DateInput.tsx +++ b/lib/src/components/date-input/DateInput.tsx @@ -13,13 +13,14 @@ import { Input } from '../input/Input' import { Popover } from '../popover/Popover' import { DEFAULT_DATE_FORMAT } from './constants' import { useDate } from './use-date' +import { getFieldIconSize } from '~/utilities' export type DateInputProps = Omit & CalendarTranslationProps & { initialDate?: Date dateFormat?: string disabled?: boolean - size?: 'sm' | 'md' + size?: 'sm' | 'md' | 'lg' revalidate?: () => Promise onChange?: (value?: Date) => void } @@ -54,6 +55,8 @@ export const DateInput = React.forwardRef( const refDateToday = React.useRef(null) const refDateSelected = React.useRef(null) + const iconSize = React.useMemo(() => getFieldIconSize(size), [size]) + React.useEffect(() => { onChange?.(date) }, [date, onChange]) @@ -72,10 +75,14 @@ export const DateInput = React.forwardRef( diff --git a/lib/src/components/date-input/__snapshots__/DateInput.test.tsx.snap b/lib/src/components/date-input/__snapshots__/DateInput.test.tsx.snap index e4b1fcb15..490ccd7eb 100644 --- a/lib/src/components/date-input/__snapshots__/DateInput.test.tsx.snap +++ b/lib/src/components/date-input/__snapshots__/DateInput.test.tsx.snap @@ -152,3 +152,446 @@ exports[`DateInput component renders 1`] = `
`; + +exports[`DateInput component renders lg size 1`] = ` +@media { + .c-fZTBsJ { + -webkit-appearance: none; + appearance: none; + border: 1px solid var(--colors-tonal400); + border-radius: var(--radii-0); + box-shadow: none; + box-sizing: border-box; + color: var(--colors-tonal600); + cursor: text; + display: block; + font-family: var(--fonts-body); + padding-left: var(--space-3); + padding-right: var(--space-3); + transition: all 100ms ease-out; + width: 100%; + } + + .c-fZTBsJ:focus { + border-color: var(--colors-primary); + outline: none; + } + + .c-fZTBsJ[disabled] { + background-color: var(--colors-tonal100); + color: var(--colors-tonal400); + cursor: not-allowed; + } + + .c-fZTBsJ::placeholder { + color: var(--colors-tonal300); + opacity: 1; + } + + .c-fDzwZw { + align-items: center; + -webkit-appearance: none; + appearance: none; + background: white; + border: unset; + border-radius: var(--radii-0); + box-sizing: border-box; + cursor: pointer; + display: flex; + justify-content: center; + padding: unset; + transition: all 100ms ease-out; + } + + .c-dbrbZt { + display: inline-block; + fill: none; + stroke: currentcolor; + stroke-linecap: round; + stroke-linejoin: round; + vertical-align: middle; + } + + .c-dhzjXW { + display: flex; + } + + .c-hVoQtf { + background-color: var(--colors-tonal500); + border-radius: var(--radii-0); + box-shadow: var(--shadows-0); + color: white; + font-family: var(--fonts-body); + font-size: var(--fontSizes-sm); + line-height: 1.5; + white-space: normal; + padding-left: var(--space-3); + padding-right: var(--space-3); + padding-top: var(--space-2); + padding-bottom: var(--space-2); + z-index: 10; + } + +@media (prefers-reduced-motion: no-preference) { + .c-hVoQtf { + animation-duration: 75ms; + animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); + will-change: transform, opacity; + } +} + +@media (prefers-reduced-motion: no-preference) { + .c-hVoQtf[data-state="delayed-open"][data-side="top"] { + animation-name: k-ftcNPK; + } +} + +@media (prefers-reduced-motion: no-preference) { + .c-hVoQtf[data-state="delayed-open"][data-side="right"] { + animation-name: k-hbaHED; + } +} + +@media (prefers-reduced-motion: no-preference) { + .c-hVoQtf[data-state="delayed-open"][data-side="bottom"] { + animation-name: k-daNevH; + } +} + +@media (prefers-reduced-motion: no-preference) { + .c-hVoQtf[data-state="delayed-open"][data-side="left"] { + animation-name: k-fvyGIa; + } +} + + .c-fkUJsw { + align-items: center; + background: unset; + border: unset; + border-radius: var(--radii-0); + cursor: pointer; + display: flex; + font-family: var(--fonts-body); + font-weight: 600; + justify-content: center; + padding: unset; + text-decoration: none; + transition: all 100ms ease-out; + white-space: nowrap; + width: max-content; + } + + .c-fPxPMR { + display: grid; + grid-template-columns: repeat(7, 1fr); + grid-gap: var(--space-1) var(--space-2); + } + + .c-dyvMgW { + font-family: var(--fonts-body); + font-weight: 400; + margin: 0; + } + + .c-dyvMgW > .c-dyvMgW:before, + .c-dyvMgW > .c-dyvMgW:after { + display: none; + } + + .c-gNRHdp { + background: transparent; + border: none; + border-radius: var(--radii-round); + color: var(--colors-tonal900); + cursor: pointer; + font-family: var(--fonts-body); + font-size: var(--fontSizes-sm); + height: var(--sizes-3); + width: var(--sizes-3); + padding: 0; + transition: all 75ms; + } + + .c-gNRHdp:hover { + background: var(--colors-tonal100); + } + + .c-gNRHdp:active { + color: white; + background: var(--colors-primary); + } + + .c-gNRHdp:focus { + outline: 2px solid var(--colors-primary); + outline-offset: 2px; + } + + .c-fARQYB { + fill: white; + z-index: 1; + } + + [data-align="end"] .c-fARQYB { + margin-right: var(--sizes-2); + } + + [data-align="start"] .c-fARQYB { + margin-left: var(--sizes-2); + } + + .c-iKnjyA { + background: white; + border-radius: var(--radii-1); + box-shadow: var(--shadows-2); + max-width: 90vw; + padding: var(--sizes-2); + padding-right: var(--space-6); + position: relative; + z-index: 10; + } + +@media (prefers-reduced-motion: no-preference) { + .c-iKnjyA { + animation-duration: 75ms; + animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); + will-change: transform, opacity; + } +} + +@media (prefers-reduced-motion: no-preference) { + .c-iKnjyA[data-state="open"][data-side="top"] { + animation-name: k-ftcNPK; + } +} + +@media (prefers-reduced-motion: no-preference) { + .c-iKnjyA[data-state="open"][data-side="right"] { + animation-name: k-hbaHED; + } +} + +@media (prefers-reduced-motion: no-preference) { + .c-iKnjyA[data-state="open"][data-side="bottom"] { + animation-name: k-daNevH; + } +} + +@media (prefers-reduced-motion: no-preference) { + .c-iKnjyA[data-state="open"][data-side="left"] { + animation-name: k-fvyGIa; + } +} +} + +@media { + .c-fZTBsJ-fwoCmE-size-md { + height: var(--sizes-4); + font-size: var(--fontSizes-md); + line-height: 2; + } + + .c-fDzwZw-PrXKS-size-md { + height: var(--sizes-4); + width: var(--sizes-4); + } + + .c-dbrbZt-dMrjnF-size-md { + height: var(--sizes-2); + width: var(--sizes-2); + stroke-width: 1.75; + } + + .c-hVoQtf-gWQnqe-size-md { + max-width: 250px; + } + + .c-fkUJsw-elrwsr-size-md { + font-size: var(--fontSizes-md); + line-height: 1.5; + height: var(--sizes-4); + padding-left: var(--space-5); + padding-right: var(--space-5); + } + + .c-dyvMgW-bndJoy-size-sm { + font-size: var(--fontSizes-sm); + line-height: 1.53; + } + + .c-dyvMgW-bndJoy-size-sm::before { + content: ''; + margin-bottom: -0.4056em; + display: table; + } + + .c-dyvMgW-bndJoy-size-sm::after { + content: ''; + margin-top: -0.4056em; + display: table; + } + + .c-gNRHdp-huXVXM-isOutsideMonth-true { + color: var(--colors-tonal200); + } + + .c-gNRHdp-hztIub-isToday-true { + background: var(--colors-tonal100); + } + + .c-iKnjyA-kUaMfZ-size-md { + max-width: 400px; + } + + .c-gNRHdp-habrnX-isSelected-true { + background: var(--colors-primary); + color: white; + } + + .c-gNRHdp-habrnX-isSelected-true:hover { + background: var(--colors-primary); + } + + .c-fZTBsJ-jAZHIx-size-lg { + height: var(--sizes-5); + font-size: var(--fontSizes-md); + line-height: 2; + } +} + +@media { + .c-fDzwZw-otpKd-cv { + background: transparent; + color: var(--colors-tonal300); + } + + .c-fDzwZw-otpKd-cv:not(:disabled):hover, + .c-fDzwZw-otpKd-cv:not(:disabled):focus { + color: var(--colors-primaryMid); + } + + .c-fDzwZw-otpKd-cv:not(:disabled):active { + color: var(--colors-primaryDark); + } + + .c-fDzwZw-otpKd-cv[disabled] { + color: var(--colors-tonal400); + cursor: not-allowed; + } + + .c-fkUJsw-iRJCoR-cv { + background: white; + color: var(--colors-primary); + } + + .c-fkUJsw-iRJCoR-cv[disabled] { + background: var(--colors-tonal100); + color: var(--colors-tonal400); + cursor: not-allowed; + } + + .c-fkUJsw-iRJCoR-cv:not([disabled]):hover, + .c-fkUJsw-iRJCoR-cv:not([disabled]):focus { + background: rgba(255, 255, 255, 0.9); + color: var(--colors-primary); + } + + .c-fkUJsw-iRJCoR-cv:not([disabled]):active { + background: rgba(255, 255, 255, 0.75); + } +} + +@media { + .c-PJLV-icmpvrW-css { + position: relative; + } + + .c-fDzwZw-iewRRYK-css { + position: absolute; + top: 0; + right: 0; + } + + .c-PJLV-ijkIlaT-css { + position: relative; + width: min-content; + margin-top: calc(var(--space-1)*-1); + } + + .c-dhzjXW-ihOOvbW-css { + position: absolute; + top: 0; + right: calc(var(--space-1)*-1); + } + + .c-dhzjXW-iePfWBT-css { + height: var(--sizes-4); + align-items: center; + margin-bottom: var(--space-4); + } + + .c-fkUJsw-ikwYYXS-css { + padding-left: 0; + padding-right: 0; + color: var(--colors-tonal600); + } + + .c-fPxPMR-ihbtntv-css { + margin-bottom: var(--space-3); + } + + .c-dyvMgW-idQvJRf-css { + font-weight: 600; + text-align: center; + } + + .c-iKnjyA-ijdzfXb-css { + padding-right: var(--sizes-2); + z-index: 1147483646; + } + + .c-fDzwZw-ieTzcsO-css { + position: absolute; + top: 4px; + right: 0; + } +} + +
+
+ + +
+
+`; diff --git a/lib/src/components/input/Input.test.tsx b/lib/src/components/input/Input.test.tsx index caf5541ff..41bcc8c6f 100644 --- a/lib/src/components/input/Input.test.tsx +++ b/lib/src/components/input/Input.test.tsx @@ -62,4 +62,10 @@ describe(`Input component`, () => { expect(await axe(container)).toHaveNoViolations() }) + + it('renders lg size', async () => { + const { container } = render() + + expect(container).toMatchSnapshot() + }) }) diff --git a/lib/src/components/input/Input.tsx b/lib/src/components/input/Input.tsx index 55f434071..0275c57f9 100644 --- a/lib/src/components/input/Input.tsx +++ b/lib/src/components/input/Input.tsx @@ -40,6 +40,11 @@ const StyledInput = styled('input', { height: '$4', fontSize: '$md', lineHeight: 2 + }, + lg: { + height: '$5', + fontSize: '$md', + lineHeight: 2 } }, state: { diff --git a/lib/src/components/input/__snapshots__/Input.test.tsx.snap b/lib/src/components/input/__snapshots__/Input.test.tsx.snap index f2b6a912e..e8c6d413f 100644 --- a/lib/src/components/input/__snapshots__/Input.test.tsx.snap +++ b/lib/src/components/input/__snapshots__/Input.test.tsx.snap @@ -123,3 +123,69 @@ exports[`Input component renders a text input 1`] = ` /> `; + +exports[`Input component renders lg size 1`] = ` +@media { + .c-fZTBsJ { + -webkit-appearance: none; + appearance: none; + border: 1px solid var(--colors-tonal400); + border-radius: var(--radii-0); + box-shadow: none; + box-sizing: border-box; + color: var(--colors-tonal600); + cursor: text; + display: block; + font-family: var(--fonts-body); + padding-left: var(--space-3); + padding-right: var(--space-3); + transition: all 100ms ease-out; + width: 100%; + } + + .c-fZTBsJ:focus { + border-color: var(--colors-primary); + outline: none; + } + + .c-fZTBsJ[disabled] { + background-color: var(--colors-tonal100); + color: var(--colors-tonal400); + cursor: not-allowed; + } + + .c-fZTBsJ::placeholder { + color: var(--colors-tonal300); + opacity: 1; + } +} + +@media { + .c-fZTBsJ-fwoCmE-size-md { + height: var(--sizes-4); + font-size: var(--fontSizes-md); + line-height: 2; + } + + .c-fZTBsJ-jAZHIx-size-lg { + height: var(--sizes-5); + font-size: var(--fontSizes-md); + line-height: 2; + } +} + +@media { + .c-fZTBsJ-ikLAKdM-css { + margin: auto; + height: 100px; + width: 100px; + } +} + +
+ +
+`; diff --git a/lib/src/components/number-input-field/__snapshots__/NumberInputField.test.tsx.snap b/lib/src/components/number-input-field/__snapshots__/NumberInputField.test.tsx.snap index 68dce4926..7c45420a0 100644 --- a/lib/src/components/number-input-field/__snapshots__/NumberInputField.test.tsx.snap +++ b/lib/src/components/number-input-field/__snapshots__/NumberInputField.test.tsx.snap @@ -40,32 +40,33 @@ exports[`NumberInputField component renders a field in error state - has no prog vertical-align: middle; } - .c-fPoCzx { + .c-dWvLOH { border-color: var(--colors-tonal400) !important; z-index: 1; + height: 100% !important; } - .c-fPoCzx:hover { + .c-dWvLOH:hover { background: var(--colors-tonal50); } - .c-fPoCzx:hover svg { + .c-dWvLOH:hover svg { color: var(--colors-tonal400); } - .c-fPoCzx svg { + .c-dWvLOH svg { color: var(--colors-tonal300); } - .c-fPoCzx:active { + .c-dWvLOH:active { background: var(--colors-tonal100); } - .c-fPoCzx:active svg { + .c-dWvLOH:active svg { color: var(--colors-tonal500); } - .c-fPoCzx:disabled { + .c-dWvLOH:disabled { opacity: 0.3; pointer-events: none; } @@ -274,7 +275,7 @@ exports[`NumberInputField component renders a field in error state - has no prog margin-bottom: var(--space-3); } - .c-fPoCzx-iwWtoZ-css { + .c-dWvLOH-iwWtoZ-css { border-right: none; border-top-right-radius: 0px; border-bottom-right-radius: 0px; @@ -290,7 +291,7 @@ exports[`NumberInputField component renders a field in error state - has no prog pointer-events: none; } - .c-fPoCzx-ihgsOSq-css { + .c-dWvLOH-ihgsOSq-css { border-left: none; border-top-left-radius: 0px; border-bottom-left-radius: 0px; @@ -333,7 +334,7 @@ exports[`NumberInputField component renders a field in error state - has no prog > + + + + + + + +`; + exports[`NumberInput component renders number input 1`] = ` @media { .c-dhzjXW { @@ -34,32 +337,33 @@ exports[`NumberInput component renders number input 1`] = ` vertical-align: middle; } - .c-fPoCzx { + .c-dWvLOH { border-color: var(--colors-tonal400) !important; z-index: 1; + height: 100% !important; } - .c-fPoCzx:hover { + .c-dWvLOH:hover { background: var(--colors-tonal50); } - .c-fPoCzx:hover svg { + .c-dWvLOH:hover svg { color: var(--colors-tonal400); } - .c-fPoCzx svg { + .c-dWvLOH svg { color: var(--colors-tonal300); } - .c-fPoCzx:active { + .c-dWvLOH:active { background: var(--colors-tonal100); } - .c-fPoCzx:active svg { + .c-dWvLOH:active svg { color: var(--colors-tonal500); } - .c-fPoCzx:disabled { + .c-dWvLOH:disabled { opacity: 0.3; pointer-events: none; } @@ -193,7 +497,7 @@ exports[`NumberInput component renders number input 1`] = ` } @media { - .c-fPoCzx-iwWtoZ-css { + .c-dWvLOH-iwWtoZ-css { border-right: none; border-top-right-radius: 0px; border-bottom-right-radius: 0px; @@ -209,7 +513,7 @@ exports[`NumberInput component renders number input 1`] = ` pointer-events: none; } - .c-fPoCzx-ihgsOSq-css { + .c-dWvLOH-ihgsOSq-css { border-left: none; border-top-left-radius: 0px; border-bottom-left-radius: 0px; @@ -227,7 +531,7 @@ exports[`NumberInput component renders number input 1`] = ` > - - -`; - -exports[`DataTable component Renders drag handles for draggable table rows 1`] = ` -@media { - .c-cVSpVL { - color: var(--colors-tonal500); - font-family: var(--fonts-body); - margin: 0; - } - - .c-fZTBsJ { - -webkit-appearance: none; - appearance: none; - border: 1px solid var(--colors-tonal400); - border-radius: var(--radii-0); - box-shadow: none; - box-sizing: border-box; - color: var(--colors-tonal600); - cursor: text; - display: block; - font-family: var(--fonts-body); - padding-left: var(--space-3); - padding-right: var(--space-3); - transition: all 100ms ease-out; - width: 100%; - } - - .c-fZTBsJ:focus { - border-color: var(--colors-primary); - outline: none; - } - - .c-fZTBsJ[disabled] { - background-color: var(--colors-tonal100); - color: var(--colors-tonal400); - cursor: not-allowed; - } - - .c-fZTBsJ::placeholder { - color: var(--colors-tonal300); - opacity: 1; - } - - .c-cNcGUX::-webkit-search-decoration, - .c-cNcGUX::-webkit-search-cancel-button, - .c-cNcGUX::-webkit-search-results-button, - .c-cNcGUX input[type="search"]::-webkit-search-results-decoration { - display: none; - } - - .c-dbrbZt { - display: inline-block; - fill: none; - stroke: currentcolor; - stroke-linecap: round; - stroke-linejoin: round; - vertical-align: middle; - } - - .c-hvMhuR { - color: var(--colors-tonal300); - position: absolute; - pointer-events: none; - } - - .c-cwQMhQ { - border-collapse: separate; - border-spacing: 0; - font-family: var(--fonts-sans); - font-size: var(--fontSizes-sm); - width: 100%; - } - - .c-hjAYDb { - background: unset; - } - - .c-jhJxGZ { - color: white; - font-family: var(--fonts-body); - font-weight: 600; - line-height: 1.5; - text-align: left; - vertical-align: middle; - } - - .c-dhzjXW { - display: flex; - } - - .c-ihQtuj { - border-bottom: 1px solid var(--colors-tonal100); - box-sizing: border-box; - color: var(--colors-tonal400); - font-family: var(--fonts-body); - line-height: 1.5; - text-align: left; - vertical-align: middle; - } - - .c-ihQtuj:first-child { - font-weight: bold; - } - - .c-gyYKPo { - background: initial; - } - - .c-dcdOyh { - display: flex; - justify-content: space-between; - align-items: center; - font-variant-numeric: tabular-nums; - flex-wrap: wrap; - row-gap: var(--space-4); - } - - .c-dyvMgW { - font-family: var(--fonts-body); - font-weight: 400; - margin: 0; - } - - .c-dyvMgW > .c-dyvMgW:before, - .c-dyvMgW > .c-dyvMgW:after { - display: none; - } - - .c-beXZpM { - -webkit-appearance: none; - appearance: none; - background-color: white; - background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224px%22%20height%3D%2224px%22%20viewBox%3D%220%200%2024%2024%22%20stroke%3D%22%23757575%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20fill%3D%22none%22%20color%3D%22%23757575%22%3E%3Cpolyline%20points%3D%226%2010%2012%2016%2018%2010%22%2F%3E%3C%2Fsvg%3E); - background-repeat: no-repeat, repeat; - border: 1px solid var(--colors-tonal300); - border-radius: var(--radii-0); - color: var(--colors-tonal600); - display: block; - font-family: var(--fonts-body); - font-weight: 400; - line-height: 1.4; - transition: all 75ms ease-out; - width: 100%; - } - - .c-beXZpM:hover { - cursor: pointer; - } - - .c-beXZpM:focus { - border-color: var(--colors-primary); - outline: none; - } - - .c-beXZpM::-ms-expand { - display: none; - } - - .c-beXZpM[disabled], - .c-beXZpM > option[disabled] { - background-color: var(--colors-tonal100); - color: var(--colors-tonal400); - cursor: not-allowed; - } - - .c-fDzwZw { - align-items: center; - -webkit-appearance: none; - appearance: none; - background: white; - border: unset; - border-radius: var(--radii-0); - box-sizing: border-box; - cursor: pointer; - display: flex; - justify-content: center; - padding: unset; - transition: all 100ms ease-out; - } - - .c-hVoQtf { - background-color: var(--colors-tonal500); - border-radius: var(--radii-0); - box-shadow: var(--shadows-0); - color: white; - font-family: var(--fonts-body); - font-size: var(--fontSizes-sm); - line-height: 1.5; - white-space: normal; - padding-left: var(--space-3); - padding-right: var(--space-3); - padding-top: var(--space-2); - padding-bottom: var(--space-2); - z-index: 10; - } - -@media (prefers-reduced-motion: no-preference) { - .c-hVoQtf { - animation-duration: 75ms; - animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); - will-change: transform, opacity; - } -} - -@media (prefers-reduced-motion: no-preference) { - .c-hVoQtf[data-state="delayed-open"][data-side="top"] { - animation-name: k-ftcNPK; - } -} - -@media (prefers-reduced-motion: no-preference) { - .c-hVoQtf[data-state="delayed-open"][data-side="right"] { - animation-name: k-hbaHED; - } -} - -@media (prefers-reduced-motion: no-preference) { - .c-hVoQtf[data-state="delayed-open"][data-side="bottom"] { - animation-name: k-daNevH; - } -} - -@media (prefers-reduced-motion: no-preference) { - .c-hVoQtf[data-state="delayed-open"][data-side="left"] { - animation-name: k-fvyGIa; - } -} - - .c-ecNzKx { - color: inherit !important; - fill: currentColor; - } - - .c-ecNzKx[disabled] { - opacity: 0.3; - cursor: not-allowed; - } - - .c-ecNzKx[disabled] * { - pointer-events: none; - } -} - -@media { - .c-cVSpVL-gvmVBy-size-md { - font-size: var(--fontSizes-md); - line-height: 1.5; - } - - .c-cVSpVL-gvmVBy-size-md::before { - content: ''; - margin-bottom: -0.3864em; - display: table; - } - - .c-cVSpVL-gvmVBy-size-md::after { - content: ''; - margin-top: -0.3864em; - display: table; - } - - .c-cVSpVL-grKRUr-type-block { - display: block; - font-weight: 600; - } - - .c-fZTBsJ-fwoCmE-size-md { - height: var(--sizes-4); - font-size: var(--fontSizes-md); - line-height: 2; - } - - .c-dbrbZt-dMrjnF-size-md { - height: var(--sizes-2); - width: var(--sizes-2); - stroke-width: 1.75; - } - - .c-hvMhuR-OveXb-size-md { - top: 10px; - right: 10px; - height: 20px; - width: 20px; - } - - .c-cwQMhQ-urYIk-size-md .c-ihQtuj, - .c-cwQMhQ-urYIk-size-md .c-jhJxGZ, - .c-cwQMhQ-urYIk-size-md .c-jwhJBv { - height: var(--sizes-4); - padding: var(--space-1) var(--space-3); - } - - .c-cwQMhQ-fplEaP-corners-round .c-jhJxGZ:first-of-type { - border-top-left-radius: var(--radii-0); - } - - .c-cwQMhQ-fplEaP-corners-round .c-jhJxGZ:last-of-type { - border-top-right-radius: var(--radii-0); - } - - .c-cwQMhQ-fplEaP-corners-round .c-hjAYDb:last-child .c-ihQtuj:first-child { - border-bottom-left-radius: var(--radii-0); - } - - .c-cwQMhQ-fplEaP-corners-round .c-hjAYDb:last-child .c-ihQtuj:last-child { - border-bottom-right-radius: var(--radii-0); - } - - .c-PJLV-gJBDLb-theme-light .c-jhJxGZ { - background: var(--colors-tonal50); - color: var(--colors-tonal600); - } - - .c-PJLV-cevUCR-striped-false .c-hjAYDb { - background: white; - } - - .c-dyvMgW-bndJoy-size-sm { - font-size: var(--fontSizes-sm); - line-height: 1.53; - } - - .c-dyvMgW-bndJoy-size-sm::before { - content: ''; - margin-bottom: -0.4056em; - display: table; - } - - .c-dyvMgW-bndJoy-size-sm::after { - content: ''; - margin-top: -0.4056em; - display: table; - } - - .c-beXZpM-cGAtlD-size-sm { - background-position: right var(--space-2) top 50%, 0 0; - background-size: 18px auto, 100%; - font-size: var(--fontSizes-sm); - height: var(--sizes-3); - padding-left: var(--space-2); - padding-right: var(--space-5); - } - - .c-fDzwZw-PrXKS-size-md { - height: var(--sizes-4); - width: var(--sizes-4); - } - - .c-fDzwZw-rloUt-isRounded-true { - border-radius: var(--radii-round); - } - - .c-hVoQtf-gWQnqe-size-md { - max-width: 250px; - } - - .c-dbrbZt-cyeZeh-size-sm { - height: var(--sizes-1); - width: var(--sizes-1); - stroke-width: 1.5; - } - - .c-fDzwZw-elrktp-size-sm { - height: var(--sizes-3); - width: var(--sizes-3); - } - - .c-ecNzKx-kbKHjH-isDragging-false { - cursor: grab; - } -} - -@media { - .c-fDzwZw-jpgoGt-cv { - border: 1px solid; - border-color: currentColor; - color: var(--colors-primary); - } - - .c-fDzwZw-jpgoGt-cv:not(:disabled):hover, - .c-fDzwZw-jpgoGt-cv:not(:disabled):focus { - color: var(--colors-primaryMid); - } - - .c-fDzwZw-jpgoGt-cv:not(:disabled):active { - color: var(--colors-primaryDark); - } - - .c-fDzwZw-jpgoGt-cv[disabled] { - border-color: var(--colors-tonal400); - color: var(--colors-tonal400); - cursor: not-allowed; - } - - .c-fDzwZw-cmVfvW-cv { - background: transparent; - color: var(--colors-primary); - } - - .c-fDzwZw-cmVfvW-cv:not(:disabled):hover, - .c-fDzwZw-cmVfvW-cv:not(:disabled):focus { - color: var(--colors-primaryMid); - } - - .c-fDzwZw-cmVfvW-cv:not(:disabled):active { - color: var(--colors-primaryDark); - } - - .c-fDzwZw-cmVfvW-cv[disabled] { - color: var(--colors-tonal400); - cursor: not-allowed; - } -} - -@media { - .c-cVSpVL-ihbtntv-css { - margin-bottom: var(--space-3); - } - - .c-PJLV-ieyRoAv-css { - position: relative; - margin-bottom: var(--space-4); - } - - .c-cNcGUX-icRYcAH-css { - padding-right: var(--space-6); - } - - .c-hvMhuR-ihFPSGE-css { - height: 20px; - width: 20px; - } - - .c-cwQMhQ-illIiIE-css { - margin-bottom: var(--space-4); - } - - .c-jhJxGZ-ifYtQLP-css { - cursor: initial; - } - - .c-dhzjXW-ijroWjL-css { - align-items: center; - } - - .c-dyvMgW-iwvqwk-css { - padding-right: var(--space-4); - } - -@media (min-width: 550px) { - .c-dyvMgW-iwvqwk-css { - flex-basis: 50%; - } -} - - .c-dhzjXW-icVHJya-css { - justify-content: space-between; - width: 100%; - } - -@media (min-width: 550px) { - .c-dhzjXW-icVHJya-css { - flex-basis: 50%; - } -} - - .c-beXZpM-ihbpiMz-css { - margin-right: var(--space-3); - } - - .c-dyvMgW-igbZjeK-css { - flex: none; - } - - .c-fDzwZw-illEebI-css { - margin-right: var(--space-4); - } - - .c-jhJxGZ-igsmDXe-css { - cursor: pointer; - } - - .c-dhzjXW-iczouOI-css { - position: relative; - align-items: center; - } - - .c-dbrbZt-ifwENwN-css { - position: absolute; - left: var(--space-1); - } - - .c-ecNzKx-iAsWAM-css { - display: inline-block; - } -} - -@media { - .PJLV-iDuHyI-css { - --scale: 1; - transform: translateX(calc(var(--translate-x) * 1px)) translateY(calc(var(--translate-y) * 1px)) scale(var(--scale)); - z-index: ; - --translate-x: 0; - --translate-y: 0; - } - - .PJLV-iDuHyI-css[disabled] { - opacity: 0.3; - cursor: not-allowed; - } - - .PJLV-iDuHyI-css[disabled] * { - pointer-events: none; - } -} - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- id -
- 		-
- Name -
- 		-
- hobby -
- 		-
- Actions -
-
- - 1 - - chrissy - - bare-knuckle boxing - - -
- - 2 - - agatha - - crossfit - - -
- - 3 - - betty - - acting - - -
- - 4 - - denise - - bare-knuckle boxing - - -
- - 5 - - charlie - - crossfit - - -
- - 6 - - xena - - acting - - -
- - 7 - - rick - - bare-knuckle boxing - - -
- - 8 - - phillip - - crossfit - - -
- - 9 - - maurice - - acting - - -
- - 10 - - peter - - bare-knuckle boxing - - -
- - 11 - - velma - - crossfit - - -
- - 12 - - max - - acting - - -
- - 13 - - maxine - - bare-knuckle boxing - - -
- - 14 - - siobhan - - crossfit - - -
- - 15 - - nelly - - acting - - -
- - 16 - - kris - - bare-knuckle boxing - - -
- - 17 - - tony - - crossfit - - -
- - 18 - - tina - - acting - - -
- -
-
-`; - -exports[`DataTable component renders 1`] = ` -@media { - .c-cVSpVL { - color: var(--colors-tonal500); - font-family: var(--fonts-body); - margin: 0; - } - - .c-fZTBsJ { - -webkit-appearance: none; - appearance: none; - border: 1px solid var(--colors-tonal400); - border-radius: var(--radii-0); - box-shadow: none; - box-sizing: border-box; - color: var(--colors-tonal600); - cursor: text; - display: block; - font-family: var(--fonts-body); - padding-left: var(--space-3); - padding-right: var(--space-3); - transition: all 100ms ease-out; - width: 100%; - } - - .c-fZTBsJ:focus { - border-color: var(--colors-primary); - outline: none; - } - - .c-fZTBsJ[disabled] { - background-color: var(--colors-tonal100); - color: var(--colors-tonal400); - cursor: not-allowed; - } - - .c-fZTBsJ::placeholder { - color: var(--colors-tonal300); - opacity: 1; - } - - .c-cNcGUX::-webkit-search-decoration, - .c-cNcGUX::-webkit-search-cancel-button, - .c-cNcGUX::-webkit-search-results-button, - .c-cNcGUX input[type="search"]::-webkit-search-results-decoration { - display: none; - } - - .c-dbrbZt { - display: inline-block; - fill: none; - stroke: currentcolor; - stroke-linecap: round; - stroke-linejoin: round; - vertical-align: middle; - } - - .c-hvMhuR { - color: var(--colors-tonal300); - position: absolute; - pointer-events: none; - } - - .c-cwQMhQ { - border-collapse: separate; - border-spacing: 0; - font-family: var(--fonts-sans); - font-size: var(--fontSizes-sm); - width: 100%; - } - - .c-hjAYDb { - background: unset; - } - - .c-jhJxGZ { - color: white; - font-family: var(--fonts-body); - font-weight: 600; - line-height: 1.5; - text-align: left; - vertical-align: middle; - } - - .c-dhzjXW { - display: flex; - } - - .c-ihQtuj { - border-bottom: 1px solid var(--colors-tonal100); - box-sizing: border-box; - color: var(--colors-tonal400); - font-family: var(--fonts-body); - line-height: 1.5; - text-align: left; - vertical-align: middle; - } - - .c-ihQtuj:first-child { - font-weight: bold; - } - - .c-gyYKPo { - background: initial; - } - - .c-dcdOyh { - display: flex; - justify-content: space-between; - align-items: center; - font-variant-numeric: tabular-nums; - flex-wrap: wrap; - row-gap: var(--space-4); - } - - .c-dyvMgW { - font-family: var(--fonts-body); - font-weight: 400; - margin: 0; - } - - .c-dyvMgW > .c-dyvMgW:before, - .c-dyvMgW > .c-dyvMgW:after { - display: none; - } - - .c-beXZpM { - -webkit-appearance: none; - appearance: none; - background-color: white; - background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224px%22%20height%3D%2224px%22%20viewBox%3D%220%200%2024%2024%22%20stroke%3D%22%23757575%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20fill%3D%22none%22%20color%3D%22%23757575%22%3E%3Cpolyline%20points%3D%226%2010%2012%2016%2018%2010%22%2F%3E%3C%2Fsvg%3E); - background-repeat: no-repeat, repeat; - border: 1px solid var(--colors-tonal300); - border-radius: var(--radii-0); - color: var(--colors-tonal600); - display: block; - font-family: var(--fonts-body); - font-weight: 400; - line-height: 1.4; - transition: all 75ms ease-out; - width: 100%; - } - - .c-beXZpM:hover { - cursor: pointer; - } - - .c-beXZpM:focus { - border-color: var(--colors-primary); - outline: none; - } - - .c-beXZpM::-ms-expand { - display: none; - } - - .c-beXZpM[disabled], - .c-beXZpM > option[disabled] { - background-color: var(--colors-tonal100); - color: var(--colors-tonal400); - cursor: not-allowed; - } - - .c-fDzwZw { - align-items: center; - -webkit-appearance: none; - appearance: none; - background: white; - border: unset; - border-radius: var(--radii-0); - box-sizing: border-box; - cursor: pointer; - display: flex; - justify-content: center; - padding: unset; - transition: all 100ms ease-out; - } - - .c-hVoQtf { - background-color: var(--colors-tonal500); - border-radius: var(--radii-0); - box-shadow: var(--shadows-0); - color: white; - font-family: var(--fonts-body); - font-size: var(--fontSizes-sm); - line-height: 1.5; - white-space: normal; - padding-left: var(--space-3); - padding-right: var(--space-3); - padding-top: var(--space-2); - padding-bottom: var(--space-2); - z-index: 10; - } - -@media (prefers-reduced-motion: no-preference) { - .c-hVoQtf { - animation-duration: 75ms; - animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); - will-change: transform, opacity; - } -} - -@media (prefers-reduced-motion: no-preference) { - .c-hVoQtf[data-state="delayed-open"][data-side="top"] { - animation-name: k-ftcNPK; - } -} - -@media (prefers-reduced-motion: no-preference) { - .c-hVoQtf[data-state="delayed-open"][data-side="right"] { - animation-name: k-hbaHED; - } -} - -@media (prefers-reduced-motion: no-preference) { - .c-hVoQtf[data-state="delayed-open"][data-side="bottom"] { - animation-name: k-daNevH; - } -} - -@media (prefers-reduced-motion: no-preference) { - .c-hVoQtf[data-state="delayed-open"][data-side="left"] { - animation-name: k-fvyGIa; - } -} -} - -@media { - .c-cVSpVL-gvmVBy-size-md { - font-size: var(--fontSizes-md); - line-height: 1.5; - } - - .c-cVSpVL-gvmVBy-size-md::before { - content: ''; - margin-bottom: -0.3864em; - display: table; - } - - .c-cVSpVL-gvmVBy-size-md::after { - content: ''; - margin-top: -0.3864em; - display: table; - } - - .c-cVSpVL-grKRUr-type-block { - display: block; - font-weight: 600; - } - - .c-fZTBsJ-fwoCmE-size-md { - height: var(--sizes-4); - font-size: var(--fontSizes-md); - line-height: 2; - } - - .c-dbrbZt-dMrjnF-size-md { - height: var(--sizes-2); - width: var(--sizes-2); - stroke-width: 1.75; - } - - .c-hvMhuR-OveXb-size-md { - top: 10px; - right: 10px; - height: 20px; - width: 20px; - } - - .c-cwQMhQ-urYIk-size-md .c-ihQtuj, - .c-cwQMhQ-urYIk-size-md .c-jhJxGZ, - .c-cwQMhQ-urYIk-size-md .c-jwhJBv { - height: var(--sizes-4); - padding: var(--space-1) var(--space-3); - } - - .c-cwQMhQ-fplEaP-corners-round .c-jhJxGZ:first-of-type { - border-top-left-radius: var(--radii-0); - } - - .c-cwQMhQ-fplEaP-corners-round .c-jhJxGZ:last-of-type { - border-top-right-radius: var(--radii-0); - } - - .c-cwQMhQ-fplEaP-corners-round .c-hjAYDb:last-child .c-ihQtuj:first-child { - border-bottom-left-radius: var(--radii-0); - } - - .c-cwQMhQ-fplEaP-corners-round .c-hjAYDb:last-child .c-ihQtuj:last-child { - border-bottom-right-radius: var(--radii-0); - } - - .c-PJLV-gJBDLb-theme-light .c-jhJxGZ { - background: var(--colors-tonal50); - color: var(--colors-tonal600); - } - - .c-PJLV-cevUCR-striped-false .c-hjAYDb { - background: white; - } - - .c-dyvMgW-bndJoy-size-sm { - font-size: var(--fontSizes-sm); - line-height: 1.53; - } - - .c-dyvMgW-bndJoy-size-sm::before { - content: ''; - margin-bottom: -0.4056em; - display: table; - } - - .c-dyvMgW-bndJoy-size-sm::after { - content: ''; - margin-top: -0.4056em; - display: table; - } - - .c-beXZpM-cGAtlD-size-sm { - background-position: right var(--space-2) top 50%, 0 0; - background-size: 18px auto, 100%; - font-size: var(--fontSizes-sm); - height: var(--sizes-3); - padding-left: var(--space-2); - padding-right: var(--space-5); - } - - .c-fDzwZw-PrXKS-size-md { - height: var(--sizes-4); - width: var(--sizes-4); - } - - .c-fDzwZw-rloUt-isRounded-true { - border-radius: var(--radii-round); - } - - .c-hVoQtf-gWQnqe-size-md { - max-width: 250px; - } -} - -@media { - .c-fDzwZw-jpgoGt-cv { - border: 1px solid; - border-color: currentColor; - color: var(--colors-primary); - } - - .c-fDzwZw-jpgoGt-cv:not(:disabled):hover, - .c-fDzwZw-jpgoGt-cv:not(:disabled):focus { - color: var(--colors-primaryMid); - } - - .c-fDzwZw-jpgoGt-cv:not(:disabled):active { - color: var(--colors-primaryDark); - } - - .c-fDzwZw-jpgoGt-cv[disabled] { - border-color: var(--colors-tonal400); - color: var(--colors-tonal400); - cursor: not-allowed; - } -} - -@media { - .c-cVSpVL-ihbtntv-css { - margin-bottom: var(--space-3); - } - - .c-PJLV-ieyRoAv-css { - position: relative; - margin-bottom: var(--space-4); - } - - .c-cNcGUX-icRYcAH-css { - padding-right: var(--space-6); - } - - .c-hvMhuR-ihFPSGE-css { - height: 20px; - width: 20px; - } - - .c-cwQMhQ-illIiIE-css { - margin-bottom: var(--space-4); - } - - .c-jhJxGZ-ifYtQLP-css { - cursor: initial; - } - - .c-dhzjXW-ijroWjL-css { - align-items: center; - } - - .c-dyvMgW-iwvqwk-css { - padding-right: var(--space-4); - } - -@media (min-width: 550px) { - .c-dyvMgW-iwvqwk-css { - flex-basis: 50%; - } -} - - .c-dhzjXW-icVHJya-css { - justify-content: space-between; - width: 100%; - } - -@media (min-width: 550px) { - .c-dhzjXW-icVHJya-css { - flex-basis: 50%; - } -} - - .c-beXZpM-ihbpiMz-css { - margin-right: var(--space-3); - } - - .c-dyvMgW-igbZjeK-css { - flex: none; - } - - .c-fDzwZw-illEebI-css { - margin-right: var(--space-4); - } - - .c-jhJxGZ-igsmDXe-css { - cursor: pointer; - } -} - -
- -
- - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- id -
- 		-
- Name -
- 		-
- hobby -
- 		-
- Actions -
-
- 1 - - chrissy - - bare-knuckle boxing - - -
- 2 - - agatha - - crossfit - - -
- 3 - - betty - - acting - - -
- 4 - - denise - - bare-knuckle boxing - - -
- 5 - - charlie - - crossfit - - -
- 6 - - xena - - acting - - -
- 7 - - rick - - bare-knuckle boxing - - -
- 8 - - phillip - - crossfit - - -
- 9 - - maurice - - acting - - -
- 10 - - peter - - bare-knuckle boxing - - -
- -
-`; - -exports[`DataTable server-side renders 1`] = ` -@media { - .c-cVSpVL { - color: var(--colors-tonal500); - font-family: var(--fonts-body); - margin: 0; - } - - .c-fZTBsJ { - -webkit-appearance: none; - appearance: none; - border: 1px solid var(--colors-tonal400); - border-radius: var(--radii-0); - box-shadow: none; - box-sizing: border-box; - color: var(--colors-tonal600); - cursor: text; - display: block; - font-family: var(--fonts-body); - padding-left: var(--space-3); - padding-right: var(--space-3); - transition: all 100ms ease-out; - width: 100%; - } - - .c-fZTBsJ:focus { - border-color: var(--colors-primary); - outline: none; - } - - .c-fZTBsJ[disabled] { - background-color: var(--colors-tonal100); - color: var(--colors-tonal400); - cursor: not-allowed; - } - - .c-fZTBsJ::placeholder { - color: var(--colors-tonal300); - opacity: 1; - } - - .c-cNcGUX::-webkit-search-decoration, - .c-cNcGUX::-webkit-search-cancel-button, - .c-cNcGUX::-webkit-search-results-button, - .c-cNcGUX input[type="search"]::-webkit-search-results-decoration { - display: none; - } - - .c-dbrbZt { - display: inline-block; - fill: none; - stroke: currentcolor; - stroke-linecap: round; - stroke-linejoin: round; - vertical-align: middle; - } - - .c-hvMhuR { - color: var(--colors-tonal300); - position: absolute; - pointer-events: none; - } - - .c-cwQMhQ { - border-collapse: separate; - border-spacing: 0; - font-family: var(--fonts-sans); - font-size: var(--fontSizes-sm); - width: 100%; - } - - .c-hjAYDb { - background: unset; - } - - .c-jhJxGZ { - color: white; - font-family: var(--fonts-body); - font-weight: 600; - line-height: 1.5; - text-align: left; - vertical-align: middle; - } - - .c-dhzjXW { - display: flex; - } - - .c-ihQtuj { - border-bottom: 1px solid var(--colors-tonal100); - box-sizing: border-box; - color: var(--colors-tonal400); - font-family: var(--fonts-body); - line-height: 1.5; - text-align: left; - vertical-align: middle; - } - - .c-ihQtuj:first-child { - font-weight: bold; - } - - .c-gyYKPo { - background: initial; - } - - .c-dcdOyh { - display: flex; - justify-content: space-between; - align-items: center; - font-variant-numeric: tabular-nums; - flex-wrap: wrap; - row-gap: var(--space-4); - } - - .c-dyvMgW { - font-family: var(--fonts-body); - font-weight: 400; - margin: 0; - } - - .c-dyvMgW > .c-dyvMgW:before, - .c-dyvMgW > .c-dyvMgW:after { - display: none; - } - - .c-beXZpM { - -webkit-appearance: none; - appearance: none; - background-color: white; - background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224px%22%20height%3D%2224px%22%20viewBox%3D%220%200%2024%2024%22%20stroke%3D%22%23757575%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20fill%3D%22none%22%20color%3D%22%23757575%22%3E%3Cpolyline%20points%3D%226%2010%2012%2016%2018%2010%22%2F%3E%3C%2Fsvg%3E); - background-repeat: no-repeat, repeat; - border: 1px solid var(--colors-tonal300); - border-radius: var(--radii-0); - color: var(--colors-tonal600); - display: block; - font-family: var(--fonts-body); - font-weight: 400; - line-height: 1.4; - transition: all 75ms ease-out; - width: 100%; - } - - .c-beXZpM:hover { - cursor: pointer; - } - - .c-beXZpM:focus { - border-color: var(--colors-primary); - outline: none; - } - - .c-beXZpM::-ms-expand { - display: none; - } - - .c-beXZpM[disabled], - .c-beXZpM > option[disabled] { - background-color: var(--colors-tonal100); - color: var(--colors-tonal400); - cursor: not-allowed; - } - - .c-fDzwZw { - align-items: center; - -webkit-appearance: none; - appearance: none; - background: white; - border: unset; - border-radius: var(--radii-0); - box-sizing: border-box; - cursor: pointer; - display: flex; - justify-content: center; - padding: unset; - transition: all 100ms ease-out; - } - - .c-hVoQtf { - background-color: var(--colors-tonal500); - border-radius: var(--radii-0); - box-shadow: var(--shadows-0); - color: white; - font-family: var(--fonts-body); - font-size: var(--fontSizes-sm); - line-height: 1.5; - white-space: normal; - padding-left: var(--space-3); - padding-right: var(--space-3); - padding-top: var(--space-2); - padding-bottom: var(--space-2); - z-index: 10; - } - -@media (prefers-reduced-motion: no-preference) { - .c-hVoQtf { - animation-duration: 75ms; - animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); - will-change: transform, opacity; - } -} - -@media (prefers-reduced-motion: no-preference) { - .c-hVoQtf[data-state="delayed-open"][data-side="top"] { - animation-name: k-ftcNPK; - } -} - -@media (prefers-reduced-motion: no-preference) { - .c-hVoQtf[data-state="delayed-open"][data-side="right"] { - animation-name: k-hbaHED; - } -} - -@media (prefers-reduced-motion: no-preference) { - .c-hVoQtf[data-state="delayed-open"][data-side="bottom"] { - animation-name: k-daNevH; - } -} - -@media (prefers-reduced-motion: no-preference) { - .c-hVoQtf[data-state="delayed-open"][data-side="left"] { - animation-name: k-fvyGIa; - } -} - - .c-ecNzKx { - color: inherit !important; - fill: currentColor; - } - - .c-ecNzKx[disabled] { - opacity: 0.3; - cursor: not-allowed; - } - - .c-ecNzKx[disabled] * { - pointer-events: none; - } - - .c-jBOHFZ { - animation-name: k-gJNjLs; - animation-duration: 1s; - animation-fill-mode: both; - animation-iteration-count: infinite; - animation-timing-function: linear; - background-color: currentColor; - border-radius: var(--radii-round); - } - - .c-jBOHFZ:nth-child(1) { - animation-delay: -300ms; - } - - .c-jBOHFZ:nth-child(2) { - animation-delay: -150ms; - } - - .c-jBOHFZ:nth-child(3) { - animation-delay: 0; - } - - .c-deGxWL { - position: absolute; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); - z-index: 1; - } -} - -@media { - .c-cVSpVL-gvmVBy-size-md { - font-size: var(--fontSizes-md); - line-height: 1.5; - } - - .c-cVSpVL-gvmVBy-size-md::before { - content: ''; - margin-bottom: -0.3864em; - display: table; - } - - .c-cVSpVL-gvmVBy-size-md::after { - content: ''; - margin-top: -0.3864em; - display: table; - } - - .c-cVSpVL-grKRUr-type-block { - display: block; - font-weight: 600; - } - - .c-fZTBsJ-fwoCmE-size-md { - height: var(--sizes-4); - font-size: var(--fontSizes-md); - line-height: 2; - } - - .c-dbrbZt-dMrjnF-size-md { - height: var(--sizes-2); - width: var(--sizes-2); - stroke-width: 1.75; - } - - .c-hvMhuR-OveXb-size-md { - top: 10px; - right: 10px; - height: 20px; - width: 20px; - } - - .c-cwQMhQ-urYIk-size-md .c-ihQtuj, - .c-cwQMhQ-urYIk-size-md .c-jhJxGZ, - .c-cwQMhQ-urYIk-size-md .c-jwhJBv { - height: var(--sizes-4); - padding: var(--space-1) var(--space-3); - } - - .c-cwQMhQ-fplEaP-corners-round .c-jhJxGZ:first-of-type { - border-top-left-radius: var(--radii-0); - } - - .c-cwQMhQ-fplEaP-corners-round .c-jhJxGZ:last-of-type { - border-top-right-radius: var(--radii-0); - } - - .c-cwQMhQ-fplEaP-corners-round .c-hjAYDb:last-child .c-ihQtuj:first-child { - border-bottom-left-radius: var(--radii-0); - } - - .c-cwQMhQ-fplEaP-corners-round .c-hjAYDb:last-child .c-ihQtuj:last-child { - border-bottom-right-radius: var(--radii-0); - } - - .c-PJLV-gJBDLb-theme-light .c-jhJxGZ { - background: var(--colors-tonal50); - color: var(--colors-tonal600); - } - - .c-PJLV-cevUCR-striped-false .c-hjAYDb { - background: white; - } - - .c-dyvMgW-bndJoy-size-sm { - font-size: var(--fontSizes-sm); - line-height: 1.53; - } - - .c-dyvMgW-bndJoy-size-sm::before { - content: ''; - margin-bottom: -0.4056em; - display: table; - } - - .c-dyvMgW-bndJoy-size-sm::after { - content: ''; - margin-top: -0.4056em; - display: table; - } - - .c-beXZpM-cGAtlD-size-sm { - background-position: right var(--space-2) top 50%, 0 0; - background-size: 18px auto, 100%; - font-size: var(--fontSizes-sm); - height: var(--sizes-3); - padding-left: var(--space-2); - padding-right: var(--space-5); - } - - .c-fDzwZw-PrXKS-size-md { - height: var(--sizes-4); - width: var(--sizes-4); - } - - .c-fDzwZw-rloUt-isRounded-true { - border-radius: var(--radii-round); - } - - .c-hVoQtf-gWQnqe-size-md { - max-width: 250px; - } - - .c-dbrbZt-cyeZeh-size-sm { - height: var(--sizes-1); - width: var(--sizes-1); - stroke-width: 1.5; - } - - .c-fDzwZw-elrktp-size-sm { - height: var(--sizes-3); - width: var(--sizes-3); - } - - .c-ecNzKx-kbKHjH-isDragging-false { - cursor: grab; - } - - .c-jBOHFZ-jIYkAt-size-md { - height: 6px; - width: 6px; - margin-left: 2px; - margin-right: 2px; - } -} - -@media { - .c-fDzwZw-jpgoGt-cv { - border: 1px solid; - border-color: currentColor; - color: var(--colors-primary); - } - - .c-fDzwZw-jpgoGt-cv:not(:disabled):hover, - .c-fDzwZw-jpgoGt-cv:not(:disabled):focus { - color: var(--colors-primaryMid); - } - - .c-fDzwZw-jpgoGt-cv:not(:disabled):active { - color: var(--colors-primaryDark); - } - - .c-fDzwZw-jpgoGt-cv[disabled] { - border-color: var(--colors-tonal400); - color: var(--colors-tonal400); - cursor: not-allowed; - } - - .c-fDzwZw-cmVfvW-cv { - background: transparent; - color: var(--colors-primary); - } - - .c-fDzwZw-cmVfvW-cv:not(:disabled):hover, - .c-fDzwZw-cmVfvW-cv:not(:disabled):focus { - color: var(--colors-primaryMid); - } - - .c-fDzwZw-cmVfvW-cv:not(:disabled):active { - color: var(--colors-primaryDark); - } - - .c-fDzwZw-cmVfvW-cv[disabled] { - color: var(--colors-tonal400); - cursor: not-allowed; - } - - .c-fDzwZw-otpKd-cv { - background: transparent; - color: var(--colors-tonal300); - } - - .c-fDzwZw-otpKd-cv:not(:disabled):hover, - .c-fDzwZw-otpKd-cv:not(:disabled):focus { - color: var(--colors-primaryMid); - } - - .c-fDzwZw-otpKd-cv:not(:disabled):active { - color: var(--colors-primaryDark); - } - - .c-fDzwZw-otpKd-cv[disabled] { - color: var(--colors-tonal400); - cursor: not-allowed; - } -} - -@media { - .c-cVSpVL-ihbtntv-css { - margin-bottom: var(--space-3); - } - - .c-PJLV-ieyRoAv-css { - position: relative; - margin-bottom: var(--space-4); - } - - .c-cNcGUX-icRYcAH-css { - padding-right: var(--space-6); - } - - .c-hvMhuR-ihFPSGE-css { - height: 20px; - width: 20px; - } - - .c-cwQMhQ-illIiIE-css { - margin-bottom: var(--space-4); - } - - .c-jhJxGZ-ifYtQLP-css { - cursor: initial; - } - - .c-dhzjXW-ijroWjL-css { - align-items: center; - } - - .c-dyvMgW-iwvqwk-css { - padding-right: var(--space-4); - } - -@media (min-width: 550px) { - .c-dyvMgW-iwvqwk-css { - flex-basis: 50%; - } -} - - .c-dhzjXW-icVHJya-css { - justify-content: space-between; - width: 100%; - } - -@media (min-width: 550px) { - .c-dhzjXW-icVHJya-css { - flex-basis: 50%; - } -} - - .c-beXZpM-ihbpiMz-css { - margin-right: var(--space-3); - } - - .c-dyvMgW-igbZjeK-css { - flex: none; - } - - .c-fDzwZw-illEebI-css { - margin-right: var(--space-4); - } - - .c-jhJxGZ-igsmDXe-css { - cursor: pointer; - } - - .c-dhzjXW-iczouOI-css { - position: relative; - align-items: center; - } - - .c-dbrbZt-ifwENwN-css { - position: absolute; - left: var(--space-1); - } - - .c-ecNzKx-iAsWAM-css { - display: inline-block; - } - - .c-PJLV-icmpvrW-css { - position: relative; - } - - .c-fDzwZw-ifWWfIb-css { - position: absolute; - top: 0; - right: var(--space-1); - } - - .c-dhzjXW-ibICGYT-css { - justify-content: center; - } - - .c-cwQMhQ-igyXmJO-css { - margin-bottom: var(--space-4); - opacity: 0.5; - pointer-events: none; - transition: opacity 250ms linear 150ms; - } -} - -
-
+
`; -exports[`DataTable sticky columns renders 1`] = ` +exports[`DataTable component renders 1`] = ` @media { .c-cVSpVL { color: var(--colors-tonal500); @@ -4300,67 +1732,6 @@ exports[`DataTable sticky columns renders 1`] = ` animation-name: k-fvyGIa; } } - - .c-ecNzKx { - color: inherit !important; - fill: currentColor; - } - - .c-ecNzKx[disabled] { - opacity: 0.3; - cursor: not-allowed; - } - - .c-ecNzKx[disabled] * { - pointer-events: none; - } - - .c-jBOHFZ { - animation-name: k-gJNjLs; - animation-duration: 1s; - animation-fill-mode: both; - animation-iteration-count: infinite; - animation-timing-function: linear; - background-color: currentColor; - border-radius: var(--radii-round); - } - - .c-jBOHFZ:nth-child(1) { - animation-delay: -300ms; - } - - .c-jBOHFZ:nth-child(2) { - animation-delay: -150ms; - } - - .c-jBOHFZ:nth-child(3) { - animation-delay: 0; - } - - .c-deGxWL { - position: absolute; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); - z-index: 1; - } - - .c-fkUJsw { - align-items: center; - background: unset; - border: unset; - border-radius: var(--radii-0); - cursor: pointer; - display: flex; - font-family: var(--fonts-body); - font-weight: 600; - justify-content: center; - padding: unset; - text-decoration: none; - transition: all 100ms ease-out; - white-space: nowrap; - width: max-content; - } } @media { @@ -4398,8 +1769,7 @@ exports[`DataTable sticky columns renders 1`] = ` stroke-width: 1.75; } - .c-hvMhuR-OveXb-size-md { - top: 10px; + .c-hvMhuR-koUlob-size-md { right: 10px; height: 20px; width: 20px; @@ -4475,52 +1845,28 @@ exports[`DataTable sticky columns renders 1`] = ` .c-hVoQtf-gWQnqe-size-md { max-width: 250px; } +} - .c-dbrbZt-cyeZeh-size-sm { - height: var(--sizes-1); - width: var(--sizes-1); - stroke-width: 1.5; - } - - .c-fDzwZw-elrktp-size-sm { - height: var(--sizes-3); - width: var(--sizes-3); - } - - .c-ecNzKx-kbKHjH-isDragging-false { - cursor: grab; - } - - .c-jBOHFZ-jIYkAt-size-md { - height: 6px; - width: 6px; - margin-left: 2px; - margin-right: 2px; - } - - .c-dyvMgW-gvmVBy-size-md { - font-size: var(--fontSizes-md); - line-height: 1.5; +@media { + .c-fDzwZw-jpgoGt-cv { + border: 1px solid; + border-color: currentColor; + color: var(--colors-primary); } - .c-dyvMgW-gvmVBy-size-md::before { - content: ''; - margin-bottom: -0.3864em; - display: table; + .c-fDzwZw-jpgoGt-cv:not(:disabled):hover, + .c-fDzwZw-jpgoGt-cv:not(:disabled):focus { + color: var(--colors-primaryMid); } - .c-dyvMgW-gvmVBy-size-md::after { - content: ''; - margin-top: -0.3864em; - display: table; + .c-fDzwZw-jpgoGt-cv:not(:disabled):active { + color: var(--colors-primaryDark); } - - .c-fkUJsw-elrwsr-size-md { - font-size: var(--fontSizes-md); - line-height: 1.5; - height: var(--sizes-4); - padding-left: var(--space-5); - padding-right: var(--space-5); + + .c-fDzwZw-jpgoGt-cv[disabled] { + border-color: var(--colors-tonal400); + color: var(--colors-tonal400); + cursor: not-allowed; } } @@ -4529,8 +1875,9 @@ exports[`DataTable sticky columns renders 1`] = ` margin-bottom: var(--space-3); } - .c-PJLV-ieyRoAv-css { + .c-PJLV-ihDGYkC-css { position: relative; + height: max-content; margin-bottom: var(--space-4); } @@ -4538,9 +1885,11 @@ exports[`DataTable sticky columns renders 1`] = ` padding-right: var(--space-6); } - .c-hvMhuR-ihFPSGE-css { + .c-hvMhuR-icDTsBU-css { height: 20px; width: 20px; + top: 50%; + transform: translateY(-50%); } .c-cwQMhQ-illIiIE-css { @@ -4591,594 +1940,428 @@ exports[`DataTable sticky columns renders 1`] = ` .c-jhJxGZ-igsmDXe-css { cursor: pointer; } - - .c-dhzjXW-iczouOI-css { - position: relative; - align-items: center; - } - - .c-dbrbZt-ifwENwN-css { - position: absolute; - left: var(--space-1); - } - - .c-ecNzKx-iAsWAM-css { - display: inline-block; - } - - .c-PJLV-icmpvrW-css { - position: relative; - } - - .c-fDzwZw-ifWWfIb-css { - position: absolute; - top: 0; - right: var(--space-1); - } - - .c-dhzjXW-ibICGYT-css { - justify-content: center; - } - - .c-cwQMhQ-igyXmJO-css { - margin-bottom: var(--space-4); - opacity: 0.5; - pointer-events: none; - transition: opacity 250ms linear 150ms; - } - - .c-PJLV-iiXkAWq-css { - overflow: auto; - max-width: 100%; - } - - .c-PJLV-iiXkAWq-css td { - background: inherit; - } - - .c-PJLV-igbAmsf-css { - overflow: auto; - max-width: 100%; - } - - .c-PJLV-igbAmsf-css td:nth-of-type(1), - .c-PJLV-igbAmsf-css th:nth-of-type(1) { - position: sticky; - left: 0px; - min-width: 0px; - z-index: 2; - } - - .c-PJLV-igbAmsf-css td { - background: inherit; - } }
+
+ + +
+ -
+ + + + + + + + - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - + 6 + + - - - - - - + + + + - - - - - - - + - - - - - + - - - - - + - - - - - + do something + + + + + - - - - - + - - - - - + - - - - - + - - - - - + do something + + + + + - - - - - + - - - - - + - - - - - + - - - - - + do something + + + + + - - - - - + - - - - - + - - - - - + - - - - - + do something + + + + +
+
+ id +
+ 		+
+ Name +
+ 		+
+ hobby +
+ 		+
+ Actions +
+
+ 1 + + chrissy + + bare-knuckle boxing + + +
+ 2 + + agatha + + crossfit + + +
+ 3 + + betty + + acting + + +
+ 4 + + denise + + bare-knuckle boxing + + +
+ 5 + + charlie + + crossfit + + +
- -
- id -
- 		-
- Name -
- 		-
- hobby -
- 		-
- Actions -
-
+ acting + + +
- 1 - - chrissy - - bare-knuckle boxing - - -
- - 2 - - agatha - - crossfit - - -
- - 3 - - betty - - acting - - -
- - 4 - - denise - - bare-knuckle boxing - - -
- - 5 - - charlie - - crossfit - - -
- - 6 - - xena - - acting - - -
- - 7 - - rick - - bare-knuckle boxing - - -
- - 8 - - phillip - - crossfit - - -
- - 9 - - maurice - - acting - - -
- - 10 - - peter - - bare-knuckle boxing - - -
- - 11 - - velma - - crossfit - - -
- - 12 - - max - - acting - - -
- - 13 - - maxine - - bare-knuckle boxing - - -
- - 14 - - siobhan - - crossfit - - -
- - 15 - - nelly - - acting - - -
- - 16 - - kris - - bare-knuckle boxing - - -
+
+
`; diff --git a/lib/src/components/date-field/__snapshots__/DateField.test.tsx.snap b/lib/src/components/date-field/__snapshots__/DateField.test.tsx.snap index 4b0edf9a7..5fc447ba7 100644 --- a/lib/src/components/date-field/__snapshots__/DateField.test.tsx.snap +++ b/lib/src/components/date-field/__snapshots__/DateField.test.tsx.snap @@ -192,13 +192,15 @@ exports[`DateField component renders a field in error state 1`] = ` margin-bottom: var(--space-3); } - .c-PJLV-icmpvrW-css { + .c-PJLV-ieFlhpX-css { position: relative; + height: max-content; } - .c-fDzwZw-iewRRYK-css { + .c-fDzwZw-igEsmBj-css { position: absolute; - top: 0; + top: 50%; + transform: translateY(-50%); right: 0; } @@ -236,7 +238,7 @@ exports[`DateField component renders a field in error state 1`] = `
@@ -451,13 +453,15 @@ exports[`DateField component renders a field with a text input 1`] = ` margin-bottom: var(--space-3); } - .c-PJLV-icmpvrW-css { + .c-PJLV-ieFlhpX-css { position: relative; + height: max-content; } - .c-fDzwZw-iewRRYK-css { + .c-fDzwZw-igEsmBj-css { position: absolute; - top: 0; + top: 50%; + transform: translateY(-50%); right: 0; } } @@ -481,7 +485,7 @@ exports[`DateField component renders a field with a text input 1`] = `
diff --git a/lib/src/components/date-input/DateInput.tsx b/lib/src/components/date-input/DateInput.tsx index be17ecbc3..5f1567a83 100644 --- a/lib/src/components/date-input/DateInput.tsx +++ b/lib/src/components/date-input/DateInput.tsx @@ -62,7 +62,7 @@ export const DateInput = React.forwardRef( }, [date, onChange]) return ( - + (
@@ -501,13 +503,15 @@ exports[`DateInput component renders lg size 1`] = ` } @media { - .c-PJLV-icmpvrW-css { + .c-PJLV-ieFlhpX-css { position: relative; + height: max-content; } - .c-fDzwZw-iewRRYK-css { + .c-fDzwZw-igEsmBj-css { position: absolute; - top: 0; + top: 50%; + transform: translateY(-50%); right: 0; } @@ -548,17 +552,11 @@ exports[`DateInput component renders lg size 1`] = ` padding-right: var(--sizes-2); z-index: 1147483646; } - - .c-fDzwZw-ieTzcsO-css { - position: absolute; - top: 4px; - right: 0; - } }
diff --git a/lib/src/components/search-field/__snapshots__/SearchField.test.tsx.snap b/lib/src/components/search-field/__snapshots__/SearchField.test.tsx.snap index 5c11b287b..f70b524a1 100644 --- a/lib/src/components/search-field/__snapshots__/SearchField.test.tsx.snap +++ b/lib/src/components/search-field/__snapshots__/SearchField.test.tsx.snap @@ -125,8 +125,7 @@ exports[`SearchField component renders a field in error state - has no programma stroke-width: 1.75; } - .c-hvMhuR-OveXb-size-md { - top: 10px; + .c-hvMhuR-koUlob-size-md { right: 10px; height: 20px; width: 20px; @@ -171,17 +170,20 @@ exports[`SearchField component renders a field in error state - has no programma margin-bottom: var(--space-3); } - .c-PJLV-icmpvrW-css { + .c-PJLV-ieFlhpX-css { position: relative; + height: max-content; } .c-cNcGUX-icRYcAH-css { padding-right: var(--space-6); } - .c-hvMhuR-ihFPSGE-css { + .c-hvMhuR-icDTsBU-css { height: 20px; width: 20px; + top: 50%; + transform: translateY(-50%); } .c-dhzjXW-ijkHUQU-css { @@ -217,7 +219,7 @@ exports[`SearchField component renders a field in error state - has no programma