From 846e180bd5ebef89d10e12531e69978c7cb3278b Mon Sep 17 00:00:00 2001 From: wes337 Date: Sat, 19 Feb 2022 10:50:17 +0200 Subject: [PATCH 1/6] [@mantine/core] Select: only use open/close callback when value changes --- src/mantine-core/src/components/Select/Select.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/mantine-core/src/components/Select/Select.tsx b/src/mantine-core/src/components/Select/Select.tsx index 9f646fefba3..84a4cd8dcf2 100644 --- a/src/mantine-core/src/components/Select/Select.tsx +++ b/src/mantine-core/src/components/Select/Select.tsx @@ -214,6 +214,10 @@ export const Select = forwardRef( const isDeselectable = allowDeselect === undefined ? clearable : allowDeselect; const setDropdownOpened = (opened: boolean) => { + if (dropdownOpened === opened) { + return; + } + _setDropdownOpened(opened); const handler = opened ? onDropdownOpen : onDropdownClose; typeof handler === 'function' && handler(); From 9e8045f8e430043f8540a86ef65eba31b9f7e47d Mon Sep 17 00:00:00 2001 From: Wesley Moses Date: Sat, 19 Feb 2022 11:43:41 +0200 Subject: [PATCH 2/6] [@mantine/core] Select: do not use early return --- src/mantine-core/src/components/Select/Select.tsx | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/src/mantine-core/src/components/Select/Select.tsx b/src/mantine-core/src/components/Select/Select.tsx index 84a4cd8dcf2..29e0b1ca717 100644 --- a/src/mantine-core/src/components/Select/Select.tsx +++ b/src/mantine-core/src/components/Select/Select.tsx @@ -214,13 +214,11 @@ export const Select = forwardRef( const isDeselectable = allowDeselect === undefined ? clearable : allowDeselect; const setDropdownOpened = (opened: boolean) => { - if (dropdownOpened === opened) { - return; + if (dropdownOpened !== opened) { + _setDropdownOpened(opened); + const handler = opened ? onDropdownOpen : onDropdownClose; + typeof handler === 'function' && handler(); } - - _setDropdownOpened(opened); - const handler = opened ? onDropdownOpen : onDropdownClose; - typeof handler === 'function' && handler(); }; const isCreatable = creatable && typeof getCreateLabel === 'function'; From d4599e010a265e2b78b18a0a6e553179e25b86e1 Mon Sep 17 00:00:00 2001 From: wes337 Date: Sat, 13 Aug 2022 21:54:16 +0300 Subject: [PATCH 3/6] [@mantine/core] Stepper: fix multi line vertical stepper --- .../src/Stepper/Step/Step.styles.ts | 42 ++++++++++++++++++- src/mantine-core/src/Stepper/Step/Step.tsx | 13 +++++- .../src/Stepper/Stepper.story.tsx | 7 +++- src/mantine-core/src/Stepper/Stepper.tsx | 2 +- .../src/styles-api/Stepper.styles-api.ts | 2 + 5 files changed, 60 insertions(+), 6 deletions(-) diff --git a/src/mantine-core/src/Stepper/Step/Step.styles.ts b/src/mantine-core/src/Stepper/Step/Step.styles.ts index d0301f38138..ce093007758 100644 --- a/src/mantine-core/src/Stepper/Step/Step.styles.ts +++ b/src/mantine-core/src/Stepper/Step/Step.styles.ts @@ -7,6 +7,7 @@ export interface StepStylesParams { radius: MantineNumberSize; allowStepClick: boolean; iconPosition: 'right' | 'left'; + orientation: 'vertical' | 'horizontal'; } export const iconSizes = { @@ -18,13 +19,32 @@ export const iconSizes = { }; export default createStyles( - (theme, { color, iconSize, size, radius, allowStepClick, iconPosition }: StepStylesParams) => { + ( + theme, + { color, iconSize, size, radius, allowStepClick, iconPosition, orientation }: StepStylesParams + ) => { const _iconSize = iconSize || theme.fn.size({ size, sizes: iconSizes }); const iconMargin = size === 'xl' || size === 'lg' ? theme.spacing.md : theme.spacing.sm; const _radius = theme.fn.size({ size: radius, sizes: theme.radius }); const colors = theme.fn.variant({ variant: 'filled', color }); const separatorDistanceFromIcon = theme.spacing.xs / 2; + const verticalOrientationStyles = { + step: { + justifyContent: 'flex-start', + minHeight: `${_iconSize + theme.spacing.xl + separatorDistanceFromIcon}px`, + + '&:last-child': { + marginBottom: 0, + }, + + '&:last-of-type': { + minHeight: 'auto', + overflow: 'hidden', + }, + }, + } as const; + return { stepLoader: {}, @@ -32,7 +52,11 @@ export default createStyles( display: 'flex', flexDirection: iconPosition === 'left' ? 'row' : 'row-reverse', cursor: allowStepClick ? 'pointer' : 'default', - alignItems: 'center', + ...(orientation === 'vertical' + ? verticalOrientationStyles.step + : { + alignItems: 'center', + }), }, stepWrapper: { @@ -42,6 +66,20 @@ export default createStyles( marginBottom: separatorDistanceFromIcon, }, + verticalSeparator: { + top: `${_iconSize + separatorDistanceFromIcon}px`, + left: `${_iconSize / 2}px`, + height: '100%', + position: 'absolute', + borderLeft: `2px solid ${ + theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1] + }`, + }, + + verticalSeparatorActive: { + borderColor: theme.fn.variant({ variant: 'filled', color }).background, + }, + stepIcon: { boxSizing: 'border-box', height: _iconSize, diff --git a/src/mantine-core/src/Stepper/Step/Step.tsx b/src/mantine-core/src/Stepper/Step/Step.tsx index 78a7b8ba618..c2d9ae1a426 100644 --- a/src/mantine-core/src/Stepper/Step/Step.tsx +++ b/src/mantine-core/src/Stepper/Step/Step.tsx @@ -65,6 +65,9 @@ export interface StepProps /** Static selector base */ __staticSelector?: string; + + /** Component orientation */ + orientation?: 'vertical' | 'horizontal'; } const defaultIconSizes = { @@ -98,12 +101,13 @@ export const Step = forwardRef( classNames, styles, unstyled, + orientation, ...others }: StepProps, ref ) => { const { classes, cx, theme } = useStyles( - { color, iconSize, size, radius, allowStepClick, iconPosition }, + { color, iconSize, size, radius, allowStepClick, iconPosition, orientation }, { name: __staticSelector, classNames, styles, unstyled } ); @@ -147,6 +151,13 @@ export const Step = forwardRef( ) ) : null} + {orientation === 'vertical' && ( +
+ )}
)} diff --git a/src/mantine-core/src/Stepper/Stepper.story.tsx b/src/mantine-core/src/Stepper/Stepper.story.tsx index bd60715494e..9592b6c6d8e 100644 --- a/src/mantine-core/src/Stepper/Stepper.story.tsx +++ b/src/mantine-core/src/Stepper/Stepper.story.tsx @@ -122,8 +122,11 @@ storiesOf('Stepper', module) volutpat nunc accumsan at. Curabitur ac auctor ante, et convallis diam. Donec eget mi consectetur, pharetra urna et, volutpat nibh. Integer sit amet diam ligula. Phasellus ex purus, dictum non purus ut, viverra maximus sem. Sed luctus eget massa - vitae dapibus. Sed ante tortor, viverra at urna et, feugiat scelerisque dolor.`} - loading + vitae dapibus. Sed ante tortor, viverra at urna et, feugiat scelerisque dolor. Fusce lacinia lacus at sem luctus + accumsan nec nec turpis. Fusce interdum, orci id porta viverra, sem lorem porta + nibh, eget bibendum ligula sapien sit amet orci. Maecenas lobortis lorem dui, a + volutpat nunc accumsan at. Curabitur ac auctor ante, et convallis diam. Donec eget + mi consectetur, pharetra urna et, volutpat nibh.`} /> diff --git a/src/mantine-core/src/Stepper/Stepper.tsx b/src/mantine-core/src/Stepper/Stepper.tsx index 2d58c2cf213..30406e4284d 100644 --- a/src/mantine-core/src/Stepper/Stepper.tsx +++ b/src/mantine-core/src/Stepper/Stepper.tsx @@ -134,7 +134,7 @@ export const Stepper: StepperComponent = forwardRef = { root: 'Root element', steps: 'Steps controls wrapper', separator: 'Separator line between step controls', + verticalSeparator: 'Vertical separator line between step controls', separatorActive: 'Separator active modifier', + verticalSeparatorActive: 'Vertical separator active modifier', content: 'Current step content wrapper', stepWrapper: 'Wrapper for the step icon and separator', step: 'Step control button', From 653943389dc4f2ebdefd9f55278a3704fab896ea Mon Sep 17 00:00:00 2001 From: wes337 Date: Sat, 13 Aug 2022 22:11:34 +0300 Subject: [PATCH 4/6] [@mantine/core] Stepper: fix vertical stepper icon and text alignment --- src/mantine-core/src/Stepper/Step/Step.styles.ts | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/mantine-core/src/Stepper/Step/Step.styles.ts b/src/mantine-core/src/Stepper/Step/Step.styles.ts index ce093007758..42cf4c7ec32 100644 --- a/src/mantine-core/src/Stepper/Step/Step.styles.ts +++ b/src/mantine-core/src/Stepper/Step/Step.styles.ts @@ -123,6 +123,15 @@ export default createStyles( flexDirection: 'column', marginLeft: iconPosition === 'left' ? iconMargin : undefined, marginRight: iconPosition === 'right' ? iconMargin : undefined, + + ...(orientation === 'vertical' + ? { + marginTop: + _iconSize > theme.fn.size({ size, sizes: theme.fontSizes }) * 4 + ? _iconSize / 4 + : _iconSize / 12, + } + : null), }, stepLabel: { From b3d95d738cb0447b1caa868938229d42b315bff3 Mon Sep 17 00:00:00 2001 From: wes337 Date: Sun, 14 Aug 2022 18:42:37 +0300 Subject: [PATCH 5/6] [@mantine/core] Stepper: fix vertical styles for chrome/edge --- .../src/Stepper/Step/Step.styles.ts | 12 ++---- .../src/Stepper/Stepper.story.tsx | 37 +++++++++++++++++++ 2 files changed, 40 insertions(+), 9 deletions(-) diff --git a/src/mantine-core/src/Stepper/Step/Step.styles.ts b/src/mantine-core/src/Stepper/Step/Step.styles.ts index 42cf4c7ec32..7d6f8acf30a 100644 --- a/src/mantine-core/src/Stepper/Step/Step.styles.ts +++ b/src/mantine-core/src/Stepper/Step/Step.styles.ts @@ -33,14 +33,11 @@ export default createStyles( step: { justifyContent: 'flex-start', minHeight: `${_iconSize + theme.spacing.xl + separatorDistanceFromIcon}px`, - - '&:last-child': { - marginBottom: 0, - }, + marginTop: `${separatorDistanceFromIcon}px`, + overflow: 'hidden', '&:last-of-type': { minHeight: 'auto', - overflow: 'hidden', }, }, } as const; @@ -61,15 +58,12 @@ export default createStyles( stepWrapper: { position: 'relative', - overflow: 'hidden', - flexShrink: 0, - marginBottom: separatorDistanceFromIcon, }, verticalSeparator: { top: `${_iconSize + separatorDistanceFromIcon}px`, left: `${_iconSize / 2}px`, - height: '100%', + height: '100vh', position: 'absolute', borderLeft: `2px solid ${ theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1] diff --git a/src/mantine-core/src/Stepper/Stepper.story.tsx b/src/mantine-core/src/Stepper/Stepper.story.tsx index 9592b6c6d8e..436a936ae37 100644 --- a/src/mantine-core/src/Stepper/Stepper.story.tsx +++ b/src/mantine-core/src/Stepper/Stepper.story.tsx @@ -129,6 +129,43 @@ storiesOf('Stepper', module) mi consectetur, pharetra urna et, volutpat nibh.`} /> + + + From 0a208ae86033ee61f93f696c0d3697335581b8c8 Mon Sep 17 00:00:00 2001 From: wes337 Date: Sun, 14 Aug 2022 18:44:59 +0300 Subject: [PATCH 6/6] [@mantine/core] Stepper: remove margin from first --- src/mantine-core/src/Stepper/Step/Step.styles.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/mantine-core/src/Stepper/Step/Step.styles.ts b/src/mantine-core/src/Stepper/Step/Step.styles.ts index 7d6f8acf30a..a24286831e6 100644 --- a/src/mantine-core/src/Stepper/Step/Step.styles.ts +++ b/src/mantine-core/src/Stepper/Step/Step.styles.ts @@ -36,6 +36,10 @@ export default createStyles( marginTop: `${separatorDistanceFromIcon}px`, overflow: 'hidden', + '&:first-of-type': { + marginTop: 0, + }, + '&:last-of-type': { minHeight: 'auto', },