From fc9a7b04e15ce57c4bd276dbb9b20d6b62634f89 Mon Sep 17 00:00:00 2001 From: mia Date: Thu, 1 Feb 2024 21:14:28 +0900 Subject: [PATCH 1/2] fix: fix TextField error when responsive size prop passed --- .../src/lib/FieldLayout/FieldLayout.tsx | 23 +++++++++---------- .../src/lib/FieldLayout/FieldLayoutProps.ts | 12 +++++----- 2 files changed, 17 insertions(+), 18 deletions(-) diff --git a/packages/vibrant-components/src/lib/FieldLayout/FieldLayout.tsx b/packages/vibrant-components/src/lib/FieldLayout/FieldLayout.tsx index 85036975c..d502f70ef 100644 --- a/packages/vibrant-components/src/lib/FieldLayout/FieldLayout.tsx +++ b/packages/vibrant-components/src/lib/FieldLayout/FieldLayout.tsx @@ -1,7 +1,6 @@ import { Box, PressableBox, Text } from '@vibrant-ui/core'; import { Icon } from '@vibrant-ui/icons'; import { Transition } from '@vibrant-ui/motion'; -import { Body } from '../Body'; import { VStack } from '../VStack'; import { withFieldLayoutVariation } from './FieldLayoutProps'; @@ -34,8 +33,8 @@ export const FieldLayout = withFieldLayoutVariation( prefixText, suffixText, testId = 'field-layout', - bodyLevel, - helperTextBodyLevel, + typography, + helperTextTypography, helperTextSpacing, height, spacing, @@ -72,8 +71,8 @@ export const FieldLayout = withFieldLayoutVariation( - {prefixText} - + - {renderField({ height: height - 2, color: valueColor, pt, pl, pr, pb, typography: `body${bodyLevel}` })} + {renderField({ height: height - 2, color: valueColor, pt, pl, pr, pb, typography })} - {suffixText} - + {showClearButton && ( @@ -107,9 +106,9 @@ export const FieldLayout = withFieldLayoutVariation( {renderEnd?.()} {Boolean(helperText) && ( - + {helperText} - + )} ) diff --git a/packages/vibrant-components/src/lib/FieldLayout/FieldLayoutProps.ts b/packages/vibrant-components/src/lib/FieldLayout/FieldLayoutProps.ts index b74d63c12..f1d311005 100644 --- a/packages/vibrant-components/src/lib/FieldLayout/FieldLayoutProps.ts +++ b/packages/vibrant-components/src/lib/FieldLayout/FieldLayoutProps.ts @@ -43,8 +43,8 @@ export const withFieldLayoutVariation = withVariation('FieldLa variants: { lg: { height: 50, - bodyLevel: 2, - helperTextBodyLevel: 4, + typography: 'body2', + helperTextTypography: 'body4', helperTextSpacing: 4, px: 15, spacing: 12, @@ -53,8 +53,8 @@ export const withFieldLayoutVariation = withVariation('FieldLa }, md: { height: 38, - bodyLevel: 2, - helperTextBodyLevel: 4, + typography: 'body2', + helperTextTypography: 'body4', helperTextSpacing: 4, px: 9, spacing: 8, @@ -63,8 +63,8 @@ export const withFieldLayoutVariation = withVariation('FieldLa }, sm: { height: 30, - bodyLevel: 4, - helperTextBodyLevel: 5, + typography: 'body4', + helperTextTypography: 'body5', helperTextSpacing: 2, px: 7, spacing: 6, From fdb2c997d9fde4c460b8d27953ce91ce092aa74b Mon Sep 17 00:00:00 2001 From: mia Date: Fri, 2 Feb 2024 10:45:54 +0900 Subject: [PATCH 2/2] feat: update snapshot --- .../__snapshots__/PasswordField.spec.tsx.snap | 36 +++++++------------ .../TableSearchField.spec.tsx.snap | 12 +++---- .../__snapshots__/TableSearch.spec.tsx.snap | 12 +++---- .../__snapshots__/TextField.spec.tsx.snap | 36 +++++++------------ 4 files changed, 32 insertions(+), 64 deletions(-) diff --git a/packages/vibrant-components/src/lib/PasswordField/__snapshots__/PasswordField.spec.tsx.snap b/packages/vibrant-components/src/lib/PasswordField/__snapshots__/PasswordField.spec.tsx.snap index 79db41a4a..4c25a3176 100644 --- a/packages/vibrant-components/src/lib/PasswordField/__snapshots__/PasswordField.spec.tsx.snap +++ b/packages/vibrant-components/src/lib/PasswordField/__snapshots__/PasswordField.spec.tsx.snap @@ -168,6 +168,8 @@ exports[` when size is lg match snapshot 1`] = ` color: #5b5b5b; -webkit-text-fill-color: #5b5b5b; text-fill-color: #5b5b5b; + font-size: 0.875rem; + line-height: 1.125rem; display: none; -webkit-flex-shrink: 0; -ms-flex-negative: 0; @@ -175,9 +177,6 @@ exports[` when size is lg match snapshot 1`] = ` padding-top: 23px; padding-left: 15px; padding-bottom: 7px; - font-size: 0.875rem; - line-height: 1.125rem; - font-weight: 400; } .emotion-8 { @@ -236,6 +235,8 @@ exports[` when size is lg match snapshot 1`] = ` color: #5b5b5b; -webkit-text-fill-color: #5b5b5b; text-fill-color: #5b5b5b; + font-size: 0.875rem; + line-height: 1.125rem; display: none; -webkit-flex-shrink: 0; -ms-flex-negative: 0; @@ -243,9 +244,6 @@ exports[` when size is lg match snapshot 1`] = ` padding-top: 23px; padding-right: 12px; padding-bottom: 7px; - font-size: 0.875rem; - line-height: 1.125rem; - font-weight: 400; } .emotion-11 { @@ -336,7 +334,6 @@ exports[` when size is lg match snapshot 1`] = ` > when size is lg match snapshot 1`] = ` /> @@ -544,6 +540,8 @@ exports[` when size is md match snapshot 1`] = ` color: #5b5b5b; -webkit-text-fill-color: #5b5b5b; text-fill-color: #5b5b5b; + font-size: 0.875rem; + line-height: 1.125rem; display: none; -webkit-flex-shrink: 0; -ms-flex-negative: 0; @@ -551,9 +549,6 @@ exports[` when size is md match snapshot 1`] = ` padding-top: 15px; padding-left: 9px; padding-bottom: 3px; - font-size: 0.875rem; - line-height: 1.125rem; - font-weight: 400; } .emotion-8 { @@ -612,6 +607,8 @@ exports[` when size is md match snapshot 1`] = ` color: #5b5b5b; -webkit-text-fill-color: #5b5b5b; text-fill-color: #5b5b5b; + font-size: 0.875rem; + line-height: 1.125rem; display: none; -webkit-flex-shrink: 0; -ms-flex-negative: 0; @@ -619,9 +616,6 @@ exports[` when size is md match snapshot 1`] = ` padding-top: 15px; padding-right: 8px; padding-bottom: 3px; - font-size: 0.875rem; - line-height: 1.125rem; - font-weight: 400; } .emotion-11 { @@ -712,7 +706,6 @@ exports[` when size is md match snapshot 1`] = ` > when size is md match snapshot 1`] = ` /> @@ -920,6 +912,8 @@ exports[` when size is sm match snapshot 1`] = ` color: #5b5b5b; -webkit-text-fill-color: #5b5b5b; text-fill-color: #5b5b5b; + font-size: 0.75rem; + line-height: 1rem; display: none; -webkit-flex-shrink: 0; -ms-flex-negative: 0; @@ -927,9 +921,6 @@ exports[` when size is sm match snapshot 1`] = ` padding-top: 12px; padding-left: 7px; padding-bottom: 0; - font-size: 0.75rem; - line-height: 1rem; - font-weight: 400; } .emotion-8 { @@ -988,6 +979,8 @@ exports[` when size is sm match snapshot 1`] = ` color: #5b5b5b; -webkit-text-fill-color: #5b5b5b; text-fill-color: #5b5b5b; + font-size: 0.75rem; + line-height: 1rem; display: none; -webkit-flex-shrink: 0; -ms-flex-negative: 0; @@ -995,9 +988,6 @@ exports[` when size is sm match snapshot 1`] = ` padding-top: 12px; padding-right: 6px; padding-bottom: 0; - font-size: 0.75rem; - line-height: 1rem; - font-weight: 400; } .emotion-11 { @@ -1088,7 +1078,6 @@ exports[` when size is sm match snapshot 1`] = ` > when size is sm match snapshot 1`] = ` /> diff --git a/packages/vibrant-components/src/lib/TableSearch/TableSearchField/__snapshots__/TableSearchField.spec.tsx.snap b/packages/vibrant-components/src/lib/TableSearch/TableSearchField/__snapshots__/TableSearchField.spec.tsx.snap index 3e3f5017f..464b5f301 100644 --- a/packages/vibrant-components/src/lib/TableSearch/TableSearchField/__snapshots__/TableSearchField.spec.tsx.snap +++ b/packages/vibrant-components/src/lib/TableSearch/TableSearchField/__snapshots__/TableSearchField.spec.tsx.snap @@ -226,6 +226,8 @@ exports[` when maxWidth is default match snapshot 1`] = ` color: #5b5b5b; -webkit-text-fill-color: #5b5b5b; text-fill-color: #5b5b5b; + font-size: 0.875rem; + line-height: 1.125rem; display: none; -webkit-flex-shrink: 0; -ms-flex-negative: 0; @@ -233,9 +235,6 @@ exports[` when maxWidth is default match snapshot 1`] = ` padding-top: 9px; padding-left: 8px; padding-bottom: 9px; - font-size: 0.875rem; - line-height: 1.125rem; - font-weight: 400; } .emotion-11 { @@ -294,6 +293,8 @@ exports[` when maxWidth is default match snapshot 1`] = ` color: #5b5b5b; -webkit-text-fill-color: #5b5b5b; text-fill-color: #5b5b5b; + font-size: 0.875rem; + line-height: 1.125rem; display: none; -webkit-flex-shrink: 0; -ms-flex-negative: 0; @@ -301,9 +302,6 @@ exports[` when maxWidth is default match snapshot 1`] = ` padding-top: 9px; padding-right: 9px; padding-bottom: 9px; - font-size: 0.875rem; - line-height: 1.125rem; - font-weight: 400; }
@@ -349,7 +347,6 @@ exports[` when maxWidth is default match snapshot 1`] = ` > when maxWidth is default match snapshot 1`] = ` />
diff --git a/packages/vibrant-components/src/lib/TableSearch/__snapshots__/TableSearch.spec.tsx.snap b/packages/vibrant-components/src/lib/TableSearch/__snapshots__/TableSearch.spec.tsx.snap index 1c7276cda..db687f385 100644 --- a/packages/vibrant-components/src/lib/TableSearch/__snapshots__/TableSearch.spec.tsx.snap +++ b/packages/vibrant-components/src/lib/TableSearch/__snapshots__/TableSearch.spec.tsx.snap @@ -253,6 +253,8 @@ exports[` when component is rendering match snapshot 1`] = ` color: #5b5b5b; -webkit-text-fill-color: #5b5b5b; text-fill-color: #5b5b5b; + font-size: 0.875rem; + line-height: 1.125rem; display: none; -webkit-flex-shrink: 0; -ms-flex-negative: 0; @@ -260,9 +262,6 @@ exports[` when component is rendering match snapshot 1`] = ` padding-top: 9px; padding-left: 8px; padding-bottom: 9px; - font-size: 0.875rem; - line-height: 1.125rem; - font-weight: 400; } .emotion-12 { @@ -321,6 +320,8 @@ exports[` when component is rendering match snapshot 1`] = ` color: #5b5b5b; -webkit-text-fill-color: #5b5b5b; text-fill-color: #5b5b5b; + font-size: 0.875rem; + line-height: 1.125rem; display: none; -webkit-flex-shrink: 0; -ms-flex-negative: 0; @@ -328,9 +329,6 @@ exports[` when component is rendering match snapshot 1`] = ` padding-top: 9px; padding-right: 9px; padding-bottom: 9px; - font-size: 0.875rem; - line-height: 1.125rem; - font-weight: 400; } .emotion-15 { @@ -539,7 +537,6 @@ exports[` when component is rendering match snapshot 1`] = ` > when component is rendering match snapshot 1`] = ` /> diff --git a/packages/vibrant-components/src/lib/TextField/__snapshots__/TextField.spec.tsx.snap b/packages/vibrant-components/src/lib/TextField/__snapshots__/TextField.spec.tsx.snap index 943e4aee3..4f4919b2a 100644 --- a/packages/vibrant-components/src/lib/TextField/__snapshots__/TextField.spec.tsx.snap +++ b/packages/vibrant-components/src/lib/TextField/__snapshots__/TextField.spec.tsx.snap @@ -168,6 +168,8 @@ exports[` when size is lg match snapshot 1`] = ` color: #5b5b5b; -webkit-text-fill-color: #5b5b5b; text-fill-color: #5b5b5b; + font-size: 0.875rem; + line-height: 1.125rem; display: none; -webkit-flex-shrink: 0; -ms-flex-negative: 0; @@ -175,9 +177,6 @@ exports[` when size is lg match snapshot 1`] = ` padding-top: 23px; padding-left: 15px; padding-bottom: 7px; - font-size: 0.875rem; - line-height: 1.125rem; - font-weight: 400; } .emotion-8 { @@ -236,6 +235,8 @@ exports[` when size is lg match snapshot 1`] = ` color: #5b5b5b; -webkit-text-fill-color: #5b5b5b; text-fill-color: #5b5b5b; + font-size: 0.875rem; + line-height: 1.125rem; display: none; -webkit-flex-shrink: 0; -ms-flex-negative: 0; @@ -243,9 +244,6 @@ exports[` when size is lg match snapshot 1`] = ` padding-top: 23px; padding-right: 15px; padding-bottom: 7px; - font-size: 0.875rem; - line-height: 1.125rem; - font-weight: 400; }
@@ -278,7 +276,6 @@ exports[` when size is lg match snapshot 1`] = ` > when size is lg match snapshot 1`] = ` />
@@ -471,6 +467,8 @@ exports[` when size is md match snapshot 1`] = ` color: #5b5b5b; -webkit-text-fill-color: #5b5b5b; text-fill-color: #5b5b5b; + font-size: 0.875rem; + line-height: 1.125rem; display: none; -webkit-flex-shrink: 0; -ms-flex-negative: 0; @@ -478,9 +476,6 @@ exports[` when size is md match snapshot 1`] = ` padding-top: 15px; padding-left: 9px; padding-bottom: 3px; - font-size: 0.875rem; - line-height: 1.125rem; - font-weight: 400; } .emotion-8 { @@ -539,6 +534,8 @@ exports[` when size is md match snapshot 1`] = ` color: #5b5b5b; -webkit-text-fill-color: #5b5b5b; text-fill-color: #5b5b5b; + font-size: 0.875rem; + line-height: 1.125rem; display: none; -webkit-flex-shrink: 0; -ms-flex-negative: 0; @@ -546,9 +543,6 @@ exports[` when size is md match snapshot 1`] = ` padding-top: 15px; padding-right: 9px; padding-bottom: 3px; - font-size: 0.875rem; - line-height: 1.125rem; - font-weight: 400; }
@@ -581,7 +575,6 @@ exports[` when size is md match snapshot 1`] = ` > when size is md match snapshot 1`] = ` />
@@ -774,6 +766,8 @@ exports[` when size is sm match snapshot 1`] = ` color: #5b5b5b; -webkit-text-fill-color: #5b5b5b; text-fill-color: #5b5b5b; + font-size: 0.75rem; + line-height: 1rem; display: none; -webkit-flex-shrink: 0; -ms-flex-negative: 0; @@ -781,9 +775,6 @@ exports[` when size is sm match snapshot 1`] = ` padding-top: 12px; padding-left: 7px; padding-bottom: 0; - font-size: 0.75rem; - line-height: 1rem; - font-weight: 400; } .emotion-8 { @@ -842,6 +833,8 @@ exports[` when size is sm match snapshot 1`] = ` color: #5b5b5b; -webkit-text-fill-color: #5b5b5b; text-fill-color: #5b5b5b; + font-size: 0.75rem; + line-height: 1rem; display: none; -webkit-flex-shrink: 0; -ms-flex-negative: 0; @@ -849,9 +842,6 @@ exports[` when size is sm match snapshot 1`] = ` padding-top: 12px; padding-right: 7px; padding-bottom: 0; - font-size: 0.75rem; - line-height: 1rem; - font-weight: 400; }
@@ -884,7 +874,6 @@ exports[` when size is sm match snapshot 1`] = ` > when size is sm match snapshot 1`] = ` />