[@mantine/core] List: Fix styles params not being inherited by List.I…

…tem (#2495)
mantinedev · Oct 5, 2022 · 0f22078 · 0f22078
1 parent df2c042
commit 0f22078
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 11 deletions.
diff --git a/src/mantine-core/src/List/List.context.ts b/src/mantine-core/src/List/List.context.ts
@@ -5,6 +5,9 @@ interface ListContextValue {
   spacing?: MantineNumberSize;
   center?: boolean;
   icon?: React.ReactNode;
+  listStyleType?: string;
+  withPadding?: boolean;
+  size?: MantineNumberSize;
 }
 
 export const ListContext = createContext<ListContextValue>(null);

diff --git a/src/mantine-core/src/List/List.story.tsx b/src/mantine-core/src/List/List.story.tsx
@@ -0,0 +1,42 @@
+import { MantineProvider } from '@mantine/styles';
+import React from 'react';
+import { List } from './List';
+import { ListStylesParams } from './List.styles';
+
+export default { title: 'List' };
+
+export function WithinProvider() {
+  return (
+    <div style={{ padding: 40 }}>
+      <MantineProvider
+        theme={{
+          components: {
+            List: {
+              styles: (theme, params: ListStylesParams) => {
+                const { listStyleType } = params;
+                let maxWidth = 'inherit';
+                if (listStyleType === 'disc' || listStyleType === 'circle') {
+                  maxWidth = 'calc(100% - 1.5em)';
+                }
+
+                return {
+                  itemWrapper: {
+                    display: 'inline-flex',
+                    flexDirection: 'column',
+                    maxWidth,
+                  },
+                };
+              },
+            },
+          },
+        }}
+      >
+        <List size="sm" listStyleType="disc">
+          <List.Item>Clone or download repository from GitHub</List.Item>
+          <List.Item>Install dependencies with yarn</List.Item>
+          <List.Item>To start development server run npm start command</List.Item>
+        </List>
+      </MantineProvider>
+    </div>
+  );
+}
diff --git a/src/mantine-core/src/List/List.styles.ts b/src/mantine-core/src/List/List.styles.ts
@@ -4,6 +4,8 @@ export interface ListStylesParams {
   withPadding: boolean;
   size: MantineNumberSize;
   listStyleType: string;
+  spacing: MantineNumberSize;
+  center: boolean;
 }
 
 export default createStyles((theme, { withPadding, size, listStyleType }: ListStylesParams) => ({

diff --git a/src/mantine-core/src/List/List.tsx b/src/mantine-core/src/List/List.tsx
@@ -69,13 +69,13 @@ export const List: ListComponent = forwardRef<HTMLUListElement, ListProps>(
     } = useComponentDefaultProps('List', defaultProps, props);
 
     const { classes, cx } = useStyles(
-      { withPadding, size, listStyleType },
+      { withPadding, size, listStyleType, center, spacing },
       { classNames, styles, name: 'List', unstyled }
     );
 
     return (
       <StylesApiProvider classNames={classNames} styles={styles} unstyled={unstyled}>
-        <ListContext.Provider value={{ spacing, center, icon }}>
+        <ListContext.Provider value={{ spacing, center, icon, listStyleType, size, withPadding }}>
           <Box<any>
             component={type === 'unordered' ? 'ul' : 'ol'}
             className={cx(classes.root, className)}

diff --git a/src/mantine-core/src/List/ListItem/ListItem.styles.ts b/src/mantine-core/src/List/ListItem/ListItem.styles.ts
@@ -1,11 +1,7 @@
-import { createStyles, MantineNumberSize } from '@mantine/styles';
+import { createStyles } from '@mantine/styles';
+import type { ListStylesParams } from '../List.styles';
 
-interface ListItemStyles {
-  spacing: MantineNumberSize;
-  center: boolean;
-}
-
-export default createStyles((theme, { spacing, center }: ListItemStyles, getRef) => ({
+export default createStyles((theme, { spacing, center }: ListStylesParams, getRef) => ({
   itemWrapper: {
     ref: getRef('itemWrapper'),
     display: 'inline-flex',

diff --git a/src/mantine-core/src/List/ListItem/ListItem.tsx b/src/mantine-core/src/List/ListItem/ListItem.tsx
@@ -17,11 +17,11 @@ export interface ListItemProps
 }
 
 export function ListItem({ className, children, icon, ...others }: ListItemProps) {
-  const { icon: ctxIcon, spacing, center } = useListContext();
+  const { icon: ctxIcon, spacing, center, listStyleType, size, withPadding } = useListContext();
   const { classNames, styles, unstyled } = useContextStylesApi();
   const _icon = icon || ctxIcon;
   const { classes, cx } = useStyles(
-    { spacing, center },
+    { withPadding, size, listStyleType, center, spacing },
     { classNames, styles, unstyled, name: 'List' }
   );