Skip to content

Commit

Permalink
fix: one more attempt to add classes to buttons
Browse files Browse the repository at this point in the history
  • Loading branch information
@AnnaRybkina
AnnaRybkina committed Aug 25, 2023
1 parent 23d0b16 commit cd4e3bb
Showing 1 changed file with 58 additions and 64 deletions.
122 changes: 58 additions & 64 deletions packages/button/src/component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,79 +28,73 @@ export const Button = forwardRef<
...rest
} = props;

const ccButton = {
// Buttontypes
buttonSecondary:
'border-2 rounded-8 font-bold max-w-max focusable justify-center transition-colors ease-in-out i-text-$color-button-secondary-text hover:i-text-$color-button-secondary-text i-border-$color-button-secondary-border i-bg-$color-button-secondary-background hover:i-bg-$color-button-secondary-background-hover hover:i-border-$color-button-secondary-border-hover active:i-bg-$color-button-secondary-background-active', // .button, .button--secondary, .button--default. using tailwind ease-in-out instead of fabric transition-timing-function: cubic-bezier(0.46, 0.03, 0.52, 0.96)
buttonPrimary:
'border-0 rounded-8 font-bold max-w-max focusable justify-center transition-colors ease-in-out i-text-$color-button-primary-text hover:i-text-$color-button-primary-text i-bg-$color-button-primary-background hover:i-bg-$color-button-primary-background-hover! active:i-bg-$color-button-primary-background-active', // .button--primary, .button--cta
const buttonVariants = {
buttonInProgress:
'border-transparent! animate-inprogress i-text-$color-button-loading-text! pointer-events-none i-bg-$color-button-loading-background!', // .button--in-progress, a.button--in-progress:visited
buttonFlat:
'border-0! rounded-8 font-bold max-w-max focusable justify-center transition-colors ease-in-out i-bg-$color-button-quiet-background! i-text-$color-button-quiet-text! hover:i-bg-$color-button-quiet-background-hover! active:i-bg-$color-button-quiet-background-active!', // .button--quiet, .button--flat
buttonDestructive:
'border-0 rounded-8 font-bold max-w-max focusable justify-center transition-colors ease-in-out i-bg-$color-button-negative-background i-text-$color-button-negative-text hover:i-text-$color-button-negative-text hover:i-bg-$color-button-negative-background-hover active:i-bg-$color-button-negative-background-active', // .button--destructive
buttonDestructiveFlat:
'border-0 rounded-8 font-bold max-w-max focusable justify-center transition-colors ease-in-out i-bg-$color-button-negative-quiet-background! i-text-$color-button-negative-quiet-text! hover:i-bg-$color-button-negative-quiet-background-hover! active:i-bg-$color-button-negative-quiet-background-active!', // .button--destructive-flat
buttonUtility:
'font-bold max-w-max focusable justify-center transition-colors ease-in-out border rounded-4 i-text-$color-button-utility-text hover:i-text-$color-button-utility-text i-bg-$color-button-utility-background i-border-$color-button-utility-border hover:i-bg-$color-button-utility-background hover:i-border-$color-button-utility-border-hover! active:i-border-$color-button-utility-border-active!', // .button--utility
buttonUtilityFlat:
'bg-transparent border-0 font-bold max-w-max focusable justify-center transition-colors ease-in-out i-text-$color-button-utility-quiet-text i-bg-$color-button-utility-quiet-background hover:i-bg-$color-button-utility-quiet-background-hover rounded-4', // .button--utility-flat
buttonPill:
'font-bold max-w-max focusable justify-center transition-colors ease-in-out rounded-full! border-0! p-4 i-text-$color-button-pill-icon hover:i-text-$color-button-pill-icon-hover active:i-text-$color-button-pill-icon-active i-bg-$color-button-pill-background hover:i-bg-$color-button-pill-background-hover active:i-bg-$color-button-pill-background-active inline-flex items-center justify-center hover:bg-clip-padding', // .button--pill
buttonLink:
'max-w-max bg-transparent focusable ease-in-out inline i-text-$color-button-link-text active:underline hover:underline', //.button--link /* Buttons pretending to be links, (Should rather inherit the actual link setup in the future?) */
// Font stuff
buttonMediumFontSize: 'leading-[24] text-m', // .button--secondary
buttonSecondaryPadding: 'py-10 px-14', // .button--secondary.button--small
buttonMediumPadding: 'py-12 px-16', // .button--primary, .button--quiet, .button--destructive, .button--destructive-flat, .button--utility-flat
buttonUtilitySizing: 'px-[15px] py-[11px] font-bold', // .button--utility
buttonPillSizing: 'min-h-[44px] min-w-[44px]', // .button--utility
buttonSmallSecondary: 'px-16 py-6 text-xs', // .button--small
buttonSmallPrimary: 'px-16 py-8 text-xs', // .button--small.button--primary, .button--small.button--destructive, .button--small.button--destructive-flat, .button--small.button--order, .button--small.button--quiet
buttonSmallUtility: 'px-[15px] py-[7px] text-xs', // .button--small.button--utility
buttonSmallButtonPill: 'min-h-32 min-w-32 text-xs', // .button--small.button--pill
buttonSmallButtonLink: 'p-0 text-xs', // .button--small.button--link
// Disabled
buttonIsDisabled:
'font-bold max-w-max justify-center transition-colors ease-in-out i-bg-$color-button-disabled-background! i-text-$color-button-disabled-text cursor-default pointer-events-none', // .button:disabled, .button--is-disabled
// Progress indicator
buttonInProgress:
'border-transparent! animate-inprogress i-text-$color-button-loading-text! pointer-events-none i-bg-$color-button-loading-background!', // .button--in-progress, a.button--in-progress:visited
linkAsButton: 'inline-block hover:no-underline',
primaryDefault: 'border-0 rounded-8 font-bold max-w-max focusable justify-center transition-colors ease-in-out i-text-$color-button-primary-text hover:i-text-$color-button-primary-text i-bg-$color-button-primary-background hover:i-bg-$color-button-primary-background-hover! active:i-bg-$color-button-primary-background-active',
secondaryDefault: 'border-2 font-bold rounded-8 max-w-max focusable justify-center transition-colors ease-in-out i-text-$color-button-secondary-text hover:i-text-$color-button-secondary-text i-border-$color-button-secondary-border i-bg-$color-button-secondary-background hover:i-bg-$color-button-secondary-background-hover hover:i-border-$color-button-secondary-border-hover active:i-bg-$color-button-secondary-background-active'
}

const ccButton = {
// Buttontypes
buttonSecondary:
'py-10 px-14 text-m leading-[24] ' + buttonVariants.secondaryDefault, // .button, .button--secondary, .button--default. using tailwind ease-in-out instead of fabric transition-timing-function: cubic-bezier(0.46, 0.03, 0.52, 0.96)
buttonSecondarySmall:
'py-6 px-16 text-xs ' + buttonVariants.secondaryDefault, // .button, .button--secondary, .button--default. using tailwind ease-in-out instead of fabric transition-timing-function: cubic-bezier(0.46, 0.03, 0.52, 0.96)
buttonSecondaryQuiet:
'py-10 px-14 text-m leading-[24] ' + buttonVariants.buttonFlat , // .button, .button--secondary, .button--default. using tailwind ease-in-out instead of fabric transition-timing-function: cubic-bezier(0.46, 0.03, 0.52, 0.96)
buttonSecondarySmallQuiet:
'py-6 px-16 text-xs ' + buttonVariants.buttonFlat, // .button, .button--secondary, .button--default. using tailwind ease-in-out instead of fabric transition-timing-function: cubic-bezier(0.46, 0.03, 0.52, 0.96)
buttonSecondaryLoading:
'py-10 px-14 text-m leading-[24] ' + buttonVariants.secondaryDefault + buttonVariants.buttonInProgress, // .button, .button--secondary, .button--default. using tailwind ease-in-out instead of fabric transition-timing-function: cubic-bezier(0.46, 0.03, 0.52, 0.96)
buttonSecondarySmallLoading:
'py-6 px-16 text-xs ' + buttonVariants.secondaryDefault + buttonVariants.buttonInProgress, // .button, .button--secondary, .button--default. using tailwind ease-in-out instead of fabric transition-timing-function: cubic-bezier(0.46, 0.03, 0.52, 0.96)
buttonSecondarySmallQuietLoading:
'py-6 px-16 text-xs ' + buttonVariants.buttonFlat + buttonVariants.buttonInProgress, // .button, .button--secondary, .button--default. using tailwind ease-in-out instead of fabric transition-timing-function: cubic-bezier(0.46, 0.03, 0.52, 0.96)
buttonSecondaryQuietLoading:
'py-10 px-14 text-m leading-[24] ' + buttonVariants.buttonFlat + buttonVariants.buttonInProgress, // .button, .button--secondary, .button--default. using tailwind ease-in-out instead of fabric transition-timing-function: cubic-bezier(0.46, 0.03, 0.52, 0.96)
buttonPrimary:
'py-12 px-16 text-m leading-[24] ' + buttonVariants.primaryDefault, // .button--primary, .button--cta
buttonPrimaryQuiet:
'py-12 px-16 text-m leading-[24] ' + buttonVariants.buttonFlat, // .button--primary, .button--cta
buttonPrimarySmall:
'py-8 px-16 text-xs ' + buttonVariants.primaryDefault, // .button--primary, .button--cta
buttonPrimarySmallQuiet:
'py-8 px-16 text-xs ' + buttonVariants.buttonFlat, // .button--primary, .button--cta
buttonPrimaryLoading:
'py-12 px-16 text-m leading-[24] ' + buttonVariants.primaryDefault + buttonVariants.buttonInProgress, // .button--primary, .button--cta
buttonPrimarySmallLoading:
'py-8 px-16 text-xs ' + buttonVariants.primaryDefault + buttonVariants.buttonInProgress, // .button--primary, .button--cta
buttonPrimaryQuietLoading:
'py-12 px-16 text-m leading-[24] ' + buttonVariants.buttonFlat + buttonVariants.buttonInProgress, // .button--primary, .button--cta
buttonPrimarySmallQuietLoading:
'py-8 px-16 text-xs ' + buttonVariants.buttonFlat + buttonVariants.buttonInProgress, // .button--primary, .button--cta
a11y: 'sr-only',
};

const buttonSecondaryDefault = secondary && !quiet || !buttonTypes.find(b => !!props[b]);
const buttonDestructive = negative && !quiet;
const buttonFlat = secondary && quiet;
const buttonDestructiveFlat = negative && quiet;
const buttonUtilityFlat = utility && quiet;

const classes = classNames(props.className, {
[ccButton.buttonSecondary]: buttonSecondaryDefault,
[`${ccButton.buttonSecondaryPadding} ${ccButton.buttonMediumFontSize}`]: (buttonSecondaryDefault || buttonFlat) && !small,
// primary buttons
[ccButton.buttonPrimary]: primary,
[ccButton.buttonDestructive]: buttonDestructive,
[`${ccButton.buttonMediumPadding} ${ccButton.buttonMediumFontSize}`]: (primary || buttonDestructive || buttonDestructiveFlat) && !small,
// quiet
[`${ccButton.buttonSecondary} ${ccButton.buttonFlat}`]: buttonFlat,
[ccButton.buttonDestructiveFlat]: buttonDestructiveFlat,
[ccButton.buttonUtilityFlat]: buttonUtilityFlat,
// others
[ccButton.buttonUtility]: utility,
[`${ccButton.buttonUtilitySizing} ${ccButton.buttonMediumFontSize}`]: utility && !small,
[ccButton.buttonLink]: link,
[ccButton.buttonPill]: pill,
[`${ccButton.buttonPillSizing} ${ccButton.buttonMediumFontSize}`]: pill && !small,
[ccButton.buttonInProgress]: loading,
[ccButton.buttonIsDisabled]: props.disabled,
[ccButton.linkAsButton]: !!props.href,
// small sizing, all buttons
[ccButton.buttonSmallSecondary]: (buttonSecondaryDefault || secondary || buttonFlat) && small,
[ccButton.buttonSmallPrimary]: (primary || buttonDestructive || buttonDestructiveFlat ) && small,
[ccButton.buttonSmallUtility]: utility && small,
[ccButton.buttonSmallButtonPill]: pill && small,
[ccButton.buttonSmallButtonLink]: link && small,
[ccButton.buttonSecondary]: secondary && !small && !quiet && !loading,
[ccButton.buttonSecondarySmall]: secondary && small && !quiet && !loading,
[ccButton.buttonSecondaryQuiet]: secondary && !small && quiet && !loading,
[ccButton.buttonSecondarySmallQuiet]: secondary && small && quiet && !loading,
[ccButton.buttonSecondaryLoading]: secondary && !small && !quiet && loading,
[ccButton.buttonSecondarySmallQuietLoading]: secondary && small && quiet && loading,
[ccButton.buttonSecondarySmallLoading]: secondary && small && !quiet && loading,
[ccButton.buttonSecondaryQuietLoading]: secondary && !small && quiet && loading,

[ccButton.buttonPrimary]: primary && !small && !quiet && !loading,
[ccButton.buttonPrimarySmall]: primary && small && !quiet && !loading,
[ccButton.buttonPrimaryQuiet]: primary && !small && quiet && !loading,
[ccButton.buttonPrimarySmallQuiet]: primary && small && quiet && !loading,
[ccButton.buttonPrimaryLoading]: primary && !small && !quiet && loading,
[ccButton.buttonPrimarySmallLoading]: primary && small && !quiet && loading,
[ccButton.buttonPrimaryQuietLoading]: primary && !small && quiet && loading,
[ccButton.buttonPrimarySmallQuietLoading]: primary && small && quiet && loading,
});

return (
Expand Down

0 comments on commit cd4e3bb

Please sign in to comment.