From 38ec8cf703a2f023fb657c77fe340423f3da64c7 Mon Sep 17 00:00:00 2001 From: mariktar <100trk@gmail.com> Date: Wed, 7 Apr 2021 18:43:10 +0300 Subject: [PATCH 1/7] feat(react-components): added chip component --- .../react-components/src/Chip/chip.story.tsx | 21 +++ packages/react-components/src/Chip/chip.tsx | 136 ++++++++++++++++++ packages/react-components/src/Chip/index.ts | 1 + 3 files changed, 158 insertions(+) create mode 100644 packages/react-components/src/Chip/chip.story.tsx create mode 100644 packages/react-components/src/Chip/chip.tsx create mode 100644 packages/react-components/src/Chip/index.ts diff --git a/packages/react-components/src/Chip/chip.story.tsx b/packages/react-components/src/Chip/chip.story.tsx new file mode 100644 index 00000000..d7bad0a5 --- /dev/null +++ b/packages/react-components/src/Chip/chip.story.tsx @@ -0,0 +1,21 @@ +import * as React from 'react'; +import { Chip } from './index'; + +export const Playground = (args: any) => ( + +); + +Playground.args = { + children: 'Hello', +}; + +export default { + title: 'Components/Chip', + component: Chip, + argTypes: { + children: { control: 'text' }, + icon: { control: false }, + }, +}; diff --git a/packages/react-components/src/Chip/chip.tsx b/packages/react-components/src/Chip/chip.tsx new file mode 100644 index 00000000..7e1d256e --- /dev/null +++ b/packages/react-components/src/Chip/chip.tsx @@ -0,0 +1,136 @@ +import * as React from 'react'; +import { css, cx } from '../styles'; +import { Typography } from '../Typography'; + +type ChipProps = { + /** + * The content of the component. + */ + children: React.ReactNode; + /** + * If `true`, the chip will be disabled. + */ + disabled?: boolean; + /** + * The variant to use. + */ + variant?: ('filter' | 'input'); + /** + * If `true`, the chip will be selected. + */ + selected: boolean; + /** + * Used to render icon elements inside the Chip + */ + icon?: React.ReactNode; + className?: string; + dataTestId?: string; +}; + +const stylesBase = () => css({ + label: 'Chip', + display: 'flex', + alignItems: 'center', + fontFamily: 'inherit', + outline: 'none', + cursor: 'pointer', + boxSizing: 'border-box', + borderStyle: 'solid', + borderWidth: '1px', + borderColor: 'var(--pv-color-gray-6)', + borderRadius: '15px', + padding: '0 15px', + height: '30px', + backgroundColor: 'transparent', + color: 'var(--pv-color-gray-9)', + transition: 'background-color 200ms, color 200ms, box-shadow 200ms, border-color 200ms', + '&:not(:disabled)': { + '&:hover': { + backgroundColor: 'var(--pv-color-gray-3)', + color: 'var(--pv-color-gray-9)', + }, + '&:focus': { + backgroundColor: 'var(--pv-color-gray-5)', + color: 'var(--pv-color-black)', + borderColor: 'var(--pv-color-gray-9)', + }, + '&:active': { + backgroundColor: 'var(--pv-color-gray-4)', + color: 'var(--pv-color-gray-9)', + borderColor: 'var(--pv-color-gray-9)', + }, + }, + '&:disabled': { + cursor: 'not-allowed', + color: 'var(--pv-color-gray-7)', + borderColor: 'var(--pv-color-gray-4)', + backgroundColor: 'transparent', + }, +}); + +const stylesInputSelected = () => css({ + backgroundColor: 'var(--pv-color-secondary-tint-5)', + color: 'var(--pv-color-secondary)', + borderColor: 'var(--pv-color-secondary-tint-3)', + pointerEvents: 'none', +}); + +const stylesFilterSelected = () => css({ + backgroundColor: 'var(--pv-color-gray-4)', + color: 'var(--pv-color-black)', + borderColor: 'var(--pv-color-gray-7)', +}); + +const stylesIcon = () => css({ + marginRight: '10px', + display: 'flex', + alignItems: 'center', +}); + +export const Chip = React.forwardRef((props, ref) => { + const { + children, + className, + dataTestId, + disabled, + variant, + selected, + icon, + } = props; + const isInput = variant === 'input'; + const Icon = !isInput && selected && icon && ( +
+ {icon} +
+ ); + + return ( + + ); +}); + +Chip.displayName = 'Chip'; + +Chip.defaultProps = { + disabled: false, + variant: 'input', +}; diff --git a/packages/react-components/src/Chip/index.ts b/packages/react-components/src/Chip/index.ts new file mode 100644 index 00000000..c080ed8f --- /dev/null +++ b/packages/react-components/src/Chip/index.ts @@ -0,0 +1 @@ +export { Chip } from './chip'; From b2926aecdb8a3a4833c0a48be6e2a53a94215bfc Mon Sep 17 00:00:00 2001 From: mariktar <100trk@gmail.com> Date: Wed, 7 Apr 2021 18:55:53 +0300 Subject: [PATCH 2/7] chore(react-components): deleted unused style --- packages/react-components/src/Chip/chip.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-components/src/Chip/chip.tsx b/packages/react-components/src/Chip/chip.tsx index 7e1d256e..30009fa8 100644 --- a/packages/react-components/src/Chip/chip.tsx +++ b/packages/react-components/src/Chip/chip.tsx @@ -43,7 +43,7 @@ const stylesBase = () => css({ height: '30px', backgroundColor: 'transparent', color: 'var(--pv-color-gray-9)', - transition: 'background-color 200ms, color 200ms, box-shadow 200ms, border-color 200ms', + transition: 'background-color 200ms, color 200ms, border-color 200ms', '&:not(:disabled)': { '&:hover': { backgroundColor: 'var(--pv-color-gray-3)', From 4a46736cdda2ddc6214ed8c89fabcc469e18b160 Mon Sep 17 00:00:00 2001 From: mariktar <100trk@gmail.com> Date: Wed, 7 Apr 2021 19:01:45 +0300 Subject: [PATCH 3/7] chore(react-components): fixed lint error --- packages/react-components/src/Chip/chip.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react-components/src/Chip/chip.tsx b/packages/react-components/src/Chip/chip.tsx index 30009fa8..9aa418e0 100644 --- a/packages/react-components/src/Chip/chip.tsx +++ b/packages/react-components/src/Chip/chip.tsx @@ -19,9 +19,9 @@ type ChipProps = { * If `true`, the chip will be selected. */ selected: boolean; - /** - * Used to render icon elements inside the Chip - */ + /** + * Used to render icon elements inside the Chip + */ icon?: React.ReactNode; className?: string; dataTestId?: string; From 7ba0cd7e04375f94943a67f5bba08b79b37df8af Mon Sep 17 00:00:00 2001 From: mariktar <100trk@gmail.com> Date: Thu, 8 Apr 2021 18:35:16 +0300 Subject: [PATCH 4/7] chore(react-components): made requested changes --- .../react-components/src/Chip/chip.story.tsx | 5 +++ packages/react-components/src/Chip/chip.tsx | 39 +++++++++++-------- 2 files changed, 27 insertions(+), 17 deletions(-) diff --git a/packages/react-components/src/Chip/chip.story.tsx b/packages/react-components/src/Chip/chip.story.tsx index d7bad0a5..ffcbbe17 100644 --- a/packages/react-components/src/Chip/chip.story.tsx +++ b/packages/react-components/src/Chip/chip.story.tsx @@ -9,6 +9,11 @@ export const Playground = (args: any) => ( Playground.args = { children: 'Hello', + icon: ( + + + + ), }; export default { diff --git a/packages/react-components/src/Chip/chip.tsx b/packages/react-components/src/Chip/chip.tsx index 9aa418e0..351942b7 100644 --- a/packages/react-components/src/Chip/chip.tsx +++ b/packages/react-components/src/Chip/chip.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { css, cx } from '../styles'; import { Typography } from '../Typography'; -type ChipProps = { +type BaseProps = { /** * The content of the component. */ @@ -14,7 +14,7 @@ type ChipProps = { /** * The variant to use. */ - variant?: ('filter' | 'input'); + variant?: ('choice' | 'filter'); /** * If `true`, the chip will be selected. */ @@ -27,13 +27,14 @@ type ChipProps = { dataTestId?: string; }; +type ChipProps = BaseProps & React.ButtonHTMLAttributes; + const stylesBase = () => css({ label: 'Chip', display: 'flex', alignItems: 'center', fontFamily: 'inherit', outline: 'none', - cursor: 'pointer', boxSizing: 'border-box', borderStyle: 'solid', borderWidth: '1px', @@ -44,6 +45,16 @@ const stylesBase = () => css({ backgroundColor: 'transparent', color: 'var(--pv-color-gray-9)', transition: 'background-color 200ms, color 200ms, border-color 200ms', + '&:disabled': { + cursor: 'not-allowed', + color: 'var(--pv-color-gray-7)', + borderColor: 'var(--pv-color-gray-4)', + backgroundColor: 'transparent', + }, +}); + +const stylesEffects = () => css({ + cursor: 'pointer', '&:not(:disabled)': { '&:hover': { backgroundColor: 'var(--pv-color-gray-3)', @@ -60,19 +71,12 @@ const stylesBase = () => css({ borderColor: 'var(--pv-color-gray-9)', }, }, - '&:disabled': { - cursor: 'not-allowed', - color: 'var(--pv-color-gray-7)', - borderColor: 'var(--pv-color-gray-4)', - backgroundColor: 'transparent', - }, }); -const stylesInputSelected = () => css({ +const stylesChoiceSelected = () => css({ backgroundColor: 'var(--pv-color-secondary-tint-5)', color: 'var(--pv-color-secondary)', borderColor: 'var(--pv-color-secondary-tint-3)', - pointerEvents: 'none', }); const stylesFilterSelected = () => css({ @@ -97,8 +101,8 @@ export const Chip = React.forwardRef((props, ref) selected, icon, } = props; - const isInput = variant === 'input'; - const Icon = !isInput && selected && icon && ( + const isChoice = variant === 'choice'; + const Icon = !isChoice && selected && icon && (
{icon}
@@ -111,11 +115,12 @@ export const Chip = React.forwardRef((props, ref) type="button" className={cx({ [stylesBase()]: true, - [stylesInputSelected()]: selected && isInput, - [stylesFilterSelected()]: selected && !isInput, + [stylesChoiceSelected()]: selected && isChoice, + [stylesFilterSelected()]: selected && !isChoice, + [stylesEffects()]: !selected || !isChoice, [className]: !!className, })} - tabIndex={selected && isInput ? -1 : 1} + tabIndex={selected && isChoice ? -1 : 1} data-testid={dataTestId} > {Icon} @@ -132,5 +137,5 @@ Chip.displayName = 'Chip'; Chip.defaultProps = { disabled: false, - variant: 'input', + variant: 'choice', }; From f61d38acc70e6301ad4026402ed8eb638d223f1a Mon Sep 17 00:00:00 2001 From: mariktar <100trk@gmail.com> Date: Wed, 14 Apr 2021 12:51:23 +0300 Subject: [PATCH 5/7] chore(react-components): made requested changes --- .../react-components/src/Chip/chip.story.tsx | 6 ------ packages/react-components/src/Chip/chip.tsx | 17 ++++++++--------- 2 files changed, 8 insertions(+), 15 deletions(-) diff --git a/packages/react-components/src/Chip/chip.story.tsx b/packages/react-components/src/Chip/chip.story.tsx index ffcbbe17..a1a2e3ec 100644 --- a/packages/react-components/src/Chip/chip.story.tsx +++ b/packages/react-components/src/Chip/chip.story.tsx @@ -9,11 +9,6 @@ export const Playground = (args: any) => ( Playground.args = { children: 'Hello', - icon: ( - - - - ), }; export default { @@ -21,6 +16,5 @@ export default { component: Chip, argTypes: { children: { control: 'text' }, - icon: { control: false }, }, }; diff --git a/packages/react-components/src/Chip/chip.tsx b/packages/react-components/src/Chip/chip.tsx index 351942b7..1d31c32a 100644 --- a/packages/react-components/src/Chip/chip.tsx +++ b/packages/react-components/src/Chip/chip.tsx @@ -19,10 +19,6 @@ type BaseProps = { * If `true`, the chip will be selected. */ selected: boolean; - /** - * Used to render icon elements inside the Chip - */ - icon?: React.ReactNode; className?: string; dataTestId?: string; }; @@ -31,7 +27,7 @@ type ChipProps = BaseProps & React.ButtonHTMLAttributes; const stylesBase = () => css({ label: 'Chip', - display: 'flex', + display: 'inline-flex', alignItems: 'center', fontFamily: 'inherit', outline: 'none', @@ -99,17 +95,20 @@ export const Chip = React.forwardRef((props, ref) disabled, variant, selected, - icon, + ...other } = props; const isChoice = variant === 'choice'; - const Icon = !isChoice && selected && icon && ( + const Icon = !isChoice && selected && (
- {icon} + + +
); return (