@khanacademy/wonder-blocks-toolbar 3.1.0 → 4.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/dist/es/index.js +30 -30
  3. package/dist/index.js +30 -30
  4. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,18 @@
1
1
  # @khanacademy/wonder-blocks-toolbar
2
2
 
3
+ ## 4.0.0
4
+
5
+ ### Major Changes
6
+
7
+ - df137354: 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.
8
+
9
+ ## 3.1.1
10
+
11
+ ### Patch Changes
12
+
13
+ - Updated dependencies [6999fd39]
14
+ - @khanacademy/wonder-blocks-tokens@2.1.0
15
+
3
16
  ## 3.1.0
4
17
 
5
18
  ### Minor Changes
package/dist/es/index.js CHANGED
@@ -14,36 +14,43 @@ function Toolbar({
14
14
  }) {
15
15
  const TitleComponent = subtitle ? LabelLarge : HeadingSmall;
16
16
  return React.createElement(View, {
17
- style: [sharedStyles.container, color === "dark" && sharedStyles.dark, size === "small" && sharedStyles.small]
17
+ style: [sharedStyles.container, !title ? sharedStyles.containerWithNoTitle : typeof title === "string" ? sharedStyles.containerWithTextTitle : sharedStyles.containerWithNodeTitle, color === "dark" && sharedStyles.dark, size === "small" && sharedStyles.small]
18
18
  }, React.createElement(View, {
19
- style: [sharedStyles.column, sharedStyles.leftColumn, title ? sharedStyles.withTitle : null]
20
- }, leftContent), title && typeof title === "string" ? React.createElement(View, {
21
- style: [sharedStyles.column, sharedStyles.wideColumn]
22
- }, React.createElement(View, {
23
- style: [sharedStyles.titles, sharedStyles.center]
19
+ style: sharedStyles.leftColumn
20
+ }, leftContent), title && typeof title === "string" && React.createElement(View, {
21
+ style: sharedStyles.titles
24
22
  }, React.createElement(TitleComponent, {
25
23
  id: "wb-toolbar-title"
26
24
  }, title), subtitle && React.createElement(LabelSmall, {
27
25
  style: color === "light" && sharedStyles.subtitle
28
- }, subtitle))) : React.createElement(View, {
29
- style: [sharedStyles.column]
30
- }, React.createElement(View, {
31
- style: [sharedStyles.titles]
32
- }, title)), React.createElement(View, {
33
- style: [sharedStyles.column, sharedStyles.rightColumn, title ? sharedStyles.withTitle : null]
26
+ }, subtitle)), title && typeof title !== "string" && React.createElement(View, {
27
+ style: sharedStyles.titles
28
+ }, title), !title && React.createElement(View, {
29
+ style: leftContent ? sharedStyles.spacer : undefined
30
+ }), React.createElement(View, {
31
+ style: sharedStyles.rightColumn
34
32
  }, rightContent));
35
33
  }
36
34
  const sharedStyles = StyleSheet.create({
37
35
  container: {
38
36
  border: `1px solid ${color.offBlack16}`,
39
37
  flex: 1,
40
- flexDirection: "row",
41
- justifyContent: "space-between",
38
+ display: "grid",
39
+ alignItems: "center",
42
40
  minHeight: 66,
43
41
  paddingLeft: spacing.medium_16,
44
42
  paddingRight: spacing.medium_16,
45
43
  width: "100%"
46
44
  },
45
+ containerWithTextTitle: {
46
+ gridTemplateColumns: "1fr minmax(auto, 67%) 1fr"
47
+ },
48
+ containerWithNodeTitle: {
49
+ gridTemplateColumns: "minmax(max-content, 1fr) auto minmax(max-content, 1fr)"
50
+ },
51
+ containerWithNoTitle: {
52
+ gridTemplateColumns: "auto auto 1fr"
53
+ },
47
54
  small: {
48
55
  minHeight: 50
49
56
  },
@@ -52,35 +59,28 @@ const sharedStyles = StyleSheet.create({
52
59
  boxShadow: `0 1px 0 0 ${color.white64}`,
53
60
  color: "white"
54
61
  },
55
- column: {
56
- justifyContent: "center"
57
- },
58
- withTitle: {
59
- flex: 1
60
- },
61
- wideColumn: {
62
- flex: 1,
63
- flexBasis: "50%"
64
- },
65
62
  leftColumn: {
66
63
  alignItems: "center",
67
64
  flexDirection: "row",
68
- flexShrink: 0,
69
65
  justifyContent: "flex-start"
70
66
  },
71
67
  rightColumn: {
72
68
  alignItems: "center",
73
69
  flexDirection: "row",
74
- justifyContent: "flex-end"
75
- },
76
- center: {
77
- textAlign: "center"
70
+ justifyContent: "flex-end",
71
+ flexGrow: 1
78
72
  },
79
73
  subtitle: {
80
74
  color: color.offBlack64
81
75
  },
82
76
  titles: {
83
- padding: spacing.small_12
77
+ padding: spacing.small_12,
78
+ textAlign: "center",
79
+ justifySelf: "center",
80
+ maxWidth: "100%"
81
+ },
82
+ spacer: {
83
+ minWidth: spacing.small_12
84
84
  }
85
85
  });
86
86
 
package/dist/index.js CHANGED
@@ -36,36 +36,43 @@ function Toolbar({
36
36
  }) {
37
37
  const TitleComponent = subtitle ? wonderBlocksTypography.LabelLarge : wonderBlocksTypography.HeadingSmall;
38
38
  return React__namespace.createElement(wonderBlocksCore.View, {
39
- style: [sharedStyles.container, color === "dark" && sharedStyles.dark, size === "small" && sharedStyles.small]
39
+ style: [sharedStyles.container, !title ? sharedStyles.containerWithNoTitle : typeof title === "string" ? sharedStyles.containerWithTextTitle : sharedStyles.containerWithNodeTitle, color === "dark" && sharedStyles.dark, size === "small" && sharedStyles.small]
40
40
  }, React__namespace.createElement(wonderBlocksCore.View, {
41
- style: [sharedStyles.column, sharedStyles.leftColumn, title ? sharedStyles.withTitle : null]
42
- }, leftContent), title && typeof title === "string" ? React__namespace.createElement(wonderBlocksCore.View, {
43
- style: [sharedStyles.column, sharedStyles.wideColumn]
44
- }, React__namespace.createElement(wonderBlocksCore.View, {
45
- style: [sharedStyles.titles, sharedStyles.center]
41
+ style: sharedStyles.leftColumn
42
+ }, leftContent), title && typeof title === "string" && React__namespace.createElement(wonderBlocksCore.View, {
43
+ style: sharedStyles.titles
46
44
  }, React__namespace.createElement(TitleComponent, {
47
45
  id: "wb-toolbar-title"
48
46
  }, title), subtitle && React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
49
47
  style: color === "light" && sharedStyles.subtitle
50
- }, subtitle))) : React__namespace.createElement(wonderBlocksCore.View, {
51
- style: [sharedStyles.column]
52
- }, React__namespace.createElement(wonderBlocksCore.View, {
53
- style: [sharedStyles.titles]
54
- }, title)), React__namespace.createElement(wonderBlocksCore.View, {
55
- style: [sharedStyles.column, sharedStyles.rightColumn, title ? sharedStyles.withTitle : null]
48
+ }, subtitle)), title && typeof title !== "string" && React__namespace.createElement(wonderBlocksCore.View, {
49
+ style: sharedStyles.titles
50
+ }, title), !title && React__namespace.createElement(wonderBlocksCore.View, {
51
+ style: leftContent ? sharedStyles.spacer : undefined
52
+ }), React__namespace.createElement(wonderBlocksCore.View, {
53
+ style: sharedStyles.rightColumn
56
54
  }, rightContent));
57
55
  }
58
56
  const sharedStyles = aphrodite.StyleSheet.create({
59
57
  container: {
60
58
  border: `1px solid ${wonderBlocksTokens.color.offBlack16}`,
61
59
  flex: 1,
62
- flexDirection: "row",
63
- justifyContent: "space-between",
60
+ display: "grid",
61
+ alignItems: "center",
64
62
  minHeight: 66,
65
63
  paddingLeft: wonderBlocksTokens.spacing.medium_16,
66
64
  paddingRight: wonderBlocksTokens.spacing.medium_16,
67
65
  width: "100%"
68
66
  },
67
+ containerWithTextTitle: {
68
+ gridTemplateColumns: "1fr minmax(auto, 67%) 1fr"
69
+ },
70
+ containerWithNodeTitle: {
71
+ gridTemplateColumns: "minmax(max-content, 1fr) auto minmax(max-content, 1fr)"
72
+ },
73
+ containerWithNoTitle: {
74
+ gridTemplateColumns: "auto auto 1fr"
75
+ },
69
76
  small: {
70
77
  minHeight: 50
71
78
  },
@@ -74,35 +81,28 @@ const sharedStyles = aphrodite.StyleSheet.create({
74
81
  boxShadow: `0 1px 0 0 ${wonderBlocksTokens.color.white64}`,
75
82
  color: "white"
76
83
  },
77
- column: {
78
- justifyContent: "center"
79
- },
80
- withTitle: {
81
- flex: 1
82
- },
83
- wideColumn: {
84
- flex: 1,
85
- flexBasis: "50%"
86
- },
87
84
  leftColumn: {
88
85
  alignItems: "center",
89
86
  flexDirection: "row",
90
- flexShrink: 0,
91
87
  justifyContent: "flex-start"
92
88
  },
93
89
  rightColumn: {
94
90
  alignItems: "center",
95
91
  flexDirection: "row",
96
- justifyContent: "flex-end"
97
- },
98
- center: {
99
- textAlign: "center"
92
+ justifyContent: "flex-end",
93
+ flexGrow: 1
100
94
  },
101
95
  subtitle: {
102
96
  color: wonderBlocksTokens.color.offBlack64
103
97
  },
104
98
  titles: {
105
- padding: wonderBlocksTokens.spacing.small_12
99
+ padding: wonderBlocksTokens.spacing.small_12,
100
+ textAlign: "center",
101
+ justifySelf: "center",
102
+ maxWidth: "100%"
103
+ },
104
+ spacer: {
105
+ minWidth: wonderBlocksTokens.spacing.small_12
106
106
  }
107
107
  });
108
108
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@khanacademy/wonder-blocks-toolbar",
3
- "version": "3.1.0",
3
+ "version": "4.0.0",
4
4
  "design": "v1",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -17,7 +17,7 @@
17
17
  "dependencies": {
18
18
  "@babel/runtime": "^7.18.6",
19
19
  "@khanacademy/wonder-blocks-core": "^7.0.1",
20
- "@khanacademy/wonder-blocks-tokens": "^2.0.1",
20
+ "@khanacademy/wonder-blocks-tokens": "^2.1.0",
21
21
  "@khanacademy/wonder-blocks-typography": "^2.1.16"
22
22
  },
23
23
  "peerDependencies": {