Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: fix TextField error when responsive size prop passed #936

Merged
merged 2 commits into from
Feb 2, 2024
+49 −82
Merged

fix: fix TextField error when responsive size prop passed #936

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fc9a7b0
fix: fix TextField error when responsive size prop passed
Feb 1, 2024
fdb2c99
feat: update snapshot
Feb 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 11 additions & 12 deletions packages/vibrant-components/src/lib/FieldLayout/FieldLayout.tsx
View file
Original file line number Diff line number Diff line change
@@ -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(
</Transition>
</PressableBox>
<Box flexDirection="row" alignItems="baseline">
<Body
level={bodyLevel}
<Text
typography={typography}
color="onView2"
hidden={!prefixText || (!shrink && Boolean(label))}
flexShrink={0}
@@ -82,12 +81,12 @@ export const FieldLayout = withFieldLayoutVariation(
pb={pb}
>
{prefixText}
</Body>
</Text>

{renderField({ height: height - 2, color: valueColor, pt, pl, pr, pb, typography: `body${bodyLevel}` })}
{renderField({ height: height - 2, color: valueColor, pt, pl, pr, pb, typography })}

<Body
level={bodyLevel}
<Text
typography={typography}
color="onView2"
hidden={!suffixText || (!shrink && Boolean(label))}
flexShrink={0}
@@ -96,7 +95,7 @@ export const FieldLayout = withFieldLayoutVariation(
pb={pb}
>
{suffixText}
</Body>
</Text>
</Box>
</Box>
{showClearButton && (
@@ -107,9 +106,9 @@ export const FieldLayout = withFieldLayoutVariation(
<VStack flexShrink={0}>{renderEnd?.()}</VStack>
</Box>
{Boolean(helperText) && (
<Body level={helperTextBodyLevel} color={helperTextColor}>
<Text typography={helperTextTypography} color={helperTextColor}>
{helperText}
</Body>
</Text>
)}
</VStack>
)
12 changes: 6 additions & 6 deletions packages/vibrant-components/src/lib/FieldLayout/FieldLayoutProps.ts
View file
Original file line number Diff line number Diff line change
@@ -43,8 +43,8 @@ export const withFieldLayoutVariation = withVariation<FieldLayoutProps>('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<FieldLayoutProps>('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<FieldLayoutProps>('FieldLa
},
sm: {
height: 30,
bodyLevel: 4,
helperTextBodyLevel: 5,
typography: 'body4',
helperTextTypography: 'body5',
helperTextSpacing: 2,
px: 7,
spacing: 6,

Unchanged files with check annotations Beta

View file
packages/vibrant-components/src/lib/TableSearch/TableSearch.spec.tsx
});
it('match snapshot', () => {
expect(renderer.container).toMatchSnapshot();

Check failure on line 38 in packages/vibrant-components/src/lib/TableSearch/TableSearch.spec.tsx

GitHub Actions / ci

<TableSearch /> › when component is rendering › match snapshot 

expect(received).toMatchSnapshot()

Snapshot name: `<TableSearch /> when component is rendering match snapshot 1`

- Snapshot  - 8
+ Received  + 4

@@ -248,20 +248,19 @@
  .emotion-11 {
    text-align: left;
    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;
    flex-shrink: 0;
    padding-top: 9px;
    padding-left: 8px;
    padding-bottom: 9px;
-   font-size: 0.875rem;
-   line-height: 1.125rem;
-   font-weight: 400;
  }

  .emotion-12 {
    display: -webkit-box;
    display: -webkit-flex;
@@ -316,20 +315,19 @@
  .emotion-13 {
    text-align: left;
    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;
    flex-shrink: 0;
    padding-top: 9px;
    padding-right: 9px;
    padding-bottom: 9px;
-   font-size: 0.875rem;
-   line-height: 1.125rem;
-   font-weight: 400;
  }

  .emotion-15 {
    display: -webkit-box;
    display: -webkit-flex;
@@ -534,11 +532,10 @@
              <div
                class="emotion-10"
              >
                <span
                  class="emotion-11"
-                 data-testid="body"
                />
                <input
                  autocapitalize="none"
                  autocomplete="off"
                  class="emotion-12"
@@ -546,11 +543,10 @@
                  type="search"
                  value=""
                />
                <span
                  class="emotion-13"
-                 data-testid="body"
                />
              </div>
            </div>
            <div
              class="emotion-4"

    at Object.<anonymous> (src/lib/TableSearch/TableSearch.spec.tsx:38:34)
    at runTestInternal (../../node_modules/@kayahr/jest-electron-runner/src/main/electron/runTest.ts:231:22)
    at runTest (../../node_modules/@kayahr/jest-electron-runner/src/main/electron/runTest.ts:309:38)
    at EventEmitter.<anonymous> (../../file:/home/runner/work/opensource/opensource/node_modules/@kayahr/jest-electron-runner/src/main/electron/browser_window_injected_code.ts:33:28)
});
});
View file
packages/vibrant-components/src/lib/PasswordField/PasswordField.spec.tsx
});
it('match snapshot', () => {
expect(renderer.container).toMatchSnapshot();

Check failure on line 16 in packages/vibrant-components/src/lib/PasswordField/PasswordField.spec.tsx

GitHub Actions / ci

<PasswordField /> › when size is lg › match snapshot 

expect(received).toMatchSnapshot()

Snapshot name: `<PasswordField /> when size is lg match snapshot 1`

- Snapshot  - 8
+ Received  + 4

@@ -163,20 +163,19 @@
  .emotion-7 {
    text-align: left;
    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;
    flex-shrink: 0;
    padding-top: 23px;
    padding-left: 15px;
    padding-bottom: 7px;
-   font-size: 0.875rem;
-   line-height: 1.125rem;
-   font-weight: 400;
  }

  .emotion-8 {
    display: -webkit-box;
    display: -webkit-flex;
@@ -231,20 +230,19 @@
  .emotion-9 {
    text-align: left;
    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;
    flex-shrink: 0;
    padding-top: 23px;
    padding-right: 12px;
    padding-bottom: 7px;
-   font-size: 0.875rem;
-   line-height: 1.125rem;
-   font-weight: 400;
  }

  .emotion-11 {
    display: -webkit-box;
    display: -webkit-flex;
@@ -331,11 +329,10 @@
          <div
            class="emotion-6"
          >
            <span
              class="emotion-7"
-             data-testid="body"
            />
            <input
              autocomplete="current-password"
              class="emotion-8"
              inputmode="text"
@@ -343,11 +340,10 @@
              type="password"
              value=""
            />
            <span
              class="emotion-9"
-             data-testid="body"
            />
          </div>
        </div>
        <div
          class="emotion-2"

    at Object.<anonymous> (src/lib/PasswordField/PasswordField.spec.tsx:16:34)
    at runTestInternal (../../node_modules/@kayahr/jest-electron-runner/src/main/electron/runTest.ts:231:22)
    at runTest (../../node_modules/@kayahr/jest-electron-runner/src/main/electron/runTest.ts:309:38)
    at EventEmitter.<anonymous> (../../file:/home/runner/work/opensource/opensource/node_modules/@kayahr/jest-electron-runner/src/main/electron/browser_window_injected_code.ts:33:28)
});
});
});
it('match snapshot', () => {
expect(renderer.container).toMatchSnapshot();

Check failure on line 26 in packages/vibrant-components/src/lib/PasswordField/PasswordField.spec.tsx

GitHub Actions / ci

<PasswordField /> › when size is md › match snapshot 

expect(received).toMatchSnapshot()

Snapshot name: `<PasswordField /> when size is md match snapshot 1`

- Snapshot  - 8
+ Received  + 4

@@ -163,20 +163,19 @@
  .emotion-7 {
    text-align: left;
    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;
    flex-shrink: 0;
    padding-top: 15px;
    padding-left: 9px;
    padding-bottom: 3px;
-   font-size: 0.875rem;
-   line-height: 1.125rem;
-   font-weight: 400;
  }

  .emotion-8 {
    display: -webkit-box;
    display: -webkit-flex;
@@ -231,20 +230,19 @@
  .emotion-9 {
    text-align: left;
    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;
    flex-shrink: 0;
    padding-top: 15px;
    padding-right: 8px;
    padding-bottom: 3px;
-   font-size: 0.875rem;
-   line-height: 1.125rem;
-   font-weight: 400;
  }

  .emotion-11 {
    display: -webkit-box;
    display: -webkit-flex;
@@ -331,11 +329,10 @@
          <div
            class="emotion-6"
          >
            <span
              class="emotion-7"
-             data-testid="body"
            />
            <input
              autocomplete="current-password"
              class="emotion-8"
              inputmode="text"
@@ -343,11 +340,10 @@
              type="password"
              value=""
            />
            <span
              class="emotion-9"
-             data-testid="body"
            />
          </div>
        </div>
        <div
          class="emotion-2"

    at Object.<anonymous> (src/lib/PasswordField/PasswordField.spec.tsx:26:34)
    at runTestInternal (../../node_modules/@kayahr/jest-electron-runner/src/main/electron/runTest.ts:231:22)
    at runTest (../../node_modules/@kayahr/jest-electron-runner/src/main/electron/runTest.ts:309:38)
    at EventEmitter.<anonymous> (../../file:/home/runner/work/opensource/opensource/node_modules/@kayahr/jest-electron-runner/src/main/electron/browser_window_injected_code.ts:33:28)
});
});
});
it('match snapshot', () => {
expect(renderer.container).toMatchSnapshot();

Check failure on line 36 in packages/vibrant-components/src/lib/PasswordField/PasswordField.spec.tsx

GitHub Actions / ci

<PasswordField /> › when size is sm › match snapshot 

expect(received).toMatchSnapshot()

Snapshot name: `<PasswordField /> when size is sm match snapshot 1`

- Snapshot  - 8
+ Received  + 4

@@ -163,20 +163,19 @@
  .emotion-7 {
    text-align: left;
    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;
    flex-shrink: 0;
    padding-top: 12px;
    padding-left: 7px;
    padding-bottom: 0;
-   font-size: 0.75rem;
-   line-height: 1rem;
-   font-weight: 400;
  }

  .emotion-8 {
    display: -webkit-box;
    display: -webkit-flex;
@@ -231,20 +230,19 @@
  .emotion-9 {
    text-align: left;
    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;
    flex-shrink: 0;
    padding-top: 12px;
    padding-right: 6px;
    padding-bottom: 0;
-   font-size: 0.75rem;
-   line-height: 1rem;
-   font-weight: 400;
  }

  .emotion-11 {
    display: -webkit-box;
    display: -webkit-flex;
@@ -331,11 +329,10 @@
          <div
            class="emotion-6"
          >
            <span
              class="emotion-7"
-             data-testid="body"
            />
            <input
              autocomplete="current-password"
              class="emotion-8"
              inputmode="text"
@@ -343,11 +340,10 @@
              type="password"
              value=""
            />
            <span
              class="emotion-9"
-             data-testid="body"
            />
          </div>
        </div>
        <div
          class="emotion-2"

    at Object.<anonymous> (src/lib/PasswordField/PasswordField.spec.tsx:36:34)
    at runTestInternal (../../node_modules/@kayahr/jest-electron-runner/src/main/electron/runTest.ts:231:22)
    at runTest (../../node_modules/@kayahr/jest-electron-runner/src/main/electron/runTest.ts:309:38)
    at EventEmitter.<anonymous> (../../file:/home/runner/work/opensource/opensource/node_modules/@kayahr/jest-electron-runner/src/main/electron/browser_window_injected_code.ts:33:28)
});
});
});
View file
packages/vibrant-components/src/lib/TextField/TextField.spec.tsx
});
it('match snapshot', () => {
expect(renderer.container).toMatchSnapshot();

Check failure on line 16 in packages/vibrant-components/src/lib/TextField/TextField.spec.tsx

GitHub Actions / ci

<TextField /> › when size is lg › match snapshot 

expect(received).toMatchSnapshot()

Snapshot name: `<TextField /> when size is lg match snapshot 1`

- Snapshot  - 8
+ Received  + 4

@@ -163,20 +163,19 @@
  .emotion-7 {
    text-align: left;
    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;
    flex-shrink: 0;
    padding-top: 23px;
    padding-left: 15px;
    padding-bottom: 7px;
-   font-size: 0.875rem;
-   line-height: 1.125rem;
-   font-weight: 400;
  }

  .emotion-8 {
    display: -webkit-box;
    display: -webkit-flex;
@@ -231,20 +230,19 @@
  .emotion-9 {
    text-align: left;
    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;
    flex-shrink: 0;
    padding-top: 23px;
    padding-right: 15px;
    padding-bottom: 7px;
-   font-size: 0.875rem;
-   line-height: 1.125rem;
-   font-weight: 400;
  }

  <div>
    <div
      class="emotion-0"
@@ -273,11 +271,10 @@
          <div
            class="emotion-6"
          >
            <span
              class="emotion-7"
-             data-testid="body"
            />
            <input
              autocapitalize="none"
              autocomplete="off"
              class="emotion-8"
@@ -286,11 +283,10 @@
              type="text"
              value=""
            />
            <span
              class="emotion-9"
-             data-testid="body"
            />
          </div>
        </div>
        <div
          class="emotion-2"

    at Object.<anonymous> (src/lib/TextField/TextField.spec.tsx:16:34)
    at runTestInternal (../../node_modules/@kayahr/jest-electron-runner/src/main/electron/runTest.ts:231:22)
    at runTest (../../node_modules/@kayahr/jest-electron-runner/src/main/electron/runTest.ts:309:38)
    at EventEmitter.<anonymous> (../../file:/home/runner/work/opensource/opensource/node_modules/@kayahr/jest-electron-runner/src/main/electron/browser_window_injected_code.ts:33:28)
});
});
});
it('match snapshot', () => {
expect(renderer.container).toMatchSnapshot();

Check failure on line 26 in packages/vibrant-components/src/lib/TextField/TextField.spec.tsx

GitHub Actions / ci

<TextField /> › when size is md › match snapshot 

expect(received).toMatchSnapshot()

Snapshot name: `<TextField /> when size is md match snapshot 1`

- Snapshot  - 8
+ Received  + 4

@@ -163,20 +163,19 @@
  .emotion-7 {
    text-align: left;
    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;
    flex-shrink: 0;
    padding-top: 15px;
    padding-left: 9px;
    padding-bottom: 3px;
-   font-size: 0.875rem;
-   line-height: 1.125rem;
-   font-weight: 400;
  }

  .emotion-8 {
    display: -webkit-box;
    display: -webkit-flex;
@@ -231,20 +230,19 @@
  .emotion-9 {
    text-align: left;
    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;
    flex-shrink: 0;
    padding-top: 15px;
    padding-right: 9px;
    padding-bottom: 3px;
-   font-size: 0.875rem;
-   line-height: 1.125rem;
-   font-weight: 400;
  }

  <div>
    <div
      class="emotion-0"
@@ -273,11 +271,10 @@
          <div
            class="emotion-6"
          >
            <span
              class="emotion-7"
-             data-testid="body"
            />
            <input
              autocapitalize="none"
              autocomplete="off"
              class="emotion-8"
@@ -286,11 +283,10 @@
              type="text"
              value=""
            />
            <span
              class="emotion-9"
-             data-testid="body"
            />
          </div>
        </div>
        <div
          class="emotion-2"

    at Object.<anonymous> (src/lib/TextField/TextField.spec.tsx:26:34)
    at runTestInternal (../../node_modules/@kayahr/jest-electron-runner/src/main/electron/runTest.ts:231:22)
    at runTest (../../node_modules/@kayahr/jest-electron-runner/src/main/electron/runTest.ts:309:38)
    at EventEmitter.<anonymous> (../../file:/home/runner/work/opensource/opensource/node_modules/@kayahr/jest-electron-runner/src/main/electron/browser_window_injected_code.ts:33:28)
});
});
});
it('match snapshot', () => {
expect(renderer.container).toMatchSnapshot();

Check failure on line 36 in packages/vibrant-components/src/lib/TextField/TextField.spec.tsx

GitHub Actions / ci

<TextField /> › when size is sm › match snapshot 

expect(received).toMatchSnapshot()

Snapshot name: `<TextField /> when size is sm match snapshot 1`

- Snapshot  - 8
+ Received  + 4

@@ -163,20 +163,19 @@
  .emotion-7 {
    text-align: left;
    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;
    flex-shrink: 0;
    padding-top: 12px;
    padding-left: 7px;
    padding-bottom: 0;
-   font-size: 0.75rem;
-   line-height: 1rem;
-   font-weight: 400;
  }

  .emotion-8 {
    display: -webkit-box;
    display: -webkit-flex;
@@ -231,20 +230,19 @@
  .emotion-9 {
    text-align: left;
    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;
    flex-shrink: 0;
    padding-top: 12px;
    padding-right: 7px;
    padding-bottom: 0;
-   font-size: 0.75rem;
-   line-height: 1rem;
-   font-weight: 400;
  }

  <div>
    <div
      class="emotion-0"
@@ -273,11 +271,10 @@
          <div
            class="emotion-6"
          >
            <span
              class="emotion-7"
-             data-testid="body"
            />
            <input
              autocapitalize="none"
              autocomplete="off"
              class="emotion-8"
@@ -286,11 +283,10 @@
              type="text"
              value=""
            />
            <span
              class="emotion-9"
-             data-testid="body"
            />
          </div>
        </div>
        <div
          class="emotion-2"

    at Object.<anonymous> (src/lib/TextField/TextField.spec.tsx:36:34)
    at runTestInternal (../../node_modules/@kayahr/jest-electron-runner/src/main/electron/runTest.ts:231:22)
    at runTest (../../node_modules/@kayahr/jest-electron-runner/src/main/electron/runTest.ts:309:38)
    at EventEmitter.<anonymous> (../../file:/home/runner/work/opensource/opensource/node_modules/@kayahr/jest-electron-runner/src/main/electron/browser_window_injected_code.ts:33:28)
});
});
});
View file
packages/vibrant-components/src/lib/TableSearch/TableSearchField/TableSearchField.spec.tsx
});
it('match snapshot', () => {
expect(renderer.container).toMatchSnapshot();

Check failure on line 16 in packages/vibrant-components/src/lib/TableSearch/TableSearchField/TableSearchField.spec.tsx

GitHub Actions / ci

<TableSearchField /> › when maxWidth is default › match snapshot 

expect(received).toMatchSnapshot()

Snapshot name: `<TableSearchField /> when maxWidth is default match snapshot 1`

- Snapshot  - 8
+ Received  + 4

@@ -221,20 +221,19 @@
  .emotion-10 {
    text-align: left;
    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;
    flex-shrink: 0;
    padding-top: 9px;
    padding-left: 8px;
    padding-bottom: 9px;
-   font-size: 0.875rem;
-   line-height: 1.125rem;
-   font-weight: 400;
  }

  .emotion-11 {
    display: -webkit-box;
    display: -webkit-flex;
@@ -289,20 +288,19 @@
  .emotion-12 {
    text-align: left;
    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;
    flex-shrink: 0;
    padding-top: 9px;
    padding-right: 9px;
    padding-bottom: 9px;
-   font-size: 0.875rem;
-   line-height: 1.125rem;
-   font-weight: 400;
  }

  <div>
    <div
      class="emotion-0"
@@ -344,11 +342,10 @@
            <div
              class="emotion-9"
            >
              <span
                class="emotion-10"
-               data-testid="body"
              />
              <input
                autocapitalize="none"
                autocomplete="off"
                class="emotion-11"
@@ -356,11 +353,10 @@
                type="search"
                value=""
              />
              <span
                class="emotion-12"
-               data-testid="body"
              />
            </div>
          </div>
          <div
            class="emotion-3"

    at Object.<anonymous> (src/lib/TableSearch/TableSearchField/TableSearchField.spec.tsx:16:34)
    at runTestInternal (../../node_modules/@kayahr/jest-electron-runner/src/main/electron/runTest.ts:231:22)
    at runTest (../../node_modules/@kayahr/jest-electron-runner/src/main/electron/runTest.ts:309:38)
    at EventEmitter.<anonymous> (../../file:/home/runner/work/opensource/opensource/node_modules/@kayahr/jest-electron-runner/src/main/electron/browser_window_injected_code.ts:33:28)
});
});