add customClass under button components

massalabs · May 31, 2023 · 5067bd2 · 5067bd2
1 parent dc4efa8
commit 5067bd2
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 7 deletions.
diff --git a/src/components/Button/Button.stories.tsx b/src/components/Button/Button.stories.tsx
@@ -29,12 +29,12 @@ export const _Primary = {
 export const _PrimaryWithLabel = {
  render: () => (
  <>
- <Button preIcon={<FiDisc />} className="w-40">
+ <Button preIcon={<FiDisc />} customClass="w-40">
  <div className="flex items-center">Coins</div>
  </Button>
  <br />
  <br />
- <Button className="w-40">
+ <Button customClass="w-40">
  <div className="flex items-center">
  Coins
  <label className="text-tertiary text-xs flex ml-1 items-center">
@@ -69,12 +69,12 @@ export const _Secondary = {
 export const _SecondaryWithLabel = {
  render: () => (
  <>
- <Button variant="secondary" preIcon={<FiDisc />} className="w-40">
+ <Button variant="secondary" preIcon={<FiDisc />} customClass="w-40">
  <div className="flex items-center">Coins</div>
  </Button>
  <br />
  <br />
- <Button variant="secondary" className="w-40">
+ <Button variant="secondary" customClass="w-40">
  <div className="flex items-center">
  Coins
  <label className="text-c-pressed text-xs flex ml-1 items-center">

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -10,10 +10,11 @@ export interface ButtonProps extends ComponentPropsWithoutRef<'button'> {
  preIcon?: ReactNode;
  posIcon?: ReactNode;
  variant?: 'secondary' | undefined;
+ customClass?: string;
 }
 
 export function Button(props: ButtonProps) {
- const { children, preIcon, posIcon, variant, ...rest } = props;
+ const { children, preIcon, posIcon, variant, customClass, ...rest } = props;
 
  const primaryClass = `bg-c-default text-primary
  hover:bg-c-hover hover:border-c-hover
@@ -31,8 +32,8 @@ export function Button(props: ButtonProps) {
  <button
  data-testid="button"
  type="button"
+ className={`default-button px-4 py-3 ${buttonClass} ${customClass}`}
  {...rest}
- className={`default-button px-4 py-3 ${buttonClass}`}
  >
  <div className="w-fit m-auto flex gap-2 items-baseline">
  <div className="m-auto">

diff --git a/src/global.css b/src/global.css
@@ -35,7 +35,7 @@
  }
 
  .default-button {
- @apply rounded-lg mas-buttons h-12 border border-c-default;
+ @apply rounded-lg mas-buttons w-full h-12 border border-c-default;
  }
 
  .default-tab {