WB-1808: Button - Use CSS pseudo-classes for styling states (hover, focus, etc) #4867
jandradenode-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 / Lint
Matrix: Test / Test
Annotations
13 errors and 5 warnings
|
Lint / Lint (ubuntu-latest, 20.x):
__docs__/wonder-blocks-button/button.stories.tsx#L151
Type 'HTMLElement' has no properties in common with type 'Options & { keyboardState?: System | undefined; pointerState?: System | undefined; } & { shift?: boolean | undefined; }'.
|
|
Lint / Lint (ubuntu-latest, 20.x)
Process completed with exit code 2.
|
|
ButtonCore › kind:primary color:default size:medium light:true focused:
packages/wonder-blocks-button/src/__tests__/custom-snapshot.test.tsx#L72
expect(received).toMatchSnapshot()
Snapshot name: `ButtonCore kind:primary color:default size:medium light:true focused 1`
- Snapshot - 1
+ Received + 1
@@ -2,11 +2,11 @@
<button
aria-disabled="false"
aria-label=""
class=""
role="button"
- style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0px 16px 0px 16px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgb(255, 255, 255); color: rgb(24, 101, 242); box-shadow: 0 0 0 1px #0b2149, 0 0 0 3px #ffffff;"
+ style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0px 16px 0px 16px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgb(255, 255, 255); color: rgb(24, 101, 242);"
tabindex="0"
type="button"
>
<span
class=""
at Object.toMatchSnapshot (packages/wonder-blocks-button/src/__tests__/custom-snapshot.test.tsx:72:47)
|
|
ButtonCore › kind:primary color:default size:medium light:true hovered:
packages/wonder-blocks-button/src/__tests__/custom-snapshot.test.tsx#L72
expect(received).toMatchSnapshot()
Snapshot name: `ButtonCore kind:primary color:default size:medium light:true hovered 1`
- Snapshot - 1
+ Received + 1
@@ -2,11 +2,11 @@
<button
aria-disabled="false"
aria-label=""
class=""
role="button"
- style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0px 16px 0px 16px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgb(255, 255, 255); color: rgb(24, 101, 242); box-shadow: 0 0 0 1px #0b2149, 0 0 0 3px #ffffff;"
+ style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0px 16px 0px 16px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgb(255, 255, 255); color: rgb(24, 101, 242);"
tabindex="0"
type="button"
>
<span
class=""
at Object.toMatchSnapshot (packages/wonder-blocks-button/src/__tests__/custom-snapshot.test.tsx:72:47)
|
|
ButtonCore › kind:primary color:default size:medium light:true pressed:
packages/wonder-blocks-button/src/__tests__/custom-snapshot.test.tsx#L72
expect(received).toMatchSnapshot()
Snapshot name: `ButtonCore kind:primary color:default size:medium light:true pressed 1`
- Snapshot - 1
+ Received + 1
@@ -2,11 +2,11 @@
<button
aria-disabled="false"
aria-label=""
class=""
role="button"
- style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0px 16px 0px 16px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgb(181, 206, 251); color: rgb(27, 80, 179); box-shadow: 0 0 0 1px #0b2149, 0 0 0 3px #b5cefb;"
+ style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0px 16px 0px 16px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgb(255, 255, 255); color: rgb(24, 101, 242); background-color: rgb(27, 80, 179); outline-color: rgb(181, 206, 251);"
tabindex="0"
type="button"
>
<span
class=""
at Object.toMatchSnapshot (packages/wonder-blocks-button/src/__tests__/custom-snapshot.test.tsx:72:47)
|
|
ButtonCore › kind:primary color:default size:medium light:false focused:
packages/wonder-blocks-button/src/__tests__/custom-snapshot.test.tsx#L72
expect(received).toMatchSnapshot()
Snapshot name: `ButtonCore kind:primary color:default size:medium light:false focused 1`
- Snapshot - 1
+ Received + 1
@@ -2,11 +2,11 @@
<button
aria-disabled="false"
aria-label=""
class=""
role="button"
- style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0px 16px 0px 16px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgb(24, 101, 242); color: rgb(255, 255, 255); box-shadow: 0 0 0 1px #ffffff, 0 0 0 3px #1865f2;"
+ style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0px 16px 0px 16px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgb(24, 101, 242); color: rgb(255, 255, 255);"
tabindex="0"
type="button"
>
<span
class=""
at Object.toMatchSnapshot (packages/wonder-blocks-button/src/__tests__/custom-snapshot.test.tsx:72:47)
|
|
ButtonCore › kind:primary color:default size:medium light:false hovered:
packages/wonder-blocks-button/src/__tests__/custom-snapshot.test.tsx#L72
expect(received).toMatchSnapshot()
Snapshot name: `ButtonCore kind:primary color:default size:medium light:false hovered 1`
- Snapshot - 1
+ Received + 1
@@ -2,11 +2,11 @@
<button
aria-disabled="false"
aria-label=""
class=""
role="button"
- style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0px 16px 0px 16px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgb(24, 101, 242); color: rgb(255, 255, 255); box-shadow: 0 0 0 1px #ffffff, 0 0 0 3px #1865f2;"
+ style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0px 16px 0px 16px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgb(24, 101, 242); color: rgb(255, 255, 255);"
tabindex="0"
type="button"
>
<span
class=""
at Object.toMatchSnapshot (packages/wonder-blocks-button/src/__tests__/custom-snapshot.test.tsx:72:47)
|
|
ButtonCore › kind:primary color:default size:medium light:false pressed:
packages/wonder-blocks-button/src/__tests__/custom-snapshot.test.tsx#L72
expect(received).toMatchSnapshot()
Snapshot name: `ButtonCore kind:primary color:default size:medium light:false pressed 1`
- Snapshot - 1
+ Received + 1
@@ -2,11 +2,11 @@
<button
aria-disabled="false"
aria-label=""
class=""
role="button"
- style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0px 16px 0px 16px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgb(27, 80, 179); color: rgb(181, 206, 251); box-shadow: 0 0 0 1px #ffffff, 0 0 0 3px #1b50b3;"
+ style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0px 16px 0px 16px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgb(24, 101, 242); color: rgb(255, 255, 255); background-color: rgb(27, 80, 179); outline-color: rgb(27, 80, 179);"
tabindex="0"
type="button"
>
<span
class=""
at Object.toMatchSnapshot (packages/wonder-blocks-button/src/__tests__/custom-snapshot.test.tsx:72:47)
|
|
ButtonCore › kind:primary color:default size:small light:true focused:
packages/wonder-blocks-button/src/__tests__/custom-snapshot.test.tsx#L72
expect(received).toMatchSnapshot()
Snapshot name: `ButtonCore kind:primary color:default size:small light:true focused 1`
- Snapshot - 1
+ Received + 1
@@ -2,11 +2,11 @@
<button
aria-disabled="false"
aria-label=""
class=""
role="button"
- style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0px 16px 0px 16px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgb(255, 255, 255); color: rgb(24, 101, 242); box-shadow: 0 0 0 1px #0b2149, 0 0 0 3px #ffffff;"
+ style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0px 16px 0px 16px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgb(255, 255, 255); color: rgb(24, 101, 242);"
tabindex="0"
type="button"
>
<span
class=""
at Object.toMatchSnapshot (packages/wonder-blocks-button/src/__tests__/custom-snapshot.test.tsx:72:47)
|
|
ButtonCore › kind:primary color:default size:small light:true hovered:
packages/wonder-blocks-button/src/__tests__/custom-snapshot.test.tsx#L72
expect(received).toMatchSnapshot()
Snapshot name: `ButtonCore kind:primary color:default size:small light:true hovered 1`
- Snapshot - 1
+ Received + 1
@@ -2,11 +2,11 @@
<button
aria-disabled="false"
aria-label=""
class=""
role="button"
- style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0px 16px 0px 16px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgb(255, 255, 255); color: rgb(24, 101, 242); box-shadow: 0 0 0 1px #0b2149, 0 0 0 3px #ffffff;"
+ style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0px 16px 0px 16px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgb(255, 255, 255); color: rgb(24, 101, 242);"
tabindex="0"
type="button"
>
<span
class=""
at Object.toMatchSnapshot (packages/wonder-blocks-button/src/__tests__/custom-snapshot.test.tsx:72:47)
|
|
ButtonCore › kind:primary color:default size:small light:true pressed:
packages/wonder-blocks-button/src/__tests__/custom-snapshot.test.tsx#L72
expect(received).toMatchSnapshot()
Snapshot name: `ButtonCore kind:primary color:default size:small light:true pressed 1`
- Snapshot - 1
+ Received + 1
@@ -2,11 +2,11 @@
<button
aria-disabled="false"
aria-label=""
class=""
role="button"
- style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0px 16px 0px 16px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgb(181, 206, 251); color: rgb(27, 80, 179); box-shadow: 0 0 0 1px #0b2149, 0 0 0 3px #b5cefb;"
+ style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0px 16px 0px 16px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgb(255, 255, 255); color: rgb(24, 101, 242); background-color: rgb(27, 80, 179); outline-color: rgb(181, 206, 251);"
tabindex="0"
type="button"
>
<span
class=""
at Object.toMatchSnapshot (packages/wonder-blocks-button/src/__tests__/custom-snapshot.test.tsx:72:47)
|
|
ButtonCore › kind:primary color:default size:small light:false focused:
packages/wonder-blocks-button/src/__tests__/custom-snapshot.test.tsx#L72
expect(received).toMatchSnapshot()
Snapshot name: `ButtonCore kind:primary color:default size:small light:false focused 1`
- Snapshot - 1
+ Received + 1
@@ -2,11 +2,11 @@
<button
aria-disabled="false"
aria-label=""
class=""
role="button"
- style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0px 16px 0px 16px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgb(24, 101, 242); color: rgb(255, 255, 255); box-shadow: 0 0 0 1px #ffffff, 0 0 0 3px #1865f2;"
+ style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0px 16px 0px 16px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgb(24, 101, 242); color: rgb(255, 255, 255);"
tabindex="0"
type="button"
>
<span
class=""
at Object.toMatchSnapshot (packages/wonder-blocks-button/src/__tests__/custom-snapshot.test.tsx:72:47)
|
|
Test / Test (ubuntu-latest, 20.x, 1/2)
The job was canceled because "ubuntu-latest_20_x_2_2" failed.
|
|
Prime node_modules cache for primary configuration (ubuntu-latest, 20.x)
ubuntu-latest pipelines will use ubuntu-24.04 soon. For more details, see https://github.com/actions/runner-images/issues/10636
|
|
Lint / Lint (ubuntu-latest, 20.x)
ubuntu-latest pipelines will use ubuntu-24.04 soon. For more details, see https://github.com/actions/runner-images/issues/10636
|
|
Check for .changeset entries for all changed files (ubuntu-latest, 20.x)
ubuntu-latest pipelines will use ubuntu-24.04 soon. For more details, see https://github.com/actions/runner-images/issues/10636
|
|
Test / Test (ubuntu-latest, 20.x, 2/2)
ubuntu-latest pipelines will use ubuntu-24.04 soon. For more details, see https://github.com/actions/runner-images/issues/10636
|
|
Check build sizes (ubuntu-latest, 20.x)
ubuntu-latest pipelines will use ubuntu-24.04 soon. For more details, see https://github.com/actions/runner-images/issues/10636
|