From d24f80f304fa9e9421bfd58d6df6bd37bb89922c Mon Sep 17 00:00:00 2001 From: "Gina A." <70909035+gndz07@users.noreply.github.com> Date: Mon, 9 Sep 2024 17:26:03 +0200 Subject: [PATCH] fix: default style for list components --- components/List/List.stories.tsx | 15 ++++-- components/List/List.tsx | 41 ++++++++++++--- index.ts | 85 ++++++++++++++++---------------- 3 files changed, 88 insertions(+), 53 deletions(-) diff --git a/components/List/List.stories.tsx b/components/List/List.stories.tsx index 38ef9e60..2e9b9438 100644 --- a/components/List/List.stories.tsx +++ b/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 = { title: 'Components/List', @@ -25,13 +25,22 @@ const Template: StoryFn = (args) => ( export const Basic: StoryFn = Template.bind({}); +export const Ordered: StoryFn = (args) => ( +
    +
  1. Dashboard
    2. +
  2. Profile
    3. +
  3. Settings
    4. +
  4. Help
    5. +
+); + export const Interactive: StoryFn = Template.bind({}); Interactive.args = { interactive: true, }; export const Users: StoryFn = (args) => ( -
    +
    • @@ -60,7 +69,7 @@ Users.args = { }; export const Controls: StoryFn = (args) => ( -
        +
        • }> diff --git a/components/List/List.tsx b/components/List/List.tsx index ceb742cf..df445494 100644 --- a/components/List/List.tsx +++ b/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,11 +71,9 @@ const StyledListItemButton = styled('button', Flex, { }); const StyledLi = styled('li', { - borderRadius: '$1', m: '$2', outline: 'none', position: 'relative', - display: 'flex', '&:focus-within': { boxShadow: 'none', }, @@ -83,17 +81,28 @@ const StyledLi = styled('li', { 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, ListProps> ); - } + }, +); + +export interface OrderedListProps + extends ComponentProps, + VariantProps { + interactive?: boolean; +} + +export const Ol = React.forwardRef, OrderedListProps>( + ({ interactive, ...props }, forwardedRef) => { + const contextValue = useMemo(() => ({ interactive: !!interactive }), [interactive]); + + return ( + + + + ); + }, ); const ControlsWrapper = styled('div', { @@ -161,5 +188,5 @@ export const Li = React.forwardRef, ListItemPr {!!controls && {controls}} ); - } + }, ); diff --git a/index.ts b/index.ts index 4aaa7d4e..6c95027e 100644 --- a/index.ts +++ b/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';