Generic button component

[junminahn]

1. Step 1: research all button types used in the application.
2. Step 2: create Maintine theme to support various colors that required for our application.
3. Step 3: create a example page to display all possible button types.
4. Step 4: replace existing button of the application codebase to ensure that the themed Maintine button is sufficient.

• References
  • https://mantine.dev/core/button/?t=styles-api
  • https://mantine.dev/styles/styles-api/
  • https://getbootstrap.com/docs/5.3/components/buttons/

Size: 2xs, xs, sm, base, lg, xl, 2xl, 3xl, 4xl

• Code snippet mantine-theme.ts

  
  'use client';

import { Button, virtualColor, createTheme, Group, MantineProvider, defaultVariantColorsResolver, VariantColorsResolver, parseThemeColor, rem, rgba, darken, } from '@mantine/core';

console.log(virtualColor({ name: 'primary', light: 'blue', dark: 'red' }));

// See https://mantine.dev/styles/styles-api/#styles-api-selectors // See https://mantine.dev/styles/variants-sizes/#adding-custom-variants export const theme = createTheme({ colors: { primary: [ '#FFBF3E', '#FFBF3E', '#FFBF3E', '#FFBF3E', '#FFBF3E', '#FFBF3E', '#FFBF3E', '#FFBF3E', '#FFBF3E', '#FFBF3E', ], }, components: { Button: Button.extend({ vars: (_theme, props) => { console.log('props', _theme, props); if (props.variant === 'light222') { return { root: { '--button-height': rem(120), '--button-padding-x': rem(30), '--button-fz': rem(24), }, }; }

    if (props.size === 'xxl') {
      return {
        root: {
          '--button-height': rem(60),
          '--button-padding-x': rem(30),
          '--button-fz': rem(24),
        },
      };
    }

    if (props.size === 'xxs') {
      return {
        root: {
          '--button-height': rem(24),
          '--button-padding-x': rem(10),
          '--button-fz': rem(10),
        },
      };
    }

    return { root: {} };
  },
  classNames: {
    // root: 'my-root-class',
    // label: 'my-label-class',
    // inner: 'my-inner-class',
  },
  styles: {
    // root: { backgroundColor: 'red' },
    // label: { color: 'blue' },
    // inner: { fontSize: 20 },
  },
}),

}, });

```

[Amritpal-Nijjar]

https://www.figma.com/file/jsrhMxnmN4awqlbU8LuyuK/Quota-Redesign?type=design&node-id=31-846&mode=design&t=ws2pL0CvTG4X2Bpi-0

[Amritpal-Nijjar]

https://developer.gov.bc.ca/docs/default/component/bc-developer-guide/design-system/about-the-design-system/#design-tokens

[Amritpal-Nijjar]

https://www.npmjs.com/package/@bcgov/design-system-react-components