Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
40 commits
Select commit Hold shift + click to select a range
32366dd
move over from major pr
langermank Dec 5, 2022
799c0fb
cleanup
langermank Dec 5, 2022
0386534
snippy snaps
langermank Dec 5, 2022
5384666
e2e tests
langermank Dec 5, 2022
598f612
Merge branch 'main' of https://github.com/primer/react into button-al…
langermank Dec 6, 2022
f259d94
lint?
langermank Dec 6, 2022
f451b47
lint
langermank Dec 6, 2022
d70226a
test(vrt): update snapshots
langermank Dec 6, 2022
a768279
Merge branch 'main' of https://github.com/primer/react into button-al…
langermank Dec 8, 2022
bbde902
Create angry-spoons-grin.md
langermank Dec 8, 2022
73d0bb6
test(vrt): update snapshots
joshblack Dec 8, 2022
2ea235f
counter button font-size
langermank Dec 8, 2022
71bf9a0
Merge branch 'button-alignment-fixes' of https://github.com/primer/re…
langermank Dec 8, 2022
34602d3
test(vrt): add underlinenav snapshots
joshblack Dec 8, 2022
5a93796
test(vrt): update snapshots
joshblack Dec 8, 2022
165ef69
fix story props
langermank Dec 12, 2022
f062157
Merge branch 'main' of https://github.com/primer/react into button-al…
langermank Dec 12, 2022
b70a4a0
test(vrt): update snapshots
langermank Dec 12, 2022
fced6de
fixing stories
langermank Dec 13, 2022
ea7a104
fix stories
langermank Dec 13, 2022
51c1139
more cleanup
langermank Dec 13, 2022
f7b1755
fix input trailing action
langermank Dec 15, 2022
0f9ea6e
update docs
langermank Dec 15, 2022
31e46c9
lint
langermank Dec 15, 2022
9ea4dc7
snaps
langermank Dec 15, 2022
96c9947
fix trailing action sizing for input
langermank Dec 16, 2022
0fd9311
Update src/Button/IconButton.tsx
langermank Dec 16, 2022
13999ed
fix invisible
langermank Dec 19, 2022
64383b6
Update src/Button/styles.ts
langermank Dec 19, 2022
b7113e4
Update src/_TextInputWrapper.tsx
langermank Dec 19, 2022
651f2e4
lint
langermank Dec 19, 2022
5cd7f90
snaps
langermank Dec 20, 2022
b6843d3
Merge branch 'main' into button-alignment-fixes
langermank Dec 20, 2022
ef58d3f
test(vrt): update snapshots
langermank Dec 20, 2022
44b4f35
add back aria label
langermank Dec 20, 2022
b0ed486
Merge branch 'button-alignment-fixes' of https://github.com/primer/re…
langermank Dec 20, 2022
2caec20
Update angry-spoons-grin.md
langermank Dec 20, 2022
08a8ffe
try adding back aria labels for tests
langermank Dec 20, 2022
af3a5e7
Merge branch 'button-alignment-fixes' of https://github.com/primer/re…
langermank Dec 20, 2022
caf0f23
Merge branch 'main' into button-alignment-fixes
langermank Dec 20, 2022
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
10 changes: 10 additions & 0 deletions .changeset/angry-spoons-grin.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
---
"@primer/react": patch
---

- Add a block prop for full width
- Add alignContent prop to align content to center or start for full width buttons
- Use control sizing CSS variable values (not using CSS vars just yet)
- Use height over padding for more control over sizing
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't understand why we'd need height if we're sticking to control spacing tokens

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's a bit easier to manage control size with static height and width along with internal padding. Its especially apparent for IconOnly buttons. For buttons, since we never want a line break using height feels like a safe solution.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh I didn't realize we never allowed a line break in buttons.

When the button text doesn't fit on one line, do we:

  • automatically truncate to a single line?
  • require the user to handle truncation?
  • something else?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We haven't implemented anything to manage overflow, its just a pattern recommendation to keep labels succinct. I'm not opposed to adding an ellipses or something.

do and dont image showing a correct button with a single line label, and a multi line label in the "dont" example

- Adjust invisible button variant to match new design using ActionList colors

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading