feat(core): List revisited! (part 2/2)

React95 · Feb 14, 2024 · 7e175e0 · 7e175e0
1 parent 397caf9
commit 7e175e0
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 297 deletions.
diff --git a/packages/core/components/List/List.css.ts b/packages/core/components/List/List.css.ts
@@ -8,6 +8,7 @@ export const listItem = style({
   position: 'relative',
   display: 'flex',
   alignItems: 'center',
+  userSelect: 'none',
   margin: contract.space[0],
   paddingBlock: contract.space[2],
   paddingInline: contract.space[6],
@@ -17,10 +18,32 @@ export const listItem = style({
       backgroundColor: contract.colors.headerBackground,
       color: contract.colors.materialTextInvert,
     },
+    '&:not(:has(svg))': {
+      paddingInlineStart: '26px',
+    },
+    '&:has(ul):after': {
+      position: 'absolute',
+      width: contract.space[5],
+      height: contract.space[8],
+      right: contract.space[8],
+      content: "''",
+      backgroundColor: contract.colors.materialText,
+      maskImage: `url('${rightcaret}')`,
+      maskPosition: 'center center',
+      maskSize: `${contract.space[5]} ${contract.space[8]}`,
+      maskRepeat: 'no-repeat',
+    },
+    '&:has(ul):hover:after': {
+      backgroundColor: contract.colors.materialTextInvert,
+    },
   },
 });
 
-globalStyle(`${listItem} svg`, { marginRight: contract.space[10] });
+globalStyle(`${listItem} svg`, {
+  marginRight: contract.space[10],
+  minWidth: contract.space[16],
+});
+
 globalStyle(`${listItem} ul`, {
   display: 'none',
   position: 'absolute',
@@ -30,6 +53,10 @@ globalStyle(`${listItem} ul`, {
   zIndex: contract.zIndices.taskbar,
 });
 
+globalStyle(`${listItem}:has(ul):hover > ul`, {
+  display: 'block',
+});
+
 export const divider = style({
   height: contract.space[1],
   borderTopStyle: 'solid',

diff --git a/packages/core/components/List/List.test.tsx b/packages/core/components/List/List.test.tsx
@@ -1,12 +1,8 @@
-import {
-  FolderExe2,
-  MicrosoftExchange,
-  WindowsExplorer,
-} from '@react95/icons';
+import { FolderExe2, MicrosoftExchange, WindowsExplorer } from '@react95/icons';
 import React from 'react';
 import { describe, expect, it } from 'vitest';
 import { waitRender } from '../shared/test/utils';
-import List from './List';
+import { List } from './List';
 
 describe('<List />', () => {
   describe('Snapshots', () => {
@@ -19,9 +15,7 @@ describe('<List />', () => {
                 Microsoft Exchange
               </List.Item>
               <List.Divider />
-              <List.Item icon={<WindowsExplorer />}>
-                Windows Explorer
-              </List.Item>
+              <List.Item icon={<WindowsExplorer />}>Windows Explorer</List.Item>
             </List>
             Programs
           </List.Item>

diff --git a/packages/core/components/List/List.tsx b/packages/core/components/List/List.tsx
@@ -1,4 +1,4 @@
-import ListItem from './ListItem';
+import { ListItem } from './ListItem';
 import { Divider } from './ListDivider';
 import { Frame, FrameProps } from '../Frame/Frame';
 import React from 'react';

diff --git a/packages/core/components/List/ListItem.tsx b/packages/core/components/List/ListItem.tsx
@@ -1,15 +1,10 @@
 import React, { forwardRef } from 'react';
 import cn from 'classnames';
 
-import { IListProps } from './List';
-
 import { Frame, FrameProps } from '../Frame/Frame';
 import { listItem } from './List.css';
 
-type ItemProps = Omit<FrameProps<'li'>, 'as'> & {
-  icon?: boolean;
-  hasList: boolean;
-};
+type ItemProps = Omit<FrameProps<'li'>, 'as'>;
 
 const Item = React.forwardRef<HTMLLIElement, ItemProps>((rest, ref) => (
   <Frame {...rest} ref={ref} className={cn(listItem, rest.className)} as="li" />
@@ -19,25 +14,13 @@ export type ListItemProps = {
   icon?: React.ReactElement;
 } & React.HtmlHTMLAttributes<HTMLLIElement>;
 
-const ListItem = forwardRef<HTMLLIElement, ListItemProps>(
+export const ListItem = forwardRef<HTMLLIElement, ListItemProps>(
   ({ icon, children = [], ...rest }, ref) => (
-    <Item
-      {...rest}
-      icon={!!icon}
-      ref={ref}
-      hasList={Boolean(
-        children &&
-          React.Children.map<any, IListProps>(children as any, child =>
-            React.isValidElement<IListProps>(child),
-          ).some(child => child),
-      )}
-    >
+    <Item {...rest} ref={ref}>
       {icon}
       {children}
     </Item>
   ),
 );
 
 ListItem.displayName = 'List.Item';
-
-export default ListItem;