@primer/[email protected]

Minor Changes

• #162 b7dcae0 Thanks @josepmartins! - Card Component

  Example Usage

  <Card href="https://github.com">
    <Card.Heading>Collaboration is the key to DevOps success</Card.Heading>
    <Card.Description>Everything you need to know about getting started with GitHub Actions.</Card.Description>
  </Card>

  • Card Documentation

Patch Changes

• #194 2ffcb14 Thanks @rezrah! - Added arrowDirection prop to Link component

  <Link href="https://github.com" arrowDirection="start">
    Back to GitHub
  </Link>

• 55abb8e Thanks @rezrah! - Fix bug in forwarding a className to SubdomainNavBar and remove console errors for Avatar

  E.g.

  <SubdomainNavBar className="custom-css-class" />
  

• #193 3d8a95b Thanks @TylerJDev! - Allows FAQ.Question and FAQ.Subheading to have adjustable heading levels (e.g. <FAQ.Question as="h3" />)

@primer/[email protected]

@primer/[email protected]

@primer/[email protected]

Minor Changes

• #176 ca07fdc Thanks @danielguillan! - New Avatar component available

  Use Avatar to display a thumbnail representation of a person.

  <Avatar src="https://avatars.githubusercontent.com/u/92997159?v=4" alt="A random avatar picture" />

  🔗 See the documentation for more details and usage examples.

• #163 fe0e1ee Thanks @JoshBowdenConcepts! - CTAForm Component

  Example Usage

  <CTAForm>
    <CTAForm.Input>
      <FormControl required>
        <FormControl.Label>Your work email address</FormControl.Label>
        <TextInput placeholder="name" />
      </FormControl>
    </CTAForm.Input>
    <CTAForm.Confirm>
      <FormControl required>
        <FormControl.Label>
          <Text size="300" variant="muted">
            I agree to the <InlineLink href="https://github.com">Privacy Policy</InlineLink> and{' '}
            <InlineLink href="https://github.com">Terms of Service</InlineLink>
          </Text>
        </FormControl.Label>
        <Checkbox name="confirm" />
      </FormControl>
    </CTAForm.Confirm>
    <CTAForm.Action>Subscribe</CTAForm.Action>
  </CTAForm>

  • CTAForm Documentation

Patch Changes

• #189 d805a17 Thanks @TylerJDev! - Applies a transition: none rule to :focus on the <Button> component. Ensures that the existing box-shadow on :hover does not interfere with the the :focus box-shadow.

  Before/After

  Version 0.12.0	Version 0.12.1 (current)	PR version
  storybook-preview-parity-0.12.0.mov Video shows the cursor moving over the button. When pressed and hovered off of, the box-shadow border appears on the button in a bottom-to-top transition animation. Video also shows cursor hovering over button when focused, removing the box-shadow border before displaying it back when hovered off of.	storybook-preview-0.12.1.mov Video shows cursor moving over the button. When pressed the box-shadow border appears over the button instantly, showing the same bottom-to-top transition effect as the previous cell example.	storybook-preview-pr.mov Video shows cursor moving over the button and then pressing the button. The box-shadow border displays over the button instantly, showing no transition animation.

• #190 8307f60 Thanks @rezrah! - Added leadingVisual and trailingVisual support to Button

  Usage example

  //import {SearchIcon, CheckIcon} from '@primer/octicons-react'
  
  <Button leadingVisual={SearchIcon} trailingVisual={CheckIcon}>
    Button
  </Button>

  • See the documentation for more examples

@primer/[email protected]

@primer/[email protected]

@primer/[email protected]

Patch Changes

• #181 2572904 Thanks @JoshBowdenConcepts! - Fixed CTABanner Class Forwarding Bug, now users can pass custom classes to the wrapper for the CTABanner component

• #170 c913aab Thanks @TylerJDev! - Adds accessibility fixes for Button.

  • Retains outline on focus when only aria-disabled is applied.
  • Adds focus indicator and 'disabled' style for WHCM.
  • Allows use of 'disabled' and 'aria-disabled' separately.
  • Hides SVG from screen readers.

• #186 9cc537a Thanks @rezrah! - Add stretch and letter-spacing configurability to Heading

  Width

  <>
    <Heading as="h3" stretch="condensed">
      condensed
    </Heading>
    <Heading as="h3" stretch="normal">
      normal
    </Heading>
    <Heading as="h3" stretch="expanded">
      wide
    </Heading>
  </>

  Letter spacing

  <>
    <Heading as="h3" letterSpacing="condensed">
      condensed
    </Heading>
    <Heading as="h3" letterSpacing="normal">
      normal
    </Heading>
    <Heading as="h3" letterSpacing="none">
      none
    </Heading>
  </>

@primer/[email protected]

@primer/[email protected]

@primer/[email protected]

Minor Changes

• #165 3eeda65 Thanks @rezrah! - New MinimalFooter component available

  Use MinimalFooter to provide a global footer navigation to your website or application.

  <MinimalFooter>
    <MinimalFooter.Footnotes>
      <Text>
        <sup>1</sup>By signing up, GitHub may use your information to personalize and measure the effectiveness of
        enterprise business ads, including those you see off of GitHub, promotional communications or marketing you
        receive related to the Enterprise Marketing Pages. We will send you relevant emails and promotional information
        based on your GitHub profile and any additional information provided in the sign-up form. If you change your
        mind, you can unsubscribe at any time (an unsubscribe link is provided in every email). For more information on
        how GitHub uses your personal information, please see the{' '}
        <InlineLink
          href="https://docs.github.com/en/site-policy/privacy-policies/github-privacy-statement"
          target="_blank"
        >
          GitHub Privacy Statement
        </InlineLink>
        .
      </Text>
    </MinimalFooter.Footnotes>
    <MinimalFooter.Link href="https://github.com/organizations/enterprise_plan">Try GitHub for free</MinimalFooter.Link>
    <MinimalFooter.Link href="https://github.com/enterprise">Enterprise</MinimalFooter.Link>
    <MinimalFooter.Link href="https://github.com/enterprise/contact">Email us</MinimalFooter.Link>
  </MinimalFooter>

  🔗 See the documentation for more details and usage examples.

Patch Changes

• #167 1095d8f Thanks @josepmartins! - Fix left alignment in Hero actions

@primer/[email protected]

@primer/[email protected]

@primer/[email protected]

Minor Changes

• #158 7bc0b14 Thanks @danielguillan! - New SectionIntro component available

  Use SectionIntro to provide a title, optional description and link to a new section in the page.

  <SectionIntro>
    <SectionIntro.Heading>My section tilte</SectionIntro.Heading>
    <SectionIntro.Description>My section description</SectionIntro.Description>
    <SectionIntro.Action href="/my-link">My action</SectionIntro.Action>
  </SectionIntro>

  🔗 See the documentation for more details and usage examples.

Patch Changes

• #164 44057f7 Thanks @danielguillan! - - Fixes types to support conditional children in the Stack component
  • Adds support for responsive alignItems and justifyContent to Stack component

@primer/[email protected]

@primer/[email protected]