InputControl: Use less Emotion styled API #97056
Annotations
10 errors and 2 warnings
Running the tests:
packages/components/src/font-size-picker/test/index.tsx#L80
Error: expect(jest.fn()).not.toHaveErrored(expected)
Expected mock function not to be called but it was called with:
["Warning: Received `%s` for a non-boolean attribute `%s`.·
If you want to write it to the DOM, pass a string instead: %s=\"%s\" or %s={value.toString()}.·
If you used to conditionally omit it with %s={condition && value}, pass %s={condition ? value : undefined} instead.%s", "false", "expanded", "expanded", "false", "expanded", "expanded", "expanded", "
at div
at InputBase (/home/runner/work/gutenberg/gutenberg/packages/components/src/input-control/input-base.tsx:80:19)
at div
at /home/runner/work/gutenberg/gutenberg/node_modules/@emotion/react/dist/emotion-element-c24e4fdd.cjs.dev.js:43:23
at div
at /home/runner/work/gutenberg/gutenberg/node_modules/@emotion/react/dist/emotion-element-c24e4fdd.cjs.dev.js:43:23
at UnconnectedBaseControl (/home/runner/work/gutenberg/gutenberg/packages/components/src/base-control/index.tsx:57:22)
at UnforwardedInputControl (/home/runner/work/gutenberg/gutenberg/packages/components/src/input-control/index.tsx:57:38)
at /home/runner/work/gutenberg/gutenberg/node_modules/@emotion/react/dist/emotion-element-c24e4fdd.cjs.dev.js:43:23
at UnforwardedNumberControl (/home/runner/work/gutenberg/gutenberg/packages/components/src/number-control/index.tsx:57:38)
at /home/runner/work/gutenberg/gutenberg/node_modules/@emotion/react/dist/emotion-element-c24e4fdd.cjs.dev.js:43:23
at UnforwardedUnitControl (/home/runner/work/gutenberg/gutenberg/packages/components/src/unit-control/index.tsx:59:38)
at div
at /home/runner/work/gutenberg/gutenberg/node_modules/@emotion/react/dist/emotion-element-c24e4fdd.cjs.dev.js:43:23
at UnconnectedFlexItem (/home/runner/work/gutenberg/gutenberg/packages/components/src/flex/flex-item/component.tsx:19:35)
at div
at /home/runner/work/gutenberg/gutenberg/node_modules/@emotion/react/dist/emotion-element-c24e4fdd.cjs.dev.js:43:23
at UnconnectedFlex (/home/runner/work/gutenberg/gutenberg/packages/components/src/flex/flex/component.tsx:20:55)
at div
at fieldset
at /home/runner/work/gutenberg/gutenberg/node_modules/@emotion/react/dist/emotion-element-c24e4fdd.cjs.dev.js:43:23
at __next40pxDefaultSize (/home/runner/work/gutenberg/gutenberg/packages/components/src/font-size-picker/index.tsx:44:3)"]
console.error() should not be used unless explicitly expected
See https://www.npmjs.com/package/@wordpress/jest-console for details.
at Object.assertExpectedCalls (/home/runner/work/gutenberg/gutenberg/packages/jest-console/src/index.js:32:40)
at Promise.then.completed (/home/runner/work/gutenberg/gutenberg/node_modules/jest-circus/build/utils.js:300:28)
at new Promise (<anonymous>)
at callAsyncCircusFn (/home/runner/work/gutenberg/gutenberg/node_modules/jest-circus/build/utils.js:233:10)
at _callCircusHook (/home/runner/work/gutenberg/gutenberg/node_modules/jest-circus/build/run.js:280:40)
at processTicksAndRejections (node:internal/process/task_queues:95:5)
at _runTest (/home/runner/work/gutenberg/gutenberg/node_modules/jest-circus/build/run.js:253:5)
at _runTestsForDescribeBlock (/home/runner/work/gutenberg/gutenberg/node_modules/jest-circus/build/run.js:125:9)
at _runTestsForDescribeBlock (/home/runner/work/gutenberg/gutenberg/node_modules/jest-circus/build/run.js:120:9)
at run (/home/runner/work/gutenberg/gutenberg/node_modules/jest-circus/build/run.js:70:3)
at runAndTransformResultsToJestFormat (/home/runner/work/gutenberg/gutenberg/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapterInit.js:122:21)
at jestAdapter (/home/runner/work/gutenberg/gutenberg/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapter.js:79:19)
at runTestInternal (/home/runner/work/gutenberg/gutenberg/node_modules/jest-runner/build/runTest.js:367:16)
at runTest (/home/runner/work/gutenberg/gutenberg/node_modules/jest-runner/build/runTest.js:444:34)
at Object.worker (/home/runner/work/gutenberg/gutenberg/node_modules/jest-r
|
Running the tests:
packages/components/src/font-size-picker/test/index.tsx#L37
TestingLibraryElementError: Unable to find a label with the text of: Custom
Ignored nodes: comments, script, style
<body>
<div>
<fieldset
class="components-font-size-picker css-rqqhsb-Container e8tqeku4"
>
<legend
class="components-visually-hidden css-1mm2cvy-View e19lxcc00"
data-wp-c16t="true"
data-wp-component="VisuallyHidden"
style="border: 0px; clip: rect(1px, 1px, 1px, 1px); clip-path: inset( 50% ); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; word-wrap: normal;"
>
Font size
</legend>
<div
class="components-spacer css-1y1c079-View-classes e19lxcc00"
data-wp-c16t="true"
data-wp-component="Spacer"
>
<div
class="components-flex components-h-stack components-font-size-picker__header e8tqeku3 css-wadj8b-View-Flex-base-ItemsRow-Header e19lxcc00"
data-wp-c16t="true"
data-wp-component="HStack"
>
<span
aria-label="Size Custom"
class="components-base-control__label e8tqeku1 css-bg6hu7-StyledVisualLabel-baseLabelTypography-labelStyles-HeaderLabel ej5x27r0"
>
Size
<span
class="components-font-size-picker__header__hint css-1lqzex6-HeaderHint e8tqeku0"
>
Custom
</span>
</span>
<button
aria-label="Use size preset"
aria-pressed="true"
class="components-button css-1if5hcj-HeaderToggle e8tqeku2 is-small is-pressed has-icon"
type="button"
>
<svg
aria-hidden="true"
focusable="false"
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m19 7.5h-7.628c-.3089-.87389-1.1423-1.5-2.122-1.5-.97966 0-1.81309.62611-2.12197 1.5h-2.12803v1.5h2.12803c.30888.87389 1.14231 1.5 2.12197 1.5.9797 0 1.8131-.62611 2.122-1.5h7.628z"
/>
<path
d="m19 15h-2.128c-.3089-.8739-1.1423-1.5-2.122-1.5s-1.8131.6261-2.122 1.5h-7.628v1.5h7.628c.3089.8739 1.1423 1.5 2.122 1.5s1.8131-.6261 2.122-1.5h2.128z"
/>
</svg>
</button>
</div>
</div>
<div>
<div
class="components-flex components-font-size-picker__custom-size-control css-j6raph-View-Flex-base-ItemsRow e19lxcc00"
data-wp-c16t="true"
data-wp-component="Flex"
>
<div
class="components-flex-item css-14wzr73-View-Item-sx-Base-block e19lxcc00"
data-wp-c16t="true"
data-wp-component="FlexItem"
>
<div
class="components-base-control components-input-control components-number-control components-unit-control components-unit-control-wrapper e1bagdl32 ep09it41 css-15wmpez-Wrapper-boxSizingReset-Input-htmlArrowStyles-ValueInput ej5x27
|
Running the tests:
packages/components/src/font-size-picker/test/index.tsx#L37
TestingLibraryElementError: Unable to find a label with the text of: Custom
Ignored nodes: comments, script, style
<body>
<div>
<fieldset
class="components-font-size-picker css-rqqhsb-Container e8tqeku4"
>
<legend
class="components-visually-hidden css-1mm2cvy-View e19lxcc00"
data-wp-c16t="true"
data-wp-component="VisuallyHidden"
style="border: 0px; clip: rect(1px, 1px, 1px, 1px); clip-path: inset( 50% ); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; word-wrap: normal;"
>
Font size
</legend>
<div
class="components-spacer css-1y1c079-View-classes e19lxcc00"
data-wp-c16t="true"
data-wp-component="Spacer"
>
<div
class="components-flex components-h-stack components-font-size-picker__header e8tqeku3 css-wadj8b-View-Flex-base-ItemsRow-Header e19lxcc00"
data-wp-c16t="true"
data-wp-component="HStack"
>
<span
aria-label="Size Custom"
class="components-base-control__label e8tqeku1 css-bg6hu7-StyledVisualLabel-baseLabelTypography-labelStyles-HeaderLabel ej5x27r0"
>
Size
<span
class="components-font-size-picker__header__hint css-1lqzex6-HeaderHint e8tqeku0"
>
Custom
</span>
</span>
<button
aria-label="Use size preset"
aria-pressed="true"
class="components-button css-1if5hcj-HeaderToggle e8tqeku2 is-small is-pressed has-icon"
type="button"
>
<svg
aria-hidden="true"
focusable="false"
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m19 7.5h-7.628c-.3089-.87389-1.1423-1.5-2.122-1.5-.97966 0-1.81309.62611-2.12197 1.5h-2.12803v1.5h2.12803c.30888.87389 1.14231 1.5 2.12197 1.5.9797 0 1.8131-.62611 2.122-1.5h7.628z"
/>
<path
d="m19 15h-2.128c-.3089-.8739-1.1423-1.5-2.122-1.5s-1.8131.6261-2.122 1.5h-7.628v1.5h7.628c.3089.8739 1.1423 1.5 2.122 1.5s1.8131-.6261 2.122-1.5h2.128z"
/>
</svg>
</button>
</div>
</div>
<div>
<div
class="components-flex components-font-size-picker__custom-size-control css-j6raph-View-Flex-base-ItemsRow e19lxcc00"
data-wp-c16t="true"
data-wp-component="Flex"
>
<div
class="components-flex-item css-14wzr73-View-Item-sx-Base-block e19lxcc00"
data-wp-c16t="true"
data-wp-component="FlexItem"
>
<div
class="components-base-control components-input-control components-number-control components-unit-control components-unit-control-wrapper e1bagdl32 ep09it41 css-15wmpez-Wrapper-boxSizingReset-Input-htmlArrowStyles-ValueInput ej5x27
|
Running the tests:
packages/components/src/font-size-picker/test/index.tsx#L37
TestingLibraryElementError: Unable to find a label with the text of: Custom
Ignored nodes: comments, script, style
<body>
<div>
<fieldset
class="components-font-size-picker css-rqqhsb-Container e8tqeku4"
>
<legend
class="components-visually-hidden css-1mm2cvy-View e19lxcc00"
data-wp-c16t="true"
data-wp-component="VisuallyHidden"
style="border: 0px; clip: rect(1px, 1px, 1px, 1px); clip-path: inset( 50% ); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; word-wrap: normal;"
>
Font size
</legend>
<div
class="components-spacer css-1y1c079-View-classes e19lxcc00"
data-wp-c16t="true"
data-wp-component="Spacer"
>
<div
class="components-flex components-h-stack components-font-size-picker__header e8tqeku3 css-wadj8b-View-Flex-base-ItemsRow-Header e19lxcc00"
data-wp-c16t="true"
data-wp-component="HStack"
>
<span
aria-label="Size Custom"
class="components-base-control__label e8tqeku1 css-bg6hu7-StyledVisualLabel-baseLabelTypography-labelStyles-HeaderLabel ej5x27r0"
>
Size
<span
class="components-font-size-picker__header__hint css-1lqzex6-HeaderHint e8tqeku0"
>
Custom
</span>
</span>
<button
aria-label="Use size preset"
aria-pressed="true"
class="components-button css-1if5hcj-HeaderToggle e8tqeku2 is-small is-pressed has-icon"
type="button"
>
<svg
aria-hidden="true"
focusable="false"
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m19 7.5h-7.628c-.3089-.87389-1.1423-1.5-2.122-1.5-.97966 0-1.81309.62611-2.12197 1.5h-2.12803v1.5h2.12803c.30888.87389 1.14231 1.5 2.12197 1.5.9797 0 1.8131-.62611 2.122-1.5h7.628z"
/>
<path
d="m19 15h-2.128c-.3089-.8739-1.1423-1.5-2.122-1.5s-1.8131.6261-2.122 1.5h-7.628v1.5h7.628c.3089.8739 1.1423 1.5 2.122 1.5s1.8131-.6261 2.122-1.5h2.128z"
/>
</svg>
</button>
</div>
</div>
<div>
<div
class="components-flex components-font-size-picker__custom-size-control css-j6raph-View-Flex-base-ItemsRow e19lxcc00"
data-wp-c16t="true"
data-wp-component="Flex"
>
<div
class="components-flex-item css-14wzr73-View-Item-sx-Base-block e19lxcc00"
data-wp-c16t="true"
data-wp-component="FlexItem"
>
<div
class="components-base-control components-input-control components-number-control components-unit-control components-unit-control-wrapper e1bagdl32 ep09it41 css-15wmpez-Wrapper-boxSizingReset-Input-htmlArrowStyles-ValueInput ej5x27
|
Running the tests:
packages/components/src/font-size-picker/test/index.tsx#L80
Error: expect(jest.fn()).not.toHaveErrored(expected)
Expected mock function not to be called but it was called with:
["Warning: React does not recognize the `%s` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `%s` instead. If you accidentally passed it from a parent component, remove it from the DOM element.%s", "__nextUnconstrainedWidth", "__nextunconstrainedwidth", "
at div
at InputBase (/home/runner/work/gutenberg/gutenberg/packages/components/src/input-control/input-base.tsx:80:19)
at /home/runner/work/gutenberg/gutenberg/node_modules/@emotion/react/dist/emotion-element-c24e4fdd.cjs.dev.js:43:23
at div
at CustomSelectControl (/home/runner/work/gutenberg/gutenberg/packages/components/src/custom-select-control/index.js:86:38)
at __next40pxDefaultSize (/home/runner/work/gutenberg/gutenberg/packages/components/src/font-size-picker/font-size-picker-select.tsx:30:3)
at div
at fieldset
at /home/runner/work/gutenberg/gutenberg/node_modules/@emotion/react/dist/emotion-element-c24e4fdd.cjs.dev.js:43:23
at __next40pxDefaultSize (/home/runner/work/gutenberg/gutenberg/packages/components/src/font-size-picker/index.tsx:44:3)"],["Warning: React does not recognize the `%s` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `%s` instead. If you accidentally passed it from a parent component, remove it from the DOM element.%s", "isFocused", "isfocused", "
at div
at InputBase (/home/runner/work/gutenberg/gutenberg/packages/components/src/input-control/input-base.tsx:80:19)
at /home/runner/work/gutenberg/gutenberg/node_modules/@emotion/react/dist/emotion-element-c24e4fdd.cjs.dev.js:43:23
at div
at CustomSelectControl (/home/runner/work/gutenberg/gutenberg/packages/components/src/custom-select-control/index.js:86:38)
at __next40pxDefaultSize (/home/runner/work/gutenberg/gutenberg/packages/components/src/font-size-picker/font-size-picker-select.tsx:30:3)
at div
at fieldset
at /home/runner/work/gutenberg/gutenberg/node_modules/@emotion/react/dist/emotion-element-c24e4fdd.cjs.dev.js:43:23
at __next40pxDefaultSize (/home/runner/work/gutenberg/gutenberg/packages/components/src/font-size-picker/index.tsx:44:3)"]
console.error() should not be used unless explicitly expected
See https://www.npmjs.com/package/@wordpress/jest-console for details.
at Object.assertExpectedCalls (/home/runner/work/gutenberg/gutenberg/packages/jest-console/src/index.js:32:40)
at Promise.then.completed (/home/runner/work/gutenberg/gutenberg/node_modules/jest-circus/build/utils.js:300:28)
at new Promise (<anonymous>)
at callAsyncCircusFn (/home/runner/work/gutenberg/gutenberg/node_modules/jest-circus/build/utils.js:233:10)
at _callCircusHook (/home/runner/work/gutenberg/gutenberg/node_modules/jest-circus/build/run.js:280:40)
at _runTest (/home/runner/work/gutenberg/gutenberg/node_modules/jest-circus/build/run.js:253:5)
at _runTestsForDescribeBlock (/home/runner/work/gutenberg/gutenberg/node_modules/jest-circus/build/run.js:125:9)
at _runTestsForDescribeBlock (/home/runner/work/gutenberg/gutenberg/node_modules/jest-circus/build/run.js:120:9)
at _runTestsForDescribeBlock (/home/runner/work/gutenberg/gutenberg/node_modules/jest-circus/build/run.js:120:9)
at run (/home/runner/work/gutenberg/gutenberg/node_modules/jest-circus/build/run.js:70:3)
at runAndTransformResultsToJestFormat (/home/runner/work/gutenberg/gutenberg/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapterInit.js:122:21)
at jestAdapter (/home/runner/work/gutenberg/gutenberg/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapter.js:79:19)
at runTestInternal (/home/runner/work/gutenberg/gutenberg/node_modules/jest-runner/build/runTest.js:367:16)
at runTest (/home/runner/work/gutenberg/gutenberg/node_modules/jest-runner/build/runTest.js:444:34)
at Object.worker (/home/runner/work/gutenberg/gutenberg/node_modul
|
Running the tests:
packages/components/src/font-size-picker/test/index.tsx#L37
TestingLibraryElementError: Unable to find a label with the text of: Custom
Ignored nodes: comments, script, style
<body>
<div>
<fieldset
class="components-font-size-picker css-rqqhsb-Container e8tqeku4"
>
<legend
class="components-visually-hidden css-1mm2cvy-View e19lxcc00"
data-wp-c16t="true"
data-wp-component="VisuallyHidden"
style="border: 0px; clip: rect(1px, 1px, 1px, 1px); clip-path: inset( 50% ); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; word-wrap: normal;"
>
Font size
</legend>
<div
class="components-spacer css-1y1c079-View-classes e19lxcc00"
data-wp-c16t="true"
data-wp-component="Spacer"
>
<div
class="components-flex components-h-stack components-font-size-picker__header e8tqeku3 css-wadj8b-View-Flex-base-ItemsRow-Header e19lxcc00"
data-wp-c16t="true"
data-wp-component="HStack"
>
<span
aria-label="Size Custom"
class="components-base-control__label e8tqeku1 css-bg6hu7-StyledVisualLabel-baseLabelTypography-labelStyles-HeaderLabel ej5x27r0"
>
Size
<span
class="components-font-size-picker__header__hint css-1lqzex6-HeaderHint e8tqeku0"
>
Custom
</span>
</span>
<button
aria-label="Use size preset"
aria-pressed="true"
class="components-button css-1if5hcj-HeaderToggle e8tqeku2 is-small is-pressed has-icon"
type="button"
>
<svg
aria-hidden="true"
focusable="false"
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m19 7.5h-7.628c-.3089-.87389-1.1423-1.5-2.122-1.5-.97966 0-1.81309.62611-2.12197 1.5h-2.12803v1.5h2.12803c.30888.87389 1.14231 1.5 2.12197 1.5.9797 0 1.8131-.62611 2.122-1.5h7.628z"
/>
<path
d="m19 15h-2.128c-.3089-.8739-1.1423-1.5-2.122-1.5s-1.8131.6261-2.122 1.5h-7.628v1.5h7.628c.3089.8739 1.1423 1.5 2.122 1.5s1.8131-.6261 2.122-1.5h2.128z"
/>
</svg>
</button>
</div>
</div>
<div>
<div
class="components-flex components-font-size-picker__custom-size-control css-j6raph-View-Flex-base-ItemsRow e19lxcc00"
data-wp-c16t="true"
data-wp-component="Flex"
>
<div
class="components-flex-item css-14wzr73-View-Item-sx-Base-block e19lxcc00"
data-wp-c16t="true"
data-wp-component="FlexItem"
>
<div
class="components-base-control components-input-control components-number-control components-unit-control components-unit-control-wrapper e1bagdl32 ep09it41 css-15wmpez-Wrapper-boxSizingReset-Input-htmlArrowStyles-ValueInput ej5x27
|
Running the tests:
packages/components/src/font-size-picker/test/index.tsx#L37
TestingLibraryElementError: Unable to find a label with the text of: Custom
Ignored nodes: comments, script, style
<body>
<div>
<fieldset
class="components-font-size-picker css-rqqhsb-Container e8tqeku4"
>
<legend
class="components-visually-hidden css-1mm2cvy-View e19lxcc00"
data-wp-c16t="true"
data-wp-component="VisuallyHidden"
style="border: 0px; clip: rect(1px, 1px, 1px, 1px); clip-path: inset( 50% ); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; word-wrap: normal;"
>
Font size
</legend>
<div
class="components-spacer css-1y1c079-View-classes e19lxcc00"
data-wp-c16t="true"
data-wp-component="Spacer"
>
<div
class="components-flex components-h-stack components-font-size-picker__header e8tqeku3 css-wadj8b-View-Flex-base-ItemsRow-Header e19lxcc00"
data-wp-c16t="true"
data-wp-component="HStack"
>
<span
aria-label="Size Custom"
class="components-base-control__label e8tqeku1 css-bg6hu7-StyledVisualLabel-baseLabelTypography-labelStyles-HeaderLabel ej5x27r0"
>
Size
<span
class="components-font-size-picker__header__hint css-1lqzex6-HeaderHint e8tqeku0"
>
Custom
</span>
</span>
<button
aria-label="Use size preset"
aria-pressed="true"
class="components-button css-1if5hcj-HeaderToggle e8tqeku2 is-small is-pressed has-icon"
type="button"
>
<svg
aria-hidden="true"
focusable="false"
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m19 7.5h-7.628c-.3089-.87389-1.1423-1.5-2.122-1.5-.97966 0-1.81309.62611-2.12197 1.5h-2.12803v1.5h2.12803c.30888.87389 1.14231 1.5 2.12197 1.5.9797 0 1.8131-.62611 2.122-1.5h7.628z"
/>
<path
d="m19 15h-2.128c-.3089-.8739-1.1423-1.5-2.122-1.5s-1.8131.6261-2.122 1.5h-7.628v1.5h7.628c.3089.8739 1.1423 1.5 2.122 1.5s1.8131-.6261 2.122-1.5h2.128z"
/>
</svg>
</button>
</div>
</div>
<div>
<div
class="components-flex components-font-size-picker__custom-size-control css-j6raph-View-Flex-base-ItemsRow e19lxcc00"
data-wp-c16t="true"
data-wp-component="Flex"
>
<div
class="components-flex-item css-14wzr73-View-Item-sx-Base-block e19lxcc00"
data-wp-c16t="true"
data-wp-component="FlexItem"
>
<div
class="components-base-control components-input-control components-number-control components-unit-control components-unit-control-wrapper e1bagdl32 ep09it41 css-15wmpez-Wrapper-boxSizingReset-Input-htmlArrowStyles-ValueInput ej5x27
|
Running the tests:
packages/components/src/font-size-picker/test/index.tsx#L37
TestingLibraryElementError: Unable to find a label with the text of: Custom
Ignored nodes: comments, script, style
<body>
<div>
<fieldset
class="components-font-size-picker css-rqqhsb-Container e8tqeku4"
>
<legend
class="components-visually-hidden css-1mm2cvy-View e19lxcc00"
data-wp-c16t="true"
data-wp-component="VisuallyHidden"
style="border: 0px; clip: rect(1px, 1px, 1px, 1px); clip-path: inset( 50% ); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; word-wrap: normal;"
>
Font size
</legend>
<div
class="components-spacer css-1y1c079-View-classes e19lxcc00"
data-wp-c16t="true"
data-wp-component="Spacer"
>
<div
class="components-flex components-h-stack components-font-size-picker__header e8tqeku3 css-wadj8b-View-Flex-base-ItemsRow-Header e19lxcc00"
data-wp-c16t="true"
data-wp-component="HStack"
>
<span
aria-label="Size Custom"
class="components-base-control__label e8tqeku1 css-bg6hu7-StyledVisualLabel-baseLabelTypography-labelStyles-HeaderLabel ej5x27r0"
>
Size
<span
class="components-font-size-picker__header__hint css-1lqzex6-HeaderHint e8tqeku0"
>
Custom
</span>
</span>
<button
aria-label="Use size preset"
aria-pressed="true"
class="components-button css-1if5hcj-HeaderToggle e8tqeku2 is-small is-pressed has-icon"
type="button"
>
<svg
aria-hidden="true"
focusable="false"
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m19 7.5h-7.628c-.3089-.87389-1.1423-1.5-2.122-1.5-.97966 0-1.81309.62611-2.12197 1.5h-2.12803v1.5h2.12803c.30888.87389 1.14231 1.5 2.12197 1.5.9797 0 1.8131-.62611 2.122-1.5h7.628z"
/>
<path
d="m19 15h-2.128c-.3089-.8739-1.1423-1.5-2.122-1.5s-1.8131.6261-2.122 1.5h-7.628v1.5h7.628c.3089.8739 1.1423 1.5 2.122 1.5s1.8131-.6261 2.122-1.5h2.128z"
/>
</svg>
</button>
</div>
</div>
<div>
<div
class="components-flex components-font-size-picker__custom-size-control css-j6raph-View-Flex-base-ItemsRow e19lxcc00"
data-wp-c16t="true"
data-wp-component="Flex"
>
<div
class="components-flex-item css-14wzr73-View-Item-sx-Base-block e19lxcc00"
data-wp-c16t="true"
data-wp-component="FlexItem"
>
<div
class="components-base-control components-input-control components-number-control components-unit-control components-unit-control-wrapper e1bagdl32 ep09it41 css-15wmpez-Wrapper-boxSizingReset-Input-htmlArrowStyles-ValueInput ej5x27
|
Running the tests:
packages/components/src/font-size-picker/test/index.tsx#L37
TestingLibraryElementError: Unable to find a label with the text of: Custom
Ignored nodes: comments, script, style
<body>
<div
aria-live="polite"
aria-relevant="additions text"
id="a11y-status-message"
role="status"
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px;"
/>
<div>
<fieldset
class="components-font-size-picker css-rqqhsb-Container e8tqeku4"
>
<legend
class="components-visually-hidden css-1mm2cvy-View e19lxcc00"
data-wp-c16t="true"
data-wp-component="VisuallyHidden"
style="border: 0px; clip: rect(1px, 1px, 1px, 1px); clip-path: inset( 50% ); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; word-wrap: normal;"
>
Font size
</legend>
<div
class="components-spacer css-1y1c079-View-classes e19lxcc00"
data-wp-c16t="true"
data-wp-component="Spacer"
>
<div
class="components-flex components-h-stack components-font-size-picker__header e8tqeku3 css-wadj8b-View-Flex-base-ItemsRow-Header e19lxcc00"
data-wp-c16t="true"
data-wp-component="HStack"
>
<span
aria-label="Size Custom"
class="components-base-control__label e8tqeku1 css-bg6hu7-StyledVisualLabel-baseLabelTypography-labelStyles-HeaderLabel ej5x27r0"
>
Size
<span
class="components-font-size-picker__header__hint css-1lqzex6-HeaderHint e8tqeku0"
>
Custom
</span>
</span>
<button
aria-label="Use size preset"
aria-pressed="true"
class="components-button css-1if5hcj-HeaderToggle e8tqeku2 is-small is-pressed has-icon"
type="button"
>
<svg
aria-hidden="true"
focusable="false"
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m19 7.5h-7.628c-.3089-.87389-1.1423-1.5-2.122-1.5-.97966 0-1.81309.62611-2.12197 1.5h-2.12803v1.5h2.12803c.30888.87389 1.14231 1.5 2.12197 1.5.9797 0 1.8131-.62611 2.122-1.5h7.628z"
/>
<path
d="m19 15h-2.128c-.3089-.8739-1.1423-1.5-2.122-1.5s-1.8131.6261-2.122 1.5h-7.628v1.5h7.628c.3089.8739 1.1423 1.5 2.122 1.5s1.8131-.6261 2.122-1.5h2.128z"
/>
</svg>
</button>
</div>
</div>
<div>
<div
class="components-flex components-font-size-picker__custom-size-control css-j6raph-View-Flex-base-ItemsRow e19lxcc00"
data-wp-c16t="true"
data-wp-component="Flex"
>
<div
class="components-flex-item css-14wzr73-View-Item-sx-Base-block e19lxcc00"
data-wp-c16t="true"
|
Running the tests:
packages/components/src/font-size-picker/test/index.tsx#L37
TestingLibraryElementError: Unable to find a label with the text of: Custom
Ignored nodes: comments, script, style
<body>
<div
aria-live="polite"
aria-relevant="additions text"
id="a11y-status-message"
role="status"
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px;"
/>
<div>
<fieldset
class="components-font-size-picker css-rqqhsb-Container e8tqeku4"
>
<legend
class="components-visually-hidden css-1mm2cvy-View e19lxcc00"
data-wp-c16t="true"
data-wp-component="VisuallyHidden"
style="border: 0px; clip: rect(1px, 1px, 1px, 1px); clip-path: inset( 50% ); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; word-wrap: normal;"
>
Font size
</legend>
<div
class="components-spacer css-1y1c079-View-classes e19lxcc00"
data-wp-c16t="true"
data-wp-component="Spacer"
>
<div
class="components-flex components-h-stack components-font-size-picker__header e8tqeku3 css-wadj8b-View-Flex-base-ItemsRow-Header e19lxcc00"
data-wp-c16t="true"
data-wp-component="HStack"
>
<span
aria-label="Size Custom"
class="components-base-control__label e8tqeku1 css-bg6hu7-StyledVisualLabel-baseLabelTypography-labelStyles-HeaderLabel ej5x27r0"
>
Size
<span
class="components-font-size-picker__header__hint css-1lqzex6-HeaderHint e8tqeku0"
>
Custom
</span>
</span>
<button
aria-label="Use size preset"
aria-pressed="true"
class="components-button css-1if5hcj-HeaderToggle e8tqeku2 is-small is-pressed has-icon"
type="button"
>
<svg
aria-hidden="true"
focusable="false"
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m19 7.5h-7.628c-.3089-.87389-1.1423-1.5-2.122-1.5-.97966 0-1.81309.62611-2.12197 1.5h-2.12803v1.5h2.12803c.30888.87389 1.14231 1.5 2.12197 1.5.9797 0 1.8131-.62611 2.122-1.5h7.628z"
/>
<path
d="m19 15h-2.128c-.3089-.8739-1.1423-1.5-2.122-1.5s-1.8131.6261-2.122 1.5h-7.628v1.5h7.628c.3089.8739 1.1423 1.5 2.122 1.5s1.8131-.6261 2.122-1.5h2.128z"
/>
</svg>
</button>
</div>
</div>
<div>
<div
class="components-flex components-font-size-picker__custom-size-control css-j6raph-View-Flex-base-ItemsRow e19lxcc00"
data-wp-c16t="true"
data-wp-component="Flex"
>
<div
class="components-flex-item css-14wzr73-View-Item-sx-Base-block e19lxcc00"
data-wp-c16t="true"
|
Setup Node.js and install dependencies
Both node-version and node-version-file inputs are specified, only node-version will be used
|
Node.js 16 actions are deprecated. Please update the following actions to use Node.js 20: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c, actions/cache@88522ab9f39a2ea568f7027eddc7d8d8bc9d59c8. For more information see: https://github.blog/changelog/2023-09-22-github-actions-transitioning-from-node-16-to-node-20/.
|
The logs for this run have expired and are no longer available.
Loading