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..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,7 +16,16 @@ 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. + // 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, + }, }; }, }); 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 = () => {