Merge branch 'master' of github.com:mantinedev/mantine

mantinedev · Aug 22, 2022 · 232533b · 232533b
2 parents 5a7fea8 + 1480d83
commit 232533b
Show file tree

Hide file tree

Showing 13 changed files with 52 additions and 27 deletions.
diff --git a/src/mantine-core/src/Container/Container.tsx b/src/mantine-core/src/Container/Container.tsx
@@ -12,7 +12,7 @@ export interface ContainerProps extends DefaultProps, React.ComponentPropsWithou
   /** Predefined container max-width or number for max-width in px */
   size?: MantineNumberSize;
 
-  /** If fluid is set to true, size prop is ignored and Container always take 100% of width */
+  /** If fluid is set to true, size prop is ignored and Container can expand to 100% of width */
   fluid?: boolean;
 
   /** Container sizes */

diff --git a/src/mantine-core/src/Grid/Col/Col.styles.ts b/src/mantine-core/src/Grid/Col/Col.styles.ts
@@ -50,15 +50,17 @@ function getBreakpointsStyles({
   columns: number;
 }) {
   return MANTINE_SIZES.reduce((acc, size) => {
-    if (typeof sizes[size] === 'number') {
-      acc[`@media (min-width: ${theme.breakpoints[size] + 1}px)`] = {
-        order: orders[size],
-        flexBasis: getColumnWidth(sizes[size], columns),
-        flexShrink: 0,
-        maxWidth: grow ? 'unset' : getColumnWidth(sizes[size], columns),
-        marginLeft: getColumnOffset(offsets[size], columns),
-      };
-    }
+    acc[`@media (min-width: ${theme.breakpoints[size] + 1}px)`] = {
+      order: orders[size],
+      flexBasis: typeof sizes[size] === 'number' ? getColumnWidth(sizes[size], columns) : 'auto',
+      flexShrink: 0,
+      maxWidth: grow
+        ? 'unset'
+        : typeof sizes[size] === 'number'
+        ? getColumnWidth(sizes[size], columns)
+        : 'none',
+      marginLeft: getColumnOffset(offsets[size], columns),
+    };
     return acc;
   }, {});
 }

diff --git a/src/mantine-core/src/Title/Title.styles.ts b/src/mantine-core/src/Title/Title.styles.ts
@@ -7,6 +7,7 @@ export interface TitleStylesParams {
   element: HeadingElement;
   size: TitleSize;
   weight: React.CSSProperties['fontWeight'];
+  inline: boolean;
 }
 
 function getFontSize(size: TitleSize, element: HeadingElement, theme: MantineTheme) {
@@ -19,19 +20,19 @@ function getFontSize(size: TitleSize, element: HeadingElement, theme: MantineThe
 
 function getLineHeight(size: TitleSize, element: HeadingElement, theme: MantineTheme) {
   if (typeof size !== 'undefined' && size in theme.headings.sizes) {
-    return theme.headings.sizes[element].lineHeight;
+    return theme.headings.sizes[size].lineHeight;
   }
 
   return theme.headings.sizes[element].lineHeight;
 }
 
-export default createStyles((theme, { element, weight, size }: TitleStylesParams) => ({
+export default createStyles((theme, { element, weight, size, inline }: TitleStylesParams) => ({
   root: {
     ...theme.fn.fontStyles(),
     fontFamily: theme.headings.fontFamily,
     fontWeight: weight || theme.headings.sizes[element].fontWeight || theme.headings.fontWeight,
     fontSize: getFontSize(size, element, theme),
-    lineHeight: getLineHeight(size, element, theme),
+    lineHeight: inline ? 1 : getLineHeight(size, element, theme),
     margin: 0,
   },
 }));
diff --git a/src/mantine-core/src/Title/Title.tsx b/src/mantine-core/src/Title/Title.tsx
@@ -22,11 +22,11 @@ const defaultProps: Partial<TitleProps> = {
 };
 
 export const Title = forwardRef<HTMLHeadingElement, TitleProps>((props, ref) => {
-  const { className, order, children, unstyled, size, weight, ...others } =
+  const { className, order, children, unstyled, size, weight, inline, ...others } =
     useComponentDefaultProps('Title', defaultProps, props);
 
   const { classes, cx } = useStyles(
-    { element: `h${order}`, weight, size },
+    { element: `h${order}`, weight, size, inline },
     { name: 'Title', unstyled }
   );
 

diff --git a/src/mantine-demos/src/demos/core/ActionIcon/ActionIcon.demo.configurator.tsx b/src/mantine-demos/src/demos/core/ActionIcon/ActionIcon.demo.configurator.tsx
@@ -20,18 +20,40 @@ function Wrapper(props: ActionIconProps) {
   );
 }
 
-const codeTemplate = (props: string) => `
+function computeChildIconSizeProp(props: string) {
+  if (props.includes('size="xs"')) {
+    return 'size={12}';
+  }
+  if (props.includes('size="sm"')) {
+    return 'size={14}';
+  }
+  if (props.includes('size="md"')) {
+    return 'size={18}';
+  }
+  if (props.includes('size="lg"')) {
+    return 'size={26}';
+  }
+  if (props.includes('size="xl"')) {
+    return 'size={34}';
+  }
+  return 'size={18}';
+}
+
+const codeTemplate = (props: string) => {
+  const childIconSizeProp = computeChildIconSizeProp(props);
+  return `
 import { ActionIcon } from '@mantine/core';
 import { IconAdjustments } from '@tabler/icons';
 
 function Demo() {
   return (
     <ActionIcon${props}>
-      <IconAdjustments />
+      <IconAdjustments ${childIconSizeProp} />
     </ActionIcon>
   );
 }
 `;
+};
 
 export const configurator: MantineDemo = {
   type: 'configurator',

diff --git a/src/mantine-demos/src/demos/core/Grid/Grid.demo.order.tsx b/src/mantine-demos/src/demos/core/Grid/Grid.demo.order.tsx
@@ -8,9 +8,9 @@ import { Grid } from '@mantine/core';
 function Demo() {
   return (
     <Grid>
-      <Col span={3} order={2} orderSm={1} orderLg={3}>2</Col>
-      <Col span={3} order={3} orderSm={1} orderLg={2}>3</Col>
-      <Col span={3} order={1} orderSm={3} orderLg={1}>1</Col>
+      <Grid.Col span={3} order={2} orderSm={1} orderLg={3}>2</Grid.Col>
+      <Grid.Col span={3} order={3} orderSm={1} orderLg={2}>3</Grid.Col>
+      <Grid.Col span={3} order={1} orderSm={3} orderLg={1}>1</Grid.Col>
     </Grid>
   );
 }

diff --git a/src/mantine-demos/src/demos/hooks/use-debounced-state.demo.leading.tsx b/src/mantine-demos/src/demos/hooks/use-debounced-state.demo.leading.tsx
@@ -46,7 +46,7 @@ function Demo() {
           onChange={(event) => setValue(event.currentTarget.value)}
         />
       </div>
-      <div style={{ maxWidth: 400, margin: 'auto', marginTop: 15 }}>
+      <div style={{ maxWidth: 400, margin: 'auto', marginTop: 15, overflowWrap: 'break-word' }}>
         <Text>
           <Text component="span" color="dimmed" size="sm">
             Debounced value:

diff --git a/src/mantine-demos/src/demos/hooks/use-debounced-state.demo.usage.tsx b/src/mantine-demos/src/demos/hooks/use-debounced-state.demo.usage.tsx
@@ -46,7 +46,7 @@ function Demo() {
           onChange={(event) => setValue(event.currentTarget.value)}
         />
       </div>
-      <div style={{ maxWidth: 400, margin: 'auto', marginTop: 15 }}>
+      <div style={{ maxWidth: 400, margin: 'auto', marginTop: 15, overflowWrap: 'break-word' }}>
         <Text>
           <Text component="span" color="dimmed" size="sm">
             Debounced value:

diff --git a/src/mantine-demos/src/demos/hooks/use-debounced-value.demo.cancel.tsx b/src/mantine-demos/src/demos/hooks/use-debounced-value.demo.cancel.tsx
@@ -57,7 +57,7 @@ function Demo() {
         </Button>
       </div>
 
-      <div style={{ maxWidth: 400, margin: 'auto', marginTop: 15 }}>
+      <div style={{ maxWidth: 400, margin: 'auto', marginTop: 15, overflowWrap: 'break-word' }}>
         <Text>
           <Text component="span" color="dimmed" size="sm">
             Value:

diff --git a/src/mantine-demos/src/demos/hooks/use-debounced-value.demo.leading.tsx b/src/mantine-demos/src/demos/hooks/use-debounced-value.demo.leading.tsx
@@ -50,7 +50,7 @@ function Demo() {
           onChange={(event) => setValue(event.currentTarget.value)}
         />
       </div>
-      <div style={{ maxWidth: 400, margin: 'auto', marginTop: 15 }}>
+      <div style={{ maxWidth: 400, margin: 'auto', marginTop: 15, overflowWrap: 'break-word' }}>
         <Text>
           <Text component="span" color="dimmed" size="sm">
             Value:

diff --git a/src/mantine-demos/src/demos/hooks/use-debounced-value.demo.usage.tsx b/src/mantine-demos/src/demos/hooks/use-debounced-value.demo.usage.tsx
@@ -50,7 +50,7 @@ function Demo() {
           onChange={(event) => setValue(event.currentTarget.value)}
         />
       </div>
-      <div style={{ maxWidth: 400, margin: 'auto', marginTop: 15 }}>
+      <div style={{ maxWidth: 400, margin: 'auto', marginTop: 15, overflowWrap: 'break-word' }}>
         <Text>
           <Text component="span" color="dimmed" size="sm">
             Value:

diff --git a/src/mantine-demos/src/demos/hooks/use-validated-state.demo.usage.tsx b/src/mantine-demos/src/demos/hooks/use-validated-state.demo.usage.tsx
@@ -49,7 +49,7 @@ function Demo() {
   );
 
   return (
-    <div style={{ maxWidth: 320, margin: 'auto' }}>
+    <div style={{ maxWidth: 320, margin: 'auto', overflowWrap: 'break-word' }}>
       <TextInput
         value={value}
         onChange={(event) => setEmail(event.currentTarget.value)}

diff --git a/src/mantine-hooks/src/use-focus-within/use-focus-within.ts b/src/mantine-hooks/src/use-focus-within/use-focus-within.ts
@@ -51,7 +51,7 @@ export function useFocusWithin<T extends HTMLElement = any>({
     }
 
     return undefined;
-  }, []);
+  }, [handleFocusIn, handleFocusOut]);
 
   return { ref, focused };
 }