Skip to content

[WIP] FEI-5589: Experiment with CSS modules - DO NOT REVIEW #3770

[WIP] FEI-5589: Experiment with CSS modules - DO NOT REVIEW

[WIP] FEI-5589: Experiment with CSS modules - DO NOT REVIEW #3770

Triggered via pull request May 29, 2024 16:53
Status Failure
Total duration 2m 35s
Artifacts

node-ci-pr.yml

on: pull_request
Matrix: Prime node_modules cache for primary configuration
Matrix: Check for .changeset entries for all changed files
Matrix: Publish npm snapshot
Matrix: Check build sizes
Matrix: Lint
Matrix: Test
Fit to window
Zoom out
Zoom in

Annotations

24 errors
Lint (ubuntu-latest, 20.x): __docs__/wonder-blocks-core/view.stories.tsx#L6
'color' is defined but never used. Allowed unused vars must match /^_*$/u
Lint (ubuntu-latest, 20.x): __docs__/wonder-blocks-core/view.stories.tsx#L6
'spacing' is defined but never used. Allowed unused vars must match /^_*$/u
Lint (ubuntu-latest, 20.x)
Process completed with exit code 1.
LabeledTextField › light prop is passed to textfield: packages/wonder-blocks-form/src/components/__tests__/labeled-text-field.test.tsx#L399
expect(element).toHaveStyle() - Expected - boxShadow: 0px 0px 0px 1px #1865f2, 0px 0px 0px 2px #ffffff; at Object.toHaveStyle (packages/wonder-blocks-form/src/components/__tests__/labeled-text-field.test.tsx:399:27)
Link › external link that opens in a new tab › render external icon when `target=_blank` and link is external: packages/wonder-blocks-link/src/components/__tests__/link.test.tsx#L386
expect(element).toHaveStyle() - Expected - maskImage: url(arrow-square-out-bold.svg); at Object.toHaveStyle (packages/wonder-blocks-link/src/components/__tests__/link.test.tsx:386:26)
Link › start and end icons › render icon with link when startIcon prop is passed in: packages/wonder-blocks-link/src/components/__tests__/link.test.tsx#L445
expect(element).toHaveStyle() - Expected - maskImage: url(plus-bold.svg); at Object.toHaveStyle (packages/wonder-blocks-link/src/components/__tests__/link.test.tsx:445:26)
Link › start and end icons › startIcon prop passed down correctly: packages/wonder-blocks-link/src/components/__tests__/link.test.tsx#L474
expect(element).toHaveStyle() - Expected - maskImage: url(plus-bold.svg); at Object.toHaveStyle (packages/wonder-blocks-link/src/components/__tests__/link.test.tsx:474:26)
Link › start and end icons › render icon with link when endIcon prop is passed in: packages/wonder-blocks-link/src/components/__tests__/link.test.tsx#L492
expect(element).toHaveStyle() - Expected - maskImage: url(plus-bold.svg); at Object.toHaveStyle (packages/wonder-blocks-link/src/components/__tests__/link.test.tsx:492:26)
Link › start and end icons › render endIcon instead of default externalIcon when `target='_blank' and link is external`: packages/wonder-blocks-link/src/components/__tests__/link.test.tsx#L541
expect(element).toHaveStyle() - Expected - maskImage: url(plus-bold.svg); at Object.toHaveStyle (packages/wonder-blocks-link/src/components/__tests__/link.test.tsx:541:26)
Link › start and end icons › endIcon prop passed down correctly: packages/wonder-blocks-link/src/components/__tests__/link.test.tsx#L556
expect(element).toHaveStyle() - Expected - maskImage: url(plus-bold.svg); at Object.toHaveStyle (packages/wonder-blocks-link/src/components/__tests__/link.test.tsx:556:26)
FieldHeading › should render a LabelMedium when the 'label' prop is a I18nInlineMarkup: packages/wonder-blocks-form/src/components/__tests__/field-heading.test.tsx#L197
expect(element).toHaveStyle() - Expected - font-size: 16px; at Object.toHaveStyle (packages/wonder-blocks-form/src/components/__tests__/field-heading.test.tsx:197:23)
FieldHeading › should render a LabelSmall when the 'description' prop is a I18nInlineMarkup: packages/wonder-blocks-form/src/components/__tests__/field-heading.test.tsx#L215
expect(element).toHaveStyle() - Expected - font-size: 14px; at Object.toHaveStyle (packages/wonder-blocks-form/src/components/__tests__/field-heading.test.tsx:215:29)
TooltipTail › #render › should render a spacer when show is false: packages/wonder-blocks-tooltip/src/components/__tests__/tooltip-tail.test.tsx#L118
expect(received).toMatchInlineSnapshot(snapshot) Snapshot name: `TooltipTail #render should render a spacer when show is false 1` - Snapshot - 1 + Received + 1 @@ -5,9 +5,9 @@ style="align-items: stretch; border-width: 0px; border-style: solid; box-sizing: border-box; display: flex; flex-direction: column; margin: 0px; padding: 0px; position: relative; z-index: 0; min-height: 0; min-width: 0; pointer-events: none; top: -1px; width: 40px; height: 20px;" > <div aria-hidden="true" class="" - style="align-items: stretch; border-width: 0px; border-style: solid; box-sizing: border-box; display: flex; flex-direction: column; margin: 0px; padding: 0px; position: relative; z-index: 0; min-height: 0; min-width: 0; width: 12px; flex-basis: 12px; flex-shrink: 0;" + style="--strut-size: 12px;" /> </div> </div> at Object.toMatchInlineSnapshot (packages/wonder-blocks-tooltip/src/components/__tests__/tooltip-tail.test.tsx:118:31)
Test (ubuntu-latest, 20.x, 2/2)
The job was canceled because "ubuntu-latest_20_x_1_2" failed.
Button › <Link tabIndex={-1}>: packages/wonder-blocks-button/src/__tests__/custom-snapshot.test.tsx#L32
expect(received).toMatchSnapshot() Snapshot name: `Button <Link tabIndex={-1}> 1` - Snapshot - 46 + Received + 0 @@ -12,60 +12,14 @@ onMouseUp={[Function]} onTouchCancel={[Function]} onTouchEnd={[Function]} onTouchStart={[Function]} role="button" - style={ - { - "::MozFocusInner": { - "border": 0, - }, - ":focus": { - "WebkitTapHighlightColor": "rgba(0,0,0,0)", - }, - "alignItems": "center", - "background": "#1865f2", - "border": "none", - "borderRadius": 4, - "boxSizing": "border-box", - "color": "#ffffff", - "cursor": "pointer", - "display": "inline-flex", - "height": 40, - "justifyContent": "center", - "margin": 0, - "outline": "none", - "paddingBottom": 0, - "paddingLeft": 16, - "paddingRight": 16, - "paddingTop": 0, - "position": "relative", - "textDecoration": "none", - "touchAction": "manipulation", - "userSelect": "none", - } - } tabIndex={-1} type="button" > <span className="" - style={ - { - "MozOsxFontSmoothing": "grayscale", - "WebkitFontSmoothing": "antialiased", - "alignItems": "center", - "display": "inline-block", - "fontFamily": "Lato, "Noto Sans", sans-serif", - "fontSize": 16, - "fontWeight": 700, - "lineHeight": "20px", - "overflow": "hidden", - "pointerEvents": "none", - "textOverflow": "ellipsis", - "whiteSpace": "nowrap", - } - } > Click me </span> </button> at toMatchSnapshot (packages/wonder-blocks-button/src/__tests__/custom-snapshot.test.tsx:32:22)
Button › <Link tabIndex={0}>: packages/wonder-blocks-button/src/__tests__/custom-snapshot.test.tsx#L32
expect(received).toMatchSnapshot() Snapshot name: `Button <Link tabIndex={0}> 1` - Snapshot - 46 + Received + 0 @@ -12,60 +12,14 @@ onMouseUp={[Function]} onTouchCancel={[Function]} onTouchEnd={[Function]} onTouchStart={[Function]} role="button" - style={ - { - "::MozFocusInner": { - "border": 0, - }, - ":focus": { - "WebkitTapHighlightColor": "rgba(0,0,0,0)", - }, - "alignItems": "center", - "background": "#1865f2", - "border": "none", - "borderRadius": 4, - "boxSizing": "border-box", - "color": "#ffffff", - "cursor": "pointer", - "display": "inline-flex", - "height": 40, - "justifyContent": "center", - "margin": 0, - "outline": "none", - "paddingBottom": 0, - "paddingLeft": 16, - "paddingRight": 16, - "paddingTop": 0, - "position": "relative", - "textDecoration": "none", - "touchAction": "manipulation", - "userSelect": "none", - } - } tabIndex={0} type="button" > <span className="" - style={ - { - "MozOsxFontSmoothing": "grayscale", - "WebkitFontSmoothing": "antialiased", - "alignItems": "center", - "display": "inline-block", - "fontFamily": "Lato, "Noto Sans", sans-serif", - "fontSize": 16, - "fontWeight": 700, - "lineHeight": "20px", - "overflow": "hidden", - "pointerEvents": "none", - "textOverflow": "ellipsis", - "whiteSpace": "nowrap", - } - } > Click me </span> </button> at toMatchSnapshot (packages/wonder-blocks-button/src/__tests__/custom-snapshot.test.tsx:32:22)
Button › <Link tabIndex={1}>: packages/wonder-blocks-button/src/__tests__/custom-snapshot.test.tsx#L32
expect(received).toMatchSnapshot() Snapshot name: `Button <Link tabIndex={1}> 1` - Snapshot - 46 + Received + 0 @@ -12,60 +12,14 @@ onMouseUp={[Function]} onTouchCancel={[Function]} onTouchEnd={[Function]} onTouchStart={[Function]} role="button" - style={ - { - "::MozFocusInner": { - "border": 0, - }, - ":focus": { - "WebkitTapHighlightColor": "rgba(0,0,0,0)", - }, - "alignItems": "center", - "background": "#1865f2", - "border": "none", - "borderRadius": 4, - "boxSizing": "border-box", - "color": "#ffffff", - "cursor": "pointer", - "display": "inline-flex", - "height": 40, - "justifyContent": "center", - "margin": 0, - "outline": "none", - "paddingBottom": 0, - "paddingLeft": 16, - "paddingRight": 16, - "paddingTop": 0, - "position": "relative", - "textDecoration": "none", - "touchAction": "manipulation", - "userSelect": "none", - } - } tabIndex={1} type="button" > <span className="" - style={ - { - "MozOsxFontSmoothing": "grayscale", - "WebkitFontSmoothing": "antialiased", - "alignItems": "center", - "display": "inline-block", - "fontFamily": "Lato, "Noto Sans", sans-serif", - "fontSize": 16, - "fontWeight": 700, - "lineHeight": "20px", - "overflow": "hidden", - "pointerEvents": "none", - "textOverflow": "ellipsis", - "whiteSpace": "nowrap", - } - } > Click me </span> </button> at toMatchSnapshot (packages/wonder-blocks-button/src/__tests__/custom-snapshot.test.tsx:32:22)
ButtonCore › kind:primary color:default size:medium light:true disabled: packages/wonder-blocks-button/src/__tests__/custom-snapshot.test.tsx#L75
expect(received).toMatchSnapshot() Snapshot name: `ButtonCore kind:primary color:default size:medium light:true disabled 1` - Snapshot - 47 + Received + 1 @@ -1,9 +1,9 @@ <button aria-disabled={true} aria-label="" - className="" + className="default.module.css" onBlur={[Function]} onClick={[Function]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} @@ -13,60 +13,14 @@ onMouseUp={[Function]} onTouchCancel={[Function]} onTouchEnd={[Function]} onTouchStart={[Function]} role="button" - style={ - { - "::MozFocusInner": { - "border": 0, - }, - ":focus": { - "boxShadow": "0 0 0 1px rgba(33,36,44,0.32), 0 0 0 3px #b5cefb", - }, - "alignItems": "center", - "background": "#b5cefb", - "border": "none", - "borderRadius": 4, - "boxSizing": "border-box", - "color": "#1865f2", - "cursor": "default", - "display": "inline-flex", - "height": 40, - "justifyContent": "center", - "margin": 0, - "outline": "none", - "paddingBottom": 0, - "paddingLeft": 16, - "paddingRight": 16, - "paddingTop": 0, - "position": "relative", - "textDecoration": "none", - "touchAction": "manipulation", - "userSelect": "none", - } - } tabIndex={-1} type="button" > <span className="" - style={ - { - "MozOsxFontSmoothing": "grayscale", - "WebkitFontSmoothing": "antialiased", - "alignItems": "center", - "display": "inline-block", - "fontFamily": "Lato, "Noto Sans", sans-serif", - "fontSize": 16, - "fontWeight": 700, - "lineHeight": "20px", - "overflow": "hidden", - "pointerEvents": "none", - "textOverflow": "ellipsis", - "whiteSpace": "nowrap", - } - } > Click me </span> </button> at Object.toMatchSnapshot (packages/wonder-blocks-button/src/__tests__/custom-snapshot.test.tsx:75:42)
ButtonCore › kind:primary color:default size:medium light:true focused: packages/wonder-blocks-button/src/__tests__/custom-snapshot.test.tsx#L75
expect(received).toMatchSnapshot() Snapshot name: `ButtonCore kind:primary color:default size:medium light:true focused 1` - Snapshot - 48 + Received + 1 @@ -1,9 +1,9 @@ <button aria-disabled={false} aria-label="" - className="" + className="default.module.css" onBlur={[Function]} onClick={[Function]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} @@ -13,61 +13,14 @@ onMouseUp={[Function]} onTouchCancel={[Function]} onTouchEnd={[Function]} onTouchStart={[Function]} role="button" - style={ - { - "::MozFocusInner": { - "border": 0, - }, - ":focus": { - "WebkitTapHighlightColor": "rgba(0,0,0,0)", - }, - "alignItems": "center", - "background": "#ffffff", - "border": "none", - "borderRadius": 4, - "boxShadow": "0 0 0 1px #0b2149, 0 0 0 3px #ffffff", - "boxSizing": "border-box", - "color": "#1865f2", - "cursor": "pointer", - "display": "inline-flex", - "height": 40, - "justifyContent": "center", - "margin": 0, - "outline": "none", - "paddingBottom": 0, - "paddingLeft": 16, - "paddingRight": 16, - "paddingTop": 0, - "position": "relative", - "textDecoration": "none", - "touchAction": "manipulation", - "userSelect": "none", - } - } tabIndex={0} type="button" > <span className="" - style={ - { - "MozOsxFontSmoothing": "grayscale", - "WebkitFontSmoothing": "antialiased", - "alignItems": "center", - "display": "inline-block", - "fontFamily": "Lato, "Noto Sans", sans-serif", - "fontSize": 16, - "fontWeight": 700, - "lineHeight": "20px", - "overflow": "hidden", - "pointerEvents": "none", - "textOverflow": "ellipsis", - "whiteSpace": "nowrap", - } - } > Click me </span> </button> at Object.toMatchSnapshot (packages/wonder-blocks-button/src/__tests__/custom-snapshot.test.tsx:75:42)
ButtonCore › kind:primary color:default size:medium light:true hovered: packages/wonder-blocks-button/src/__tests__/custom-snapshot.test.tsx#L75
expect(received).toMatchSnapshot() Snapshot name: `ButtonCore kind:primary color:default size:medium light:true hovered 1` - Snapshot - 48 + Received + 1 @@ -1,9 +1,9 @@ <button aria-disabled={false} aria-label="" - className="" + className="default.module.css" onBlur={[Function]} onClick={[Function]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} @@ -13,61 +13,14 @@ onMouseUp={[Function]} onTouchCancel={[Function]} onTouchEnd={[Function]} onTouchStart={[Function]} role="button" - style={ - { - "::MozFocusInner": { - "border": 0, - }, - ":focus": { - "WebkitTapHighlightColor": "rgba(0,0,0,0)", - }, - "alignItems": "center", - "background": "#ffffff", - "border": "none", - "borderRadius": 4, - "boxShadow": "0 0 0 1px #0b2149, 0 0 0 3px #ffffff", - "boxSizing": "border-box", - "color": "#1865f2", - "cursor": "pointer", - "display": "inline-flex", - "height": 40, - "justifyContent": "center", - "margin": 0, - "outline": "none", - "paddingBottom": 0, - "paddingLeft": 16, - "paddingRight": 16, - "paddingTop": 0, - "position": "relative", - "textDecoration": "none", - "touchAction": "manipulation", - "userSelect": "none", - } - } tabIndex={0} type="button" > <span className="" - style={ - { - "MozOsxFontSmoothing": "grayscale", - "WebkitFontSmoothing": "antialiased", - "alignItems": "center", - "display": "inline-block", - "fontFamily": "Lato, "Noto Sans", sans-serif", - "fontSize": 16, - "fontWeight": 700, - "lineHeight": "20px", - "overflow": "hidden", - "pointerEvents": "none", - "textOverflow": "ellipsis", - "whiteSpace": "nowrap", - } - } > Click me </span> </button> at Object.toMatchSnapshot (packages/wonder-blocks-button/src/__tests__/custom-snapshot.test.tsx:75:42)
ButtonCore › kind:primary color:default size:medium light:true pressed: packages/wonder-blocks-button/src/__tests__/custom-snapshot.test.tsx#L75
expect(received).toMatchSnapshot() Snapshot name: `ButtonCore kind:primary color:default size:medium light:true pressed 1` - Snapshot - 48 + Received + 1 @@ -1,9 +1,9 @@ <button aria-disabled={false} aria-label="" - className="" + className="default.module.css" onBlur={[Function]} onClick={[Function]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} @@ -13,61 +13,14 @@ onMouseUp={[Function]} onTouchCancel={[Function]} onTouchEnd={[Function]} onTouchStart={[Function]} role="button" - style={ - { - "::MozFocusInner": { - "border": 0, - }, - ":focus": { - "WebkitTapHighlightColor": "rgba(0,0,0,0)", - }, - "alignItems": "center", - "background": "#b5cefb", - "border": "none", - "borderRadius": 4, - "boxShadow": "0 0 0 1px #0b2149, 0 0 0 3px #b5cefb", - "boxSizing": "border-box", - "color": "#1b50b3", - "cursor": "pointer", - "display": "inline-flex", - "height": 40, - "justifyContent": "center", - "margin": 0, - "outline": "none", - "paddingBottom": 0, - "paddingLeft": 16, - "paddingRight": 16, - "paddingTop": 0, - "position": "relative", - "textDecoration": "none", - "touchAction": "manipulation", - "userSelect": "none", - } - } tabIndex={0} type="button" > <span className="" - style={ - { - "MozOsxFontSmoothing": "grayscale", - "WebkitFontSmoothing": "antialiased", - "alignItems": "center", - "display": "inline-block", - "fontFamily": "Lato, "Noto Sans", sans-serif", - "fontSize": 16, - "fontWeight": 700, - "lineHeight": "20px", - "overflow": "hidden", - "pointerEvents": "none", - "textOverflow": "ellipsis", - "whiteSpace": "nowrap", - } - } > Click me </span> </button> at Object.toMatchSnapshot (packages/wonder-blocks-button/src/__tests__/custom-snapshot.test.tsx:75:42)
ButtonCore › kind:primary color:default size:medium light:false disabled: packages/wonder-blocks-button/src/__tests__/custom-snapshot.test.tsx#L75
expect(received).toMatchSnapshot() Snapshot name: `ButtonCore kind:primary color:default size:medium light:false disabled 1` - Snapshot - 47 + Received + 1 @@ -1,9 +1,9 @@ <button aria-disabled={true} aria-label="" - className="" + className="default.module.css" onBlur={[Function]} onClick={[Function]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} @@ -13,60 +13,14 @@ onMouseUp={[Function]} onTouchCancel={[Function]} onTouchEnd={[Function]} onTouchStart={[Function]} role="button" - style={ - { - "::MozFocusInner": { - "border": 0, - }, - ":focus": { - "boxShadow": "0 0 0 1px #ffffff, 0 0 0 3px rgba(33,36,44,0.32)", - }, - "alignItems": "center", - "background": "rgba(33,36,44,0.32)", - "border": "none", - "borderRadius": 4, - "boxSizing": "border-box", - "color": "rgba(255,255,255,0.64)", - "cursor": "default", - "display": "inline-flex", - "height": 40, - "justifyContent": "center", - "margin": 0, - "outline": "none", - "paddingBottom": 0, - "paddingLeft": 16, - "paddingRight": 16, - "paddingTop": 0, - "position": "relative", - "textDecoration": "none", - "touchAction": "manipulation", - "userSelect": "none", - } - } tabIndex={-1} type="button" > <span className="" - style={ - { - "MozOsxFontSmoothing": "grayscale", - "WebkitFontSmoothing": "antialiased", - "alignItems": "center", - "display": "inline-block", - "fontFamily": "Lato, "Noto Sans", sans-serif", - "fontSize": 16, - "fontWeight": 700, - "lineHeight": "20px", - "overflow": "hidden", - "pointerEvents": "none", - "textOverflow": "ellipsis", - "whiteSpace": "nowrap", - } - } > Click me </span> </button> at Object.toMatchSnapshot (packages/wonder-blocks-button/src/__tests__/custom-snapshot.test.tsx:75:42)
ButtonCore › kind:primary color:default size:medium light:false focused: packages/wonder-blocks-button/src/__tests__/custom-snapshot.test.tsx#L75
expect(received).toMatchSnapshot() Snapshot name: `ButtonCore kind:primary color:default size:medium light:false focused 1` - Snapshot - 48 + Received + 1 @@ -1,9 +1,9 @@ <button aria-disabled={false} aria-label="" - className="" + className="default.module.css" onBlur={[Function]} onClick={[Function]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} @@ -13,61 +13,14 @@ onMouseUp={[Function]} onTouchCancel={[Function]} onTouchEnd={[Function]} onTouchStart={[Function]} role="button" - style={ - { - "::MozFocusInner": { - "border": 0, - }, - ":focus": { - "WebkitTapHighlightColor": "rgba(0,0,0,0)", - }, - "alignItems": "center", - "background": "#1865f2", - "border": "none", - "borderRadius": 4, - "boxShadow": "0 0 0 1px #ffffff, 0 0 0 3px #1865f2", - "boxSizing": "border-box", - "color": "#ffffff", - "cursor": "pointer", - "display": "inline-flex", - "height": 40, - "justifyContent": "center", - "margin": 0, - "outline": "none", - "paddingBottom": 0, - "paddingLeft": 16, - "paddingRight": 16, - "paddingTop": 0, - "position": "relative", - "textDecoration": "none", - "touchAction": "manipulation", - "userSelect": "none", - } - } tabIndex={0} type="button" > <span className="" - style={ - { - "MozOsxFontSmoothing": "grayscale", - "WebkitFontSmoothing": "antialiased", - "alignItems": "center", - "display": "inline-block", - "fontFamily": "Lato, "Noto Sans", sans-serif", - "fontSize": 16, - "fontWeight": 700, - "lineHeight": "20px", - "overflow": "hidden", - "pointerEvents": "none", - "textOverflow": "ellipsis", - "whiteSpace": "nowrap", - } - } > Click me </span> </button> at Object.toMatchSnapshot (packages/wonder-blocks-button/src/__tests__/custom-snapshot.test.tsx:75:42)
ButtonCore › kind:primary color:default size:medium light:false hovered: packages/wonder-blocks-button/src/__tests__/custom-snapshot.test.tsx#L75
expect(received).toMatchSnapshot() Snapshot name: `ButtonCore kind:primary color:default size:medium light:false hovered 1` - Snapshot - 48 + Received + 1 @@ -1,9 +1,9 @@ <button aria-disabled={false} aria-label="" - className="" + className="default.module.css" onBlur={[Function]} onClick={[Function]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} @@ -13,61 +13,14 @@ onMouseUp={[Function]} onTouchCancel={[Function]} onTouchEnd={[Function]} onTouchStart={[Function]} role="button" - style={ - { - "::MozFocusInner": { - "border": 0, - }, - ":focus": { - "WebkitTapHighlightColor": "rgba(0,0,0,0)", - }, - "alignItems": "center", - "background": "#1865f2", - "border": "none", - "borderRadius": 4, - "boxShadow": "0 0 0 1px #ffffff, 0 0 0 3px #1865f2", - "boxSizing": "border-box", - "color": "#ffffff", - "cursor": "pointer", - "display": "inline-flex", - "height": 40, - "justifyContent": "center", - "margin": 0, - "outline": "none", - "paddingBottom": 0, - "paddingLeft": 16, - "paddingRight": 16, - "paddingTop": 0, - "position": "relative", - "textDecoration": "none", - "touchAction": "manipulation", - "userSelect": "none", - } - } tabIndex={0} type="button" > <span className="" - style={ - { - "MozOsxFontSmoothing": "grayscale", - "WebkitFontSmoothing": "antialiased", - "alignItems": "center", - "display": "inline-block", - "fontFamily": "Lato, "Noto Sans", sans-serif", - "fontSize": 16, - "fontWeight": 700, - "lineHeight": "20px", - "overflow": "hidden", - "pointerEvents": "none", - "textOverflow": "ellipsis", - "whiteSpace": "nowrap", - } - } > Click me </span> </button> at Object.toMatchSnapshot (packages/wonder-blocks-button/src/__tests__/custom-snapshot.test.tsx:75:42)