FlatTableRowHeader with Button causes extra paddings

[JinCoreana]

Current behaviour

The default settings cause extra paddings within the cell,

      <FlatTableRowHeader stickyAlignment="right">
        <Button>Default</Button>
      </FlatTableRowHeader>

With p={0} attribute, focus outline gets partially hidden

      <FlatTableRowHeader p={0} stickyAlignment="right">
        <Button>Padding 0</Button>
      </FlatTableRowHeader>

Expected behaviour

When a Button is placed within a sticky cell, it should not result in additional padding, and the focus outline should be fully visible.

CodeSandbox or Storybook URL

https://codesandbox.io/p/sandbox/table-padding-focus-kzm5nr

JIRA Ticket (Sage Only)

SBS-81079

Suggested Solution

No response

Carbon Version

124.6.0

Design Tokens Version

4.28.0

What browsers are you seeing the problem on?

Chrome

What Operating System are you seeing the problem on?

MacOS

Anything else we should know?

No response

Confidentiality

• I confirm there is no confidential or commercially sensitive information included.

[Parsium]

Hi @JinCoreana 👋🏼 The sandbox link you have provided seems to redirect to an error page. Just so we have some more context on the design you are trying to produce, please could you recreate your code example using our new stackblitz template?

[JinCoreana]

Hi @JinCoreana 👋🏼 The sandbox link you have provided seems to redirect to an error page. Just so we have some more context on the design you are trying to produce, please could you recreate your code example using our new stackblitz template?

Hi @Parsium No problem! here is the new link.
https://stackblitz.com/edit/parsium-carbon-starter-dmv1pi?file=src%2FApp.tsx

[nicktitchmarsh]

FE-6373

[carbonci]

🎉 This issue has been resolved in version 141.1.1 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀