cc @shaunandrews @jameskoster @dubielzyk, my thought is that we can use this PR to finalize any "nitpicky" CSS issues for the document actions area. (like making sure it is consistent and all that stuff)

Size Change: -149 B (0%)

Total Size: 1.19 MB

_{compressed-size-action}

Also tried adding a basic section heading as in #24020. Not sure what we're doing to handle colors for css-in-js though!

I think the padding between the text and arrow should be reduced by 2-4px, but I think that might mess up the outline on the buttons?

cc @dubielzyk @shaunandrews we have some options for spacing here, assuming that the distance between the right side of the title and the left side of the chevron are equal in both options.

Option 1. We leave the margin and padding alone, letting the text overlap the button slightly while focused. (36x36px size)

Option 2. We add 4px of margin, and then adjust the width of the button such that the distance doesn't change because of the extra margin. (28x36px)

Option 3. Since the button is slightly squished in option2, make the height match the width (resulting in a smaller button. With 4px of margin on the edge, this is now (28x28px)

We can make the margin a bit less as well, but 4px seems to be the minimum which looks good. Here's 2px of margin along with correct height/width adjustments. This button is 32x32px.

so I don't forget, the formula for calculating this is 0.5*buttonWidth + leftMargin = 18px. To adjust buttonWidth properly, you have to set min-width to 0 and then change the padding which defaults to 6px. Note that 18px is the default distance between the left element and the center of the chevron.

I also want to note that if we switch to the text component like @jameskoster mentioned, then we don't get a grayed-out text, it just defaults to the normal body style. It still contrasts will with the small subheading style though.

current look: