carbon
carbon copied to clipboard
Sage
fullWidth not applied to saveButton in Form components
Current behaviour
Button components that are passed into Form components as saveButton attributes do not respond to the fullWidth attribute. They stay the same size regardless of whether fullWidth is applied or not.
Expected behaviour
The saveButton should take the full width of the page if fullWidth is applied.
Reproducible example
https://codesandbox.io/s/epic-cori-0y22j?file=/src/index.js
The codesandbox includes a leftSideButton and a saveButton. The leftSideButton behaves as expected when fullWidth is applied, but the saveButton does not.
Suggested solution(s)
From inspecting the elements, it appears as though the saveButton is contained within an extra div with data-attribute= 'form-summary' that may be limiting the size of the button. I cannot see any width limitations applied to the div itself, but setting the div to width: 100% fixes the issue (however it does cause the button to become left-aligned when fullWidth is not applied).
Additional context
Your environment
Versions below are those of my project, but was also reproducible in the codesandbox with different versions (see link above).
| Software | Version(s) |
|---|---|
| carbon-react | 76.5.0 |
| carbon-factory | |
| react-scripts | |
| React | 16.13.1 |
| Browser (Chrome) | 91.0.4472.114 |
| npm | 6.14.12 |
| Operating System | MacOS (Mojave) |
:tada: This issue has been resolved in version 110.7.0 :tada:
The release is available on:
Your semantic-release bot :package::rocket:
