Skip to content

Commit

Permalink
feat: converting component packages to styled syntax (#145)
Browse files Browse the repository at this point in the history
  • Loading branch information
@bclark-p44
bclark-p44 authored Oct 28, 2022
1 parent 4e2e35a commit 7f20b30
Show file tree
Hide file tree
Showing 69 changed files with 652 additions and 1,303 deletions.
12 changes: 12 additions & 0 deletions .changeset/weak-taxis-give.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
---
'@project44-manifest/react-button': major
'@project44-manifest/react-layout': major
'@project44-manifest/react-popover': major
'@project44-manifest/react-tooltip': major
'@project44-manifest/react-typography': major
'@project44-manifest/react-styles': major
'@project44-manifest/theme': major
'@project44-manifest/utils': major
---

using styled syntax on component packages and removing `makeStyles` api
4 changes: 3 additions & 1 deletion packages/react-components/react-button/src/Button.icon.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
import { pxToRem, styled } from '@project44-manifest/react-styles';

export const ButtonIcon = styled('span', {
display: 'inherit',
alignSelf: 'center',
display: 'inline-flex',
flexShrink: 0,

variants: {
placement: {
Expand Down
219 changes: 145 additions & 74 deletions packages/react-components/react-button/src/Button.styles.ts
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { makeStyles, pxToRem } from '@project44-manifest/react-styles';
import { ButtonProps } from './Button.types';
import { focus, pxToRem, styled } from '@project44-manifest/react-styles';

export const useStyles = makeStyles<ButtonProps>((_, { isDisabled, size, variant }) => ({
root: {
export const StyledButton = styled(
'button',
{
alignItems: 'center',
appearance: 'none',
backgroundColor: 'transparent',
Expand All @@ -25,85 +25,156 @@ export const useStyles = makeStyles<ButtonProps>((_, { isDisabled, size, variant
userSelect: 'none',
whiteSpace: 'nowrap',

'&[data-focus-visible]': {
outline: '$colors$palette-indigo-200 solid 2px',
variants: {
hasEndIcon: {
true: {
paddingRight: '$small',
},
},
hasStartIcon: {
true: {
paddingLeft: '$small',
},
},
isDisabled: {
true: {
cursor: 'not-allowed',
pointerEvents: 'none',
opacity: 0.57,
},
},
isFocusVisible: {
true: {},
},
isHovered: {
true: {},
},
isPressed: {
true: {},
},
variant: {
danger: {
backgroundColor: '$palette-red-500',
color: '$palette-white',
},
brand: {
background: '$brand-gradient',
color: '$palette-white',
},
primary: {
backgroundColor: '$primary-default',
color: '$palette-white',
},
secondary: {
backgroundColor: '$palette-white',
},
tertiary: {
backgroundColor: 'transparent',
boxShadow: 'none',
},
},
size: {
medium: {
height: pxToRem(40),
py: '$small',

[`> .material-icons`]: {
fontSize: '$x-large',
},
},
small: {
height: pxToRem(32),
py: pxToRem(6),

[`> .material-icons`]: {
fontSize: pxToRem(18),
},
},
},
},

...(isDisabled && {
cursor: 'default',
pointerEvents: 'none',
opacity: 0.57,
}),

...(variant === 'brand' && {
background: '$brand-gradient',
color: '$palette-white',

'&:hover': {
background: '$brand-hover',
compoundVariants: [
{
isHovered: true,
variant: 'primary',
css: {
backgroundColor: '$primary-hover',
},
},

'&[data-pressed]': {
background: '$brand-active',
{
isHovered: true,
variant: 'secondary',
css: {
backgroundColor: '$palette-grey-100',
},
},
}),

...(variant === 'danger' && {
backgroundColor: '$palette-red-500',
color: '$palette-white',

'&:hover': {
background:
'linear-gradient(0deg, rgba(9, 21, 33, 0.15), rgba(9, 21, 33, 0.15)), $colors$palette-red-500',
{
isHovered: true,
variant: 'tertiary',
css: {
backgroundColor: '$palette-grey-100',
},
},

'&[data-pressed]': {
background:
'linear-gradient(0deg, rgba(9, 21, 33, 0.3), rgba(9, 21, 33, 0.3)), $colors$palette-red-500',
boxShadow: 'inset 0px 1px 1px rgba(5, 10, 26, 0.25)',
},
}),
...(variant === 'primary' && {
backgroundColor: '$primary-default',
color: '$palette-white',

'&:hover': {
backgroundColor: '$primary-hover',
{
isHovered: true,
variant: 'brand',
css: {
background: '$brand-hover',
},
},

'&[data-pressed]': {
backgroundColor: '$primary-active',
boxShadow: 'inset 0px 1px 1px rgba(5, 10, 26, 0.25)',
{
isHovered: true,
variant: 'danger',
css: {
background:
'linear-gradient(0deg, rgba(9, 21, 33, 0.15), rgba(9, 21, 33, 0.15)), $colors$palette-red-500',
},
},
}),
...(variant === 'secondary' && {
backgroundColor: '$palette-white',

'&:hover': {
backgroundColor: '$palette-grey-100',
{
isPressed: true,
variant: 'primary',
css: {
backgroundColor: '$primary-active',
boxShadow: 'inset 0px 1px 1px rgba(5, 10, 26, 0.25)',
},
},

'&[data-pressed]': {
backgroundColor: '$palette-grey-300',
boxShadow: 'inset 0px 1px 1px rgba(5, 10, 26, 0.25)',
},
}),
...(variant === 'tertiary' && {
backgroundColor: 'transparent',
boxShadow: 'none',

'&:hover': {
backgroundColor: '$palette-grey-100',
{
isPressed: true,
variant: 'secondary',
css: {
backgroundColor: '$palette-grey-300',
boxShadow: 'inset 0px 1px 1px rgba(5, 10, 26, 0.25)',
},
},

'&[data-pressed]': {
backgroundColor: '$palette-grey-300',
{
isPressed: true,
variant: 'tertiary',
css: {
backgroundColor: '$palette-grey-300',
},
},
{
isPressed: true,
variant: 'brand',
css: {
background: '$brand-active',
},
},
}),
{
isPressed: true,
variant: 'danger',
css: {
background:
'linear-gradient(0deg, rgba(9, 21, 33, 0.3), rgba(9, 21, 33, 0.3)), $colors$palette-red-500',
boxShadow: 'inset 0px 1px 1px rgba(5, 10, 26, 0.25)',
},
},
],

...(size === 'medium' && { py: pxToRem(10) }),
...(size === 'small' && { py: pxToRem(6) }),
defaultVariants: {
size: 'medium',
variant: 'primary',
},
},
endIcon: {},
startIcon: {},
}));
focus,
);
60 changes: 31 additions & 29 deletions packages/react-components/react-button/src/Button.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,22 +2,22 @@ import * as React from 'react';
import { AriaButtonProps, useButton } from '@react-aria/button';
import { useFocusRing } from '@react-aria/focus';
import { useHover } from '@react-aria/interactions';
import { cx } from '@project44-manifest/react-styles';
import { ForwardRefComponent } from '@project44-manifest/react-types';
import { mergeProps, mergeRefs } from '@project44-manifest/react-utils';
import { ButtonIcon } from './Button.icon';
import { useStyles } from './Button.styles';
import { StyledButton } from './Button.styles';
import { ButtonElement, ButtonProps } from './Button.types';
import { useButtonGroup } from './ButtonGroup.context';

export const Button = React.forwardRef((props, forwardedRef) => {
const group = useButtonGroup();

const {
as: Comp = 'button',
as,
autoFocus,
children,
className: classNameProp,
classes: classesProp,
css,
isDisabled = group?.isDisabled,
endIcon,
Expand All @@ -42,7 +42,7 @@ export const Button = React.forwardRef((props, forwardedRef) => {
const { buttonProps, isPressed } = useButton(
{
...other,
elementType: typeof Comp === 'string' ? Comp : 'button',
elementType: typeof as === 'string' ? as : 'button',
href,
isDisabled,
onClick,
Expand All @@ -58,45 +58,47 @@ export const Button = React.forwardRef((props, forwardedRef) => {
buttonRef,
);
const { isFocusVisible, focusProps } = useFocusRing({ autoFocus });
const { hoverProps } = useHover({ isDisabled });
const { isHovered, hoverProps } = useHover({ isDisabled });

const { classes, cx } = useStyles(
{ isDisabled, size, variant },
{
css,
name: 'button',
classes: classesProp,
slots: {
root: [
size,
variant,
isDisabled && 'disabled',
endIcon && 'endIcon',
startIcon && 'startIcon',
],
},
},
);
const classnames = cx('manifest-button', classNameProp, {
'manifest-button--disabled': isDisabled,
[`manifest-button--${size}`]: size,
[`manifest-button--${variant}`]: variant,
});

return (
<Comp
<StyledButton
{...mergeProps(buttonProps, focusProps, hoverProps, other)}
ref={mergeRefs(buttonRef, forwardedRef)}
className={cx(classes.root, classNameProp)}
data-focus-visible={isFocusVisible ? '' : undefined}
data-pressed={isPressed ? '' : null}
as={as}
className={classnames}
css={css}
isDisabled={isDisabled}
isFocusVisible={isFocusVisible}
isHovered={isHovered}
isPressed={isPressed}
size={size}
variant={variant}
>
{startIcon && (
<ButtonIcon className={classes.startIcon} placement="start" size={size}>
<ButtonIcon
className={cx('manifest-button__icon', 'manifest-button__icon--start')}
placement="start"
size={size}
>
{startIcon}
</ButtonIcon>
)}
{children}
{endIcon && (
<ButtonIcon className={classes.endIcon} placement="end" size={size}>
<ButtonIcon
className={cx('manifest-button__icon', 'manifest-button__icon--end')}
placement="end"
size={size}
>
{endIcon}
</ButtonIcon>
)}
</Comp>
</StyledButton>
);
}) as ForwardRefComponent<ButtonElement, ButtonProps>;
Loading

1 comment on commit 7f20b30

@vercel
Copy link

@vercel vercel bot commented on 7f20b30 Oct 28, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

manifest – ./

manifest-tan.vercel.app
manifest-project44.vercel.app
manifest-git-main-project44.vercel.app
www.manifestdesignsystem.com
manifestdesignsystem.com

Please sign in to comment.