[@mantine/core] Button: Add loaderPosition="center" support (#2785)

* [@mantine/core] Button: Add loaderPosition center option * [docs] Update loaderPosition options
mantinedev · Oct 27, 2022 · 5f8c605 · 5f8c605
1 parent 42d1a3a
commit 5f8c605
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 2 deletions.
diff --git a/docs/src/docs/core/Button.mdx b/docs/src/docs/core/Button.mdx
@@ -50,7 +50,7 @@ button becomes disabled and white or dark overlay is added.
 You can control loading state and [Loader](/core/loader/) component with following props:
 
 - `loading` – enable loading state
-- `loaderPosition` – Loader position relative to button label, either right or left
+- `loaderPosition` – Loader position relative to button label, left, right or center
 - `loaderProps` – props spread to Loader component, you can choose loader type, size and any other [supported](/core/loader/) prop
 
 <Demo data={ButtonDemos.loadingConfigurator} />

diff --git a/src/mantine-core/src/Button/Button.styles.ts b/src/mantine-core/src/Button/Button.styles.ts
@@ -181,6 +181,13 @@ export default createStyles(
       marginLeft: 10,
     },
 
+    centerLoader: {
+      position: 'absolute',
+      left: '50%',
+      transform: 'translateX(-50%)',
+      opacity: 0.5,
+    },
+
     inner: {
       display: 'flex',
       alignItems: 'center',

diff --git a/src/mantine-core/src/Button/Button.tsx b/src/mantine-core/src/Button/Button.tsx
@@ -57,7 +57,7 @@ export interface ButtonProps extends DefaultProps<ButtonStylesNames, ButtonStyle
   loaderProps?: LoaderProps;
 
   /** Loader position relative to button label */
-  loaderPosition?: 'left' | 'right';
+  loaderPosition?: 'left' | 'right' | 'center';
 
   /** Button label */
   children?: React.ReactNode;
@@ -142,6 +142,10 @@ export const _Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) =
           </span>
         )}
 
+        {loading && loaderPosition === 'center' && (
+          <span className={classes.centerLoader}>{loader}</span>
+        )}
+
         <span
           className={classes.label}
           style={{ textTransform: uppercase ? 'uppercase' : undefined }}

diff --git a/src/mantine-demos/src/demos/core/Button/Button.demo.loadingConfigurator.tsx b/src/mantine-demos/src/demos/core/Button/Button.demo.loadingConfigurator.tsx
@@ -39,6 +39,7 @@ export const loadingConfigurator: MantineDemo = {
       data: [
         { label: 'Left', value: 'left' },
         { label: 'Right', value: 'right' },
+        { label: 'Center', value: 'center' },
       ],
       initialValue: 'left',
       defaultValue: 'left',

diff --git a/src/mantine-styles-api/src/styles-api/Button.styles-api.ts b/src/mantine-styles-api/src/styles-api/Button.styles-api.ts
@@ -5,6 +5,7 @@ export const Button: Record<ButtonStylesNames, string> = {
   icon: 'Shared icon styles',
   leftIcon: 'Left icon',
   rightIcon: 'Right icon',
+  centerLoader: 'Center loader',
   inner: 'Contains label, left and right icons',
   label: 'Contains button children',
 };