fix: default style for list components

Author: gndz07

components/List/List.stories.tsx

@@ -7,7 +7,7 @@ import { Button } from '../Button';
 import { Checkbox } from '../Checkbox';
 import { Flex } from '../Flex';
 import { Text } from '../Text';
-import { Li, Ul } from './List';
+import { Li, Ol, Ul } from './List';
 
 const Component: Meta<typeof Ul> = {
   title: 'Components/List',
@@ -25,13 +25,22 @@ const Template: StoryFn<typeof Ul> = (args) => (
 
 export const Basic: StoryFn<typeof Ul> = Template.bind({});
 
+export const Ordered: StoryFn<typeof Ol> = (args) => (
+  <Ol {...args}>
+    <Li>Dashboard</Li>
+    <Li>Profile</Li>
+    <Li>Settings</Li>
+    <Li>Help</Li>
+  </Ol>
+);
+
 export const Interactive: StoryFn<typeof Ul> = Template.bind({});
 Interactive.args = {
   interactive: true,
 };
 
 export const Users: StoryFn<typeof Ul> = (args) => (
-  <Ul {...args}>
+  <Ul css={{ listStyleType: 'none' }} {...args}>
     <Li gap="3">
       <Avatar id="100" src="https://picsum.photos/100" />
       <Flex align="start" direction="column">
@@ -60,7 +69,7 @@ Users.args = {
 };
 
 export const Controls: StoryFn<typeof Ul> = (args) => (
-  <Ul {...args}>
+  <Ul css={{ listStyleType: 'none' }} {...args}>
     <Li gap="3" controls={<Checkbox />}>
       <Avatar id="100" src="https://picsum.photos/100" />
       <Flex align="start" direction="column">

components/List/List.tsx

@@ -18,7 +18,7 @@ const StyledSpan = styled('span', Flex, {
   // APPLY BUTTON STYLES
   ...LIST_ITEM_CONTENT_STYLES,
   // CUSTOM
-  p: '$2',
+  p: '$1',
 });
 
 const StyledListItemButton = styled('button', Flex, {
@@ -71,29 +71,38 @@ const StyledListItemButton = styled('button', Flex, {
 });
 
 const StyledLi = styled('li', {
-  borderRadius: '$1',
   m: '$2',
   outline: 'none',
   position: 'relative',
-  display: 'flex',
   '&:focus-within': {
     boxShadow: 'none',
   },
   variants: {
     elevation: elevationVariants,
   },
   defaultVariants: {
-    elevation: '1',
+    elevation: '0',
   },
 });
 
 const StyledUl = styled('ul', {
-  listStyleType: 'none',
   m: 0,
   p: 0,
   color: '$hiContrast',
 });
 
+const StyledOl = styled('ol', {
+  m: 0,
+  p: 0,
+  color: '$hiContrast',
+
+  '> li::marker': {
+    fontSize: '$3',
+    color: '$hiContrast',
+    fontFamily: '$rubik',
+  },
+});
+
 const ListContext = createContext({
   interactive: false,
 });
@@ -110,7 +119,25 @@ export const Ul = React.forwardRef<React.ElementRef<typeof StyledUl>, ListProps>
         <StyledUl role="list" ref={forwardedRef} {...props} />
       </ListContext.Provider>
     );
-  }
+  },
+);
+
+export interface OrderedListProps
+  extends ComponentProps<typeof StyledOl>,
+    VariantProps<typeof StyledOl> {
+  interactive?: boolean;
+}
+
+export const Ol = React.forwardRef<React.ElementRef<typeof StyledOl>, OrderedListProps>(
+  ({ interactive, ...props }, forwardedRef) => {
+    const contextValue = useMemo(() => ({ interactive: !!interactive }), [interactive]);
+
+    return (
+      <ListContext.Provider value={contextValue}>
+        <StyledOl role="list" ref={forwardedRef} {...props} />
+      </ListContext.Provider>
+    );
+  },
 );
 
 const ControlsWrapper = styled('div', {
@@ -161,5 +188,5 @@ export const Li = React.forwardRef<React.ElementRef<typeof StyledLi>, ListItemPr
         {!!controls && <ControlsWrapper>{controls}</ControlsWrapper>}
       </StyledLi>
     );
-  }
+  },
 );

index.ts

@@ -1,26 +1,30 @@
+export { AccessibleIcon } from './components/AccessibleIcon';
 export {
-  AccordionRoot,
+  AccordionContent,
   AccordionItem,
+  AccordionRoot,
   AccordionTrigger,
-  AccordionContent,
 } from './components/Accordion';
-export {
-  RadioAccordionRoot,
-  RadioAccordionItem,
-  RadioAccordionTrigger,
-  RadioAccordionContent,
-} from './components/RadioAccordion';
 export { Alert } from './components/Alert';
-export { AspectRatio } from '@radix-ui/react-aspect-ratio';
+export {
+  Caption as AriaCaption,
+  Table as AriaTable,
+  Tbody as AriaTbody,
+  Td as AriaTd,
+  Tfoot as AriaTfoot,
+  Th as AriaTh,
+  Thead as AriaThead,
+  Tr as AriaTr,
+} from './components/AriaTable';
+export { Avatar } from './components/Avatar';
 export { Badge } from './components/Badge';
 export { Box } from './components/Box';
 export { Bubble } from './components/Bubble';
 export { Button } from './components/Button';
+export { ButtonSwitchContainer, ButtonSwitchItem } from './components/ButtonSwitch';
 export { Card } from './components/Card';
 export { Checkbox } from './components/Checkbox';
 export { Container } from './components/Container';
-export { Elevation, elevationVariants } from './components/Elevation';
-export { FaencyProvider } from './components/FaencyProvider';
 export { DateTimePicker } from './components/DateTimePicker';
 export {
   Dialog,
@@ -36,26 +40,26 @@ export {
 } from './components/Dialog';
 export {
   DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
   DropdownMenuCheckboxItem,
+  DropdownMenuContent,
   DropdownMenuGroup,
   DropdownMenuItem,
   DropdownMenuLabel,
+  DropdownMenuPortal,
   DropdownMenuRadioGroup,
   DropdownMenuRadioItem,
   DropdownMenuSeparator,
-  DropdownMenuPortal,
+  DropdownMenuTrigger,
 } from './components/DropdownMenu';
+export { Elevation, elevationVariants } from './components/Elevation';
+export { FaencyProvider } from './components/FaencyProvider';
 export { Flex } from './components/Flex';
 export { Grid } from './components/Grid';
 export { H1, H2, H3, H4, H5, H6 } from './components/Heading';
 export { Image } from './components/Image';
-export { TextField } from './components/TextField';
-export { Textarea } from './components/Textarea';
 export { Label } from './components/Label';
 export { Link } from './components/Link';
-export { Ul, Li } from './components/List';
+export { Li, Ol, Ul } from './components/List';
 export {
   NavigationContainer,
   NavigationDrawer,
@@ -73,54 +77,49 @@ export {
   NavigationMenuViewport,
 } from './components/NavigationMenu';
 export {
-  NavigationTreeDrawer,
   NavigationTreeContainer,
+  NavigationTreeDrawer,
   NavigationTreeItem,
 } from './components/NavigationTree';
 export { Overlay } from './components/Overlay';
 export {
   Popover,
+  PopoverAnchor,
   PopoverClose,
   PopoverContent,
-  PopoverTrigger,
-  PopoverAnchor,
   PopoverPortal,
+  PopoverTrigger,
 } from './components/Popover';
-export { Portal } from '@radix-ui/react-portal';
 export { Radio, RadioGroup } from './components/Radio';
+export {
+  RadioAccordionContent,
+  RadioAccordionItem,
+  RadioAccordionRoot,
+  RadioAccordionTrigger,
+} from './components/RadioAccordion';
 export { Select } from './components/Select';
 export { Skeleton } from './components/Skeleton';
 export { Switch } from './components/Switch';
-export {
-  Caption as AriaCaption,
-  Tbody as AriaTbody,
-  Tfoot as AriaTfoot,
-  Tr as AriaTr,
-  Th as AriaTh,
-  Td as AriaTd,
-  Thead as AriaThead,
-  Table as AriaTable,
-} from './components/AriaTable';
-export { Caption, Tbody, Tfoot, Tr, Th, Td, Thead, Table } from './components/Table';
+export { Caption, Table, Tbody, Td, Tfoot, Th, Thead, Tr } from './components/Table';
+export { TabsContainer, TabsContent, TabsList, TabsTrigger } from './components/Tabs';
 export { Text } from './components/Text';
-export { Tooltip, TooltipRoot, TooltipTrigger, TooltipContent } from './components/Tooltip';
+export { Textarea } from './components/Textarea';
+export { TextField } from './components/TextField';
+export { Tooltip, TooltipContent, TooltipRoot, TooltipTrigger } from './components/Tooltip';
 export { VisuallyHidden } from './components/VisuallyHidden';
-export { Avatar } from './components/Avatar';
-export { ButtonSwitchContainer, ButtonSwitchItem } from './components/ButtonSwitch';
-export { TabsContainer, TabsList, TabsTrigger, TabsContent } from './components/Tabs';
-export { AccessibleIcon } from './components/AccessibleIcon';
+export { AspectRatio } from '@radix-ui/react-aspect-ratio';
+export { Portal } from '@radix-ui/react-portal';
 
 // Stitches
+export type { CSS, VariantProps } from './stitches.config';
 export {
-  styled,
-  css,
+  config,
   createTheme,
+  css,
+  darkTheme,
   getCssText,
   globalCss,
   keyframes,
-  config,
   lightTheme,
-  darkTheme,
+  styled,
 } from './stitches.config';
-
-export type { CSS, VariantProps } from './stitches.config';