carbon
carbon copied to clipboard
Sage
`FlatTableRowHeader` with `Button` causes extra paddings
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
- [X] I confirm there is no confidential or commercially sensitive information included.
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 @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
:tada: This issue has been resolved in version 141.1.1 :tada:
The release is available on:
Your semantic-release bot :package::rocket:
