Releases: primer/brand
@primer/react-brand@0.40.1
See documentation for this release
Patch Changes
-
#754
d061705c
Thanks @joshfarrant! - TheRiverStoryScroll
component now enforces that its children must beRiver
components through type checking, instead of relying on a run-time check. -
#739
24bd6338
Thanks @joshfarrant! - Fixed a bug in theSubNav
component where the submenu toggle was rendered as an empty button on mobile viewports. -
#736
73cf706e
Thanks @lukasoppermann! - Replaced the--brand-VideoPlayer-tooltip-padding
design token in theVideoPlayer
component with two new tokens that separately account for padding along each axis:--brand-VideoPlayer-tooltip-padding-inline
and--brand-VideoPlayer-tooltip-padding-block
.Note: This update does not introduce any visual changes. Please update any manual references to
--brand-VideoPlayer-tooltip-padding
to use the new tokens.- --brand-VideoPlayer-tooltip-padding + --brand-VideoPlayer-tooltip-padding-inline + --brand-VideoPlayer-tooltip-padding-block
-
#722
99328ce0
Thanks @danielguillan! - Added support for<b>
elements toBento
,RiverBreakout
,SectionIntro
,Timeline
, andTestimonial
components, as<em>
is semantically interpreted by screen readers for emphasis, while<b>
allows duo-tone text to function purely as a visual decoration.Usage example:
<SectionIntro> <SectionIntro.Heading> <b>Expressive headline</b> about an exclusive set of features. </SectionIntro.Heading> </SectionIntro>
Important
The updated components still support the use of<em>
elements for backward compatibility, but moving forward, the only recommended element for emphasized text is<b>
. -
#733
2dcb9bad
Thanks @danielguillan! - Fixes Label component multiline reflow -
#746
4af8db14
Thanks @joshfarrant! - Fixed a bug whereCard
components rendered within a dark colour mode would not take the full width of their container.
@primer/brand-primitives@0.40.1
Patch Changes
-
#736
73cf706e
Thanks @lukasoppermann! - Replaced the--brand-VideoPlayer-tooltip-padding
design token in theVideoPlayer
component with two new tokens that separately account for padding along each axis:--brand-VideoPlayer-tooltip-padding-inline
and--brand-VideoPlayer-tooltip-padding-block
.Note: This update does not introduce any visual changes. Please update any manual references to
--brand-VideoPlayer-tooltip-padding
to use the new tokens.- --brand-VideoPlayer-tooltip-padding + --brand-VideoPlayer-tooltip-padding-inline + --brand-VideoPlayer-tooltip-padding-block
-
#738
f6bab573
Thanks @lukasoppermann! - Fixed line formatting infunctional/size/size-coarse.css
andfunctional/size/size-fine.css
E.g.
- @media (pointer: coarse) { :root { - --brand-controlStack-medium-gap-auto: var(--base-size-12); - --brand-controlStack-small-gap-auto: var(--base-size-16); - --brand-control-minTarget-auto: var(--base-size-44); -}} +@media (pointer: coarse) { + :root { + --brand-controlStack-medium-gap-auto: var(--base-size-12); + --brand-controlStack-small-gap-auto: var(--base-size-16); + --brand-control-minTarget-auto: var(--base-size-44); + } +}
@primer/react-brand@0.40.0
See documentation for this release
Minor Changes
@primer/brand-primitives@0.40.0
@primer/brand-primitives@0.40.0
@primer/react-brand@0.39.0
Minor Changes
-
#717
24fc6d02
Thanks @rezrah! - Improved a11y labelling in various components.Please note these changes could affect any behavioral tests, which rely on accessible matchers such as
getByRole
.SubdomainNavBar
search buttonaria-label
changed from 'search' to 'Toggle search bar'SubdomainNavBar
removal of unnecessaryaria-label
'global breadcrumb'Checkbox
addition of new label forchecked
state icon as 'Checkmark'Checkbox
addition of new label forindeterminate
state icon as 'Dash icon'
-
#707
715dfbb3
Thanks @rezrah! - NewFootnotes
component generally availableimport {Footnotes} from '@primer/react-brand'
<Footnotes> <Footnotes.Item>There are now 100 million developers around the world using GitHub.</Footnotes.Item> </Footnotes>
Patch Changes
-
#711
1cde8ef2
Thanks @joshfarrant! - UpdatedSubNav
links and submenus to useul
andli
elements — instead ofdiv
elements — to communicate the hierarchy of the navigation to assistive technologies. -
#700
47908f1e
Thanks @rezrah! -ActionMenu
button no longer truncates longer labels. Now follows WCAG criterion around text reflow. -
#714
fb1980b1
Thanks @rezrah! - Hide paged items in Pagination component on narrow viewports to prevent horizontal scrolling and offer improved accessibility by default.Use
showPages
to re-enable paged items if required:<Pagination showPages />
@primer/brand-primitives@0.39.0
Minor Changes
-
#717
24fc6d02
Thanks @rezrah! - Change toxxlarge
breakpoint and the addition of two new base scale size tokens.Outcome of an upgrade to Primer Primitives
v9
release.+ --base-size-2: 0.125rem;
+ --base-size-6: 0.375rem;
- --brand-breakpoint-xxlarge: 90rem; + --brand-breakpoint-xxlarge: 87.5rem;
- @custom-media --brand-viewportRange-wide-viewport (min-width: 90rem); + @custom-media --brand-viewportRange-wide-viewport (min-width: 87.5rem);
@primer/react-brand@0.38.0
See documentation for this release
Minor Changes
-
#691
34e7aa8b
Thanks @joshfarrant! - > WarningThis update contains a breaking visual change to the
LogoSuite
component.LogoSuite
components without a specifiedvariant
prop will now automatically apply eitheremphasis
ormuted
styles depending on the number of logos in theLogoBar
.- Added new default behaviour to the
variant
prop of theLogoSuite
component. Ifvariant
isundefined
then eitheremphasis
ormuted
styles are automatically applied depending on the number of logos in theLogoBar
. Five or fewer logos apply theemphasis
style, while six or more use themuted
style. - Reduced
LogoSuite
size on mobile viewports.
- Added new default behaviour to the
Patch Changes
- #694
5f1181be
Thanks @joshfarrant! - Improved screen reader accuracy of column indexes inComparisonTable
.
@primer/brand-primitives@0.38.0
Minor Changes
-
#691
34e7aa8b
Thanks @joshfarrant! - > WarningThis update contains a breaking visual change to the
LogoSuite
component.LogoSuite
components without a specifiedvariant
prop will now automatically apply eitheremphasis
ormuted
styles depending on the number of logos in theLogoBar
.- Added new default behaviour to the
variant
prop of theLogoSuite
component. Ifvariant
isundefined
then eitheremphasis
ormuted
styles are automatically applied depending on the number of logos in theLogoBar
. Five or fewer logos apply theemphasis
style, while six or more use themuted
style. - Reduced
LogoSuite
size on mobile viewports.
- Added new default behaviour to the
@primer/react-brand@0.37.0
Minor Changes
-
#684
e382a491
Thanks @danielguillan! - ExtendHero.Heading
andHeading.Description
length.Warning
This change can lead to reduced contrast in certain situations. Please manually review all instances of theHero
- particularly those that use a background image - to ensure that minimum contrast requirements are met.
Patch Changes
-
#695
2bb68ea7
Thanks @joshfarrant! -ComparisonTable
featured columns now identify themselves to screen readers by appending the textfeatured
to the column title. This text can be customized using thevisuallyHiddenFeaturedLabel
prop. -
#677
c76c8c87
Thanks @rezrah! - Removed redundant styles in defaultSection
andBreakoutBanner
components -
#688
55a353c7
Thanks @rezrah! - Added experimentalTextRevealAnimation
component. -
#688
55a353c7
Thanks @rezrah! - Remove strict, custom typings forTestimonial.Quote
-
#679
30f717dd
Thanks @joshfarrant! - Fixed an issue whereSubNav
submenus were not accessible through keyboard navigation
@primer/brand-primitives@0.37.0
@primer/brand-primitives@0.37.0