@primer/[email protected]

Minor Changes

• #453 5855526 Thanks @rezrah! - - New font prop added to Text and Heading components to alternate between mona-sans and hubot-sans variable fonts. mona-sans remains the default.
  • Uses latest v1.0.1 releases of (Hubot Sans)[https://github.com/github/hubot-sans/releases/tag/v1.0.1] and (Mona Sans)[https://github.com/github/mona-sans/releases/tag/v1.0.1] fonts.
  • Added extralight weight option

Patch Changes

• #468 a6251df Thanks @rezrah! - Force removal of link underlines in Card components, to prevent specificity issues with local stylesheet overrides.

• #451 b15ab24 Thanks @joseph-lozano! - Fixed menu item overflow issues on narrow viewports in SubdomainNavBar.

  In addition, the body element will now hide overflow content and prevent background scrolling when the menu is open.

• #480 0e1e3bb Thanks @joseph-lozano! - Improved keyboard navigation in the SubdomainNavBar mobile menu using focus trapping.

• #469 da4e989 Thanks @joseph-lozano! - Changed the aria-label for the GitHub link in the footer

• #457 9ea0803 Thanks @joseph-lozano! - Fixed issue with prose un-ordered lists in dark mode

• #479 1896326 Thanks @rezrah! - Increase tracking of 100 typographic position to improve readability

• #479 1896326 Thanks @rezrah! - Added export for CardSkewEffect component

• #468 a6251df Thanks @rezrah! - Added 'torchlight' hover effect to dark mode Card instances.

  See: https://primer.style/brand/components/Card/react#torchlight-effect

@primer/[email protected]

Patch Changes

• #457 9ea0803 Thanks @joseph-lozano! - Fixed issue with prose un-ordered lists in dark mode

• #479 1896326 Thanks @rezrah! - Increase tracking of 100 typographic position to improve readability

@primer/[email protected]

Patch Changes

• #459 0166b19 Thanks @rezrah! - Adds borderBlockStartWidth, borderBlockEndWidth, borderInlineStartWidth, and borderInlineEndWidth props to the Box component to support directional borders.

  <>
    <Box borderBlockStartWidth="thin" borderColor="default" borderStyle="solid" />
    <Box borderBlockEndWidth="thin" borderColor="default" borderStyle="solid" />
    <Box borderInlineStartWidth="thin" borderColor="default" borderStyle="solid" />
    <Box borderInlineEndWidth="thin" borderColor="default" borderStyle="solid" />
  </>

• #456 64318fd Thanks @rezrah! - Added hook for useWindowSize to the library exports.

  Usage example:

  import {useWindowSize} from '@primer/react-brand'

  function Component() {
    const {width, height, isXSmall, isSmall, isMedium, isLarge, isXLarge, isXXLarge, currentBreakpointSize} =
      useWindowSize()
  }

• #460 893df22 Thanks @rezrah! - Improvements to default styling in FAQ content.

• #456 64318fd Thanks @rezrah! - Enabled forwardRef on Hero.Description, Hero.Label and Hero.Image.

• #435 3227a7d Thanks @josepmartins! - Adds Blockquote, Code, Figure and Figcaption to the Prose component.

• #464 8e858cb Thanks @rezrah! - Replace usage of start with flex-start in Bento, Hero and FAQGroup components.

• #461 4ebe9a5 Thanks @rezrah! - Add font-smoothing to base stylesheet, for better font rendering on macOS.

@primer/[email protected]

@primer/[email protected]

@primer/[email protected]

Patch Changes

• #449 d009559 Thanks @rezrah! - Fixed bug in AnchorNav whereby the active link would not be highlighted when the page first loads.

• #443 6a7dc95 Thanks @josepmartins! - Fixes bug in the Testimonial component that prevents avatar get squished

• #440 4c0bd32 Thanks @rezrah! - Added hideUntilSticky option to AnchorNav component. This will visibly hide the AnchorNav until it becomes sticky.

  <AnchorNav hideUntilSticky>
    <AnchorNav.Link href="#section">...</AnchorNav.Link>
  </AnchorNav>

  For any additional client-side customization, a data-sticky attribute is available and will be set to true when the AnchorNav is sticky.

• #447 4803d21 Thanks @rezrah! - Reduced large button text size to 20px.

@primer/[email protected]

@primer/[email protected]

@primer/[email protected]

Minor Changes

• #431 2243ae4 Thanks @rezrah! - Fix erroneous InlineLink appearance on multiline.

  Removed the following design tokens:

  - --brand-InlineLink-transition-scale-start
  - --brand-InlineLink-transition-scale-end

• #428 6141bff Thanks @josepmartins! - - Updates the border radius scale to use the updated small, medium, large, and the new xlarge tokens.

  • Adds xlarge border radius option to the Box component properties.

Patch Changes

• #429 aacbde1 Thanks @josepmartins! - Fixes style not being passed as general props to the Card component

• #433 dd02bc2 Thanks @rezrah! - Fixed incorrect click target area for Accordion answers

• #436 28bdf5e Thanks @josepmartins! - Adds default height to Card to align vertical size when using Grid or Stack components as a wrappers.

• #431 2243ae4 Thanks @rezrah! - Reduced Textarea text size to 14px and 16px for medium and large sizes respectively, for consistency with other free text inputs.

@primer/[email protected]

Minor Changes

• #428 6141bff Thanks @josepmartins! - Removes old control border radius tokens

  -  --brand-control-border-radius
  -  --brand-control-large-borderRadius
  -  --brand-control-medium-borderRadius

  Modifies border radius scale values and adds new xlarge border radius option to the scale

  + --brand-borderRadius-small: 4px
  + --brand-borderRadius-medium: 8px
  + --brand-borderRadius-large: 16px
  + --brand-borderRadius-xlarge: 24px

• #431 2243ae4 Thanks @rezrah! - Fix erroneous InlineLink appearance on multiline.

  Removed the following design tokens:

  - --brand-InlineLink-transition-scale-start
  - --brand-InlineLink-transition-scale-end

@primer/[email protected]

Minor Changes

• #424 61eba57 Thanks @josepmartins! - > Warning

  This is a breaking change to the Testimonial component.

  • Update Testimonial component provider layout styles
  • Remove Testimonial align prop

• #420 ad6c877 Thanks @rezrah! - Use the bento to present content in a responsive grid layout.

  <Bento>
    <Bento.Item columnSpan={3} rowSpan={8} />
    <Bento.Item columnSpan={3} rowSpan={4} />
    <Bento.Item columnSpan={6} rowSpan={8} />
    <Bento.Item columnSpan={3} rowSpan={4} rowStart={9} />
    <Bento.Item columnSpan={3} rowSpan={8} />
    <Bento.Item columnSpan={6} rowSpan={4} />
  </Bento>

Patch Changes

• #427 084db13 Thanks @rezrah! - Increase space between river heading and description to 16px from 8px

• #425 88e42f0 Thanks @josepmartins! - Adjust FAQGroup navigation styles for selected items

• #427 084db13 Thanks @rezrah! - Fixed a bug in Hero where an empty div with end-specific margin is erroneously defined for CTAs.

• #427 084db13 Thanks @rezrah! - Update FormControl hasBorder color value to match control borders

• #427 084db13 Thanks @rezrah! - Add none option to Box spacing props to reset defined paddings at larger viewports.

  <Box padding={{
      narrow: 24,
      wide: 'none' // <-- this will remove padding at the wide viewport
  }} />
  

@primer/[email protected]

Patch Changes

• #423 9299f25 Thanks @josepmartins! - Add inner spacing values for RiverBreakout. Uses 64px in desktop, 48px in tablet and 40px in mobile.

  --brand-RiverBreakout-spacing-inner