From 005f92c3d6d7ae294335591b4aec753d346f42b5 Mon Sep 17 00:00:00 2001 From: Jethary Date: Mon, 13 Jan 2025 12:26:00 -0500 Subject: [PATCH 1/5] start to clean up MenuList and MenuItem --- components/src/atoms/MenuList/MenuItem.stories.tsx | 2 +- components/src/atoms/MenuList/MenuList.stories.tsx | 4 ++-- components/src/atoms/MenuList/index.tsx | 5 +++-- 3 files changed, 6 insertions(+), 5 deletions(-) diff --git a/components/src/atoms/MenuList/MenuItem.stories.tsx b/components/src/atoms/MenuList/MenuItem.stories.tsx index 9cd281da965..1ed64a55087 100644 --- a/components/src/atoms/MenuList/MenuItem.stories.tsx +++ b/components/src/atoms/MenuList/MenuItem.stories.tsx @@ -4,7 +4,7 @@ import { MenuItem as MenuItemComponent } from './MenuItem' import type { Meta, StoryObj } from '@storybook/react' const meta: Meta = { - title: 'Library/Atoms/MenuItem', + title: 'Helix/Atoms/MenuItem', component: MenuItemComponent, parameters: VIEWPORT.touchScreenViewport, } diff --git a/components/src/atoms/MenuList/MenuList.stories.tsx b/components/src/atoms/MenuList/MenuList.stories.tsx index 26900db0728..a613f88374d 100644 --- a/components/src/atoms/MenuList/MenuList.stories.tsx +++ b/components/src/atoms/MenuList/MenuList.stories.tsx @@ -4,10 +4,10 @@ import { MenuItem } from './MenuItem' import type { Meta, StoryObj } from '@storybook/react' -const menuBtn = 'example menu btn' +const menuBtn = 'Example menu btn' const meta: Meta = { - title: 'Library/Atoms/MenuList', + title: 'Helix/Atoms/MenuList', component: MenuListComponent, args: { onClick: action('clicked'), diff --git a/components/src/atoms/MenuList/index.tsx b/components/src/atoms/MenuList/index.tsx index f06fe983523..1d62edf48d5 100644 --- a/components/src/atoms/MenuList/index.tsx +++ b/components/src/atoms/MenuList/index.tsx @@ -1,6 +1,7 @@ import { BORDERS, COLORS } from '../../helix-design-system' import { DIRECTION_COLUMN, + FLEX_MAX_CONTENT, JUSTIFY_CENTER, POSITION_ABSOLUTE, } from '../../styles' @@ -21,7 +22,7 @@ export const MenuList = (props: MenuListProps): JSX.Element | null => { return isOnDevice && onClick != null ? ( { top="2.6rem" right={`calc(50% + ${SPACING.spacing4})`} flexDirection={DIRECTION_COLUMN} - width="max-content" + width={FLEX_MAX_CONTENT} > {children} From a29a8c1ce9e142edf6f309b4d025ac01150b6443 Mon Sep 17 00:00:00 2001 From: Jethary Date: Mon, 13 Jan 2025 13:28:39 -0500 Subject: [PATCH 2/5] fix MenuItem --- .../src/atoms/MenuList/MenuItem.stories.tsx | 12 ++- components/src/atoms/MenuList/MenuItem.tsx | 7 +- components/src/constants.ts | 80 +++++++++++++++++++ components/src/index.ts | 2 + 4 files changed, 99 insertions(+), 2 deletions(-) create mode 100644 components/src/constants.ts diff --git a/components/src/atoms/MenuList/MenuItem.stories.tsx b/components/src/atoms/MenuList/MenuItem.stories.tsx index 1ed64a55087..c2fb404c2f2 100644 --- a/components/src/atoms/MenuList/MenuItem.stories.tsx +++ b/components/src/atoms/MenuList/MenuItem.stories.tsx @@ -1,12 +1,21 @@ import { VIEWPORT } from '../../ui-style-constants' +import { allDefaultStorybookControlsWithStyleProps } from '../../constants' import { MenuItem as MenuItemComponent } from './MenuItem' - import type { Meta, StoryObj } from '@storybook/react' const meta: Meta = { title: 'Helix/Atoms/MenuItem', component: MenuItemComponent, parameters: VIEWPORT.touchScreenViewport, + argTypes: { + // Disable all StyleProps + ...Object.fromEntries( + allDefaultStorybookControlsWithStyleProps.map(prop => [ + prop, + { table: { disable: true } }, + ]) + ), + }, } export default meta @@ -16,5 +25,6 @@ export const MenuItem: Story = { args: { children: 'Example menu btn', disabled: false, + isAlert: false, }, } diff --git a/components/src/atoms/MenuList/MenuItem.tsx b/components/src/atoms/MenuList/MenuItem.tsx index 94857fc56dd..c9376d5eca5 100644 --- a/components/src/atoms/MenuList/MenuItem.tsx +++ b/components/src/atoms/MenuList/MenuItem.tsx @@ -1,5 +1,5 @@ import styled from 'styled-components' -import { COLORS } from '../../helix-design-system' +import { BORDERS, COLORS } from '../../helix-design-system' import { RESPONSIVENESS, SPACING, TYPOGRAPHY } from '../../ui-style-constants' import { ALIGN_CENTER } from '../../styles' import type { StyleProps } from '../../primitives' @@ -28,6 +28,11 @@ export const MenuItem = styled.button` color: ${COLORS.grey40}; } + &:focus-visible { + outline: 3px ${BORDERS.styleSolid} ${COLORS.blue50}; + outline-offset: 2px; + } + @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} { align-items: ${ALIGN_CENTER}; text-align: ${TYPOGRAPHY.textAlignCenter}; diff --git a/components/src/constants.ts b/components/src/constants.ts new file mode 100644 index 00000000000..feb685ebbb3 --- /dev/null +++ b/components/src/constants.ts @@ -0,0 +1,80 @@ +// constant used for filtering out controls in Storybook that include StyleProps +export const allDefaultStorybookControlsWithStyleProps: string[] = [ + 'color', + 'backgroundColor', + 'opacity', + 'fontSize', + 'fontWeight', + 'fontStyle', + 'lineHeight', + 'textAlign', + 'textTransform', + 'textDecoration', + 'margin', + 'marginX', + 'marginY', + 'marginTop', + 'marginRight', + 'marginBottom', + 'marginLeft', + 'padding', + 'paddingX', + 'paddingY', + 'paddingTop', + 'paddingRight', + 'paddingBottom', + 'paddingLeft', + 'border', + 'borderTop', + 'borderRight', + 'borderBottom', + 'borderLeft', + 'borderRadius', + 'borderWidth', + 'borderColor', + 'boxShadow', + 'flex', + 'alignItems', + 'alignSelf', + 'justifyContent', + 'flexDirection', + 'flexWrap', + 'whiteSpace', + 'columnGap', + 'gridGap', + 'gridTemplateAreas', + 'gridTemplateRows', + 'gridTemplateColumns', + 'gridArea', + 'gridRow', + 'gridColumn', + 'display', + 'size', + 'width', + 'minWidth', + 'maxWidth', + 'height', + 'minHeight', + 'maxHeight', + 'overflow', + 'overflowX', + 'overflowY', + 'wordSpacing', + 'cursor', + 'overflowWrap', + 'position', + 'zIndex', + 'top', + 'right', + 'bottom', + 'left', + 'transform', + 'filter', + 'transformOrigin', + 'transition', + 'className', + 'theme', + 'as', + 'forwardedAs', + 'ref', +] diff --git a/components/src/index.ts b/components/src/index.ts index e52904f06fd..3ccf7379aa4 100644 --- a/components/src/index.ts +++ b/components/src/index.ts @@ -39,3 +39,5 @@ export * from './molecules' // Atoms export * from './atoms' + +export * from './constants' From 9feee26f455f648fd2e70ab2678fc7b880fe4b1e Mon Sep 17 00:00:00 2001 From: Jethary Date: Mon, 13 Jan 2025 15:00:41 -0500 Subject: [PATCH 3/5] feat(components, protocol-designer): menuList and MenuItem cleanup for helix closes AUTH-1153 AUTH-1152 --- .../src/atoms/MenuList/MenuList.stories.tsx | 7 +- components/src/atoms/MenuList/index.tsx | 76 +++++++++++-------- .../pages/Designer/LiquidsOverflowMenu.tsx | 10 +-- .../Timeline/StepOverflowMenu.tsx | 29 +++---- 4 files changed, 64 insertions(+), 58 deletions(-) diff --git a/components/src/atoms/MenuList/MenuList.stories.tsx b/components/src/atoms/MenuList/MenuList.stories.tsx index a613f88374d..6232c8e684f 100644 --- a/components/src/atoms/MenuList/MenuList.stories.tsx +++ b/components/src/atoms/MenuList/MenuList.stories.tsx @@ -1,4 +1,6 @@ import { action } from '@storybook/addon-actions' +import { Flex } from '../../primitives' +import { DIRECTION_COLUMN } from '../../styles' import { MenuList as MenuListComponent } from './index' import { MenuItem } from './MenuItem' @@ -21,11 +23,12 @@ type Story = StoryObj export const MenuList: Story = { args: { children: ( - <> + {menuBtn} {menuBtn} {menuBtn} - + ), + isOnDevice: false, }, } diff --git a/components/src/atoms/MenuList/index.tsx b/components/src/atoms/MenuList/index.tsx index 1d62edf48d5..1a5f51056b0 100644 --- a/components/src/atoms/MenuList/index.tsx +++ b/components/src/atoms/MenuList/index.tsx @@ -1,3 +1,4 @@ +import { forwardRef } from 'react' import { BORDERS, COLORS } from '../../helix-design-system' import { DIRECTION_COLUMN, @@ -8,44 +9,59 @@ import { import { Flex } from '../../primitives' import { SPACING } from '../../ui-style-constants' import { ModalShell } from '../../modals' +import type { ForwardedRef, MouseEventHandler, ReactNode } from 'react' +import type { StyleProps } from '../../primitives' -import type { MouseEventHandler, ReactNode } from 'react' - -interface MenuListProps { +interface MenuListProps extends StyleProps { children: ReactNode isOnDevice?: boolean onClick?: MouseEventHandler + /** Optional ref - used in PD for overflowY */ + ref?: ForwardedRef } -export const MenuList = (props: MenuListProps): JSX.Element | null => { - const { children, isOnDevice = false, onClick = null } = props - return isOnDevice && onClick != null ? ( - +export const MenuList = forwardRef( + (props, ref): JSX.Element => { + const { + children, + isOnDevice = false, + onClick, + top = '2.6rem', + right = `calc(50% + ${SPACING.spacing4})`, + width = FLEX_MAX_CONTENT, + ...restProps + } = props + return isOnDevice ? ( + + + {children} + + + ) : ( {children} - - ) : ( - - {children} - - ) -} + ) + } +) diff --git a/protocol-designer/src/pages/Designer/LiquidsOverflowMenu.tsx b/protocol-designer/src/pages/Designer/LiquidsOverflowMenu.tsx index 38b5867b2cc..5125c867fa0 100644 --- a/protocol-designer/src/pages/Designer/LiquidsOverflowMenu.tsx +++ b/protocol-designer/src/pages/Designer/LiquidsOverflowMenu.tsx @@ -4,7 +4,6 @@ import { useDispatch, useSelector } from 'react-redux' import { useLocation } from 'react-router-dom' import { ALIGN_CENTER, - BORDERS, COLORS, CURSOR_POINTER, DIRECTION_COLUMN, @@ -13,6 +12,7 @@ import { Icon, LiquidIcon, MenuItem, + MenuList, OVERFLOW_AUTO, POSITION_ABSOLUTE, SPACING, @@ -42,17 +42,13 @@ export function LiquidsOverflowMenu( const { t } = useTranslation(['starting_deck_state']) const liquids = useSelector(labwareIngredSelectors.allIngredientNamesIds) const dispatch: ThunkDispatch = useDispatch() - return ( - { e.preventDefault() @@ -113,6 +109,6 @@ export function LiquidsOverflowMenu( - + ) } diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/StepOverflowMenu.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/StepOverflowMenu.tsx index 465e85b577d..b498d86d23f 100644 --- a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/StepOverflowMenu.tsx +++ b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/StepOverflowMenu.tsx @@ -1,16 +1,7 @@ import { useTranslation } from 'react-i18next' import { useDispatch, useSelector } from 'react-redux' -import { - BORDERS, - COLORS, - DIRECTION_COLUMN, - Divider, - Flex, - MenuItem, - NO_WRAP, - POSITION_ABSOLUTE, -} from '@opentrons/components' +import { Divider, MenuItem, MenuList, NO_WRAP } from '@opentrons/components' import { analyticsEvent } from '../../../../analytics/actions' import { actions as stepsActions } from '../../../../ui/steps' import { @@ -26,7 +17,12 @@ import { getUnsavedForm, } from '../../../../step-forms/selectors' -import type { Dispatch, MutableRefObject, SetStateAction } from 'react' +import type { + Dispatch, + MouseEvent, + MutableRefObject, + SetStateAction, +} from 'react' import type { ThunkDispatch } from 'redux-thunk' import type { BaseState } from '../../../../types' import type { StepIdType } from '../../../../form-types' @@ -97,17 +93,12 @@ export function StepOverflowMenu(props: StepOverflowMenuProps): JSX.Element { return ( <> - { e.preventDefault() e.stopPropagation() @@ -173,7 +164,7 @@ export function StepOverflowMenu(props: StepOverflowMenuProps): JSX.Element { )} - + ) } From 5ea466036650c318579df9b884e776f690a4f1a1 Mon Sep 17 00:00:00 2001 From: Jethary Date: Wed, 15 Jan 2025 12:47:24 -0500 Subject: [PATCH 4/5] address feedback --- components/src/atoms/MenuList/index.tsx | 3 ++- protocol-designer/src/pages/Designer/LiquidsOverflowMenu.tsx | 2 -- .../pages/Designer/ProtocolSteps/Timeline/StepOverflowMenu.tsx | 1 + 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/components/src/atoms/MenuList/index.tsx b/components/src/atoms/MenuList/index.tsx index 1a5f51056b0..11e526426a0 100644 --- a/components/src/atoms/MenuList/index.tsx +++ b/components/src/atoms/MenuList/index.tsx @@ -29,6 +29,7 @@ export const MenuList = forwardRef( top = '2.6rem', right = `calc(50% + ${SPACING.spacing4})`, width = FLEX_MAX_CONTENT, + zIndex = 10, ...restProps } = props return isOnDevice ? ( @@ -48,7 +49,7 @@ export const MenuList = forwardRef( ) : ( = useDispatch() return ( Date: Wed, 15 Jan 2025 13:07:22 -0500 Subject: [PATCH 5/5] remove constant --- .../src/atoms/MenuList/MenuItem.stories.tsx | 4 +- .../src/atoms/MenuList/MenuList.stories.tsx | 17 +++- components/src/constants.ts | 80 ------------------- components/src/index.ts | 2 - components/src/primitives/style-props.ts | 2 +- 5 files changed, 16 insertions(+), 89 deletions(-) delete mode 100644 components/src/constants.ts diff --git a/components/src/atoms/MenuList/MenuItem.stories.tsx b/components/src/atoms/MenuList/MenuItem.stories.tsx index c2fb404c2f2..ccdbdc35116 100644 --- a/components/src/atoms/MenuList/MenuItem.stories.tsx +++ b/components/src/atoms/MenuList/MenuItem.stories.tsx @@ -1,5 +1,5 @@ +import { STYLE_PROPS } from '../../primitives' import { VIEWPORT } from '../../ui-style-constants' -import { allDefaultStorybookControlsWithStyleProps } from '../../constants' import { MenuItem as MenuItemComponent } from './MenuItem' import type { Meta, StoryObj } from '@storybook/react' @@ -10,7 +10,7 @@ const meta: Meta = { argTypes: { // Disable all StyleProps ...Object.fromEntries( - allDefaultStorybookControlsWithStyleProps.map(prop => [ + [...STYLE_PROPS, 'as', 'ref', 'theme', 'forwardedAs'].map(prop => [ prop, { table: { disable: true } }, ]) diff --git a/components/src/atoms/MenuList/MenuList.stories.tsx b/components/src/atoms/MenuList/MenuList.stories.tsx index 6232c8e684f..c72947cce8b 100644 --- a/components/src/atoms/MenuList/MenuList.stories.tsx +++ b/components/src/atoms/MenuList/MenuList.stories.tsx @@ -1,5 +1,4 @@ -import { action } from '@storybook/addon-actions' -import { Flex } from '../../primitives' +import { Flex, STYLE_PROPS } from '../../primitives' import { DIRECTION_COLUMN } from '../../styles' import { MenuList as MenuListComponent } from './index' import { MenuItem } from './MenuItem' @@ -11,8 +10,18 @@ const menuBtn = 'Example menu btn' const meta: Meta = { title: 'Helix/Atoms/MenuList', component: MenuListComponent, - args: { - onClick: action('clicked'), + argTypes: { + // Disable all StyleProps + ...Object.fromEntries( + [ + ...STYLE_PROPS, + 'as', + 'ref', + 'theme', + 'forwardedAs', + 'className', + ].map(prop => [prop, { table: { disable: true } }]) + ), }, } diff --git a/components/src/constants.ts b/components/src/constants.ts deleted file mode 100644 index feb685ebbb3..00000000000 --- a/components/src/constants.ts +++ /dev/null @@ -1,80 +0,0 @@ -// constant used for filtering out controls in Storybook that include StyleProps -export const allDefaultStorybookControlsWithStyleProps: string[] = [ - 'color', - 'backgroundColor', - 'opacity', - 'fontSize', - 'fontWeight', - 'fontStyle', - 'lineHeight', - 'textAlign', - 'textTransform', - 'textDecoration', - 'margin', - 'marginX', - 'marginY', - 'marginTop', - 'marginRight', - 'marginBottom', - 'marginLeft', - 'padding', - 'paddingX', - 'paddingY', - 'paddingTop', - 'paddingRight', - 'paddingBottom', - 'paddingLeft', - 'border', - 'borderTop', - 'borderRight', - 'borderBottom', - 'borderLeft', - 'borderRadius', - 'borderWidth', - 'borderColor', - 'boxShadow', - 'flex', - 'alignItems', - 'alignSelf', - 'justifyContent', - 'flexDirection', - 'flexWrap', - 'whiteSpace', - 'columnGap', - 'gridGap', - 'gridTemplateAreas', - 'gridTemplateRows', - 'gridTemplateColumns', - 'gridArea', - 'gridRow', - 'gridColumn', - 'display', - 'size', - 'width', - 'minWidth', - 'maxWidth', - 'height', - 'minHeight', - 'maxHeight', - 'overflow', - 'overflowX', - 'overflowY', - 'wordSpacing', - 'cursor', - 'overflowWrap', - 'position', - 'zIndex', - 'top', - 'right', - 'bottom', - 'left', - 'transform', - 'filter', - 'transformOrigin', - 'transition', - 'className', - 'theme', - 'as', - 'forwardedAs', - 'ref', -] diff --git a/components/src/index.ts b/components/src/index.ts index 3ccf7379aa4..e52904f06fd 100644 --- a/components/src/index.ts +++ b/components/src/index.ts @@ -39,5 +39,3 @@ export * from './molecules' // Atoms export * from './atoms' - -export * from './constants' diff --git a/components/src/primitives/style-props.ts b/components/src/primitives/style-props.ts index 0f6b1402639..c3ac78bc2ab 100644 --- a/components/src/primitives/style-props.ts +++ b/components/src/primitives/style-props.ts @@ -106,7 +106,7 @@ const POSITION_PROPS = [ const TRANSITION_PROPS = ['transition'] as const -const STYLE_PROPS = [ +export const STYLE_PROPS = [ ...COLOR_PROPS, ...TYPOGRAPHY_PROPS, ...SPACING_PROPS,