A design system in a box.
hip-ui.tngl.io/docs/introduction
add maxWidth prop
+8
-3
+8
-3
packages/hip-ui/src/components/header-layout/index.tsx
+8
-3
packages/hip-ui/src/components/header-layout/index.tsx
···
9
9
10
10
const styles = stylex.create({
11
11
root: {
12
-
"--page-content-max-width": "1280px",
13
12
backgroundColor: uiColor.bg,
14
13
containerType: "inline-size",
15
14
display: "flex",
···
17
16
minHeight: "100vh",
18
17
width: "100cqw",
19
18
},
19
+
rootMaxWidth: (maxWidth: string | undefined) => ({
20
+
"--page-content-max-width": maxWidth || "1280px",
21
+
}),
20
22
header: {
21
23
flexShrink: 0,
22
24
},
···
88
90
*/
89
91
export interface HeaderLayoutRootProps extends StyleXComponentProps<
90
92
React.ComponentProps<"div">
91
-
> {}
93
+
> {
94
+
maxWidth?: string;
95
+
}
92
96
93
97
export const HeaderLayoutRoot = ({
94
98
style,
99
+
maxWidth,
95
100
...props
96
101
}: HeaderLayoutRootProps) => {
97
102
return (
98
103
<div
99
104
{...props}
100
-
{...stylex.props(styles.root, style)}
105
+
{...stylex.props(styles.root, styles.rootMaxWidth(maxWidth), style)}
101
106
data-header-layout={true}
102
107
/>
103
108
);