Skip to content

@primer/[email protected]
Compare
Choose a tag to compare
@primer-css primer-css released this 09 Dec 11:20
· 16 commits to main since this release
@primer/[email protected]
10b0aaf
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Learn about vigilant mode.

🔗 See documentation for v0.44.0

Minor Changes

  • #831 8c3448d0 Thanks @joshfarrant! - Reduced the text size in FormControl.Hint and FormControl.Validation components to match their counterparts in CheckboxGroup and RadioGroup for improved consistency and visual design accuracy.

  • #844 00275979 Thanks @joshfarrant! - New Icon component is generally available.

    Example:

    🔗 Read the documentation for more usage examples

  • #830 1f9eb72b Thanks @joshfarrant! - New CheckboxGroup and RadioGroup components to group Checkbox and Radio components are now available.

    CheckboxGroup

    <CheckboxGroup>
  <CheckboxGroup.Label>Choose your favorite features</CheckboxGroup.Label>
  <FormControl>
    <FormControl.Label>Actions notifications</FormControl.Label>
    <Checkbox value="actions" />
  </FormControl>
  <FormControl>
    <FormControl.Label>Packages</FormControl.Label>
    <Checkbox value="packages" />
  </FormControl>
  <FormControl>
    <FormControl.Label>Codespaces</FormControl.Label>
    <Checkbox value="codespaces" />
  </FormControl>
</CheckboxGroup>

    🔗 Read the documentation for more CheckboxGroup examples

    RadioGroup:

    <RadioGroup>
  <RadioGroup.Label>Choose your primary workspace</RadioGroup.Label>
  <FormControl>
    <FormControl.Label>Codespaces</FormControl.Label>
    <Radio name="workspace" value="codespaces" />
  </FormControl>
  <FormControl>
    <FormControl.Label>Local environment</FormControl.Label>
    <Radio name="workspace" value="local" />
  </FormControl>
  <FormControl>
    <FormControl.Label>Pen and paper</FormControl.Label>
    <Radio name="workspace" value="remote" />
  </FormControl>
</RadioGroup>

    🔗 Read the documentation for more RadioGroup examples

  • #824 6e398ba7 Thanks @rezrah! - Updates to SubNav component

    • New anchor-based navigation pattern available:

      Use variant="anchor" on SubNav.SubMenu to apply anchor navigation as an alternative to the default dropdown-based submenu.

      <SubNav>
  <SubNav.Heading href="#">Heading</SubNav.Heading>
  <SubNav.Link href="#" aria-current="page">
    Link with anchor navigation
    <SubNav.SubMenu variant="anchor">
      <SubNav.Link href="#">Anchor link one</SubNav.Link>
      <SubNav.Link href="#">Anchor link two</SubNav.Link>
      <SubNav.Link href="#">Anchor link three</SubNav.Link>
      <SubNav.Link href="#">Anchor link four</SubNav.Link>
    </SubNav.SubMenu>
  </SubNav.Link>
  <SubNav.Link href="#">Link</SubNav.Link>
  <SubNav.Link href="#">Link</SubNav.Link>
</SubNav>

    • Overlay now closes when user clicks outside of it

    • Dropdown submenus now appear with white and black background and foreground colors respectively, irrespective of color mode.

    • Various other visual updates to improve brand-alignment. These include adjustments to text size, weight, color and iconography.

Patch Changes

  • #842 26f79f62 Thanks @joshfarrant! - Allow AnchorNav links to wrap to the next line in the expanded list on narrow viewports.

  • #843 7473042c Thanks @joshfarrant! - Added a small (200ms) delay to the closing of the Tooltip to make it easier for users to move their cursor to the contents of the Tooltip.

  • #847 c3ca91c8 Thanks @stamat! - Improved accessibility of Button and Link components on Windows-based high contrast themes. Outlines are now visible only when focused, and border underlines will appear correctly.

  • #841 78e82c16 Thanks @joshfarrant! - Improved accessibility in AnchorNav through clearer navigation menu labelling for screen reader users on narrow viewports.

  • #833 0f8bfa65 Thanks @rezrah! - selected breadcrumb items now use non-interactive elements for improved keyboard navigation and correct semantics.

  • #838 bf785d6b Thanks @joshfarrant! - Updated the accessible label of the SubNav's open/close toggle button to include the name of the current page.

  • #828 652e7ff0 Thanks @joshfarrant! - Fixed bug where TextInput, TextArea, and Select components would expand to the width of a the validation message on the parent FormControl.

Assets 2
Loading