hipstersmoothie.com / hip-ui
A design system in a box. hip-ui.tngl.io/docs/introduction
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

fix prop order

Andrew Lisowski a44e72d3 93c126ca

+92 -84
+1 -1
apps/docs/src/components/listbox/index.tsx
··· 74 74 }: ListBoxProps<T>) { 75 75 const size = sizeProp || use(SizeContext); 76 76 const listbox = ( 77 - <AriaListBox {...stylex.props(styles.listBox, style)} {...props} /> 77 + <AriaListBox {...props} {...stylex.props(styles.listBox, style)} /> 78 78 ); 79 79 80 80 return (
+34 -27
apps/docs/src/components/navbar/Navbar.tsx
··· 9 9 import { IconButton } from "../icon-button"; 10 10 import { Separator } from "../separator"; 11 11 import { primaryColor, uiColor } from "../theme/color.stylex"; 12 - import { 13 - breakpoints, 14 - containerBreakpoints, 15 - } from "../theme/media-queries.stylex"; 12 + import { containerBreakpoints } from "../theme/media-queries.stylex"; 16 13 import { ui } from "../theme/semantic-color.stylex"; 17 14 import { spacing } from "../theme/spacing.stylex"; 18 15 import { Size, StyleXComponentProps } from "../theme/types"; 19 16 import { fontFamily, fontWeight } from "../theme/typography.stylex"; 20 17 21 18 const styles = stylex.create({ 19 + wrapper: { 20 + borderBottomColor: uiColor.border1, 21 + borderBottomStyle: "solid", 22 + borderBottomWidth: 1, 23 + zIndex: 1000, 24 + width: "100%", 25 + top: 0, 26 + }, 22 27 navbar: { 28 + marginLeft: "auto", 29 + marginRight: "auto", 30 + borderWidth: 0, 23 31 maxWidth: "var(--page-content-max-width)", 24 32 "--separator-visibility": { 25 33 default: "none", ··· 86 94 ":is([data-navbar-open]):has([data-navbar-action])": `min-content min-content min-content min-content`, 87 95 }, 88 96 rowGap: spacing["8"], 89 - zIndex: 1000, 90 - borderBottomColor: uiColor.border1, 91 - borderBottomStyle: "solid", 92 - borderBottomWidth: 1, 93 - height: { 97 + minHeight: { 94 98 default: spacing["14"], 95 99 ":is([data-navbar-open])": "100%", 96 100 [containerBreakpoints.sm]: spacing["14"], ··· 108 112 [containerBreakpoints.sm]: spacing["8"], 109 113 }, 110 114 paddingTop: spacing["3"], 111 - top: 0, 112 115 width: "100%", 113 116 }, 114 117 logo: { ··· 283 286 return ( 284 287 <div 285 288 {...props} 289 + data-navbar-action={true} 286 290 data-always-visible={alwaysVisible || undefined} 287 291 {...stylex.props(styles.action, style)} 288 292 > ··· 299 303 return ( 300 304 <Link 301 305 data-active={isActive} 302 - {...stylex.props(styles.link, style)} 303 306 {...props} 307 + {...stylex.props(styles.link, style)} 304 308 /> 305 309 ); 306 310 } 307 311 308 312 export interface NavbarProps 309 - extends StyleXComponentProps<React.ComponentProps<"nav">> { 313 + extends StyleXComponentProps<React.ComponentProps<"div">> { 310 314 size?: Size; 311 315 } 312 316 ··· 325 329 326 330 return ( 327 331 <SizeContext value={size}> 328 - <nav 329 - {...props} 330 - data-navbar-open={isMobileMenuOpen || undefined} 331 - {...stylex.props(styles.navbar, ui.bg, style)} 332 - > 333 - {children} 334 - <Separator style={styles.separator as unknown as stylex.StyleXStyles} /> 335 - <IconButton 336 - aria-label="Open menu" 337 - variant="tertiary" 338 - style={styles.hamburgerButton} 339 - onPress={() => setIsMobileMenuOpen(!isMobileMenuOpen)} 332 + <div {...props} {...stylex.props(styles.wrapper, style)}> 333 + <nav 334 + data-navbar-open={isMobileMenuOpen || undefined} 335 + {...stylex.props(styles.navbar, ui.bg, style)} 340 336 > 341 - {isMobileMenuOpen ? <X /> : <Menu />} 342 - </IconButton> 343 - </nav> 337 + {children} 338 + <Separator 339 + style={styles.separator as unknown as stylex.StyleXStyles} 340 + /> 341 + <IconButton 342 + aria-label="Open menu" 343 + variant="tertiary" 344 + style={styles.hamburgerButton} 345 + onPress={() => setIsMobileMenuOpen(!isMobileMenuOpen)} 346 + > 347 + {isMobileMenuOpen ? <X /> : <Menu />} 348 + </IconButton> 349 + </nav> 350 + </div> 344 351 </SizeContext> 345 352 ); 346 353 };
+1 -1
apps/docs/src/components/navbar/NavbarMenu.tsx
··· 184 184 extends StyleXComponentProps<React.ComponentProps<"div">> {} 185 185 186 186 export function NavbarMenuTrigger({ style, ...props }: NavbarMenuTriggerProps) { 187 - return <div {...stylex.props(styles.link, style)} {...props} />; 187 + return <div {...props} {...stylex.props(styles.link, style)} />; 188 188 } 189 189 190 190 interface NavbarMenuItemProps
+3 -3
apps/docs/src/components/popover/index.tsx
··· 74 74 {trigger} 75 75 76 76 <AriaPopover 77 + offset={8} 78 + containerPadding={8} 79 + {...popoverProps} 77 80 {...stylex.props( 78 81 popoverStyles.animation, 79 82 hasArrow && styles.wrapperWithArrow, 80 83 )} 81 - offset={8} 82 - containerPadding={8} 83 - {...popoverProps} 84 84 > 85 85 {hasArrow && ( 86 86 <OverlayArrow {...stylex.props(styles.caret)}>
+2 -2
apps/docs/src/components/segmented-control/index.tsx
··· 125 125 disallowEmptySelection 126 126 selectionMode="single" 127 127 data-size={size} 128 - {...stylex.props(styles.group, style)} 129 128 {...props} 129 + {...stylex.props(styles.group, style)} 130 130 > 131 131 {children} 132 132 </AriaToggleButtonGroup> ··· 144 144 ...props 145 145 }: SegmentedControlItemProps) => { 146 146 return ( 147 - <AriaToggleButton {...stylex.props(styles.item, style)} {...props}> 147 + <AriaToggleButton {...props} {...stylex.props(styles.item, style)}> 148 148 <SelectionIndicator {...stylex.props(styles.selectionIndicator)} /> 149 149 {children} 150 150 </AriaToggleButton>
+4 -4
apps/docs/src/components/table/index.tsx
··· 253 253 254 254 return ( 255 255 <AriaTableHeader 256 - {...stylex.props(styles.tableHeader, style)} 257 256 {...otherProps} 257 + {...stylex.props(styles.tableHeader, style)} 258 258 > 259 259 {/* Add extra columns for drag and drop and selection. */} 260 260 {allowsDragging && <TableColumn minWidth={52} width={52} />} ··· 281 281 const { selectionBehavior, allowsDragging } = useTableOptions(); 282 282 283 283 return ( 284 - <AriaRow id={id} {...stylex.props(styles.row, style)} {...props}> 284 + <AriaRow id={id} {...props} {...stylex.props(styles.row, style)}> 285 285 {allowsDragging && ( 286 286 <TableCell> 287 287 <IconButton slot="drag" label="Reorder" variant="tertiary"> ··· 306 306 style, 307 307 ...prop 308 308 }: TableBodyProps<T>) { 309 - return <AriaTableBody {...stylex.props(styles.tableBody, style)} {...prop} />; 309 + return <AriaTableBody {...prop} {...stylex.props(styles.tableBody, style)} />; 310 310 } 311 311 312 312 export interface TableCellProps ··· 322 322 ...props 323 323 }: TableCellProps) { 324 324 return ( 325 - <AriaCell {...stylex.props(styles.cell, style)} {...props}> 325 + <AriaCell {...props} {...stylex.props(styles.cell, style)}> 326 326 <div 327 327 {...stylex.props( 328 328 styles.cellContent,
+1 -1
apps/docs/src/components/toast/Toast.tsx
··· 172 172 return ( 173 173 <AriaToastRegion 174 174 queue={toasts} 175 - {...stylex.props(styles.region, style)} 176 175 {...props} 176 + {...stylex.props(styles.region, style)} 177 177 > 178 178 {({ toast }) => <ToastItem toast={toast} />} 179 179 </AriaToastRegion>
+1 -1
apps/docs/src/components/toggle-button-group/index.tsx
··· 108 108 109 109 return ( 110 110 <ButtonGroupContext value={contextValue}> 111 - <AriaToggleButtonGroup {...stylex.props(stylesToApply, style)} {...props}> 111 + <AriaToggleButtonGroup {...props} {...stylex.props(stylesToApply, style)}> 112 112 {children} 113 113 </AriaToggleButtonGroup> 114 114 </ButtonGroupContext>
+14 -14
apps/docs/src/components/typography/index.tsx
··· 79 79 80 80 export const Heading1 = ({ style, ...props }: Heading1Props) => { 81 81 // eslint-disable-next-line jsx-a11y/heading-has-content 82 - return <h1 {...stylex.props(typeramp.heading1, style)} {...props} />; 82 + return <h1 {...props} {...stylex.props(typeramp.heading1, style)} />; 83 83 }; 84 84 85 85 export interface Heading2Props ··· 87 87 88 88 export const Heading2 = ({ style, ...props }: Heading2Props) => { 89 89 // eslint-disable-next-line jsx-a11y/heading-has-content 90 - return <h2 {...stylex.props(typeramp.heading2, style)} {...props} />; 90 + return <h2 {...props} {...stylex.props(typeramp.heading2, style)} />; 91 91 }; 92 92 93 93 export interface Heading3Props ··· 95 95 96 96 export const Heading3 = ({ style, ...props }: Heading3Props) => { 97 97 // eslint-disable-next-line jsx-a11y/heading-has-content 98 - return <h3 {...stylex.props(typeramp.heading3, style)} {...props} />; 98 + return <h3 {...props} {...stylex.props(typeramp.heading3, style)} />; 99 99 }; 100 100 101 101 export interface Heading4Props ··· 103 103 104 104 export const Heading4 = ({ style, ...props }: Heading4Props) => { 105 105 // eslint-disable-next-line jsx-a11y/heading-has-content 106 - return <h4 {...stylex.props(typeramp.heading4, style)} {...props} />; 106 + return <h4 {...props} {...stylex.props(typeramp.heading4, style)} />; 107 107 }; 108 108 109 109 export interface Heading5Props ··· 111 111 112 112 export const Heading5 = ({ style, ...props }: Heading5Props) => { 113 113 // eslint-disable-next-line jsx-a11y/heading-has-content 114 - return <h5 {...stylex.props(typeramp.heading5, style)} {...props} />; 114 + return <h5 {...props} {...stylex.props(typeramp.heading5, style)} />; 115 115 }; 116 116 117 117 export interface BodyProps ··· 134 134 return ( 135 135 <LinkContext value={contextValue}> 136 136 <p 137 + {...props} 137 138 {...stylex.props( 138 139 typeramp.body, 139 140 variant === "secondary" && ui.textDim, 140 141 variant === "critical" && critical.textDim, 141 142 style, 142 143 )} 143 - {...props} 144 144 /> 145 145 </LinkContext> 146 146 ); ··· 170 170 return ( 171 171 <LinkContext value={contextValue}> 172 172 <p 173 + {...props} 173 174 {...stylex.props( 174 175 typeramp.smallBody, 175 176 variant === "secondary" && ui.textDim, 176 177 variant === "critical" && critical.textDim, 177 178 style, 178 179 )} 179 - {...props} 180 180 /> 181 181 </LinkContext> 182 182 ); ··· 196 196 }: LabelTextProps) => { 197 197 return ( 198 198 <p 199 + {...props} 199 200 {...stylex.props( 200 201 typeramp.label, 201 202 variant === "secondary" && ui.textDim, ··· 203 204 hasEllipsis && styles.textEllipsis, 204 205 style, 205 206 )} 206 - {...props} 207 207 /> 208 208 ); 209 209 }; ··· 232 232 return ( 233 233 <LinkContext value={contextValue}> 234 234 <p 235 + {...props} 235 236 {...stylex.props( 236 237 typeramp.sublabel, 237 238 variant === "secondary" && ui.textDim, 238 239 variant === "critical" && critical.textDim, 239 240 style, 240 241 )} 241 - {...props} 242 242 /> 243 243 </LinkContext> 244 244 ); ··· 248 248 extends StyleXComponentProps<React.ComponentProps<"blockquote">> {} 249 249 250 250 export const Blockquote = ({ style, ...props }: BlockquoteProps) => { 251 - return <blockquote {...stylex.props(styles.blockquote, style)} {...props} />; 251 + return <blockquote {...props} {...stylex.props(styles.blockquote, style)} />; 252 252 }; 253 253 254 254 export interface UnorderedListProps 255 255 extends StyleXComponentProps<React.ComponentProps<"ul">> {} 256 256 257 257 export const UnorderedList = ({ style, ...props }: UnorderedListProps) => { 258 - return <ul {...stylex.props(styles.unorderedList, style)} {...props} />; 258 + return <ul {...props} {...stylex.props(styles.unorderedList, style)} />; 259 259 }; 260 260 261 261 export interface OrderedListProps 262 262 extends StyleXComponentProps<React.ComponentProps<"ol">> {} 263 263 264 264 export const OrderedList = ({ style, ...props }: OrderedListProps) => { 265 - return <ol {...stylex.props(styles.orderedList, style)} {...props} />; 265 + return <ol {...props} {...stylex.props(styles.orderedList, style)} />; 266 266 }; 267 267 268 268 export interface ListItemProps ··· 270 270 271 271 export const ListItem = ({ style, children, ...props }: ListItemProps) => { 272 272 return ( 273 - <li {...stylex.props(styles.listItem, style)} {...props}> 273 + <li {...props} {...stylex.props(styles.listItem, style)}> 274 274 {children} 275 275 </li> 276 276 ); ··· 282 282 export const InlineCode = ({ style, ...props }: InlineCodeProps) => { 283 283 return ( 284 284 <code 285 - {...stylex.props(styles.inlineCode, ui.bgSecondary, style)} 286 285 {...props} 286 + {...stylex.props(styles.inlineCode, ui.bgSecondary, style)} 287 287 /> 288 288 ); 289 289 };
+1 -1
apps/docs/src/components/typography/text.tsx
··· 101 101 }: TextProps) => { 102 102 return ( 103 103 <span 104 + {...props} 104 105 {...stylex.props( 105 106 styles[font], 106 107 weight && styles[weight], ··· 113 114 hasEllipsis && styles.textEllipsis, 114 115 style, 115 116 )} 116 - {...props} 117 117 /> 118 118 ); 119 119 };
+1 -1
packages/hip-ui/src/components/listbox/index.tsx
··· 74 74 }: ListBoxProps<T>) { 75 75 const size = sizeProp || use(SizeContext); 76 76 const listbox = ( 77 - <AriaListBox {...stylex.props(styles.listBox, style)} {...props} /> 77 + <AriaListBox {...props} {...stylex.props(styles.listBox, style)} /> 78 78 ); 79 79 80 80 return (
+2 -1
packages/hip-ui/src/components/navbar/Navbar.tsx
··· 286 286 return ( 287 287 <div 288 288 {...props} 289 + data-navbar-action={true} 289 290 data-always-visible={alwaysVisible || undefined} 290 291 {...stylex.props(styles.action, style)} 291 292 > ··· 302 303 return ( 303 304 <Link 304 305 data-active={isActive} 305 - {...stylex.props(styles.link, style)} 306 306 {...props} 307 + {...stylex.props(styles.link, style)} 307 308 /> 308 309 ); 309 310 }
+1 -1
packages/hip-ui/src/components/navbar/NavbarMenu.tsx
··· 184 184 extends StyleXComponentProps<React.ComponentProps<"div">> {} 185 185 186 186 export function NavbarMenuTrigger({ style, ...props }: NavbarMenuTriggerProps) { 187 - return <div {...stylex.props(styles.link, style)} {...props} />; 187 + return <div {...props} {...stylex.props(styles.link, style)} />; 188 188 } 189 189 190 190 interface NavbarMenuItemProps
+3 -3
packages/hip-ui/src/components/popover/index.tsx
··· 74 74 {trigger} 75 75 76 76 <AriaPopover 77 + offset={8} 78 + containerPadding={8} 79 + {...popoverProps} 77 80 {...stylex.props( 78 81 popoverStyles.animation, 79 82 hasArrow && styles.wrapperWithArrow, 80 83 )} 81 - offset={8} 82 - containerPadding={8} 83 - {...popoverProps} 84 84 > 85 85 {hasArrow && ( 86 86 <OverlayArrow {...stylex.props(styles.caret)}>
+2 -2
packages/hip-ui/src/components/segmented-control/index.tsx
··· 125 125 disallowEmptySelection 126 126 selectionMode="single" 127 127 data-size={size} 128 - {...stylex.props(styles.group, style)} 129 128 {...props} 129 + {...stylex.props(styles.group, style)} 130 130 > 131 131 {children} 132 132 </AriaToggleButtonGroup> ··· 144 144 ...props 145 145 }: SegmentedControlItemProps) => { 146 146 return ( 147 - <AriaToggleButton {...stylex.props(styles.item, style)} {...props}> 147 + <AriaToggleButton {...props} {...stylex.props(styles.item, style)}> 148 148 <SelectionIndicator {...stylex.props(styles.selectionIndicator)} /> 149 149 {children} 150 150 </AriaToggleButton>
+4 -4
packages/hip-ui/src/components/table/index.tsx
··· 253 253 254 254 return ( 255 255 <AriaTableHeader 256 - {...stylex.props(styles.tableHeader, style)} 257 256 {...otherProps} 257 + {...stylex.props(styles.tableHeader, style)} 258 258 > 259 259 {/* Add extra columns for drag and drop and selection. */} 260 260 {allowsDragging && <TableColumn minWidth={52} width={52} />} ··· 281 281 const { selectionBehavior, allowsDragging } = useTableOptions(); 282 282 283 283 return ( 284 - <AriaRow id={id} {...stylex.props(styles.row, style)} {...props}> 284 + <AriaRow id={id} {...props} {...stylex.props(styles.row, style)}> 285 285 {allowsDragging && ( 286 286 <TableCell> 287 287 <IconButton slot="drag" label="Reorder" variant="tertiary"> ··· 306 306 style, 307 307 ...prop 308 308 }: TableBodyProps<T>) { 309 - return <AriaTableBody {...stylex.props(styles.tableBody, style)} {...prop} />; 309 + return <AriaTableBody {...prop} {...stylex.props(styles.tableBody, style)} />; 310 310 } 311 311 312 312 export interface TableCellProps ··· 322 322 ...props 323 323 }: TableCellProps) { 324 324 return ( 325 - <AriaCell {...stylex.props(styles.cell, style)} {...props}> 325 + <AriaCell {...props} {...stylex.props(styles.cell, style)}> 326 326 <div 327 327 {...stylex.props( 328 328 styles.cellContent,
+1 -1
packages/hip-ui/src/components/toast/Toast.tsx
··· 172 172 return ( 173 173 <AriaToastRegion 174 174 queue={toasts} 175 - {...stylex.props(styles.region, style)} 176 175 {...props} 176 + {...stylex.props(styles.region, style)} 177 177 > 178 178 {({ toast }) => <ToastItem toast={toast} />} 179 179 </AriaToastRegion>
+1 -1
packages/hip-ui/src/components/toggle-button-group/index.tsx
··· 108 108 109 109 return ( 110 110 <ButtonGroupContext value={contextValue}> 111 - <AriaToggleButtonGroup {...stylex.props(stylesToApply, style)} {...props}> 111 + <AriaToggleButtonGroup {...props} {...stylex.props(stylesToApply, style)}> 112 112 {children} 113 113 </AriaToggleButtonGroup> 114 114 </ButtonGroupContext>
+14 -14
packages/hip-ui/src/components/typography/index.tsx
··· 79 79 80 80 export const Heading1 = ({ style, ...props }: Heading1Props) => { 81 81 // eslint-disable-next-line jsx-a11y/heading-has-content 82 - return <h1 {...stylex.props(typeramp.heading1, style)} {...props} />; 82 + return <h1 {...props} {...stylex.props(typeramp.heading1, style)} />; 83 83 }; 84 84 85 85 export interface Heading2Props ··· 87 87 88 88 export const Heading2 = ({ style, ...props }: Heading2Props) => { 89 89 // eslint-disable-next-line jsx-a11y/heading-has-content 90 - return <h2 {...stylex.props(typeramp.heading2, style)} {...props} />; 90 + return <h2 {...props} {...stylex.props(typeramp.heading2, style)} />; 91 91 }; 92 92 93 93 export interface Heading3Props ··· 95 95 96 96 export const Heading3 = ({ style, ...props }: Heading3Props) => { 97 97 // eslint-disable-next-line jsx-a11y/heading-has-content 98 - return <h3 {...stylex.props(typeramp.heading3, style)} {...props} />; 98 + return <h3 {...props} {...stylex.props(typeramp.heading3, style)} />; 99 99 }; 100 100 101 101 export interface Heading4Props ··· 103 103 104 104 export const Heading4 = ({ style, ...props }: Heading4Props) => { 105 105 // eslint-disable-next-line jsx-a11y/heading-has-content 106 - return <h4 {...stylex.props(typeramp.heading4, style)} {...props} />; 106 + return <h4 {...props} {...stylex.props(typeramp.heading4, style)} />; 107 107 }; 108 108 109 109 export interface Heading5Props ··· 111 111 112 112 export const Heading5 = ({ style, ...props }: Heading5Props) => { 113 113 // eslint-disable-next-line jsx-a11y/heading-has-content 114 - return <h5 {...stylex.props(typeramp.heading5, style)} {...props} />; 114 + return <h5 {...props} {...stylex.props(typeramp.heading5, style)} />; 115 115 }; 116 116 117 117 export interface BodyProps ··· 134 134 return ( 135 135 <LinkContext value={contextValue}> 136 136 <p 137 + {...props} 137 138 {...stylex.props( 138 139 typeramp.body, 139 140 variant === "secondary" && ui.textDim, 140 141 variant === "critical" && critical.textDim, 141 142 style, 142 143 )} 143 - {...props} 144 144 /> 145 145 </LinkContext> 146 146 ); ··· 170 170 return ( 171 171 <LinkContext value={contextValue}> 172 172 <p 173 + {...props} 173 174 {...stylex.props( 174 175 typeramp.smallBody, 175 176 variant === "secondary" && ui.textDim, 176 177 variant === "critical" && critical.textDim, 177 178 style, 178 179 )} 179 - {...props} 180 180 /> 181 181 </LinkContext> 182 182 ); ··· 196 196 }: LabelTextProps) => { 197 197 return ( 198 198 <p 199 + {...props} 199 200 {...stylex.props( 200 201 typeramp.label, 201 202 variant === "secondary" && ui.textDim, ··· 203 204 hasEllipsis && styles.textEllipsis, 204 205 style, 205 206 )} 206 - {...props} 207 207 /> 208 208 ); 209 209 }; ··· 232 232 return ( 233 233 <LinkContext value={contextValue}> 234 234 <p 235 + {...props} 235 236 {...stylex.props( 236 237 typeramp.sublabel, 237 238 variant === "secondary" && ui.textDim, 238 239 variant === "critical" && critical.textDim, 239 240 style, 240 241 )} 241 - {...props} 242 242 /> 243 243 </LinkContext> 244 244 ); ··· 248 248 extends StyleXComponentProps<React.ComponentProps<"blockquote">> {} 249 249 250 250 export const Blockquote = ({ style, ...props }: BlockquoteProps) => { 251 - return <blockquote {...stylex.props(styles.blockquote, style)} {...props} />; 251 + return <blockquote {...props} {...stylex.props(styles.blockquote, style)} />; 252 252 }; 253 253 254 254 export interface UnorderedListProps 255 255 extends StyleXComponentProps<React.ComponentProps<"ul">> {} 256 256 257 257 export const UnorderedList = ({ style, ...props }: UnorderedListProps) => { 258 - return <ul {...stylex.props(styles.unorderedList, style)} {...props} />; 258 + return <ul {...props} {...stylex.props(styles.unorderedList, style)} />; 259 259 }; 260 260 261 261 export interface OrderedListProps 262 262 extends StyleXComponentProps<React.ComponentProps<"ol">> {} 263 263 264 264 export const OrderedList = ({ style, ...props }: OrderedListProps) => { 265 - return <ol {...stylex.props(styles.orderedList, style)} {...props} />; 265 + return <ol {...props} {...stylex.props(styles.orderedList, style)} />; 266 266 }; 267 267 268 268 export interface ListItemProps ··· 270 270 271 271 export const ListItem = ({ style, children, ...props }: ListItemProps) => { 272 272 return ( 273 - <li {...stylex.props(styles.listItem, style)} {...props}> 273 + <li {...props} {...stylex.props(styles.listItem, style)}> 274 274 {children} 275 275 </li> 276 276 ); ··· 282 282 export const InlineCode = ({ style, ...props }: InlineCodeProps) => { 283 283 return ( 284 284 <code 285 - {...stylex.props(styles.inlineCode, ui.bgSecondary, style)} 286 285 {...props} 286 + {...stylex.props(styles.inlineCode, ui.bgSecondary, style)} 287 287 /> 288 288 ); 289 289 };
+1 -1
packages/hip-ui/src/components/typography/text.tsx
··· 101 101 }: TextProps) => { 102 102 return ( 103 103 <span 104 + {...props} 104 105 {...stylex.props( 105 106 styles[font], 106 107 weight && styles[weight], ··· 113 114 hasEllipsis && styles.textEllipsis, 114 115 style, 115 116 )} 116 - {...props} 117 117 /> 118 118 ); 119 119 };