From 5040e2c118758ae496056ce8d133b07ab4da9f1e Mon Sep 17 00:00:00 2001 From: koji Date: Mon, 11 Mar 2024 16:27:11 -0400 Subject: [PATCH 1/7] fix(app): fix inline notification storybook selector for type didn't work because options is placed under control. this pr fixes that issue. --- app/src/atoms/InlineNotification/InlineNotification.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/src/atoms/InlineNotification/InlineNotification.stories.tsx b/app/src/atoms/InlineNotification/InlineNotification.stories.tsx index 71fca5a8277..313d278c0fa 100644 --- a/app/src/atoms/InlineNotification/InlineNotification.stories.tsx +++ b/app/src/atoms/InlineNotification/InlineNotification.stories.tsx @@ -13,9 +13,9 @@ export default { defaultValue: false, }, type: { + options: ['alert', 'error', 'neutral', 'success'], control: { type: 'select', - options: ['alert', 'error', 'neutral', 'success'], }, defaultValue: 'success', }, From ad55c6eb887b1160c28dee037de721fa94a41422 Mon Sep 17 00:00:00 2001 From: koji Date: Tue, 12 Mar 2024 10:24:49 -0400 Subject: [PATCH 2/7] feat(app): add info type to chip component Chip component is missing info type in edge. This PR adds the info type. --- app/src/atoms/Chip/Chip.stories.tsx | 56 +++++++++++++--------- app/src/atoms/Chip/__tests__/Chip.test.tsx | 31 ++++++++++++ app/src/atoms/Chip/index.tsx | 8 +++- 3 files changed, 71 insertions(+), 24 deletions(-) diff --git a/app/src/atoms/Chip/Chip.stories.tsx b/app/src/atoms/Chip/Chip.stories.tsx index 5b2c5704585..4c7c034b983 100644 --- a/app/src/atoms/Chip/Chip.stories.tsx +++ b/app/src/atoms/Chip/Chip.stories.tsx @@ -6,6 +6,16 @@ import type { Story, Meta } from '@storybook/react' export default { title: 'ODD/Atoms/Chip', + argTypes: { + type: { + options: ['basic', 'error', 'info', 'neutral', 'success', 'warning'], + control: { + type: 'select', + }, + defaultValue: 'basic', + }, + + }, component: Chip, parameters: touchScreenViewport, } as Meta @@ -25,32 +35,32 @@ const Template: Story = ({ ...args }) => ( ) -export const Basic = Template.bind({}) -Basic.args = { +export const ChipComponent = Template.bind({}) +ChipComponent.args = { type: 'basic', - text: 'Basic chip text', + text: 'Chip component', } -export const Error = Template.bind({}) -Error.args = { - type: 'error', - text: 'Not connected', -} +// export const Error = Template.bind({}) +// Error.args = { +// type: 'error', +// text: 'Not connected', +// } -export const Success = Template.bind({}) -Success.args = { - type: 'success', - text: 'Connected', -} +// export const Success = Template.bind({}) +// Success.args = { +// type: 'success', +// text: 'Connected', +// } -export const Warning = Template.bind({}) -Warning.args = { - type: 'warning', - text: 'Missing 1 module', -} +// export const Warning = Template.bind({}) +// Warning.args = { +// type: 'warning', +// text: 'Missing 1 module', +// } -export const Neutral = Template.bind({}) -Neutral.args = { - type: 'neutral', - text: 'Not connected', -} +// export const Neutral = Template.bind({}) +// Neutral.args = { +// type: 'neutral', +// text: 'Not connected', +// } diff --git a/app/src/atoms/Chip/__tests__/Chip.test.tsx b/app/src/atoms/Chip/__tests__/Chip.test.tsx index 041e4c5afa4..e231752d1c4 100644 --- a/app/src/atoms/Chip/__tests__/Chip.test.tsx +++ b/app/src/atoms/Chip/__tests__/Chip.test.tsx @@ -152,4 +152,35 @@ describe('Chip', () => { const icon = screen.getByLabelText('icon_mockError') expect(icon).toHaveStyle(`color: ${COLORS.red60}`) }) + + it('should render text, icon, bgcolor with info colors', () => { + props = { + text: 'mockInfo', + type: 'info', + } + render(props) + const chip = screen.getByTestId('Chip_info') + const chipText = screen.getByText('mockInfo') + expect(chip).toHaveStyle(`background-color: ${COLORS.blue35}`) + expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusSize5}`) + expect(chipText).toHaveStyle(`color: ${COLORS.blue60}`) + const icon = screen.getByLabelText('icon_mockInfo') + expect(icon).toHaveStyle(`color: ${COLORS.blue60}`) + }) + + it('should render text, icon, no bgcolor with info colors and bg false', () => { + props = { + background: false, + text: 'mockInfo', + type: 'info', + } + render(props) + const chip = screen.getByTestId('Chip_info') + const chipText = screen.getByText('mockInfo') + expect(chip).toHaveStyle(`background-color: ${COLORS.transparent}`) + expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusSize5}`) + expect(chipText).toHaveStyle(`color: ${COLORS.blue60}`) + const icon = screen.getByLabelText('icon_mockInfo') + expect(icon).toHaveStyle(`color: ${COLORS.blue60}`) + }) }) diff --git a/app/src/atoms/Chip/index.tsx b/app/src/atoms/Chip/index.tsx index 5a6f16a0418..85a090e509c 100644 --- a/app/src/atoms/Chip/index.tsx +++ b/app/src/atoms/Chip/index.tsx @@ -15,7 +15,7 @@ import { StyledText } from '../text' import type { IconName, StyleProps } from '@opentrons/components' -export type ChipType = 'basic' | 'error' | 'neutral' | 'success' | 'warning' +export type ChipType = 'basic' | 'error' | 'info' | 'neutral' | 'success' | 'warning' interface ChipProps extends StyleProps { /** Display background color? */ @@ -49,6 +49,12 @@ const CHIP_PROPS_BY_TYPE: Record< iconColor: COLORS.red60, textColor: COLORS.red60, }, + info: { + backgroundColor: COLORS.blue35, + borderRadius: BORDERS.borderRadiusSize5, + iconColor: COLORS.blue60, + textColor: COLORS.blue60, + }, neutral: { backgroundColor: `${COLORS.black90}${COLORS.opacity20HexCode}`, borderRadius: BORDERS.borderRadiusSize5, From 132b5794d282e053721598a93075a7340fd628af Mon Sep 17 00:00:00 2001 From: koji Date: Tue, 12 Mar 2024 10:28:50 -0400 Subject: [PATCH 3/7] remove unused lines --- app/src/atoms/Chip/Chip.stories.tsx | 26 +------------------------- 1 file changed, 1 insertion(+), 25 deletions(-) diff --git a/app/src/atoms/Chip/Chip.stories.tsx b/app/src/atoms/Chip/Chip.stories.tsx index 4c7c034b983..90b9e19af21 100644 --- a/app/src/atoms/Chip/Chip.stories.tsx +++ b/app/src/atoms/Chip/Chip.stories.tsx @@ -39,28 +39,4 @@ export const ChipComponent = Template.bind({}) ChipComponent.args = { type: 'basic', text: 'Chip component', -} - -// export const Error = Template.bind({}) -// Error.args = { -// type: 'error', -// text: 'Not connected', -// } - -// export const Success = Template.bind({}) -// Success.args = { -// type: 'success', -// text: 'Connected', -// } - -// export const Warning = Template.bind({}) -// Warning.args = { -// type: 'warning', -// text: 'Missing 1 module', -// } - -// export const Neutral = Template.bind({}) -// Neutral.args = { -// type: 'neutral', -// text: 'Not connected', -// } +} \ No newline at end of file From c5248c8049b4afc4b1bc190f56086603e1a1eb96 Mon Sep 17 00:00:00 2001 From: koji Date: Fri, 15 Mar 2024 16:29:24 -0400 Subject: [PATCH 4/7] fix format issues --- app/src/atoms/Chip/Chip.stories.tsx | 3 +-- app/src/atoms/Chip/index.tsx | 8 +++++++- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/app/src/atoms/Chip/Chip.stories.tsx b/app/src/atoms/Chip/Chip.stories.tsx index 90b9e19af21..3909f479d49 100644 --- a/app/src/atoms/Chip/Chip.stories.tsx +++ b/app/src/atoms/Chip/Chip.stories.tsx @@ -14,7 +14,6 @@ export default { }, defaultValue: 'basic', }, - }, component: Chip, parameters: touchScreenViewport, @@ -39,4 +38,4 @@ export const ChipComponent = Template.bind({}) ChipComponent.args = { type: 'basic', text: 'Chip component', -} \ No newline at end of file +} diff --git a/app/src/atoms/Chip/index.tsx b/app/src/atoms/Chip/index.tsx index 18283d4e401..2bdd5e78225 100644 --- a/app/src/atoms/Chip/index.tsx +++ b/app/src/atoms/Chip/index.tsx @@ -15,7 +15,13 @@ import { StyledText } from '../text' import type { IconName, StyleProps } from '@opentrons/components' -export type ChipType = 'basic' | 'error' | 'info' | 'neutral' | 'success' | 'warning' +export type ChipType = + | 'basic' + | 'error' + | 'info' + | 'neutral' + | 'success' + | 'warning' interface ChipProps extends StyleProps { /** Display background color? */ From 926d99bff98c13e72d94ad69fb6367778262be1c Mon Sep 17 00:00:00 2001 From: koji Date: Sat, 16 Mar 2024 01:17:20 -0400 Subject: [PATCH 5/7] fix test errors --- app/src/atoms/Chip/__tests__/Chip.test.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/src/atoms/Chip/__tests__/Chip.test.tsx b/app/src/atoms/Chip/__tests__/Chip.test.tsx index 611a6e76ce0..d0115028b90 100644 --- a/app/src/atoms/Chip/__tests__/Chip.test.tsx +++ b/app/src/atoms/Chip/__tests__/Chip.test.tsx @@ -162,7 +162,7 @@ describe('Chip', () => { const chip = screen.getByTestId('Chip_info') const chipText = screen.getByText('mockInfo') expect(chip).toHaveStyle(`background-color: ${COLORS.blue35}`) - expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusSize5}`) + expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadius40}`) expect(chipText).toHaveStyle(`color: ${COLORS.blue60}`) const icon = screen.getByLabelText('icon_mockInfo') expect(icon).toHaveStyle(`color: ${COLORS.blue60}`) @@ -178,7 +178,7 @@ describe('Chip', () => { const chip = screen.getByTestId('Chip_info') const chipText = screen.getByText('mockInfo') expect(chip).toHaveStyle(`background-color: ${COLORS.transparent}`) - expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusSize5}`) + expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadius40}`) expect(chipText).toHaveStyle(`color: ${COLORS.blue60}`) const icon = screen.getByLabelText('icon_mockInfo') expect(icon).toHaveStyle(`color: ${COLORS.blue60}`) From 766626c7d29211a23b87cf78c782c845ce4ee8b5 Mon Sep 17 00:00:00 2001 From: koji Date: Sat, 16 Mar 2024 01:24:05 -0400 Subject: [PATCH 6/7] remove warning --- app/src/atoms/SelectField/Select.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/src/atoms/SelectField/Select.tsx b/app/src/atoms/SelectField/Select.tsx index 92192c264bb..f0f49389b92 100644 --- a/app/src/atoms/SelectField/Select.tsx +++ b/app/src/atoms/SelectField/Select.tsx @@ -43,7 +43,7 @@ export function Select(props: SelectComponentProps): JSX.Element { ...styles, borderRadius: BORDERS.borderRadiusFull, border: BORDERS.lineBorder, - width: props.width != null ? props.width : 'auto', + width: props.width ?? 'auto', height: SPACING.spacing16, borderColor: COLORS.grey30, boxShadow: 'none', From 75880289c900f93db9a49d122611146917b6c921 Mon Sep 17 00:00:00 2001 From: koji Date: Sat, 16 Mar 2024 01:25:27 -0400 Subject: [PATCH 7/7] fix borderRadius mismatch --- app/src/atoms/Chip/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/src/atoms/Chip/index.tsx b/app/src/atoms/Chip/index.tsx index 2bdd5e78225..3e7a12741a2 100644 --- a/app/src/atoms/Chip/index.tsx +++ b/app/src/atoms/Chip/index.tsx @@ -57,7 +57,7 @@ const CHIP_PROPS_BY_TYPE: Record< }, info: { backgroundColor: COLORS.blue35, - borderRadius: BORDERS.borderRadiusSize5, + borderRadius: BORDERS.borderRadius40, iconColor: COLORS.blue60, textColor: COLORS.blue60, },