diff --git a/.changeset/light-swans-thank.md b/.changeset/light-swans-thank.md new file mode 100644 index 000000000..408f5dc2d --- /dev/null +++ b/.changeset/light-swans-thank.md @@ -0,0 +1,5 @@ +--- +"@khanacademy/wonder-blocks-button": patch +--- + +Fix inconsistent underline height in the active state of the tertiary button. diff --git a/__docs__/wonder-blocks-button/button.stories.tsx b/__docs__/wonder-blocks-button/button.stories.tsx index 227f9a435..a3dfa98bd 100644 --- a/__docs__/wonder-blocks-button/button.stories.tsx +++ b/__docs__/wonder-blocks-button/button.stories.tsx @@ -127,7 +127,7 @@ export const Tertiary: StoryComponentType = { // eslint-disable-next-line testing-library/prefer-user-event await fireEvent.mouseDown(button); await expect(innerLabel).toHaveStyle("color: rgb(27, 80, 179)"); - await expect(computedStyleLabel.height).toBe("1px"); + await expect(computedStyleLabel.height).toBe("2px"); await expect(computedStyleLabel.color).toBe("rgb(27, 80, 179)"); }, }; diff --git a/packages/wonder-blocks-button/src/components/button-core.tsx b/packages/wonder-blocks-button/src/components/button-core.tsx index c02543fc9..35a59b979 100644 --- a/packages/wonder-blocks-button/src/components/button-core.tsx +++ b/packages/wonder-blocks-button/src/components/button-core.tsx @@ -495,7 +495,7 @@ export const _generateStyles = ( active: { color: light ? fadedColor : activeColor, ":after": { - height: 1, + height: theme.size.height.tertiaryHover, background: light ? fadedColor : activeColor, }, },