Support right alignment in SelectMenu

[dmarcey]

The SelectMenu in Primer CSS supports aligning the modal with the button:
https://primer.style/css/components/select-menu#right-aligned

We should add a corresponding prop to SelectMenu.Modal and possibly provide an example showing how to do so.

[dmarcey]

@emplums / @BinaryMuse do you think that rightAlign?: boolean on the SelectMenu.Modal is the correct prop to support this?

<SelectMenu>
  <Button as="summary">Projects</Button>
  <SelectMenu.Modal rightAlign={true}>
    <SelectMenu.Header>Projects</SelectMenu.Header>
    <SelectMenu.List>
      <SelectMenu.Item href="#">Primer Components bugs</SelectMenu.Item>
      <SelectMenu.Item href="#">Primer Components roadmap</SelectMenu.Item>
      <SelectMenu.Item href="#"> Project 3</SelectMenu.Item>
      <SelectMenu.Item href="#">Project 4</SelectMenu.Item>
    </SelectMenu.List>
  </SelectMenu.Modal>
</SelectMenu>

Or would using some sort of variant prop make more sense?

[BinaryMuse]

I think I'd be okay with that. Another option is an align prop that defaults to "left". Or we could use a variant prop for this. [Edit] Oh you said the thing about the variant prop 🙈

[dmarcey]

It looks like Tooltip uses align?: 'left' | 'right', UnderlineNav uses align?: 'right' (just right? maybe a TS bug?), and AvatarStack uses alignRight?: boolean.

I couldn't find an example where variant was used to handle alignment, but it doesn't seem too far-fetched.

In light of these examples, I think I'll give a shot at align?: 'left' | 'right' which defaults to 'left' and we can see how that looks in the PR.

Thanks @BinaryMuse !

[BinaryMuse]

I think the only strong opinion I have is to not use any more alignRight style booleans, unless it really is a boolean state (like hidden). align or variant can be expanded easily, alignRight can't.

[dmarcey]

Draft PR here: #800
I'll flesh it out with tests and a more thorough description tomorrow.

[BinaryMuse]

Closed in v19