pksjce

pksjce

Learning design systems

Member Since 11 years ago

Sydney, Australia

Experience Points
492
follower
Lessons Completed
32
follow
Lessons Completed
55
stars
Best Reply Awards
80
repos

213 contributions in the last year

Pinned
⚡ A stylish carousel with awesome defaults.
⚡ Simple drag and drop with dragula and ember
⚡ Links to jest resources
⚡ This repo will have the full working versions of examples to be shown on webpack docs
⚡ Repository for webpack documentation and more!
⚡ Personal website
Activity
May
16
6 days ago
pull request

pksjce merge to primer/react

pksjce
pksjce

ADR: Parallel drafts track & plan for deprecated components - DEADLINE: 13 MAY 2022

Read the rendered markdown

Context: As we work on maturity of our components, we will sometimes need to deprecate components that are replaced with new components. Here's something to start that conversation and converge on a strategy.

tl;dr: We should detangle "drafts" from component lifecycle.

1. Rename Experimental to Candidate in Component maturity lifecycle: Candidate, Alpha, Beta and Stable. 2. Rename drafts to experimental. A component can have beta maturity in the experimental bundle.

(scrapped the above 2 suggestions for the churn they'll cause in the ecosystem, see this comment for more context. We do have the optional of changing drafts to next or labs if that's more descriptive) 3. Draft components should not be collocated with "main bundle" components in the documentation or status page. They should have their own section, as draft components are not recommended as an alternative yet.

 

Flowchart: drafts flowchart

📺 Here's a video of a dry run of the flowchart: https://github.rewatch.com/video/arc9fb2sivdkm44j-draft-parallel-track-dry-run

Code example for the stages:

// Stage 0: 
import { PrimaryButton } from '@primer/react'


// Stage 1: new component starts in drafts

// you can continue using current component
import { PrimaryButton } from '@primer/react'
// or try the new one
import { Button } from '@primer/react/lib-esm/drafts'


// Stage 2: new component goes from drafts to main

// you can migrate to the new component (breaking change, recommended)
import { Button } from '@primer/react'
// or continue to use the old, now deprecated one by changing the import
import { PrimaryButton } from '@primer/react/lib-esm/deprecated'


// Stage 3: deleting the deprecated component
// you need to migrate to the new component (breaking change)
import { Button } from '@primer/react'
pksjce
pksjce

This has already been put into practice in v35. While we haven't deleted any deprecated component yet, all of the other recommendations are working out just fine for us and our consumers. We have both /drafts and /deprecated paths setup for import and for documentation. LGTM 👍

May
12
1 week ago
open pull request

pksjce wants to merge primer/react

pksjce
pksjce

Fix ButtonGroup component and add docs

Summary

  • Fixes layout bug with ButtonGroup by changing the display property from inline-block to inline-flex
  • Adds docs for ButtonGroup component

Closes https://github.com/primer/react/issues/1978

Screenshots

Before

CleanShot 2022-05-02 at 17 22 25

After

CleanShot 2022-05-02 at 17 21 54

Merge checklist

  • Added/updated tests
  • Added/updated documentation
  • Tested in Chrome
  • Tested in Firefox
  • Tested in Safari
  • Tested in Edge

Take a look at the What we look for in reviews section of the contributing guidelines for more information on how we review PRs.

pksjce
pksjce

Do you think this requires a more descriptive change-log? It might affect existing implementations and people may not be sure why those are failing?

pull request

pksjce merge to primer/react

pksjce
pksjce

Fix ButtonGroup component and add docs

Summary

  • Fixes layout bug with ButtonGroup by changing the display property from inline-block to inline-flex
  • Adds docs for ButtonGroup component

Closes https://github.com/primer/react/issues/1978

Screenshots

Before

CleanShot 2022-05-02 at 17 22 25

After

CleanShot 2022-05-02 at 17 21 54

Merge checklist

  • Added/updated tests
  • Added/updated documentation
  • Tested in Chrome
  • Tested in Firefox
  • Tested in Safari
  • Tested in Edge

Take a look at the What we look for in reviews section of the contributing guidelines for more information on how we review PRs.

pull request

pksjce merge to primer/react

pksjce
pksjce

Fix ButtonGroup component and add docs

Summary

  • Fixes layout bug with ButtonGroup by changing the display property from inline-block to inline-flex
  • Adds docs for ButtonGroup component

Closes https://github.com/primer/react/issues/1978

Screenshots

Before

CleanShot 2022-05-02 at 17 22 25

After

CleanShot 2022-05-02 at 17 21 54

Merge checklist

  • Added/updated tests
  • Added/updated documentation
  • Tested in Chrome
  • Tested in Firefox
  • Tested in Safari
  • Tested in Edge

Take a look at the What we look for in reviews section of the contributing guidelines for more information on how we review PRs.

May
9
1 week ago
Activity icon
issue

pksjce issue comment primer/react

pksjce
pksjce

[WIP] Replace UnderlineNav component

Describe your changes here.

This PR implements new version of UnderlineNav as per https://github.com/github/primer/issues/892

Why is this work being done? The current UnderlineNav is outdated and not adequate in the following ways.

  1. Uses css class names. These clash with existing implementations.
  2. Not accessible as it doesnt set aria-label and aria-current-page.
  3. Does not support icons
  4. Has no support for smaller screens

My proposal with this PR is

Pending things to merge this PR.

  • Accessibility updates. Add label and current page
  • Add actions - Ability to add buttons?
  • Allow right align of the nav
  • Sophisticated links
  • Add tests and types
  • Add documentation

Closes https://github.com/github/primer/issues/892

Screenshots

Please provide before/after screenshots for any visual changes

image

Merge checklist

  • Added/updated tests
  • Added/updated documentation
  • Tested in Chrome
  • Tested in Firefox
  • Tested in Safari
  • Tested in Edge

Take a look at the What we look for in reviews section of the contributing guidelines for more information on how we review PRs.

pksjce
pksjce

Working on making a responsive UnderlineNav

  • Add overflow prop as per discussion with design
  • Add context to store child widths
  • Create useNavResponsive (maybe change this name) for managing container width.
push

pksjce push primer/react

pksjce
pksjce

Revert "ActionMenu: Remove focus trap (#1984)" (#2023)

This reverts commit e219598b10a1de538e1939efe390655eb47c53b7.

pksjce
pksjce

Version Packages (#1993)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

pksjce
pksjce

Design tweaks for 35.2.x (#2013)

  • fixes spacing in TextInputWithTokens when there is a loading spinner

  • bolds input validation text

  • adds changeset

  • Update src/_InputValidation.tsx

Co-authored-by: Cole Bemis [email protected]

  • fixes linting issues and updates snapshots

  • empty commit to run CI

Co-authored-by: Cole Bemis [email protected]

pksjce
pksjce

add deployment workflows for GitHub Pages (#2028)

pksjce
pksjce

Fix failing Chromatic builds (#2041)

  • build docs

  • add new script for visual testing

pksjce
pksjce

ADR: Use Box + sx to author components - DEADLINE: Friday 22 April (#2020)

  • ADR: Use Box to author new components

  • replace long example with PR link

  • add ADRs to eslint ignore

  • better phrasing of intro, thanks Cole!

Co-authored-by: Cole Bemis [email protected]

  • sentence case, thanks Cole!

Co-authored-by: Cole Bemis [email protected]

  • Apply suggestions from code review

thanks Cole!

Co-authored-by: Cole Bemis [email protected]

  • Apply suggestions from code review, thanks @talum

Co-authored-by: Tracy Lum [email protected]

  • Remove overriding styles from this ADR

  • Link sx API research

  • use BetterSystemStyleObject for types

  • Change status to Approved

Co-authored-by: Cole Bemis [email protected] Co-authored-by: Tracy Lum [email protected]

pksjce
pksjce

TextInput trailing action design and API update (#2033)

  • makes hover background appear inset

  • deprecates children prop - only icons should be used for text input inner actions

  • deprecates 'variant' prop for TextInputInnerAction

  • limits larger inner action tap target for coarse pointers

  • adds changeset

  • updates snapshots

  • prevents tooltip from appearing until button is actually hovered

  • fixes vertical alignment of SVG in IconButton when size !== 'medium'

  • addresses last bit of PR feedback

  • updates snapshots

pksjce
pksjce

NavList API (#2027)

  • Create NavigationList.mdx

  • Update NavList docs

  • Fix lint error

  • current prop -> aria-current prop

  • Update sub-item API

pksjce
pksjce

Namespace UnderlineNav (#2053)

  • namespace underline classes?

  • snippity snaps

  • Create quick-toys-fly.md

pksjce
pksjce

Version Packages (#2034)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

pksjce
pksjce

Select component a11y fixes (#2038)

  • fixes disabled option colors for all browsers (Firefox had the most issues)

  • fixes custom arrow color for disabled state and Windows high contrast mode, and hacks around Firefox quirks

  • updates SelectInput stories to use FormControl

  • makes cursor behavior consistent for inputs

  • removes redundant ARIA attributes from Added/updated tests

  • [n/a] Added/updated documentation
  • Tested in Chrome
  • Tested in Firefox
  • Tested in Safari
  • Tested in Edge

Take a look at the What we look for in reviews section of the contributing guidelines for more information on how we review PRs.

pull request

pksjce merge to primer/react

pksjce
pksjce

Select component a11y fixes

These changes address the feedback from @alliethu in this comment (repo only visible internally)

Closes https://github.com/github/primer/issues/540

Merge checklist

  • Added/updated tests
  • [n/a] Added/updated documentation
  • Tested in Chrome
  • Tested in Firefox
  • Tested in Safari
  • Tested in Edge

Take a look at the What we look for in reviews section of the contributing guidelines for more information on how we review PRs.

open pull request

pksjce wants to merge primer/react

pksjce
pksjce

Select component a11y fixes

These changes address the feedback from @alliethu in this comment (repo only visible internally)

Closes https://github.com/github/primer/issues/540

Merge checklist

  • Added/updated tests
  • [n/a] Added/updated documentation
  • Tested in Chrome
  • Tested in Firefox
  • Tested in Safari
  • Tested in Edge

Take a look at the What we look for in reviews section of the contributing guidelines for more information on how we review PRs.

pksjce
pksjce

wow thanks for the comments explaining why!

Apr
14
1 month ago
Activity icon
issue

pksjce issue comment primer/react

pksjce
pksjce

[WIP] Replace UnderlineNav component

Describe your changes here.

This PR implements new version of UnderlineNav as per https://github.com/github/primer/issues/892

Why is this work being done? The current UnderlineNav is outdated and not adequate in the following ways.

  1. Uses css class names. These clash with existing implementations.
  2. Not accessible as it doesnt set aria-label and aria-current-page.
  3. Does not support icons
  4. Has no support for smaller screens

My proposal with this PR is

Pending things to merge this PR.

  • Accessibility updates. Add label and current page
  • Add actions - Ability to add buttons?
  • Allow right align of the nav
  • Sophisticated links
  • Add tests and types
  • Add documentation

Closes https://github.com/github/primer/issues/892

Screenshots

Please provide before/after screenshots for any visual changes

image

Merge checklist

  • Added/updated tests
  • Added/updated documentation
  • Tested in Chrome
  • Tested in Firefox
  • Tested in Safari
  • Tested in Edge

Take a look at the What we look for in reviews section of the contributing guidelines for more information on how we review PRs.

pksjce
pksjce

Here's a loom of me demo-ing what's possible with the new implementation of UnderlineNav https://www.loom.com/share/0a5432ffced946c5901109882e045b8d

open pull request

pksjce wants to merge primer/react

pksjce
pksjce

[WIP] Replace UnderlineNav component

Describe your changes here.

This PR implements new version of UnderlineNav as per https://github.com/github/primer/issues/892

Why is this work being done? The current UnderlineNav is outdated and not adequate in the following ways.

  1. Uses css class names. These clash with existing implementations.
  2. Not accessible as it doesnt set aria-label and aria-current-page.
  3. Does not support icons
  4. Has no support for smaller screens

My proposal with this PR is

Pending things to merge this PR.

  • Accessibility updates. Add label and current page
  • Add actions - Ability to add buttons?
  • Allow right align of the nav
  • Sophisticated links
  • Add tests and types
  • Add documentation

Closes https://github.com/github/primer/issues/892

Screenshots

Please provide before/after screenshots for any visual changes

image

Merge checklist

  • Added/updated tests
  • Added/updated documentation
  • Tested in Chrome
  • Tested in Firefox
  • Tested in Safari
  • Tested in Edge

Take a look at the What we look for in reviews section of the contributing guidelines for more information on how we review PRs.

pksjce
pksjce

I'm not sure. whats the alternative? It doesn't seem to work without the get.

pull request

pksjce merge to primer/react

pksjce
pksjce

[WIP] Replace UnderlineNav component

Describe your changes here.

This PR implements new version of UnderlineNav as per https://github.com/github/primer/issues/892

Why is this work being done? The current UnderlineNav is outdated and not adequate in the following ways.

  1. Uses css class names. These clash with existing implementations.
  2. Not accessible as it doesnt set aria-label and aria-current-page.
  3. Does not support icons
  4. Has no support for smaller screens

My proposal with this PR is

Pending things to merge this PR.

  • Accessibility updates. Add label and current page
  • Add actions - Ability to add buttons?
  • Allow right align of the nav
  • Sophisticated links
  • Add tests and types
  • Add documentation

Closes https://github.com/github/primer/issues/892

Screenshots

Please provide before/after screenshots for any visual changes

image

Merge checklist

  • Added/updated tests
  • Added/updated documentation
  • Tested in Chrome
  • Tested in Firefox
  • Tested in Safari
  • Tested in Edge

Take a look at the What we look for in reviews section of the contributing guidelines for more information on how we review PRs.

push

pksjce push primer/react

pksjce
pksjce

Add UnderlineNavActions to support responsive behaviour

pksjce
pksjce

Add documentation and actions

commit sha: bb741c05593b6fc63c17e16af2d832e1122f0c58

push time in 1 month ago
Apr
13
1 month ago
push

pksjce push primer/react

pksjce
pksjce

Add plugin to find source code from storybook (#1994)

  • Add babel-plugin-open-source

  • update plugin

  • update plugin for vercel

  • update plugin

  • debug plugin on vercel

  • debug plugin on vercel

  • upgrade plugin to latest and done!

Co-authored-by: Mike Perrotti [email protected]

pksjce
pksjce

Update link to overriding styles with SX (#2018)

  • Update link to overriding styles with SX

  • run prettier

Co-authored-by: Siddharth Kshetrapal [email protected]

pksjce
pksjce

Add changesets flowchart to contributor docs (#1965)

  • Add changesets flowchart to contributor docs

  • Update CONTRIBUTING.md

pksjce
pksjce

chore(deps): bump url-parse from 1.5.3 to 1.5.10 in /docs (#1944)

Bumps url-parse from 1.5.3 to 1.5.10.


updated-dependencies:

  • dependency-name: url-parse dependency-type: indirect ...

Signed-off-by: dependabot[bot] [email protected]

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Cole Bemis [email protected]

pksjce
pksjce

chore(deps): bump nanoid from 3.1.30 to 3.3.2 (#2009)

Bumps nanoid from 3.1.30 to 3.3.2.


updated-dependencies:

  • dependency-name: nanoid dependency-type: indirect ...

Signed-off-by: dependabot[bot] [email protected]

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Cole Bemis [email protected]

pksjce
pksjce

chore(deps-dev): bump @babel/cli from 7.14.5 to 7.17.6 (#2010)

Bumps @babel/cli from 7.14.5 to 7.17.6.


updated-dependencies:

  • dependency-name: "@babel/cli" dependency-type: direct:development update-type: version-update:semver-minor ...

Signed-off-by: dependabot[bot] [email protected]

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Cole Bemis [email protected]

pksjce
pksjce

chore(deps): bump @primer/gatsby-theme-doctocat in /docs (#1907)

Bumps @primer/gatsby-theme-doctocat from 3.2.0 to 3.2.1.


updated-dependencies:

  • dependency-name: "@primer/gatsby-theme-doctocat" dependency-type: direct:production update-type: version-update:semver-patch ...

Signed-off-by: dependabot[bot] [email protected]

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Cole Bemis [email protected]

pksjce
pksjce

Replace UnderlineNav component

pksjce
pksjce
pksjce
pksjce

Add aaria label and aria-current properties

commit sha: a7c77f6adaea2ece28e0c8b78d927d80fbeaa1d6

push time in 1 month ago
Activity icon
issue

pksjce issue comment primer/react

pksjce
pksjce

Accessible `IconButton` with label viewable as `Tooltip`

Summary

There is no documented example of how to render an icon-only button with an accessible tooltip in a way that would meet all of the following standard requirements:

  • Render as an icon-only button with a single focus target
  • Read the label one time in a manner that ties it to the button, for screen reader users
  • Show the label on hover, for mouse users
  • Show the label on focus, for keyboard users

If this is a supported behavior, then some documentation is needed to show how to do it. If this is not supported, it would be very useful functionality to add to Primer.

The IconButton documentation provides an example of how to label the component in an accessible manner:

<IconButton aria-label="Search" icon={SearchIcon} />

And the Tooltip documentation has the same:

<Tooltip aria-label="Hello, Tooltip!">Text with a tooltip</Tooltip>

Both of these examples use aria-label however, which provides no obvious way to create an icon button that shows its accessible label on hover as a tooltip.

Use Cases

This is a very common requirement. See for example these instances on github.com:

Notifications bell: Screenshot of the GitHub notifications bell button showing a tooltip that says 'you have unread notifications'

Markdown editor toolbar: Screenshot of the GitHub markdown editor 'bold' button showing a tooltip

Code view: Screenshot of the GitHub pull request code view, showing the 'Expand all' button with a tooltip

This is recommended as a best practice by Primer's own tooltip guide:

Do: Use a tooltip to give a text label to an icon button

Attempts

I've tried all of the following examples but I haven't been able to find a satisfying way to do this:

Label on tooltip: Tooltip does not appear on button focus and the button appears as unlabelled in the accessibility tree.

<Tooltip aria-label="Bold">
  <IconButton icon={BoldIcon} />
</Tooltip>

Label on button only: Tooltip does not work at all.

<Tooltip>
  <IconButton icon={BoldIcon} aria-label="Bold" />
</Tooltip>

Label on both: The label will be read twice to screen readers (something like "Tooltip: Bold, Button: Bold") which is unnecessarily redundant. Also the tooltip still doesn't appear on focus.

<Tooltip aria-label="Bold">
  <IconButton icon={BoldIcon} aria-label="Bold" />
</Tooltip>

Tooltip as button: Seems like a promising idea but Tooltip does not support the as prop.

<Tooltip aria-label="Bold" as={IconButton} icon={BoldIcon} />

Button as tooltip: Renders an unfocuseable span instead of a button.

<IconButton icon={BoldIcon} as={Tooltip} aria-label="Bold" />

Tooltip in button children: Does not work because the IconButton ignores children.

<IconButton icon={BoldIcon} aria-label="Bold">
  <Tooltip aria-label="Bold" role="presentation">Bold</Tooltip>
</IconButton>

Tooltip as button icon: This is horribly inelegant, but it does generate a good accessibility tree and still shows the tooltip on hover. It unfortunately still doesn't show the tooltip on focus, but it's the best I have for now.

<IconButton
  icon={() => <Tooltip aria-label="Bold" role="presentation"><BoldIcon /></Tooltip>}
  aria-label="Bold"
/>

Proposed Solution

My ideal solution would be to just show the IconButton's aria-label as a tooltip by default.

To configure this, I propose adding two new props to the IconButton component:

  • disableTooltip: Turn off the tooltip.
  • tooltipProps: Configure the tooltip by passing props to the underlying Tooltip component.

Then I could achieve my goal simply with:

<IconButton icon={BoldIcon} aria-label="Bold" />
pksjce
pksjce

Love this discussion.

First off, I agree with @khiga8 that the label and the tooltip content must be separate entities. They both have different functions. Label is an immediate quick recognition of the button's functionality while the tooltip is an elaborate context driven description. If the tooltip text is going to be the same as the button label text, that is not an appropriate use of the tooltip.

Additionally, providing a default tooltip with the button is not a great idea. This leads to unnecessary API overload on the Button like tooltipProps and hideTooltip. We want to use something like hideTooltip sparingly but with this pattern it might become a norm than an escape hatch.

My vote is for the Tooltip component to intentionally wrap around the IconButton when a tooltip is required. This can then become a consistent pattern for all Tooltip usage. For example, it's not uncommon to have tooltips on normal Button components, Input, Link components etc as shown here.

So in the simple use case we have

<Tooltip 
  text="Add bold text"
  direction="sw"
>
  <IconButton icon={BoldIcon} label="Bold" />
</Tooltip>

Further, we should have additional API for Tooltip to separate the trigger and rendered content to support more complex usecases like components in tooltips and dynamically rendered tooltips.

import {Key} from '@primer/react'
import * from '@primer/react/tooltip'

<Tooltip direction="sw">
  <TooltipTrigger>
    <IconButton icon={BoldIcon} label="Bold" />
  </TooltipTrigger>
  <TooltipContent>
    <>Add bold text, <Key meta>B</Key></>
  </TooltipContent>
</Tooltip>
Apr
11
1 month ago
push

pksjce push primer/react

pksjce
pksjce

Add button focus styles (#2007)

  • Add button focus styles

  • Fix primary button focus styles

  • Fix safari fallback

  • Fix toggle switch snapshot

  • Create strange-jobs-add.md

pksjce
pksjce
pksjce
pksjce

Update CONTRIBUTING.md (#2014)

Update link to the component proposal Issue template

Co-authored-by: Mike Perrotti [email protected]

pksjce
pksjce

Replace UnderlineNav component

pksjce
pksjce

commit sha: 0f27ee816a253ea4fb3d891d32c2c628ea2a7702

push time in 1 month ago
push

pksjce push primer/react

pksjce
pksjce

commit sha: 375da5552320fd373f100bf2dfe1dd27f02e3d92

push time in 1 month ago
pull request

pksjce pull request primer/react

pksjce
pksjce

Replace UnderlineNav component

Describe your changes here.

This PR implements new version of UnderlineNav as per https://github.com/github/primer/issues/892

Why is this work being done? The current UnderlineNav is outdated and not adequate in the following ways.

  1. Uses css class names. These clash with existing implementations.
  2. Not accessible as it doesnt set aria-label and aria-current-page.
  3. Does not support icons
  4. Has no support for smaller screens

My proposal with this PR is

Pending things to merge this PR.

  • Accessibility updates. Add label and current page
  • Add actions - Ability to add buttons?
  • Allow right align of the nav
  • Sophisticated links
  • Add tests and types
  • Add documentation

Closes https://github.com/github/primer/issues/892

Screenshots

Please provide before/after screenshots for any visual changes

image

Merge checklist

  • Added/updated tests
  • Added/updated documentation
  • Tested in Chrome
  • Tested in Firefox
  • Tested in Safari
  • Tested in Edge

Take a look at the What we look for in reviews section of the contributing guidelines for more information on how we review PRs.

Activity icon
created branch

pksjce in primer/react create branch pk/underline-nav

createdAt 1 month ago
Apr
8
1 month ago
push

pksjce push primer/react

pksjce
pksjce

Add button focus styles (#2007)

  • Add button focus styles

  • Fix primary button focus styles

  • Fix safari fallback

  • Fix toggle switch snapshot

  • Create strange-jobs-add.md

commit sha: a8b3ed16e59c40c45ff4843df491838afb6931a1

push time in 1 month ago
Activity icon
delete

pksjce in primer/react delete branch pk/button-focus-styles

deleted time in 1 month ago
pull request

pksjce pull request primer/react

pksjce
pksjce

Add button focus styles

In anticipation of Buttons accessibility review, I'm pulling in changes from https://github.com/primer/css/pull/1744/files for button specific focus.

My reference is to the focus styles in this storybook. https://primer-css-eyj5rcc1n-primer.vercel.app/css/storybook?path=/story/patterns-focusstyles--focus-styles

The main change is to remove focus styles of box-shadow and substitute it with outline. primary variant of the button gets some special treatment but all others have same focus styles.

Before

image

After

image

Merge checklist

  • Added/updated tests
  • Added/updated documentation
  • Tested in Chrome
  • Tested in Firefox
  • Tested in Safari
  • Tested in Edge

Take a look at the What we look for in reviews section of the contributing guidelines for more information on how we review PRs.

push

pksjce push primer/react

pksjce
pksjce

Create strange-jobs-add.md

commit sha: 2f436be520e4ceecb9906046f6d3367758e49f82

push time in 1 month ago
push

pksjce push primer/react

pksjce
pksjce

Fix toggle switch snapshot

commit sha: a8f29a8d51b3d7dba17d370ee5810c43f5364f8f

push time in 1 month ago
Apr
7
1 month ago
push

pksjce push primer/react

pksjce
pksjce

Create eighty-ties-wait.md

commit sha: 54e89a2133942f78d704c80f36c9e7641f8dbaf3

push time in 1 month ago
Activity icon
issue

pksjce issue comment primer/react

pksjce
pksjce

Add button focus styles

In anticipation of Buttons accessibility review, I'm pulling in changes from https://github.com/primer/css/pull/1744/files for button specific focus.

My reference is to the focus styles in this storybook. https://primer-css-eyj5rcc1n-primer.vercel.app/css/storybook?path=/story/patterns-focusstyles--focus-styles

The main change is to remove focus styles of box-shadow and substitute it with outline. primary variant of the button gets some special treatment but all others have same focus styles.

Before

image

After

image

Merge checklist

  • Added/updated tests
  • Added/updated documentation
  • Tested in Chrome
  • Tested in Firefox
  • Tested in Safari
  • Tested in Edge

Take a look at the What we look for in reviews section of the contributing guidelines for more information on how we review PRs.

Apr
6
1 month ago
pull request

pksjce merge to primer/react

pksjce
pksjce

Add plugin to find source code from storybook

Adds a way of jumping from storybook to source code

📺 As seen on design sync: https://github.rewatch.com/video/1cqzuowd7jt5a0ee-di-design-sync-march-31-2022?t=482

Activity icon
issue

pksjce issue comment primer/react

pksjce
pksjce

Add plugin to find source code from storybook

Adds a way of jumping from storybook to source code

📺 As seen on design sync: https://github.rewatch.com/video/1cqzuowd7jt5a0ee-di-design-sync-march-31-2022?t=482

pksjce
pksjce

Super cool! So Alt+click to open the code? Is there better discoverability of the shortcut?

Previous