Skip to content

Commit df13735

Browse files
timmcca-betimmcca-be
authored
Update Toolbar to use CSS grid (#2361)
## Summary: This PR makes it so elements passed to the `title` of a `Toolbar` can set `max-width: 100%` to ensure the title never overlaps `leftContent` or `rightContent`. This PR also: - Slightly changes the wrapping behavior of long titles. This is not intended, but it is unavoidable, so I've matched the original behavior as closely as I can. - Makes the spacing more consistent when using responsive buttons that grow to take up the full footer width on mobile in `rightContent`. When we update webapp to use this version, we will need to update the following locations to use `100%` in place of `100vw`: ``` services/static/javascript/content-library/ui/default-content-footer-buttons.tsx: 496: width: "100vw", services/static/javascript/python-coding/python-content-footer.tsx: 124: width: "100vw", services/static/javascript/python-coding/programs/embedded-python-user-program-page.tsx: 140: width: "100vw", services/static/javascript/python-coding/programs/footer.tsx: 300: width: "100vw", services/static/javascript/wonder-blocks-package/wonder-blocks-toolbar.stories.tsx: 18: width: "100vw", ``` Issue: AX-315 ## Test plan: Check out the `Toolbar` stories Author: timmcca-be Reviewers: jandrade, timmcca-be Required Reviewers: Approved By: jandrade Checks: ✅ Chromatic - Get results on regular PRs (ubuntu-latest, 20.x), ✅ Lint / Lint (ubuntu-latest, 20.x), ✅ Test / Test (ubuntu-latest, 20.x, 2/2), ✅ Test / Test (ubuntu-latest, 20.x, 1/2), ✅ Check build sizes (ubuntu-latest, 20.x), ✅ Test / Test (ubuntu-latest, 20.x, 2/2), ✅ Lint / Lint (ubuntu-latest, 20.x), ✅ Test / Test (ubuntu-latest, 20.x, 1/2), ✅ Check build sizes (ubuntu-latest, 20.x), ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Chromatic - Build on regular PRs / chromatic (ubuntu-latest, 20.x), ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 20.x), ⏭️ Chromatic - Skip on Release PR (changesets), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ gerald, ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 20.x), ✅ gerald, ✅ Chromatic - Get results on regular PRs (ubuntu-latest, 20.x), ✅ Test / Test (ubuntu-latest, 20.x, 2/2), ✅ Lint / Lint (ubuntu-latest, 20.x), ✅ Test / Test (ubuntu-latest, 20.x, 1/2), ✅ Check build sizes (ubuntu-latest, 20.x), ✅ Chromatic - Build on regular PRs / chromatic (ubuntu-latest, 20.x), ⏭️ Chromatic - Skip on Release PR (changesets), ⏭️ Publish npm snapshot, ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 20.x), ✅ gerald, ⌛ undefined Pull Request URL: #2361
1 parent dac06ad commit df13735

File tree

4 files changed

+52
-59
lines changed

4 files changed

+52
-59
lines changed

‎.changeset/plenty-rocks-mix.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@khanacademy/wonder-blocks-toolbar": major
3+
---
4+
5+
Update Toolbar to use CSS grid. This allows consumers to set `max-width: 100%` on elements passed to the `title` prop to ensure the title does not overlap `leftContent` or `rightContent`. Consumers dependent on the flex behavior of the previous implementation will need to update to support the grid layout. Namely, any consumer using a hack like `width: 100vw` on `rightContent` to force it to take up the full width of the toolbar on mobile will need to use `width: 100%` instead.

‎__docs__/wonder-blocks-toolbar/toolbar.argtypes.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,8 @@ const styles = StyleSheet.create({
2020
fillContent: {
2121
marginLeft: spacing.small_12,
2222
[mobile]: {
23-
width: "100vw",
23+
marginLeft: 0,
24+
width: "100%",
2425
},
2526
},
2627
onlyDesktop: {

‎__docs__/wonder-blocks-toolbar/toolbar.stories.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -228,6 +228,7 @@ export const CustomToolbar: StoryComponentType = {
228228
<View
229229
style={{
230230
width: 300,
231+
maxWidth: "100%",
231232
height: spacing.xSmall_8,
232233
background: semanticColor.mastery.primary,
233234
}}

‎packages/wonder-blocks-toolbar/src/components/toolbar.tsx‎

Lines changed: 44 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -81,54 +81,39 @@ export default function Toolbar({
8181
<View
8282
style={[
8383
sharedStyles.container,
84+
!title
85+
? sharedStyles.containerWithNoTitle
86+
: typeof title === "string"
87+
? sharedStyles.containerWithTextTitle
88+
: sharedStyles.containerWithNodeTitle,
8489
color === "dark" && sharedStyles.dark,
8590
size === "small" && sharedStyles.small,
8691
]}
8792
>
88-
<View
89-
style={[
90-
sharedStyles.column,
91-
sharedStyles.leftColumn,
92-
title ? sharedStyles.withTitle : null,
93-
]}
94-
>
95-
{leftContent}
96-
</View>
93+
<View style={sharedStyles.leftColumn}>{leftContent}</View>
9794

98-
{title && typeof title === "string" ? (
99-
<View style={[sharedStyles.column, sharedStyles.wideColumn]}>
100-
<View style={[sharedStyles.titles, sharedStyles.center]}>
101-
<TitleComponent id="wb-toolbar-title">
102-
{title}
103-
</TitleComponent>
104-
{subtitle && (
105-
<LabelSmall
106-
style={
107-
color === "light" && sharedStyles.subtitle
108-
}
109-
>
110-
{subtitle}
111-
</LabelSmall>
112-
)}
113-
</View>
114-
</View>
115-
) : (
116-
// We don't use wideColumn here to allow more flexibility with
117-
// the custom node.
118-
<View style={[sharedStyles.column]}>
119-
<View style={[sharedStyles.titles]}>{title}</View>
95+
{title && typeof title === "string" && (
96+
<View style={sharedStyles.titles}>
97+
<TitleComponent id="wb-toolbar-title">
98+
{title}
99+
</TitleComponent>
100+
{subtitle && (
101+
<LabelSmall
102+
style={color === "light" && sharedStyles.subtitle}
103+
>
104+
{subtitle}
105+
</LabelSmall>
106+
)}
120107
</View>
121108
)}
109+
{title && typeof title !== "string" && (
110+
<View style={sharedStyles.titles}>{title}</View>
111+
)}
112+
{!title && (
113+
<View style={leftContent ? sharedStyles.spacer : undefined} />
114+
)}
122115

123-
<View
124-
style={[
125-
sharedStyles.column,
126-
sharedStyles.rightColumn,
127-
title ? sharedStyles.withTitle : null,
128-
]}
129-
>
130-
{rightContent}
131-
</View>
116+
<View style={sharedStyles.rightColumn}>{rightContent}</View>
132117
</View>
133118
);
134119
}
@@ -137,13 +122,23 @@ const sharedStyles = StyleSheet.create({
137122
container: {
138123
border: `1px solid ${color.offBlack16}`,
139124
flex: 1,
140-
flexDirection: "row",
141-
justifyContent: "space-between",
125+
display: "grid",
126+
alignItems: "center",
142127
minHeight: 66,
143128
paddingLeft: spacing.medium_16,
144129
paddingRight: spacing.medium_16,
145130
width: "100%",
146131
},
132+
containerWithTextTitle: {
133+
gridTemplateColumns: "1fr minmax(auto, 67%) 1fr",
134+
},
135+
containerWithNodeTitle: {
136+
gridTemplateColumns:
137+
"minmax(max-content, 1fr) auto minmax(max-content, 1fr)",
138+
},
139+
containerWithNoTitle: {
140+
gridTemplateColumns: "auto auto 1fr",
141+
},
147142
small: {
148143
minHeight: 50,
149144
},
@@ -152,36 +147,27 @@ const sharedStyles = StyleSheet.create({
152147
boxShadow: `0 1px 0 0 ${color.white64}`,
153148
color: "white",
154149
},
155-
column: {
156-
justifyContent: "center",
157-
},
158-
withTitle: {
159-
flex: 1,
160-
},
161-
wideColumn: {
162-
flex: 1,
163-
flexBasis: "50%",
164-
},
165150
leftColumn: {
166151
alignItems: "center",
167152
flexDirection: "row",
168-
// TODO(WB-1445): Find a way to replicate this behavior with
169-
// rightContent.
170-
flexShrink: 0,
171153
justifyContent: "flex-start",
172154
},
173155
rightColumn: {
174156
alignItems: "center",
175157
flexDirection: "row",
176158
justifyContent: "flex-end",
177-
},
178-
center: {
179-
textAlign: "center",
159+
flexGrow: 1,
180160
},
181161
subtitle: {
182162
color: color.offBlack64,
183163
},
184164
titles: {
185165
padding: spacing.small_12,
166+
textAlign: "center",
167+
justifySelf: "center",
168+
maxWidth: "100%",
169+
},
170+
spacer: {
171+
minWidth: spacing.small_12,
186172
},
187173
});

0 commit comments

Comments
 (0)