From 4061dd9594b64ba7cb88b54601932f79caf21706 Mon Sep 17 00:00:00 2001 From: Alan B Smith Date: Wed, 28 Oct 2026 16:50:24 -0600 Subject: [PATCH 1/2] fix(information-highlight): Remove trailing margin when Body is the last element Fixes: #4228 Co-authored-by: Cursor --- .../component/InformationHighlight.spec.tsx | 36 +++++++++++++++++++ .../information-highlight/lib/parts/Body.tsx | 5 +++ .../stories/examples/Basic.tsx | 2 -- .../stories/examples/Body.tsx | 2 -- 4 files changed, 41 insertions(+), 4 deletions(-) diff --git a/cypress/component/InformationHighlight.spec.tsx b/cypress/component/InformationHighlight.spec.tsx index ce36208f3d..5c5f298945 100644 --- a/cypress/component/InformationHighlight.spec.tsx +++ b/cypress/component/InformationHighlight.spec.tsx @@ -1,3 +1,5 @@ +import {Basic} from '../../modules/react/information-highlight/stories/examples/Basic'; +import {Body} from '../../modules/react/information-highlight/stories/examples/Body'; import {Caution} from '../../modules/react/information-highlight/stories/examples/Caution'; import {Critical} from '../../modules/react/information-highlight/stories/examples/Critical'; import {Informational} from '../../modules/react/information-highlight/stories/examples/Informational'; @@ -18,4 +20,38 @@ describe('Information Highlight', () => { }); }); }); + + context('given the Body is the last element', () => { + beforeEach(() => { + cy.mount(); + }); + + it('should not have any axe errors', () => { + cy.checkA11y(); + }); + + it('should not add space below the Body', () => { + cy.findByText('Only the body of an information highlight').should( + 'have.css', + 'margin-bottom', + '0px' + ); + }); + }); + + context('given the Body is followed by a Link', () => { + beforeEach(() => { + cy.mount(); + }); + + it('should not have any axe errors', () => { + cy.checkA11y(); + }); + + it('should add space between the Body and the Link', () => { + cy.findByText(/This is what an information highlight would look like/) + .invoke('css', 'margin-bottom') + .should('not.equal', '0px'); + }); + }); }); diff --git a/modules/react/information-highlight/lib/parts/Body.tsx b/modules/react/information-highlight/lib/parts/Body.tsx index 22f647bf1e..126922f212 100644 --- a/modules/react/information-highlight/lib/parts/Body.tsx +++ b/modules/react/information-highlight/lib/parts/Body.tsx @@ -14,6 +14,11 @@ const informationHighlightBodyStencil = createStencil({ color: system.color.fg.default, gridColumn: '2', marginBlockEnd: system.legacy.gap.sm, + // The margin separates Body from content below it (e.g. Link). When Body is the last + // element, there is nothing to separate from, so remove it to avoid extra trailing space. + '&:last-child': { + marginBlockEnd: 0, + }, }; }, }); diff --git a/modules/react/information-highlight/stories/examples/Basic.tsx b/modules/react/information-highlight/stories/examples/Basic.tsx index 37398dc829..6c8f079b97 100644 --- a/modules/react/information-highlight/stories/examples/Basic.tsx +++ b/modules/react/information-highlight/stories/examples/Basic.tsx @@ -1,5 +1,3 @@ -import React from 'react'; - import {InformationHighlight} from '@workday/canvas-kit-react/information-highlight'; export const Basic = () => { diff --git a/modules/react/information-highlight/stories/examples/Body.tsx b/modules/react/information-highlight/stories/examples/Body.tsx index 7e0ac60922..4772d33a4e 100644 --- a/modules/react/information-highlight/stories/examples/Body.tsx +++ b/modules/react/information-highlight/stories/examples/Body.tsx @@ -1,5 +1,3 @@ -import React from 'react'; - import {InformationHighlight} from '@workday/canvas-kit-react/information-highlight'; export const Body = () => { From 8e8ac2481b8c6c8f1426367b4d9a5cd91de1f82d Mon Sep 17 00:00:00 2001 From: Alan B Smith Date: Thu, 29 Oct 2026 11:46:51 -0600 Subject: [PATCH 2/2] fix(information-highlight): Preserve consumer margin overrides on last child Nested pseudo-class rules are emitted after flat declarations in the merged class, so changing margin-block-end directly in :last-child also overrode a consumer's cs margin. Change a CSS variable instead. Co-authored-by: Cursor --- .../information-highlight/lib/parts/Body.tsx | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/modules/react/information-highlight/lib/parts/Body.tsx b/modules/react/information-highlight/lib/parts/Body.tsx index 126922f212..4593b6f0d5 100644 --- a/modules/react/information-highlight/lib/parts/Body.tsx +++ b/modules/react/information-highlight/lib/parts/Body.tsx @@ -4,7 +4,10 @@ import {createStencil, handleCsProp} from '@workday/canvas-kit-styling'; import {system} from '@workday/canvas-tokens-web'; const informationHighlightBodyStencil = createStencil({ - base: () => { + vars: { + marginEnd: '', + }, + base: ({marginEnd}) => { return { fontFamily: system.fontFamily.default, fontWeight: system.fontWeight.normal, @@ -13,11 +16,15 @@ const informationHighlightBodyStencil = createStencil({ letterSpacing: system.legacy.letterSpacing.subtext.lg, color: system.color.fg.default, gridColumn: '2', - marginBlockEnd: system.legacy.gap.sm, + [marginEnd]: system.legacy.gap.sm, + marginBlockEnd: marginEnd, // The margin separates Body from content below it (e.g. Link). When Body is the last // element, there is nothing to separate from, so remove it to avoid extra trailing space. - '&:last-child': { - marginBlockEnd: 0, + // The pseudo-class rule changes a variable instead of `margin-block-end` itself: nested + // rules are emitted after flat declarations, so overriding the property would also override + // a consumer's `cs={{marginBlockEnd}}`. + '&:where(:last-child)': { + [marginEnd]: 0, }, }; },