Unable to align Button content without sx prop css selectors

[sdehm]

Description

The Button component has an alignContent prop which allows aligning the text of the button for cases such as with block enabled. This is shown in the storybook Button playground like this.

When this prop is used however there is an eslint warning primer-react/no-system-props with more info here that recommends against using "styled-system props" such as alignContent. While it is true that you can use the sx prop to align the content by styling the nested spans, like the example below, this isn't immediately clear.

sx={{
  "& span": {
    justifyContent: "start",
  },
}}

Steps to reproduce

Create a Button component with block and alignContent="start" and observe the eslint warning.

Version

v36.4.0

Browser

No response

[pksjce]

The removal of the system properties was AFAIK intentional. We don't have alignContent listed in our documentation. However we missed removing it from the storybooks. I don't see how else to achieve this without targeted css.
I'd improve the target by doing

sx={{
  "[data-component=text]": {
    justifyContent: "start",
  },
}}

Not sure if there are other solutions.

[pksjce]

Further on we could think of adding blockAlignContent or some such prop if this is such a common scenario?

[siddharthkp]

Hi!

Looks like Button still accepts alignContent as a prop but the eslint rule isn't aware of that yet!

Added it to the list of allowed props in eslint-plugin-primer-react#133, it should be part of the next release for eslint-plugin-primer-react

Disclaimer: We might reassess the prop or it's name in the future, but for now it's safe to use 👍

[siddharthkp]

new eslint-plugin-primer-react version released: v4.1.0, you can upgrade the version in dotcom now