New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add gap param to st.columns #4887
Conversation
} | ||
|
||
export const StyledColumn = styled.div<StyledColumnProps>( | ||
({ weight, theme }) => { | ||
({ weight, gap, theme }) => { | ||
const percentage = weight * 100 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Note: both the HorizontalBlock
(parent element) and each of the StyledColumn
s need to be aware of the specified gap
@@ -30,4 +30,5 @@ export const spacing = { | |||
xl: "1.25rem", | |||
twoXL: "1.5rem", | |||
threeXL: "2rem", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Wasn't sure if I should add the new rem specification for large gap (4 rem) to the theme's spacing object... Can remove this if its unnecessary.
LGTM 馃憤 |
馃摎 Context
This PR adds a keyword-only argument gap to
st.columns
to allow users additional layout flexibility.馃 Description of Changes
Add gap as keyword only param to st.columns & validate input one of None, "small", "medium", or "large"
Pass gap to Horizontal & Column messages in Block.proto
Add gap as prop to StyledHorizontalBlock & StyledColumn
Set gap CSS property in StyledHorizontalBlock based on user-specified gap size
Adjust width CSS property in StyledColumn based on user-specified gap size
Revised:
Current:
馃И Testing Done
Contribution License Agreement
By submitting this pull request you agree that all contributions to this project are made under the Apache 2.0 license.