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.

plish

Andrew Lisowski 6740f44b 6e16ea98

+60 -34
+25 -15
apps/docs/src/components/sidebar/index.tsx
··· 17 17 import { StyleXComponentProps } from "../theme/types"; 18 18 import { fontFamily, fontSize, fontWeight } from "../theme/typography.stylex"; 19 19 import { Text } from "../typography/text"; 20 + import { mergeProps, useHover, usePress } from "react-aria"; 20 21 21 22 interface SidebarContextType { 22 23 headerId: string; ··· 57 58 padding: 0, 58 59 }, 59 60 sidebarItem: { 61 + textDecoration: "none", 60 62 alignItems: "center", 61 63 backgroundColor: { 62 64 default: "transparent", 63 - ":hover": uiColor.component2, 64 - ":active": uiColor.component3, 65 + ":is([data-hovered=true])": uiColor.component2, 66 + ":is([data-pressed=true])": uiColor.component3, 65 67 }, 66 68 borderRadius: radius["md"], 67 69 color: uiColor.text2, ··· 80 82 sidebarItemActive: { 81 83 backgroundColor: { 82 84 default: primaryColor.component1, 83 - ":hover": primaryColor.component2, 84 - ":active": primaryColor.component3, 85 + ":is([data-hovered=true])": primaryColor.component2, 86 + ":is([data-pressed=true])": primaryColor.component3, 85 87 }, 86 88 color: primaryColor.text2, 87 89 }, ··· 141 143 142 144 return ( 143 145 <SidebarContext value={contextValue}> 144 - <div 146 + <nav 145 147 {...props} 146 148 {...stylex.props(styles.sidebar, style)} 147 149 aria-labelledby={headerId} 148 150 > 149 151 {children} 150 - </div> 152 + </nav> 151 153 </SidebarContext> 152 154 ); 153 155 } ··· 257 259 isActive, 258 260 ...props 259 261 }: SidebarItemProps) { 262 + const { hoverProps, isHovered } = useHover({}); 263 + const { pressProps, isPressed } = usePress({}); 264 + const Component = "href" in props ? "a" : "button"; 265 + 260 266 return ( 261 - <li 262 - {...props} 263 - {...stylex.props( 264 - styles.sidebarItem, 265 - isActive && styles.sidebarItemActive, 266 - style, 267 - )} 268 - > 269 - {children} 267 + <li> 268 + <Component 269 + {...mergeProps(props as any, hoverProps, pressProps)} 270 + data-hovered={isHovered} 271 + data-pressed={isPressed} 272 + {...stylex.props( 273 + styles.sidebarItem, 274 + isActive && styles.sidebarItemActive, 275 + style, 276 + )} 277 + > 278 + {children} 279 + </Component> 270 280 </li> 271 281 ); 272 282 }
+4 -1
apps/docs/src/components/theme/usePopoverStyles.ts
··· 30 30 ":is([data-entering], [data-entering] > *)": 0, 31 31 ":is([data-exiting], [data-exiting] > *)": 0, 32 32 }, 33 + pointerEvents: { 34 + ":is([data-exiting], [data-exiting] > *)": "none", 35 + }, 33 36 transform: { 34 37 ":is([data-entering], [data-entering] > *)": `scale(0.95) translate(var(--origin-x, 0), var(--origin-y, 0))`, 35 38 ":is([data-exiting], [data-exiting] > *)": 36 39 "scale(0.95) translate(var(--origin-x, 0), var(--origin-y, 0))", 37 40 }, 38 - transitionDuration: animationDuration.default, 41 + transitionDuration: animationDuration.fast, 39 42 transitionProperty: "transform, opacity", 40 43 }, 41 44 });
+5 -2
apps/docs/src/lib/TableOfContents.tsx
··· 19 19 const styles = stylex.create({ 20 20 wrapper: { 21 21 boxSizing: "border-box", 22 + display: "flex", 23 + flexDirection: "column", 22 24 flexShrink: 0, 25 + gap: spacing["2"], 23 26 height: "100vh", 24 27 marginTop: spacing["12"], 25 28 overflow: "auto", ··· 143 146 144 147 return ( 145 148 <ActiveHeaderIdContext value={activeHeaderId}> 146 - <Flex direction="column" gap="2" style={styles.wrapper}> 149 + <nav {...stylex.props(styles.wrapper)}> 147 150 <LevelContext value={1}> 148 151 <ul {...stylex.props(styles.itemList)}> 149 152 {toc.map((item) => ( ··· 151 154 ))} 152 155 </ul> 153 156 </LevelContext> 154 - </Flex> 157 + </nav> 155 158 </ActiveHeaderIdContext> 156 159 ); 157 160 }
+25 -15
packages/hip-ui/src/components/sidebar/index.tsx
··· 17 17 import { StyleXComponentProps } from "../theme/types"; 18 18 import { fontFamily, fontSize, fontWeight } from "../theme/typography.stylex"; 19 19 import { Text } from "../typography/text"; 20 + import { mergeProps, useHover, usePress } from "react-aria"; 20 21 21 22 interface SidebarContextType { 22 23 headerId: string; ··· 57 58 padding: 0, 58 59 }, 59 60 sidebarItem: { 61 + textDecoration: "none", 60 62 alignItems: "center", 61 63 backgroundColor: { 62 64 default: "transparent", 63 - ":hover": uiColor.component2, 64 - ":active": uiColor.component3, 65 + ":is([data-hovered=true])": uiColor.component2, 66 + ":is([data-pressed=true])": uiColor.component3, 65 67 }, 66 68 borderRadius: radius["md"], 67 69 color: uiColor.text2, ··· 80 82 sidebarItemActive: { 81 83 backgroundColor: { 82 84 default: primaryColor.component1, 83 - ":hover": primaryColor.component2, 84 - ":active": primaryColor.component3, 85 + ":is([data-hovered=true])": primaryColor.component2, 86 + ":is([data-pressed=true])": primaryColor.component3, 85 87 }, 86 88 color: primaryColor.text2, 87 89 }, ··· 141 143 142 144 return ( 143 145 <SidebarContext value={contextValue}> 144 - <div 146 + <nav 145 147 {...props} 146 148 {...stylex.props(styles.sidebar, style)} 147 149 aria-labelledby={headerId} 148 150 > 149 151 {children} 150 - </div> 152 + </nav> 151 153 </SidebarContext> 152 154 ); 153 155 } ··· 257 259 isActive, 258 260 ...props 259 261 }: SidebarItemProps) { 262 + const { hoverProps, isHovered } = useHover({}); 263 + const { pressProps, isPressed } = usePress({}); 264 + const Component = "href" in props ? "a" : "button"; 265 + 260 266 return ( 261 - <li 262 - {...props} 263 - {...stylex.props( 264 - styles.sidebarItem, 265 - isActive && styles.sidebarItemActive, 266 - style, 267 - )} 268 - > 269 - {children} 267 + <li> 268 + <Component 269 + {...mergeProps(props as any, hoverProps, pressProps)} 270 + data-hovered={isHovered} 271 + data-pressed={isPressed} 272 + {...stylex.props( 273 + styles.sidebarItem, 274 + isActive && styles.sidebarItemActive, 275 + style, 276 + )} 277 + > 278 + {children} 279 + </Component> 270 280 </li> 271 281 ); 272 282 }
+1 -1
packages/hip-ui/src/components/theme/usePopoverStyles.ts
··· 38 38 ":is([data-exiting], [data-exiting] > *)": 39 39 "scale(0.95) translate(var(--origin-x, 0), var(--origin-y, 0))", 40 40 }, 41 - transitionDuration: animationDuration.default, 41 + transitionDuration: animationDuration.fast, 42 42 transitionProperty: "transform, opacity", 43 43 }, 44 44 });