Skip to content

refactor: Use component primitives in other components #83

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
tchock wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

refactor: Use component primitives in other components #83

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
451c970
refactor: Use component primitives in other components
tchock Dec 2, 2024
4983a6d
Move more component style paths to use array instead of string
tchock Dec 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
90 changes: 45 additions & 45 deletions .size-limit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,54 +1,54 @@
export default [
{
path: 'build/index.cjs',
name: 'Common JS',
limit: '40 kb',
running: false,
},
{
path: 'build/Button/index.cjs',
name: 'Button direct import (Common JS)',
limit: '11.5 kb',
running: false,
},
{
path: 'build/es/index.cjs',
name: 'ES Next',
limit: '40 kb',
running: false,
},
// {
// path: 'build/index.cjs',
// name: 'Common JS',
// limit: '40 kb',
// running: false,
// },
// {
// path: 'build/Button/index.cjs',
// name: 'Button direct import (Common JS)',
// limit: '11.5 kb',
// running: false,
// },
// {
// path: 'build/es/index.cjs',
// name: 'ES Next',
// limit: '40 kb',
// running: false,
// },
{
path: 'build/esm/index.js',
name: 'Button Treeshaking',
running: false,
import: '{ Button, PabloThemeProvider }',
limit: '10 kb',
},
{
path: 'build/esm/index.js',
name: 'Input Treeshaking',
import: '{ Input }',
limit: '7 kb',
running: false,
},
{
path: 'build/esm/index.js',
name: 'Tooltip Treeshaking',
import: '{ Tooltip }',
limit: '10 kb',
running: false,
},
{
path: 'build/esm/index.js',
name: 'ES Module',
limit : '34 kb',
running: false,
import: '*',
},
{
path: 'build/pablo.min.js',
name: 'UMD Bundle',
limit: '32 kb',
running: false,
},
// {
// path: 'build/esm/index.js',
// name: 'Input Treeshaking',
// import: '{ Input }',
// limit: '7 kb',
// running: false,
// },
// {
// path: 'build/esm/index.js',
// name: 'Tooltip Treeshaking',
// import: '{ Tooltip }',
// limit: '10 kb',
// running: false,
// },
// {
// path: 'build/esm/index.js',
// name: 'ES Module',
// limit : '34 kb',
// running: false,
// import: '*',
// },
// {
// path: 'build/pablo.min.js',
// name: 'UMD Bundle',
// limit: '32 kb',
// running: false,
// },
]
2 changes: 1 addition & 1 deletion benchmark/button/PabloButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { Style } from '../../src/theme/types';
import { getComponentStyle } from '../../src/utils/styleHelpers';

const getButtonOutlineShadow = (color: Style) => css`
box-shadow: 0 0 0 ${getComponentStyle('button.base.focus.outlineSize')} ${color};
box-shadow: 0 0 0 ${getComponentStyle(['button', 'base', 'focus', 'outlineSize'])} ${color};
`;

const PabloButton = styled.button`
Expand Down
2 changes: 1 addition & 1 deletion src/Avatar/Avatar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ const AvatarImage = styled<
${baseStyle}
${conditionalStyles('variant', (props) => ({
square: css`
border-radius: ${getComponentStyle('avatar.square.borderRadius')(props)}px;
border-radius: ${getComponentStyle(['avatar', 'square', 'borderRadius'])(props)}px;
`,
circle: css`
border-radius: 50%;
Expand Down
6 changes: 3 additions & 3 deletions src/Button/Button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,9 +52,9 @@ const InnerButton = styled('button')<InnerButtonProps>([
width: props.fullWidth ? '100%' : 'inherit',
...getColorStyles(props),
'&:focus': {
boxShadow: `0 0 0 ${getComponentStyle('button.base.focus.outlineSize')(
boxShadow: `0 0 0 ${getComponentStyle(['button', 'base', 'focus', 'outlineSize'])(
props
)} ${getComponentStyle('button.{color}.outlineColor')(props)}`,
)} ${getComponentStyle(['button', props.color, 'outlineColor'])(props)}`,
},
'&:hover:enabled': getColorStyles(props, 'hover'),
'&:active:enabled': getColorStyles(props, 'active'),
Expand All @@ -73,7 +73,7 @@ const IconBox = styled.div((props: IconBoxProps) => [
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
[`margin-${props.marginSide}`]: getComponentStyle('button.base.icon.gap')(props),
[`margin-${props.marginSide}`]: getComponentStyle(['button', 'base', 'icon', 'gap'])(props),

'&, & > *': {
width: getComponentStyle('button.base.icon.size.{size}')(props),
Expand Down
6 changes: 3 additions & 3 deletions src/ButtonBase/ButtonBase.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,9 @@ export const buttonBaseStyles: any = [
alignItems: 'center',
textDecoration: 'none',
padding: getComponentStyle('button.sizes.{size}.padding')(props),
border: `${getComponentStyle('button.base.borderSize')(props)}px solid transparent`,
border: `${getComponentStyle(['button', 'base', 'borderSize'])(props)}px solid transparent`,
background: 'transparent',
borderRadius: getComponentStyle('button.base.borderRadius')(props),
borderRadius: getComponentStyle(['button', 'base', 'borderRadius'])(props),
transition: getComponentStyle('button.base.transitions', transitionTransformer)(props),
outline: 'none',

Expand All @@ -28,7 +28,7 @@ export const buttonBaseStyles: any = [
},

'&:disabled': {
opacity: getComponentStyle('button.base.disabled.opacity')(props),
opacity: getComponentStyle(['button', 'base', 'disabled', 'opacity'])(props),
cursor: 'normal',
},
}),
Expand Down
8 changes: 4 additions & 4 deletions src/Card/Card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,11 @@ export interface CardProps extends LayoutBoxProps, BaseProps<CardStyleProperties

export const Card = styled.div<CardProps>`
${baseStyle}
padding: ${getComponentStyle('card.padding')};
background-color: ${getComponentStyle('card.backgroundColor')};
color: ${getComponentStyle('card.color')};
padding: ${getComponentStyle(['card', 'padding'])};
background-color: ${getComponentStyle(['card', 'backgroundColor'])};
color: ${getComponentStyle(['card', 'color'])};
box-shadow: ${getComponentStyle('card.shadow', shadowTransformer)};
border-radius: ${getComponentStyle('card.borderRadius')};
border-radius: ${getComponentStyle(['card', 'borderRadius'])};
${(props) => props.css}
${layoutInterpolationFn}
${getCustomStyles('card.styles', 'root')}
Expand Down
31 changes: 16 additions & 15 deletions src/Checkbox/Checkbox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,45 +10,46 @@ import {
} from '../shared/BaseCheckable';
import { getCustomStyles } from '../utils/useCustomStyles';
import { baseStyle } from '../shared/baseStyle';
import { ifProp } from '../styleHelpers/styleProp';

const checkboxSize = (props) => css`
calc(${getComponentStyle('checkbox.handleSize.{size}')(props)} + 2 * (${getComponentStyle(
calc(${getComponentStyle(['checkbox', 'handleSize', props.size])(props)} + 2 * (${getComponentStyle(
'checkbox.innerPadding.{size}'
)(props)} + ${getComponentStyle('checkbox.borderWidth')(props)}px))
)(props)} + ${getComponentStyle(['checkbox', 'borderWidth'])(props)}px))
`;

const CheckboxBox = styled.div<CheckableBoxProps>`
${baseStyle}
position: relative;
width: ${checkboxSize};
height: ${checkboxSize};
border-radius: ${getComponentStyle('checkbox.outerBorderRadius')};
padding: ${getComponentStyle('checkbox.innerPadding.{size}')};
background-color: ${getComponentStyle('checkbox.backgroundColor')};
border: ${getComponentStyle('checkbox.borderWidth')}px solid
${getComponentStyle('checkbox.borderColor')};
border-radius: ${getComponentStyle(['checkbox', 'outerBorderRadius'])};
padding: ${getComponentStyle(['checkbox', 'innerPadding', (props) => props.size])};
background-color: ${getComponentStyle(['checkbox', 'backgroundColor'])};
border: ${getComponentStyle(['checkbox', 'borderWidth'])}px solid
${getComponentStyle(['checkbox', 'borderColor'])};
opacity: ${(props) => (props.disabled ? 0.3 : 1)};

transition: ${getComponentStyle('checkbox.boxTransition', transitionTransformer)};

${(props) =>
props.focus &&
css`
box-shadow: 0 0 0 ${getComponentStyle('checkbox.focus.outlineSize')(props)}
${getComponentStyle('checkbox.focus.outlineColor')(props)};
box-shadow: 0 0 0 ${getComponentStyle(['checkbox', 'focus', 'outlineSize'])(props)}
${getComponentStyle(['checkbox', 'focus', 'outlineColor'])(props)};
`};
}
${getCustomStyles('checkbox.styles', 'box')}
`;

const CheckboxHandle = styled.div<CheckableHandleProps>`
${baseStyle}
width: ${getComponentStyle('checkbox.handleSize.{size}')};
height: ${getComponentStyle('checkbox.handleSize.{size}')};
transform: scale(${(props: any) => (props.checked ? 1 : 0)});
border-radius: ${getComponentStyle('checkbox.innerBorderRadius')};
transition: ${getComponentStyle('checkbox.handleTransition')};
background-color: ${getComponentStyle('checkbox.handleColor')};
width: ${getComponentStyle(['checkbox', 'handleSize', (props) => props.size])};
height: ${getComponentStyle(['checkbox', 'handleSize', (props) => props.size])};
transform: scale(${ifProp('checked', 1, 0)});
border-radius: ${getComponentStyle(['checkbox', 'innerBorderRadius'])};
transition: ${getComponentStyle(['checkbox', 'handleTransition'])};
background-color: ${getComponentStyle(['checkbox', 'handleColor'])};
${getCustomStyles('checkbox.styles', 'handle')}
`;

Expand Down
85 changes: 43 additions & 42 deletions src/IconButton/IconButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,14 @@ import { css } from '@emotion/react';
import styled from '@emotion/styled';
import { LayoutBoxProps, layoutInterpolationFn } from '../Box';
import { baseStyle } from '../shared/baseStyle';
import { getComponentStyle, transitionTransformer } from '../styleHelpers';
import { componentPrimitive, getComponentStyle, transitionTransformer } from '../styleHelpers';
import { BaseProps, CssFunctionReturn } from '../types';
import { getCustomStyles } from '../utils/useCustomStyles';
import { IconButtonStyleProperties } from './styles';
import { omit } from '../utils/omit';
import React, { forwardRef, HTMLProps } from 'react';
import { ifProp } from '../styleHelpers/styleProp';
import { pabloCss } from '../styleHelpers/css';

export type IconButtonSize = 'small' | 'medium' | 'large';
export type IconButtonColor = 'brand' | 'plain' | 'negative' | 'positive';
Expand All @@ -23,33 +25,57 @@ export interface IconButtonProps
children?: React.ReactNode;
css?: CssFunctionReturn<IconButtonProps>;
}
const StyledIconButton = styled.button<IconButtonProps>`

const activeStyles = (props: IconButtonProps) => pabloCss`
background-color: ${getComponentStyle(['iconButton', props.color, 'active', 'backgroundColor'])};
color: ${getComponentStyle(['iconButton', props.color, 'active', 'color'])};
${getCustomStyles('iconButton.styles', 'active')}
`;

const nonActiveStyles = (props: IconButtonProps) => pabloCss`
&:hover:enabled {
background-color: ${getComponentStyle(['iconButton', props.color, 'hover', 'backgroundColor'])};
color: ${getComponentStyle(['iconButton', props.color, 'hover', 'color'])};
${getCustomStyles('iconButton.styles', 'hover')}
}

&:focus:enabled {
background-color: ${getComponentStyle(['iconButton', props.color, 'focus', 'backgroundColor'])};
color: ${getComponentStyle(['iconButton', props.color, 'focus', 'color'])};
${getCustomStyles('iconButton.styles', 'focus')}
}
`;

const StyledIconButton = componentPrimitive<IconButtonProps, 'button'>(['iconButton'], {
tag: 'button',
})`
${baseStyle}
width: ${getComponentStyle('iconButton.size.{size}')};
height: ${getComponentStyle('iconButton.size.{size}')};
background-color: ${getComponentStyle('iconButton.{color}.backgroundColor')};
color: ${getComponentStyle('iconButton.{color}.color')};
width: ${getComponentStyle((props) => ['iconButton', 'size', props.size])};
height: ${getComponentStyle((props) => ['iconButton', 'size', props.size])};
background-color: ${getComponentStyle((props) => ['iconButton', props.color, 'backgroundColor'])};
color: ${getComponentStyle(['iconButton', '{color}', 'color'])};

border: 0;
padding: 0;
outline: 0;
box-sizing: border-box;
transition: ${getComponentStyle('iconButton.transition', transitionTransformer)};
border-radius: ${getComponentStyle('iconButton.borderRadius')};
transition: ${getComponentStyle(['iconButton', 'transition'], transitionTransformer)};
border-radius: ${getComponentStyle(['iconButton', 'borderRadius'])};
display: flex;
justify-content: center;
align-items: center;
flex-shrink: 0;

& > * {
width: ${getComponentStyle('iconButton.icon.size.{size}')};
height: ${getComponentStyle('iconButton.icon.size.{size}')};
transition: ${getComponentStyle('iconButton.icon.transition', transitionTransformer)};
width: ${getComponentStyle((props) => ['iconButton', 'icon', 'size', props.size])};
height: ${getComponentStyle((props) => ['iconButton', 'icon', 'size', props.size])};
transition: ${getComponentStyle(['iconButton', 'icon', 'transition'], transitionTransformer)};
transform: scale(
${(props) =>
props.active
? props.theme.componentStyles.iconButton.icon.active.scale
: props.theme.componentStyles.iconButton.icon.scale}
${ifProp(
'active',
(props) => props.theme.componentStyles.iconButton.icon.active.scale,
(props) => props.theme.componentStyles.iconButton.icon.scale
)}
);
}

Expand All @@ -58,40 +84,15 @@ const StyledIconButton = styled.button<IconButtonProps>`
}

&:disabled {
opacity: ${getComponentStyle('iconButton.disabled.opacity')};
opacity: ${getComponentStyle(['iconButton', 'disabled', 'opacity'])};
cursor: normal;
}

${getCustomStyles('iconButton.styles', 'root')}

${(props) => props.css}

${(props) =>
props.active
? css`
background-color: ${getComponentStyle('iconButton.{color}.active.backgroundColor')(
props
)};
color: ${getComponentStyle('iconButton.{color}.active.color')(props)};
${getCustomStyles('iconButton.styles', 'active')(props)}
`
: css`
&:hover:enabled {
background-color: ${getComponentStyle('iconButton.{color}.hover.backgroundColor')(
props
)};
color: ${getComponentStyle('iconButton.{color}.hover.color')(props)};
${getCustomStyles('iconButton.styles', 'hover')(props)}
}

&:focus:enabled {
background-color: ${getComponentStyle('iconButton.{color}.focus.backgroundColor')(
props
)};
color: ${getComponentStyle('iconButton.{color}.focus.color')(props)};
${getCustomStyles('iconButton.styles', 'focus')(props)}
}
`}
${ifProp('active', activeStyles, nonActiveStyles)}

${(props) => layoutInterpolationFn(omit(props, ['size']))}
`;
Expand Down
4 changes: 2 additions & 2 deletions src/Input/Input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,9 @@ const InnerInput = styled.input<InnerInputProps>`
flex-grow: 1;
flex-shrink: 1;
border: 0;
padding: ${getComponentStyle('input.padding')};
padding: ${getComponentStyle(['input', 'padding'])};
background-color: transparent;
font-family: ${getComponentStyle('input.fontFamily')};
font-family: ${getComponentStyle(['input', 'fontFamily'])};
outline: none;
${getCustomStyles('input.styles', 'field')}
width: 100%;
Expand Down
Loading