From cf959a5805306dd07081f412c9d6bcf3d8b5fbd4 Mon Sep 17 00:00:00 2001 From: Laura Silva <91160746+silvalaura@users.noreply.github.com> Date: Wed, 20 Nov 2024 09:47:31 -0500 Subject: [PATCH 01/14] fix(Combobox/Select:): Fix focus color for selected items when using `isMulti` + `isInverse` (#1570) --- .changeset/selecteItemButton-focus.md | 5 +++++ .../src/components/Select/shared.ts | 16 +++++++++++++--- 2 files changed, 18 insertions(+), 3 deletions(-) create mode 100644 .changeset/selecteItemButton-focus.md diff --git a/.changeset/selecteItemButton-focus.md b/.changeset/selecteItemButton-focus.md new file mode 100644 index 000000000..3d6c82028 --- /dev/null +++ b/.changeset/selecteItemButton-focus.md @@ -0,0 +1,5 @@ +--- +'react-magma-dom': patch +--- + +fix(Combobox/Select:): Fix focus color for selected items when using `isMulti` + `isInverse` diff --git a/packages/react-magma-dom/src/components/Select/shared.ts b/packages/react-magma-dom/src/components/Select/shared.ts index 1320f150c..e2af5b7d1 100644 --- a/packages/react-magma-dom/src/components/Select/shared.ts +++ b/packages/react-magma-dom/src/components/Select/shared.ts @@ -55,9 +55,12 @@ export const SelectText = styled.span<{ : props.theme.colors.neutral500; } }}; - ${props => props.isDisabled && props.isShowPlaceholder && css` - opacity: ${props.isInverse ? 0.4 : 0.6} - `} + ${props => + props.isDisabled && + props.isShowPlaceholder && + css` + opacity: ${props.isInverse ? 0.4 : 0.6}; + `} `; export const StyledCard = styled(Card)<{ @@ -169,6 +172,13 @@ export const SelectedItemButton = styled.button<{ white-space: nowrap; min-width: 0%; outline-offset: 2px; + &:focus { + outline: 2px solid + ${props => + props.isInverse + ? props.theme.colors.focusInverse + : props.theme.colors.focus}; + } `; export const IconWrapper = styled.span` From ba8e05b896ce1698af649b2f13e17f2348b31d84 Mon Sep 17 00:00:00 2001 From: github-bot Date: Wed, 20 Nov 2024 14:56:29 +0000 Subject: [PATCH 02/14] chore: enter prerelease mode --- .changeset/pre.json | 1 + packages/react-magma-dom/CHANGELOG.md | 6 ++++++ packages/react-magma-dom/package.json | 2 +- 3 files changed, 8 insertions(+), 1 deletion(-) diff --git a/.changeset/pre.json b/.changeset/pre.json index 7b50e5f46..d05a59f1b 100644 --- a/.changeset/pre.json +++ b/.changeset/pre.json @@ -67,6 +67,7 @@ "implement-scrollspy-in-docs", "inputwrapperstyles", "search-clear-overlaps", + "selecteItemButton-focus", "sync4-6", "tree-initEx-docs", "treeViewSelectItemsOutside", diff --git a/packages/react-magma-dom/CHANGELOG.md b/packages/react-magma-dom/CHANGELOG.md index 12607d7d0..0b8827791 100644 --- a/packages/react-magma-dom/CHANGELOG.md +++ b/packages/react-magma-dom/CHANGELOG.md @@ -1,5 +1,11 @@ ## 4.6.0 +## 4.7.0-next.48 + +### Patch Changes + +- cf959a580: fix(Combobox/Select:): Fix focus color for selected items when using `isMulti` + `isInverse` + ## 4.7.0-next.47 ### Patch Changes diff --git a/packages/react-magma-dom/package.json b/packages/react-magma-dom/package.json index 909c80ba5..2383b193b 100644 --- a/packages/react-magma-dom/package.json +++ b/packages/react-magma-dom/package.json @@ -1,6 +1,6 @@ { "name": "react-magma-dom", - "version": "4.7.0-next.47", + "version": "4.7.0-next.48", "description": "", "main": "dist/index.js", "module": "dist/esm/index.js", From 6a8ed217bfb0ed699991a9657aeabec9fa23789b Mon Sep 17 00:00:00 2001 From: Laura Silva <91160746+silvalaura@users.noreply.github.com> Date: Wed, 20 Nov 2024 10:23:17 -0500 Subject: [PATCH 03/14] fix(Tag): Update tag focus state (#1582) --- .changeset/tag-focus.md | 5 + .../src/components/Tag/Tag.stories.tsx | 339 ++++++++++-------- .../src/components/Tag/Tag.test.js | 140 +++++++- .../src/components/Tag/Tag.tsx | 8 + 4 files changed, 322 insertions(+), 170 deletions(-) create mode 100644 .changeset/tag-focus.md diff --git a/.changeset/tag-focus.md b/.changeset/tag-focus.md new file mode 100644 index 000000000..397c1855e --- /dev/null +++ b/.changeset/tag-focus.md @@ -0,0 +1,5 @@ +--- +'react-magma-dom': patch +--- + +fix(Tag): Update tag focus state diff --git a/packages/react-magma-dom/src/components/Tag/Tag.stories.tsx b/packages/react-magma-dom/src/components/Tag/Tag.stories.tsx index ff74e5b3f..06fef30e1 100644 --- a/packages/react-magma-dom/src/components/Tag/Tag.stories.tsx +++ b/packages/react-magma-dom/src/components/Tag/Tag.stories.tsx @@ -3,80 +3,117 @@ import { Card, CardBody } from '../Card'; import { AccountCircleIcon } from 'react-magma-icons'; import { Story, Meta } from '@storybook/react/types-6-0'; import { Tag, TagColor, TagProps, TagSize } from '.'; +import { Button } from '../Button'; -const Template: Story = args => ( - <> - <> - Default - - Primary - - - High Contrast - - - Low Contrast - - -

- }> - Default Icon - - } color={TagColor.primary}> - Primary Icon - - } color={TagColor.highContrast}> - High Contrast Icon - - } color={TagColor.lowContrast}> - Low Contrast Icon - -

-

- - Default Small - - - Primary Small - - - High Contrast Small - - - Low Contrast Small - -

-

- } size={TagSize.small}> - Default Small Icon - - } - size={TagSize.small} - color={TagColor.primary} - > - Primary Small Icon - - } - size={TagSize.small} - color={TagColor.highContrast} - > - High Contrast Small Icon - - } - size={TagSize.small} - color={TagColor.lowContrast} - > - Low Contrast Small Icon - -

- -); +const Template: Story = args => { + return ( + + +

+ Default + + Primary + + + High Contrast + + + Low Contrast + +

+

+ }> + Default Icon + + } color={TagColor.primary}> + Primary Icon + + } + color={TagColor.highContrast} + > + High Contrast Icon + + } + color={TagColor.lowContrast} + > + Low Contrast Icon + +

+

+ + Default Small + + + Primary Small + + + High Contrast Small + + + Low Contrast Small + +

+

+ } size={TagSize.small}> + Default Small Icon + + } + size={TagSize.small} + color={TagColor.primary} + > + Primary Small Icon + + } + size={TagSize.small} + color={TagColor.highContrast} + > + High Contrast Small Icon + + } + size={TagSize.small} + color={TagColor.lowContrast} + > + Low Contrast Small Icon + +

+

+ { + console.log('clicked'); + }} + > + Clickable Tag + + { + console.log('clicked'); + }} + > + Deletetable Tag + +

+ + + ); +}; export default { title: 'Tag', @@ -108,103 +145,95 @@ export default { } as Meta; export const Default = Template.bind({}); -Default.args = {}; - -export const Disabled = Template.bind({}); -Disabled.args = { - disabled: true, -}; - -export const Inverse = Template.bind({}); -Inverse.args = { - isInverse: true, +Default.args = { + disabled: false, + isInverse: false, }; -export const InverseDisabled = Template.bind({}); -InverseDisabled.args = { - isInverse: true, - disabled: true, -}; - -Inverse.decorators = [ - Story => ( - - - - - - ), -]; -InverseDisabled.decorators = [ - Story => ( - - - - - - ), -]; - export const OnClick = args => { const [counter, setCounter] = React.useState(0); function updateCounter() { setCounter(count => count + 1); } return ( - <> -

- Counter: {counter} -

- - Text Label - - + + +

+ Counter: {counter} +

+ + Text Label + + + ); }; OnClick.args = {}; export const WithDelete = args => { - const [isVisible, setIsVisible] = React.useState(true); + const [isVisibleDefault, setIsVisibleDefault] = React.useState(true); + const [isVisibleIcon, setIsVisibleIcon] = React.useState(true); + const [isVisibleSmall, setIsVisibleSmall] = React.useState(true); + const [isVisibleSmallIcon, setIsVisibleSmallIcon] = React.useState(true); - function deleteMe() { - setIsVisible(false); - } return ( - <> -

- {isVisible && ( - - Delete - - )} -

-

- {isVisible && ( - }> - Delete Icon - - )} -

-

- {isVisible && ( - - Delete Small - - )} -

-

- {isVisible && ( - } - > - Delete Icon Small - - )} -

- + + +

+ {isVisibleDefault && ( + setIsVisibleDefault(false)}> + Delete + + )} +

+

+ {isVisibleIcon && ( + setIsVisibleIcon(false)} + icon={} + > + Delete Icon + + )} +

+

+ {isVisibleSmall && ( + setIsVisibleSmall(false)} + > + Delete Small + + )} +

+

+ {isVisibleSmallIcon && ( + setIsVisibleSmallIcon(false)} + icon={} + > + Delete Icon Small + + )} +

+ + + + ); }; diff --git a/packages/react-magma-dom/src/components/Tag/Tag.test.js b/packages/react-magma-dom/src/components/Tag/Tag.test.js index 6df3aa6fd..0b15bc84e 100644 --- a/packages/react-magma-dom/src/components/Tag/Tag.test.js +++ b/packages/react-magma-dom/src/components/Tag/Tag.test.js @@ -2,9 +2,8 @@ import React from 'react'; import { axe } from '../../../axe-helper'; import { magma } from '../../theme/magma'; import { Tag, TagColor, TagSize } from '.'; -import { render, fireEvent } from '@testing-library/react'; +import { render, fireEvent, getByTestId } from '@testing-library/react'; import { transparentize } from 'polished'; -import { I18nContext, deleteAriaLabel } from '../../i18n'; import { AccountCircleIcon, CancelIcon } from 'react-magma-icons'; const TEXT = 'Text Label'; @@ -23,7 +22,28 @@ describe('Tag', () => { expect(getByTestId(testId)).toBeInTheDocument(); }); - describe('Default background tests', () => { + it('Should not have a focus state', () => { + const testId = 'tag-id'; + const { getByTestId } = render( + + {TEXT} + + ); + const tag = getByTestId(testId); + + expect(tag).not.toHaveStyleRule('outline-offset', '2px', { + target: ':focus', + }); + expect(tag).not.toHaveStyleRule( + 'outline', + `2px solid ${magma.colors.focus}`, + { + target: ':focus', + } + ); + }); + + describe('Default background', () => { it('Should render a default Tag with a gray background', () => { const { getByText } = render({TEXT}); const tag = getByText('Text Label').parentElement; @@ -57,7 +77,7 @@ describe('Tag', () => { }); }); - describe('Disabled background tests', () => { + describe('Disabled background', () => { it('Should render a Tag with a disabled background', () => { const { getByText } = render({TEXT}); const tag = getByText('Text Label').parentElement; @@ -116,7 +136,7 @@ describe('Tag', () => { }); }); - describe('Disabled Inverse background tests', () => { + describe('Disabled Inverse background', () => { it('Should render a inverse Tag with a disabled background', () => { const { getByText } = render( @@ -175,7 +195,7 @@ describe('Tag', () => { }); }); - describe('Inverse background tests', () => { + describe('Inverse background', () => { it('Should render a default inverse Tag with a gray background', () => { const { getByText } = render({TEXT}); const tag = getByText('Text Label').parentElement; @@ -217,7 +237,7 @@ describe('Tag', () => { }); }); - describe('Size tests', () => { + describe('Size', () => { it('Should render a small Tag size', () => { const { getByText } = render( @@ -255,23 +275,113 @@ describe('Tag', () => { }); }); - describe('Events tests', () => { + describe('Clickable Tag', () => { + const testId = 'clickableTag'; + it('Should render a clickable tag', () => { const isClickable = jest.fn(); const { getByText } = render({TEXT}); - const button = getByText(TEXT); + const tag = getByText(TEXT); - fireEvent.click(button); + fireEvent.click(tag); expect(isClickable).toHaveBeenCalled(); }); - it('Should render a deletable tag', () => { + it('Should have a focus state', () => { const isClickable = jest.fn(); - const { getByText } = render({TEXT}); - const button = getByText(TEXT); + const { getByTestId } = render( + + {TEXT} + + ); + const tag = getByTestId(testId); - fireEvent.click(button); - expect(isClickable).toHaveBeenCalled(); + expect(tag).toHaveStyleRule('outline-offset', '2px', { + target: ':focus', + }); + expect(tag).toHaveStyleRule( + 'outline', + `2px solid ${magma.colors.focus}`, + { + target: ':focus', + } + ); + }); + + it('Should have a focus state when isInverse', () => { + const isClickable = jest.fn(); + const { getByTestId } = render( + + {TEXT} + + ); + const tag = getByTestId(testId); + + expect(tag).toHaveStyleRule('outline-offset', '2px', { + target: ':focus', + }); + expect(tag).toHaveStyleRule( + 'outline', + `2px solid ${magma.colors.focusInverse}`, + { + target: ':focus', + } + ); + }); + }); + + describe('Deletable Tag', () => { + const testId = 'deleteTag'; + + it('Should render a deletable tag', () => { + const onTagDelete = jest.fn(); + const { getByText } = render({TEXT}); + const tag = getByText(TEXT); + + fireEvent.click(tag); + expect(onTagDelete).toHaveBeenCalled(); + }); + + it('Should have a focus state', () => { + const onTagDelete = jest.fn(); + const { getByTestId } = render( + + {TEXT} + + ); + const tag = getByTestId(testId); + + expect(tag).toHaveStyleRule('outline-offset', '2px', { + target: ':focus', + }); + expect(tag).toHaveStyleRule( + 'outline', + `2px solid ${magma.colors.focus}`, + { + target: ':focus', + } + ); + }); + + it('Should have a focus state when isInverse', () => { + const onTagDelete = jest.fn(); + const { getByTestId } = render( + + {TEXT} + + ); + const tag = getByTestId(testId); + + expect(tag).toHaveStyleRule('outline-offset', '2px', { + target: ':focus', + }); + expect(tag).toHaveStyleRule( + 'outline', + `2px solid ${magma.colors.focusInverse}`, + { + target: ':focus', + } + ); }); }); diff --git a/packages/react-magma-dom/src/components/Tag/Tag.tsx b/packages/react-magma-dom/src/components/Tag/Tag.tsx index fa0710d86..6da53ed28 100644 --- a/packages/react-magma-dom/src/components/Tag/Tag.tsx +++ b/packages/react-magma-dom/src/components/Tag/Tag.tsx @@ -298,6 +298,14 @@ const StyledButton = styled.button<{ }>` ${TagStyling}; cursor: ${props => (props.disabled ? 'not-allowed' : 'pointer')}; + &:focus { + outline-offset: 2px; + outline: 2px solid + ${props => + props.isInverse + ? props.theme.colors.focusInverse + : props.theme.colors.focus}; + } `; const StyledSpan = styled.span<{ From bb047ddc95a68aa63bda23a130695e32b6f1d455 Mon Sep 17 00:00:00 2001 From: github-bot Date: Wed, 20 Nov 2024 15:33:53 +0000 Subject: [PATCH 04/14] chore: enter prerelease mode --- .changeset/pre.json | 1 + packages/react-magma-dom/CHANGELOG.md | 6 ++++++ packages/react-magma-dom/package.json | 2 +- 3 files changed, 8 insertions(+), 1 deletion(-) diff --git a/.changeset/pre.json b/.changeset/pre.json index d05a59f1b..bccb3072a 100644 --- a/.changeset/pre.json +++ b/.changeset/pre.json @@ -69,6 +69,7 @@ "search-clear-overlaps", "selecteItemButton-focus", "sync4-6", + "tag-focus", "tree-initEx-docs", "treeViewSelectItemsOutside", "treeview-undefined-2", diff --git a/packages/react-magma-dom/CHANGELOG.md b/packages/react-magma-dom/CHANGELOG.md index 0b8827791..ea0f68fc2 100644 --- a/packages/react-magma-dom/CHANGELOG.md +++ b/packages/react-magma-dom/CHANGELOG.md @@ -1,5 +1,11 @@ ## 4.6.0 +## 4.7.0-next.49 + +### Patch Changes + +- 6a8ed217b: fix(Tag): Update tag focus state + ## 4.7.0-next.48 ### Patch Changes diff --git a/packages/react-magma-dom/package.json b/packages/react-magma-dom/package.json index 2383b193b..581cb8003 100644 --- a/packages/react-magma-dom/package.json +++ b/packages/react-magma-dom/package.json @@ -1,6 +1,6 @@ { "name": "react-magma-dom", - "version": "4.7.0-next.48", + "version": "4.7.0-next.49", "description": "", "main": "dist/index.js", "module": "dist/esm/index.js", From b8364bbcad41dc0553904920fd6ec628895f9bae Mon Sep 17 00:00:00 2001 From: Laura Silva <91160746+silvalaura@users.noreply.github.com> Date: Wed, 20 Nov 2024 10:45:06 -0500 Subject: [PATCH 05/14] fix(ToggleButtonGroup): Fix `enforced` and `exclusive` props (#1572) --- .changeset/toggleButtonGroup.md | 5 +++++ .../ToggleButtonGroup.stories.tsx | 10 +++++++++- .../ToggleButtonGroup/ToggleButtonGroup.test.js | 16 +++++++++++----- .../ToggleButtonGroup/ToggleButtonGroup.tsx | 2 +- 4 files changed, 26 insertions(+), 7 deletions(-) create mode 100644 .changeset/toggleButtonGroup.md diff --git a/.changeset/toggleButtonGroup.md b/.changeset/toggleButtonGroup.md new file mode 100644 index 000000000..df3ac3928 --- /dev/null +++ b/.changeset/toggleButtonGroup.md @@ -0,0 +1,5 @@ +--- +'react-magma-dom': patch +--- + +fix(ToggleButtonGroup): Fix `enforced` and `exclusive` props \ No newline at end of file diff --git a/packages/react-magma-dom/src/components/ToggleButtonGroup/ToggleButtonGroup.stories.tsx b/packages/react-magma-dom/src/components/ToggleButtonGroup/ToggleButtonGroup.stories.tsx index f83d1ce35..0a23e252c 100644 --- a/packages/react-magma-dom/src/components/ToggleButtonGroup/ToggleButtonGroup.stories.tsx +++ b/packages/react-magma-dom/src/components/ToggleButtonGroup/ToggleButtonGroup.stories.tsx @@ -111,21 +111,25 @@ export const AlignmentExample = args => { aria-label="Left align" icon={} value="left" + testId="left" /> } value="center" + testId="center" /> } value="right" + testId="right" /> } value="justify" + testId="justify" /> ); @@ -146,7 +150,11 @@ export const DifferentToggleButtons = args => { value="settings" /> Text - } value="iconAndText" size={ButtonSize.small}> + } + value="iconAndText" + size={ButtonSize.small} + > Icon and Text diff --git a/packages/react-magma-dom/src/components/ToggleButtonGroup/ToggleButtonGroup.test.js b/packages/react-magma-dom/src/components/ToggleButtonGroup/ToggleButtonGroup.test.js index e3ca2c549..80db107ca 100644 --- a/packages/react-magma-dom/src/components/ToggleButtonGroup/ToggleButtonGroup.test.js +++ b/packages/react-magma-dom/src/components/ToggleButtonGroup/ToggleButtonGroup.test.js @@ -59,8 +59,10 @@ describe('ToggleButtonGroup', () => { ); const buttonOne = getByTestId(testId); + // ensure that clicking either the button or child SVG works + const buttonOneSvg = buttonOne.children[0]; expect(buttonOne).toHaveAttribute('aria-checked', 'false'); - fireEvent.click(buttonOne); + fireEvent.click(buttonOneSvg); expect(buttonOne).toHaveAttribute('aria-checked', 'true'); fireEvent.click(buttonOne); expect(buttonOne).toHaveAttribute('aria-checked', 'true'); @@ -81,10 +83,12 @@ describe('ToggleButtonGroup', () => { ); const buttonOne = getByTestId(testId); + // ensure that clicking either the button or child SVG works + const buttonOneSvg = buttonOne.children[0]; const buttonTwo = getByTestId(`${testId}-1`); expect(buttonOne).toHaveAttribute('aria-checked', 'false'); - fireEvent.click(buttonOne); + fireEvent.click(buttonOneSvg); expect(buttonOne).toHaveAttribute('aria-checked', 'true'); fireEvent.click(buttonTwo); expect(buttonOne).toHaveAttribute('aria-checked', 'false'); @@ -105,12 +109,14 @@ describe('ToggleButtonGroup', () => { ); const buttonOne = getByTestId(testId); + // ensure that clicking either the button or child SVG works + const buttonOneSvg = buttonOne.children[0]; const buttonTwo = getByTestId(`${testId}-1`); expect(buttonOne).toHaveAttribute('aria-checked', 'false'); - fireEvent.click(buttonOne); + fireEvent.click(buttonOneSvg); expect(buttonOne).toHaveAttribute('aria-checked', 'true'); - fireEvent.click(buttonOne); + fireEvent.click(buttonOneSvg); expect(buttonOne).toHaveAttribute('aria-checked', 'true'); fireEvent.click(buttonTwo); expect(buttonOne).toHaveAttribute('aria-checked', 'false'); @@ -195,7 +201,7 @@ describe('ToggleButtonGroup', () => { ); const buttonOne = getByTestId(testId); - + expect(buttonOne).toHaveAttribute('aria-checked', 'true'); fireEvent.click(buttonOne); expect(onChangeMock).toHaveBeenCalledTimes(1); diff --git a/packages/react-magma-dom/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx b/packages/react-magma-dom/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx index a9f03ea0c..4de2bae86 100644 --- a/packages/react-magma-dom/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx +++ b/packages/react-magma-dom/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx @@ -98,7 +98,7 @@ export const ToggleButtonGroup = React.forwardRef< }, [value]); function handleChange(event: React.ChangeEvent) { - const { value: newSelectedValue } = event.target; + const { value: newSelectedValue } = event.currentTarget; const oneBtnSelected = selectedValues.length === 1; const newValueAlreadySelected = selectedValues.includes(newSelectedValue); From 0b78f03d58be54010a22cf79bab480361c9a65d6 Mon Sep 17 00:00:00 2001 From: github-bot Date: Wed, 20 Nov 2024 15:52:20 +0000 Subject: [PATCH 06/14] chore: enter prerelease mode --- .changeset/pre.json | 1 + packages/react-magma-dom/CHANGELOG.md | 6 ++++++ packages/react-magma-dom/package.json | 2 +- 3 files changed, 8 insertions(+), 1 deletion(-) diff --git a/.changeset/pre.json b/.changeset/pre.json index bccb3072a..5b133e973 100644 --- a/.changeset/pre.json +++ b/.changeset/pre.json @@ -70,6 +70,7 @@ "selecteItemButton-focus", "sync4-6", "tag-focus", + "toggleButtonGroup", "tree-initEx-docs", "treeViewSelectItemsOutside", "treeview-undefined-2", diff --git a/packages/react-magma-dom/CHANGELOG.md b/packages/react-magma-dom/CHANGELOG.md index ea0f68fc2..647786212 100644 --- a/packages/react-magma-dom/CHANGELOG.md +++ b/packages/react-magma-dom/CHANGELOG.md @@ -1,5 +1,11 @@ ## 4.6.0 +## 4.7.0-next.50 + +### Patch Changes + +- b8364bbca: fix(ToggleButtonGroup): Fix `enforced` and `exclusive` props + ## 4.7.0-next.49 ### Patch Changes diff --git a/packages/react-magma-dom/package.json b/packages/react-magma-dom/package.json index 581cb8003..927780475 100644 --- a/packages/react-magma-dom/package.json +++ b/packages/react-magma-dom/package.json @@ -1,6 +1,6 @@ { "name": "react-magma-dom", - "version": "4.7.0-next.49", + "version": "4.7.0-next.50", "description": "", "main": "dist/index.js", "module": "dist/esm/index.js", From 6869467ffd987f695f8244a3455ff47657ecd7c3 Mon Sep 17 00:00:00 2001 From: nikitaorliak-cengage Date: Wed, 20 Nov 2024 16:52:43 +0100 Subject: [PATCH 07/14] fix(Charts): Fix circle styles for `Charts`. (#1578) Co-authored-by: Nikita Orliak --- .changeset/a11y-charts-space-around-circle-nodes-missing.md | 5 +++++ packages/charts/src/components/CarbonChart/CarbonChart.tsx | 6 +++--- 2 files changed, 8 insertions(+), 3 deletions(-) create mode 100644 .changeset/a11y-charts-space-around-circle-nodes-missing.md diff --git a/.changeset/a11y-charts-space-around-circle-nodes-missing.md b/.changeset/a11y-charts-space-around-circle-nodes-missing.md new file mode 100644 index 000000000..7d3c9fbfe --- /dev/null +++ b/.changeset/a11y-charts-space-around-circle-nodes-missing.md @@ -0,0 +1,5 @@ +--- +'@react-magma/charts': patch +--- + +fix(Charts): Fix circle styles for `Charts`. diff --git a/packages/charts/src/components/CarbonChart/CarbonChart.tsx b/packages/charts/src/components/CarbonChart/CarbonChart.tsx index c19bdb248..ad3e6d229 100644 --- a/packages/charts/src/components/CarbonChart/CarbonChart.tsx +++ b/packages/charts/src/components/CarbonChart/CarbonChart.tsx @@ -230,15 +230,15 @@ const CarbonChartWrapper = styled.div<{ drop-shadow( 1px 0px 0px ${props => props.isInverse ? props.theme.colors.primary600 - : props.theme.colors.neutral100}); + : props.theme.colors.neutral100}) drop-shadow(-1px 0px 0px ${props => props.isInverse ? props.theme.colors.primary600 - : props.theme.colors.neutral100}); + : props.theme.colors.neutral100}) drop-shadow( 0px 1px 0px ${props => props.isInverse ? props.theme.colors.primary600 - : props.theme.colors.neutral100}); + : props.theme.colors.neutral100}) drop-shadow( 0px -1px 0px ${props => props.isInverse ? props.theme.colors.primary600 From c319a88aa7f2d4a65cfc73006266bb4c1f0bd195 Mon Sep 17 00:00:00 2001 From: github-bot Date: Wed, 20 Nov 2024 15:58:50 +0000 Subject: [PATCH 08/14] chore: enter prerelease mode --- .changeset/pre.json | 1 + packages/charts/CHANGELOG.md | 6 ++++++ packages/charts/package.json | 2 +- 3 files changed, 8 insertions(+), 1 deletion(-) diff --git a/.changeset/pre.json b/.changeset/pre.json index 5b133e973..4c73d24a6 100644 --- a/.changeset/pre.json +++ b/.changeset/pre.json @@ -14,6 +14,7 @@ "a11y-Stepper-vertical-orientation", "a11y-breadcrumb-hide-svg-from-screen-readers", "a11y-button-remove-animation-presses", + "a11y-charts-space-around-circle-nodes-missing", "a11y-checkBox-labels-not-read", "a11y-checkbox-hide-svg-from-screen-readers", "a11y-combobox-clear-focus", diff --git a/packages/charts/CHANGELOG.md b/packages/charts/CHANGELOG.md index d0e016047..12629f8f5 100644 --- a/packages/charts/CHANGELOG.md +++ b/packages/charts/CHANGELOG.md @@ -1,5 +1,11 @@ # @react-magma/charts +## 10.0.0-next.2 + +### Patch Changes + +- 6869467ff: fix(Charts): Fix circle styles for `Charts`. + ## 10.0.0-next.1 ### Patch Changes diff --git a/packages/charts/package.json b/packages/charts/package.json index f36ecfc1c..a73c39baf 100644 --- a/packages/charts/package.json +++ b/packages/charts/package.json @@ -1,6 +1,6 @@ { "name": "@react-magma/charts", - "version": "10.0.0-next.1", + "version": "10.0.0-next.2", "publishConfig": { "access": "public" }, From 46c70e6101164aa3a6729905323b0e9f1c8551eb Mon Sep 17 00:00:00 2001 From: Laura Silva <91160746+silvalaura@users.noreply.github.com> Date: Thu, 21 Nov 2024 09:29:45 -0500 Subject: [PATCH 09/14] fix(TreeView): Fix invalid tree item children (#1584) --- .changeset/tree-validity.md | 5 + .../components/TreeView/TreeView.stories.tsx | 63 ++++++- .../src/components/TreeView/TreeView.test.js | 158 ++++++++++++++++++ .../src/components/TreeView/utils.ts | 57 +++++-- 4 files changed, 259 insertions(+), 24 deletions(-) create mode 100644 .changeset/tree-validity.md diff --git a/.changeset/tree-validity.md b/.changeset/tree-validity.md new file mode 100644 index 000000000..4234f8720 --- /dev/null +++ b/.changeset/tree-validity.md @@ -0,0 +1,5 @@ +--- +'react-magma-dom': patch +--- + +fix(TreeView): Fix invalid tree item children diff --git a/packages/react-magma-dom/src/components/TreeView/TreeView.stories.tsx b/packages/react-magma-dom/src/components/TreeView/TreeView.stories.tsx index 3791a9b0f..900d64500 100644 --- a/packages/react-magma-dom/src/components/TreeView/TreeView.stories.tsx +++ b/packages/react-magma-dom/src/components/TreeView/TreeView.stories.tsx @@ -212,7 +212,10 @@ export const Complex = (args: Partial) => { ); const total = selectedItems?.length ?? 0; - const handleExpandedChange = (event: React.SyntheticEvent, expandedItems: string[]) => { + const handleExpandedChange = ( + event: React.SyntheticEvent, + expandedItems: string[] + ) => { setExpandedItems(expandedItems); }; @@ -358,8 +361,8 @@ export const Complex = (args: Partial) => { icon={} label={ <> - Section 5.1.3.1: Apple pie apple pie tart macaroon topping - chocolate cake + Section 5.1.3.1: Apple pie apple pie tart macaroon + topping chocolate cake } itemId="pt2ch5.1.3.1" @@ -368,8 +371,8 @@ export const Complex = (args: Partial) => { icon={} label={ <> - Section 5.1.3.2: Apple pie apple pie tart macaroon topping - chocolate cake + Section 5.1.3.2: Apple pie apple pie tart macaroon + topping chocolate cake } itemId="pt2ch5.1.3.2" @@ -378,8 +381,8 @@ export const Complex = (args: Partial) => { icon={} label={ <> - Section 5.1.3.3: Apple pie apple pie tart macaroon topping - chocolate cake + Section 5.1.3.3: Apple pie apple pie tart macaroon + topping chocolate cake } itemId="pt2ch5.1.3.3" @@ -1038,3 +1041,49 @@ ParentsAndChildrenNotAutoChecked.parameters = { exclude: ['isInverse', 'initialExpandedItems', 'ariaLabelledBy'], }, }; + +export const InvalidTreeItems = (args: Partial) => { + return ( + <> +

+ + This is an example of a tree with badly structured tree items. Expect + only the following items to be expandable: Node 1, Child 1, Node 2, + Child 2, Grandchild 2. + +

+ + + <> + + + + + This is a tag as a child of Grandchild 1 + + + + + + + + + <>Invalid child + + + + + + + Child of node 4 is just text + + + + ); +}; + +InvalidTreeItems.parameters = { + controls: { + exclude: ['isInverse', 'initialExpandedItems', 'ariaLabelledBy'], + }, +}; diff --git a/packages/react-magma-dom/src/components/TreeView/TreeView.test.js b/packages/react-magma-dom/src/components/TreeView/TreeView.test.js index 2dd50cf7a..d7e2747b9 100644 --- a/packages/react-magma-dom/src/components/TreeView/TreeView.test.js +++ b/packages/react-magma-dom/src/components/TreeView/TreeView.test.js @@ -7,6 +7,8 @@ import userEvent from '@testing-library/user-event'; import { FavoriteIcon } from 'react-magma-icons'; import { transparentize } from 'polished'; import { IndeterminateCheckboxStatus } from '../IndeterminateCheckbox'; +import { Tag } from '../Tag'; +import { Paragraph } from '../Paragraph'; const TEXT = 'Test Text Tree Item'; const testId = 'tree-view'; @@ -2387,4 +2389,160 @@ describe('TreeView', () => { expect(item2).toHaveAttribute('aria-expanded', 'false'); }); }); + + describe('tree validity', () => { + it('when a TreeView is passed as a child, the tree item is expandable', () => { + const { getByTestId } = render( + + + + + + ); + + expect(getByTestId('item1-expand')).toBeInTheDocument(); + }); + + it('when multiple TreeViews are passed as a child, the tree item is expandable', () => { + const { getByTestId } = render( + + + + + + + ); + + expect(getByTestId('item1-expand')).toBeInTheDocument(); + }); + + it('when multiple TreeViews with nested children are passed as a child, the tree items are expandable', () => { + const { getByTestId } = render( + + + + + + + + + + + + + + ); + + expect(getByTestId('item1-expand')).toBeInTheDocument(); + userEvent.click(getByTestId('item1-expand')); + expect(getByTestId('item-child2-expand')).toBeInTheDocument(); + userEvent.click(getByTestId('item-child2-expand')); + expect(getByTestId('item-child2.1-expand')).toBeInTheDocument(); + expect(getByTestId('item-child3-expand')).toBeInTheDocument(); + }); + + it('when multiple TreeViews are passed as a child and at least one is valid, the tree item is expandable', () => { + const { getByTestId } = render( + + + + <> + + + + + + + ); + + expect(getByTestId('item1-expand')).toBeInTheDocument(); + userEvent.click(getByTestId('item1-expand')); + expect(getByTestId('item-child2-expand')).toBeInTheDocument(); + }); + + + it('when a fragment is passed as a child, the tree item is not expandable', () => { + const { queryByTestId } = render( + + + <> + + + + ); + + expect(queryByTestId('item1-expand')).not.toBeInTheDocument(); + expect(queryByTestId('item2-expand')).not.toBeInTheDocument(); + }); + + it('when any other component is passed as a child, the tree item is not expandable', () => { + const { queryByTestId } = render( + + + This is a tag + + + This is a paragraph + + + ); + + expect(queryByTestId('item1-expand')).not.toBeInTheDocument(); + expect(queryByTestId('item2-expand')).not.toBeInTheDocument(); + }); + + it('when text is passed as a child, the tree item is not expandable', () => { + const { queryByTestId } = render( + + + This is sample text + + + ); + + expect(queryByTestId('item1-expand')).not.toBeInTheDocument(); + }); + + it('when a TreeView does not have a child, the tree item is not expandable', () => { + const { queryByTestId } = render( + + + + ); + + expect(queryByTestId('item1-expand')).not.toBeInTheDocument(); + }); + }); }); diff --git a/packages/react-magma-dom/src/components/TreeView/utils.ts b/packages/react-magma-dom/src/components/TreeView/utils.ts index 5c5cf7946..fbb40cd8f 100644 --- a/packages/react-magma-dom/src/components/TreeView/utils.ts +++ b/packages/react-magma-dom/src/components/TreeView/utils.ts @@ -152,22 +152,6 @@ export function getChildrenItemIdsFlat(children) { return itemIds; } -// Return an array of objects where all children are items are nested in the parents -export function getChildrenItemIdsInTree(children) { - let itemIds = []; - - React.Children.forEach(children, child => { - if (child.props?.itemId && !child.props?.isDisabled) { - itemIds.push({ - itemId: child.props?.itemId, - children: getChildrenItemIdsInTree(child.props?.children), - }); - } - }); - - return itemIds; -} - // Return a treeItemRefArray object with no null children export function filterNullEntries(obj) { if (Array.isArray(obj.current)) { @@ -213,6 +197,45 @@ const getIsDisabled = ({ return isParentDisabled || isDisabled; }; +/* Returns a boolean indicating whether at least one child is valid. +A child is considered valid if it can be counted as an item that would make the parent expandable. +This is used to set `hasOwnTreeItems` which manages visibility of the expandable arrow. +*/ +const areChildrenValid = children => { + if (!children) { + return false; + } else if (!children.length && children.type !== TreeItem) { + return false; + } + + let hasValidChild = true; + + for (let i = 0; i < children.length; i++) { + const child = children[i]; + + if (typeof child === 'string') { + return false; // Return false if a child is a string + } + + if (child.type !== TreeItem) { + return hasValidChild; + } + // Recursively check the validity of nested children + if (child.props.children) { + const nestedChildren = Array.isArray(child.props.children) + ? child.props.children + : [child.props.children]; + + if (areChildrenValid(nestedChildren)) { + hasValidChild = true; + return hasValidChild; + } + } + } + + return hasValidChild; +}; + const getTreeViewData = ({ children, selectable, @@ -249,7 +272,7 @@ const getTreeViewData = ({ itemId: props.itemId, parentId, icon: props.icon, - hasOwnTreeItems: Boolean(props.children), + hasOwnTreeItems: areChildrenValid(props.children), isDisabled, }, ...(props.children From 22226aacebf1b281bc86d58b8a5cecedb8f13e5d Mon Sep 17 00:00:00 2001 From: github-bot Date: Thu, 21 Nov 2024 14:41:06 +0000 Subject: [PATCH 10/14] chore: enter prerelease mode --- .changeset/pre.json | 1 + packages/react-magma-dom/CHANGELOG.md | 6 ++++++ packages/react-magma-dom/package.json | 2 +- 3 files changed, 8 insertions(+), 1 deletion(-) diff --git a/.changeset/pre.json b/.changeset/pre.json index 4c73d24a6..9463d4a78 100644 --- a/.changeset/pre.json +++ b/.changeset/pre.json @@ -73,6 +73,7 @@ "tag-focus", "toggleButtonGroup", "tree-initEx-docs", + "tree-validity", "treeViewSelectItemsOutside", "treeview-undefined-2", "treeview-undefined-3", diff --git a/packages/react-magma-dom/CHANGELOG.md b/packages/react-magma-dom/CHANGELOG.md index 647786212..d7f72fdef 100644 --- a/packages/react-magma-dom/CHANGELOG.md +++ b/packages/react-magma-dom/CHANGELOG.md @@ -1,5 +1,11 @@ ## 4.6.0 +## 4.7.0-next.51 + +### Patch Changes + +- 46c70e610: fix(TreeView): Fix invalid tree item children + ## 4.7.0-next.50 ### Patch Changes diff --git a/packages/react-magma-dom/package.json b/packages/react-magma-dom/package.json index 927780475..1b75e697f 100644 --- a/packages/react-magma-dom/package.json +++ b/packages/react-magma-dom/package.json @@ -1,6 +1,6 @@ { "name": "react-magma-dom", - "version": "4.7.0-next.50", + "version": "4.7.0-next.51", "description": "", "main": "dist/index.js", "module": "dist/esm/index.js", From c54190d6c0d653591a0ffa3ade997009989419cc Mon Sep 17 00:00:00 2001 From: Laura Silva <91160746+silvalaura@users.noreply.github.com> Date: Thu, 21 Nov 2024 15:25:24 -0500 Subject: [PATCH 11/14] fix(TreeView): Fix undefined problem (#1587) --- .changeset/treeview-undefined4.md | 5 ++ .../src/components/TreeView/TreeItem.tsx | 2 +- .../components/TreeView/TreeView.stories.tsx | 20 ++++++-- .../src/components/TreeView/TreeView.test.js | 51 +++++++++++++++++++ .../src/components/TreeView/utils.ts | 9 ++-- 5 files changed, 76 insertions(+), 11 deletions(-) create mode 100644 .changeset/treeview-undefined4.md diff --git a/.changeset/treeview-undefined4.md b/.changeset/treeview-undefined4.md new file mode 100644 index 000000000..f0fb94916 --- /dev/null +++ b/.changeset/treeview-undefined4.md @@ -0,0 +1,5 @@ +--- +'react-magma-dom': patch +--- + +fix(TreeView): Fix undefined problem diff --git a/packages/react-magma-dom/src/components/TreeView/TreeItem.tsx b/packages/react-magma-dom/src/components/TreeView/TreeItem.tsx index 6113fe95d..aad3a993a 100644 --- a/packages/react-magma-dom/src/components/TreeView/TreeItem.tsx +++ b/packages/react-magma-dom/src/components/TreeView/TreeItem.tsx @@ -387,7 +387,7 @@ export const TreeItem = React.forwardRef( {React.Children.map( children, (child: React.ReactElement, index) => { - return child.type === TreeItem ? ( + return child?.type === TreeItem ? (
    {React.cloneElement(child, { diff --git a/packages/react-magma-dom/src/components/TreeView/TreeView.stories.tsx b/packages/react-magma-dom/src/components/TreeView/TreeView.stories.tsx index 900d64500..4fafb935f 100644 --- a/packages/react-magma-dom/src/components/TreeView/TreeView.stories.tsx +++ b/packages/react-magma-dom/src/components/TreeView/TreeView.stories.tsx @@ -1049,7 +1049,7 @@ export const InvalidTreeItems = (args: Partial) => { This is an example of a tree with badly structured tree items. Expect only the following items to be expandable: Node 1, Child 1, Node 2, - Child 2, Grandchild 2. + Child 2, Grandchild 2, Node 6.

    @@ -1058,14 +1058,14 @@ export const InvalidTreeItems = (args: Partial) => { - + This is a tag as a child of Grandchild 1 - + <>Invalid child @@ -1073,10 +1073,20 @@ export const InvalidTreeItems = (args: Partial) => { - - + + Child of node 4 is just text + + {null} + + + {undefined} + + + {undefined} + + ); diff --git a/packages/react-magma-dom/src/components/TreeView/TreeView.test.js b/packages/react-magma-dom/src/components/TreeView/TreeView.test.js index d7e2747b9..33cfd80da 100644 --- a/packages/react-magma-dom/src/components/TreeView/TreeView.test.js +++ b/packages/react-magma-dom/src/components/TreeView/TreeView.test.js @@ -2492,6 +2492,29 @@ describe('TreeView', () => { expect(getByTestId('item-child2-expand')).toBeInTheDocument(); }); + it('when multiple TreeViews are passed as a child and at least one is valid and the other is undefined, the tree item is expandable', () => { + const { getByTestId } = render( + + + + {undefined} + + {undefined} + + + + + + ); + + expect(getByTestId('item1-expand')).toBeInTheDocument(); + userEvent.click(getByTestId('item1-expand')); + expect(getByTestId('item-child2-expand')).toBeInTheDocument(); + }); it('when a fragment is passed as a child, the tree item is not expandable', () => { const { queryByTestId } = render( @@ -2535,6 +2558,34 @@ describe('TreeView', () => { expect(queryByTestId('item1-expand')).not.toBeInTheDocument(); }); + it('when undefined is passed as a child, the tree item is not expandable', () => { + const { queryByTestId } = render( + + + {undefined} + + + + ); + + expect(queryByTestId('item1-expand')).not.toBeInTheDocument(); + expect(queryByTestId('item2-expand')).not.toBeInTheDocument(); + }); + + it('when null is passed as a child, the tree item is not expandable', () => { + const { queryByTestId } = render( + + + {null} + + + + ); + + expect(queryByTestId('item1-expand')).not.toBeInTheDocument(); + expect(queryByTestId('item2-expand')).not.toBeInTheDocument(); + }); + it('when a TreeView does not have a child, the tree item is not expandable', () => { const { queryByTestId } = render( diff --git a/packages/react-magma-dom/src/components/TreeView/utils.ts b/packages/react-magma-dom/src/components/TreeView/utils.ts index fbb40cd8f..35ba94cdd 100644 --- a/packages/react-magma-dom/src/components/TreeView/utils.ts +++ b/packages/react-magma-dom/src/components/TreeView/utils.ts @@ -217,7 +217,7 @@ const areChildrenValid = children => { return false; // Return false if a child is a string } - if (child.type !== TreeItem) { + if (child?.type !== TreeItem) { return hasValidChild; } // Recursively check the validity of nested children @@ -575,13 +575,12 @@ const processParentsSelection = ({ checkedStatus: TreeViewItemInterface['checkedStatus']; }) => { const item = items.find(item => item.itemId === itemId); - const { parentId } = item; - if (parentId === null) { + if (item?.parentId === null) { return items; } - const siblings = items.filter(item => item?.parentId === parentId); + const siblings = items.filter(i => i.parentId === item?.parentId); const isAllSiblingsHasTheSameStatus = siblings.every( item => (item.checkedStatus || IndeterminateCheckboxStatus.unchecked) === @@ -591,7 +590,7 @@ const processParentsSelection = ({ ? checkedStatus : IndeterminateCheckboxStatus.indeterminate; - const parent = items.find(item => item.itemId === parentId); + const parent = items.find(i => i.itemId === item?.parentId); const nextItems = items.map(item => item.itemId === parent.itemId From 5576b2f64f8dbe4066d32df3bb1f4fdadbf7c005 Mon Sep 17 00:00:00 2001 From: github-bot Date: Thu, 21 Nov 2024 20:34:44 +0000 Subject: [PATCH 12/14] chore: enter prerelease mode --- .changeset/pre.json | 3 ++- packages/react-magma-dom/CHANGELOG.md | 6 ++++++ packages/react-magma-dom/package.json | 2 +- 3 files changed, 9 insertions(+), 2 deletions(-) diff --git a/.changeset/pre.json b/.changeset/pre.json index 9463d4a78..657784a78 100644 --- a/.changeset/pre.json +++ b/.changeset/pre.json @@ -77,6 +77,7 @@ "treeViewSelectItemsOutside", "treeview-undefined-2", "treeview-undefined-3", - "treeview-undefined" + "treeview-undefined", + "treeview-undefined4" ] } diff --git a/packages/react-magma-dom/CHANGELOG.md b/packages/react-magma-dom/CHANGELOG.md index d7f72fdef..3fbab8e79 100644 --- a/packages/react-magma-dom/CHANGELOG.md +++ b/packages/react-magma-dom/CHANGELOG.md @@ -1,5 +1,11 @@ ## 4.6.0 +## 4.7.0-next.52 + +### Patch Changes + +- c54190d6c: fix(TreeView): Fix undefined problem + ## 4.7.0-next.51 ### Patch Changes diff --git a/packages/react-magma-dom/package.json b/packages/react-magma-dom/package.json index 1b75e697f..5e4d0f472 100644 --- a/packages/react-magma-dom/package.json +++ b/packages/react-magma-dom/package.json @@ -1,6 +1,6 @@ { "name": "react-magma-dom", - "version": "4.7.0-next.51", + "version": "4.7.0-next.52", "description": "", "main": "dist/index.js", "module": "dist/esm/index.js", From 78aad092506d6a1db2a48d6e4e39fc9dce0cac43 Mon Sep 17 00:00:00 2001 From: chris-cedrone-cengage <77400920+chris-cedrone-cengage@users.noreply.github.com> Date: Thu, 21 Nov 2024 17:12:43 -0500 Subject: [PATCH 13/14] docs: Various fixes for missing references and general clean-up (#1574) --- .changeset/fix-docs-examples.md | 5 +++ .../src/components/ButtonProps/index.js | 1 + .../src/components/IconButtonProps/index.js | 1 + .../src/pages/api/accordion.mdx | 4 +-- .../src/pages/api/checkboxes.mdx | 2 +- .../src/pages/api/combobox.mdx | 35 ++++++++++--------- .../src/pages/api/container.mdx | 8 ++--- .../src/pages/api/date-pickers.mdx | 14 ++++---- .../src/pages/api/dropdown.mdx | 9 +++-- .../react-magma-docs/src/pages/api/form.mdx | 2 +- .../src/pages/api/formgroup.mdx | 7 ++-- .../react-magma-docs/src/pages/api/grid.mdx | 7 ++-- .../src/pages/api/hyperlink.mdx | 6 ++-- .../src/pages/api/icon-button.mdx | 8 ++--- .../react-magma-docs/src/pages/api/radio.mdx | 25 +++++++------ .../react-magma-docs/src/pages/api/select.mdx | 6 ++-- .../src/pages/api/stepper.mdx | 10 +++--- .../react-magma-docs/src/pages/api/toast.mdx | 2 +- .../react-magma-docs/src/pages/api/toggle.mdx | 2 +- .../src/pages/api/use-focus-lock.mdx | 2 +- .../src/pages/design/progress-bar.mdx | 2 +- 21 files changed, 86 insertions(+), 72 deletions(-) create mode 100644 .changeset/fix-docs-examples.md diff --git a/.changeset/fix-docs-examples.md b/.changeset/fix-docs-examples.md new file mode 100644 index 000000000..acfe3bd4b --- /dev/null +++ b/.changeset/fix-docs-examples.md @@ -0,0 +1,5 @@ +--- +'react-magma-docs': patch +--- + +fix(Docs): Within the Docs site, these components have had fixes for missing references and general clean-up for CodeSandbox examples: Grid, Container, Stepper, Combobox, Hyperlink, IconButton, Toast, DatePicker, Dropdown, Form, FormGroup, useFocusLock \ No newline at end of file diff --git a/website/react-magma-docs/src/components/ButtonProps/index.js b/website/react-magma-docs/src/components/ButtonProps/index.js index 8cf79dc26..247b5eb28 100644 --- a/website/react-magma-docs/src/components/ButtonProps/index.js +++ b/website/react-magma-docs/src/components/ButtonProps/index.js @@ -18,6 +18,7 @@ export const ButtonProps = () => ( options: [ 'ButtonColor.primary', 'ButtonColor.secondary', + 'ButtonColor.success', 'ButtonColor.danger', 'ButtonColor.marketing', ], diff --git a/website/react-magma-docs/src/components/IconButtonProps/index.js b/website/react-magma-docs/src/components/IconButtonProps/index.js index c4a26c60c..0ddc291f8 100644 --- a/website/react-magma-docs/src/components/IconButtonProps/index.js +++ b/website/react-magma-docs/src/components/IconButtonProps/index.js @@ -27,6 +27,7 @@ export function IconButtonProps() { options: [ 'ButtonColor.primary', 'ButtonColor.secondary', + 'ButtonColor.success', 'ButtonColor.danger', 'ButtonColor.marketing', ], diff --git a/website/react-magma-docs/src/pages/api/accordion.mdx b/website/react-magma-docs/src/pages/api/accordion.mdx index 1f0f2f9fc..e19c8ca89 100644 --- a/website/react-magma-docs/src/pages/api/accordion.mdx +++ b/website/react-magma-docs/src/pages/api/accordion.mdx @@ -25,7 +25,7 @@ import { LeadParagraph } from '../../components/LeadParagraph'; An accordion is made up of four components: `Accordion`, `AccordionItem`, `AccordionButton` and `AccordionPanel`. The `Accordion` is the wrapper for all of the items. It can contain one or more `AccordionItems`, each of which should contain one `AccordionButton` and one `AccordionPanel`. An `AccordionButton` can be wrapped in an element with the role of heading (such as an h1-h6) to provide semantic structure to the document. -By default, multiple items will can be expanded. The `defaultIndex` prop, which takes an array of zero-based indices, can be used to set panels open by default. +By default, multiple items are expandable. The `defaultIndex` prop which takes a zero-based array can be used to set panels open by default. ```typescript import React from 'react'; @@ -38,7 +38,7 @@ import { export function Example() { return ( - +

    Section 1 diff --git a/website/react-magma-docs/src/pages/api/checkboxes.mdx b/website/react-magma-docs/src/pages/api/checkboxes.mdx index b7eb33767..a22003a78 100644 --- a/website/react-magma-docs/src/pages/api/checkboxes.mdx +++ b/website/react-magma-docs/src/pages/api/checkboxes.mdx @@ -26,7 +26,7 @@ If you do not want to have your checkbox be in a controlled state, but need the Indeterminate Checkboxes are similar to standard checkboxes but with three available statuses. -See also: Radio Buttons, Toggle Switches, and the Design Guidelines for selection controls in general. +See also: Radio Buttons and Toggle Switches. ```tsx import React from 'react'; diff --git a/website/react-magma-docs/src/pages/api/combobox.mdx b/website/react-magma-docs/src/pages/api/combobox.mdx index 049128881..84603c70d 100644 --- a/website/react-magma-docs/src/pages/api/combobox.mdx +++ b/website/react-magma-docs/src/pages/api/combobox.mdx @@ -643,12 +643,12 @@ import { Combobox } from 'react-magma-dom'; export function Example() { const [isLoading, updateIsLoading] = React.useState(false); - function loadItems(inputValue) { - return new Promise(resolve => + function loadItems() { + return new Promise((resolve) => resolve([ - { label: 'Yellow', value: 'yellow' }, - { label: 'Pink', value: 'pink' }, - { label: 'Periwinkle', value: 'periwinkle' }, + { label: "Yellow", value: "yellow" }, + { label: "Pink", value: "pink" }, + { label: "Periwinkle", value: "periwinkle" }, ]) ); } @@ -662,9 +662,9 @@ export function Example() { setTimeout(() => { updateIsLoading(false); - loadItems(inputValue).then(items => { + loadItems().then((items: any) => { setInputItems( - items.filter(item => + items.filter((item) => item.label.toLowerCase().startsWith(inputValue.toLowerCase()) ) ); @@ -678,9 +678,9 @@ export function Example() { labelText="Async" isLoading={isLoading} defaultItems={[ - { label: 'Red', value: 'red' }, - { label: 'Blue', value: 'blue' }, - { label: 'Green', value: 'green' }, + { label: "Red", value: "red" }, + { label: "Blue", value: "blue" }, + { label: "Green", value: "green" }, ]} onInputValueChange={handleInputValueChange} /> @@ -944,7 +944,7 @@ import { Combobox, LabelPosition } from 'react-magma-dom'; export function Example() { return ( (false); - function loadItems(inputValue) { + function loadItems() { return new Promise(resolve => resolve([ { label: 'Yellow', value: 'yellow' }, @@ -1291,7 +1294,7 @@ export function Example() { setTimeout(() => { updateIsLoading(false); - loadItems(inputValue).then(items => { + loadItems().then((items: any) => { setInputItems( items.filter(item => item.label.toLowerCase().startsWith(inputValue.toLowerCase()) diff --git a/website/react-magma-docs/src/pages/api/container.mdx b/website/react-magma-docs/src/pages/api/container.mdx index a8b153672..72e31b6df 100644 --- a/website/react-magma-docs/src/pages/api/container.mdx +++ b/website/react-magma-docs/src/pages/api/container.mdx @@ -23,7 +23,7 @@ import { Container, Heading, Hyperlink, Paragraph } from 'react-magma-dom'; export function Example() { return ( - Basic Container + Basic Container Paragraph with hyperlink @@ -43,7 +43,7 @@ import { Container, Heading, Paragraph, Hyperlink } from 'react-magma-dom'; export function Example() { return ( - Basic Container + Basic Container Paragraph with hyperlink @@ -63,7 +63,7 @@ import { Container, Heading, Paragraph, Hyperlink } from 'react-magma-dom'; export function Example() { return ( - Basic Container + Basic Container Paragraph with hyperlink @@ -83,7 +83,7 @@ import { Container, Heading, Paragraph, Hyperlink } from 'react-magma-dom'; export function Example() { return ( - Basic Container + Basic Container Paragraph with hyperlink diff --git a/website/react-magma-docs/src/pages/api/date-pickers.mdx b/website/react-magma-docs/src/pages/api/date-pickers.mdx index d59e2f2c5..478aef568 100644 --- a/website/react-magma-docs/src/pages/api/date-pickers.mdx +++ b/website/react-magma-docs/src/pages/api/date-pickers.mdx @@ -34,7 +34,7 @@ import React from 'react'; import { DatePicker } from 'react-magma-dom'; export function Example() { - return ; + return ; } ``` @@ -48,7 +48,7 @@ import { DatePicker } from 'react-magma-dom'; export function Example() { return ( - + ); } ``` @@ -65,8 +65,8 @@ export function Example() { const [chosenDate, setChosenDate] = React.useState( undefined ); - const minDate = '01/09/2024'; - const maxDate = '02/10/2024'; + const minDate = new Date(2025, 1, 2); + const maxDate = new Date(2025, 1, 20); function handleDateChange(newChosenDate: Date) { setChosenDate(newChosenDate); @@ -111,7 +111,7 @@ export function Example() { undefined ); - function handleDateChange(newChosenDate: Date) { + function handleDateChange(newChosenDate: Date | null) { setChosenDate(newChosenDate); } @@ -187,7 +187,7 @@ export function Example() { ```tsx import React from 'react'; -import { DatePicker, Card, CardBody, magma } from 'react-magma-dom'; +import { DatePicker, Card, CardBody } from 'react-magma-dom'; export function Example() { return ( @@ -352,7 +352,7 @@ export function Example() { ## Keyboard Navigation -The `DatePicker` is keyboard navigable for allowing the user to navigate between days, weeks, and months. If you would like to see all of the options for keyboard navigation click on the `?` button in the bottom right corner of the `DatePicker` or press the `?` key. +The `DatePicker` is keyboard navigable for allowing the user to navigate between days, weeks, and months. ```tsx import React from 'react'; diff --git a/website/react-magma-docs/src/pages/api/dropdown.mdx b/website/react-magma-docs/src/pages/api/dropdown.mdx index 93e3c3520..66d4a8c18 100644 --- a/website/react-magma-docs/src/pages/api/dropdown.mdx +++ b/website/react-magma-docs/src/pages/api/dropdown.mdx @@ -77,7 +77,7 @@ export function Example() { return ( - + Split Button @@ -465,7 +465,7 @@ export function Example() { Expandable Items Dropdown - + }> Pasta @@ -575,7 +575,7 @@ import { } from 'react-magma-dom'; export function Example() { - const OptionalDropdownMenuItem = ({ toggle, dropdownMenuItemProps }) => { + const OptionalDropdownMenuItem = ({ toggle, ...dropdownMenuItemProps }) => { return toggle ? ( Hello There @@ -614,6 +614,8 @@ export function Example() { ); } + + ``` ### Leading Icons @@ -752,6 +754,7 @@ import { ButtonColor, ButtonSize, ButtonGroup, + ButtonVariant, Dropdown, DropdownButton, DropdownContent, diff --git a/website/react-magma-docs/src/pages/api/form.mdx b/website/react-magma-docs/src/pages/api/form.mdx index 908b2c9ef..c3a2c5abe 100644 --- a/website/react-magma-docs/src/pages/api/form.mdx +++ b/website/react-magma-docs/src/pages/api/form.mdx @@ -103,7 +103,7 @@ export function Example() { } ``` -# Form Props +## Form Props **Any other props supplied will be provided to the wrapping `form` element.** diff --git a/website/react-magma-docs/src/pages/api/formgroup.mdx b/website/react-magma-docs/src/pages/api/formgroup.mdx index c26605d09..87a95ca25 100644 --- a/website/react-magma-docs/src/pages/api/formgroup.mdx +++ b/website/react-magma-docs/src/pages/api/formgroup.mdx @@ -69,12 +69,11 @@ export function Example() { Labelled by label } - name="labelledByGroup" > - + Labelled by H3 @@ -100,7 +99,6 @@ export function Example() { containerStyle={{ border: '1px solid gray', padding: '10px' }} labelStyle={{ fontWeight: '500', color: 'red' }} labelText="Group label" - name="labelledByGroup" > @@ -121,7 +119,6 @@ export function Example() { return ( @@ -135,7 +132,7 @@ export function Example() { ```tsx import React from 'react'; -import { FormGroup, Checkbox, Toggle, Card, CardBody } from 'react-magma-dom'; +import { FormGroup, Checkbox, Card, CardBody } from 'react-magma-dom'; export function Example() { return ( diff --git a/website/react-magma-docs/src/pages/api/grid.mdx b/website/react-magma-docs/src/pages/api/grid.mdx index bcfa2a55d..c071a8c4c 100644 --- a/website/react-magma-docs/src/pages/api/grid.mdx +++ b/website/react-magma-docs/src/pages/api/grid.mdx @@ -20,7 +20,6 @@ Child elements can be added as they are, or inside of ``. ` ```typescript import React from 'react'; -import styled from '@emotion/styled'; import { Grid, GridItem, @@ -148,15 +147,15 @@ export function Example() { ```typescript import React from 'react'; -import { Grid, GridItem } from 'react-magma-dom'; +import { Grid, GridItem, GridAlignItems, GridJustifyContent } from 'react-magma-dom'; export function Example() { return ( } aria-label="Notifications" - textPosition="left" onClick={() => { setTextIconButtonCounter(count => count + 1); }} @@ -502,4 +500,4 @@ All of the [standard button attributes](https://developer.mozilla.org/en-US/docs - + \ No newline at end of file diff --git a/website/react-magma-docs/src/pages/api/radio.mdx b/website/react-magma-docs/src/pages/api/radio.mdx index 2c20f08ef..4369b42ce 100644 --- a/website/react-magma-docs/src/pages/api/radio.mdx +++ b/website/react-magma-docs/src/pages/api/radio.mdx @@ -19,7 +19,7 @@ import { LeadParagraph } from '../../components/LeadParagraph'; The `RadioGroup` component is used as the container for the set of options. The `Radio` component is used for each of the options themselves. -See also: Checkboxes, Toggle Switches, and the Design Guidelines for selection controls in general. +See also: Checkboxes and Toggle Switches. The label/radio association will be handled via the passed in `id` if one is supplied or via an auto-generated `id` if not supplied. @@ -481,12 +481,19 @@ import { export function Example() { const radioRef = React.useRef(); - - function handleButtonClick() { - radioRef.current.checked = !radioRef.current.checked; + const [radioGroupVal, setRadioGroupVal] = React.useState(null); + + function handleSelectOne() { + if (!radioRef.current) { + setRadioGroupVal(null); + } else if (radioRef.current.checked) { + setRadioGroupVal(""); + } else if (!radioRef.current.checked) { + setRadioGroupVal("1"); + } } - function handleSecondaryButtonClick() { + function handleFocusOne() { radioRef.current.focus(); } @@ -496,6 +503,7 @@ export function Example() { labelText="Forward ref usage" id="forwardRefGroup" name="forwardRef" + value={radioGroupVal} > - - + diff --git a/website/react-magma-docs/src/pages/api/select.mdx b/website/react-magma-docs/src/pages/api/select.mdx index 336054e3e..fc1684fbc 100644 --- a/website/react-magma-docs/src/pages/api/select.mdx +++ b/website/react-magma-docs/src/pages/api/select.mdx @@ -1135,7 +1135,7 @@ The `type` property in the `changes` object that is returned from the `onStateCh corresponds to a `stateChangeTypes` property. The list of all the possible types for a `select` or a `multi-select` are listed below. - + In the development environment these types equate to strings
    (eg:{' '} @@ -1150,7 +1150,7 @@ corresponds to a `stateChangeTypes` property. The list of all the possible types ### Select -
    +
    • SelectStateChangeTypes.MenuKeyDownArrowDown @@ -1232,7 +1232,7 @@ corresponds to a `stateChangeTypes` property. The list of all the possible types ### MultiSelect -
      +
      • diff --git a/website/react-magma-docs/src/pages/api/stepper.mdx b/website/react-magma-docs/src/pages/api/stepper.mdx index 522aabb6f..7610d1378 100644 --- a/website/react-magma-docs/src/pages/api/stepper.mdx +++ b/website/react-magma-docs/src/pages/api/stepper.mdx @@ -99,7 +99,7 @@ When using `layout` with `StepperLayout.summaryView`, the option to change the s ```typescript import React from 'react'; -import { Container, Stepper, Step, Button, ButtonGroup } from 'react-magma-dom'; +import { Container, Stepper, Step, StepperLayout, Button, ButtonGroup } from 'react-magma-dom'; export function Example() { const [currentStep, setCurrentStep] = React.useState(0); @@ -161,13 +161,13 @@ export function Example() { } ``` -## Completed Step Description +## Completion Label -When using layout `StepperLayout.summaryView`, after all of the steps are complete, the `completedStepDescription` prop takes a string and changes the title. +When using layout `StepperLayout.summaryView`, after all of the steps are complete, the `completionLabel` prop takes a string and changes the title. ```typescript import React from 'react'; -import { Container, Stepper, Step, Button, ButtonGroup } from 'react-magma-dom'; +import { Container, Stepper, Step, StepperLayout, Button, ButtonGroup } from 'react-magma-dom'; export function Example() { const [currentStep, setCurrentStep] = React.useState(4); @@ -192,7 +192,7 @@ export function Example() { <> diff --git a/website/react-magma-docs/src/pages/api/toast.mdx b/website/react-magma-docs/src/pages/api/toast.mdx index f8f0e74d5..ab0ef5e19 100644 --- a/website/react-magma-docs/src/pages/api/toast.mdx +++ b/website/react-magma-docs/src/pages/api/toast.mdx @@ -168,7 +168,7 @@ Toasts are intended to be small interruptions to users, so when a `Toast` compon read the new content. One way to do this is to use the Announce component, which employs the `aria-live` attribute. Be sure to place the conditional logic to display the Toast _inside_ the Announce component. -While toasts appear visually in centered at bottom of the screen, they will exist in the dom where ever they are placed. Keep this in mind when you are structuring your +While toasts appear visually at the bottom left of the screen, they will exist in the dom wherever they are placed. Keep this in mind when you are structuring your markup, to ensure that they have the expected tab order. ```tsx diff --git a/website/react-magma-docs/src/pages/api/toggle.mdx b/website/react-magma-docs/src/pages/api/toggle.mdx index ab0709bd3..6265265b6 100644 --- a/website/react-magma-docs/src/pages/api/toggle.mdx +++ b/website/react-magma-docs/src/pages/api/toggle.mdx @@ -14,7 +14,7 @@ import { LeadParagraph } from '../../components/LeadParagraph'; either an on or off value. -See also: Checkboxes, Radio Buttons, and the Design Guidelines for selection controls in general. +See also: Checkboxes and Radio Buttons. ## Basic Usage diff --git a/website/react-magma-docs/src/pages/api/use-focus-lock.mdx b/website/react-magma-docs/src/pages/api/use-focus-lock.mdx index 4ca4c21a0..2d863967b 100644 --- a/website/react-magma-docs/src/pages/api/use-focus-lock.mdx +++ b/website/react-magma-docs/src/pages/api/use-focus-lock.mdx @@ -85,7 +85,7 @@ If your container has no focusable elements you can pass a ref that is on an ele ```tsx codesandbox=magma import React from 'react'; -import { useFocusLock, Toggle, Input, Button, Heading } from 'react-magma-dom'; +import { useFocusLock, Toggle } from 'react-magma-dom'; export function Example() { const bodyRef = React.useRef(); diff --git a/website/react-magma-docs/src/pages/design/progress-bar.mdx b/website/react-magma-docs/src/pages/design/progress-bar.mdx index b1087ca59..9cb3426cb 100644 --- a/website/react-magma-docs/src/pages/design/progress-bar.mdx +++ b/website/react-magma-docs/src/pages/design/progress-bar.mdx @@ -21,7 +21,7 @@ Progress bars can be used in different ways depending on where they are used or Perhaps most importantly, the progress bar should reflect real data or progress, and not be faked in order to just give the impression of progress. -To see how progress bars are used as loading indicators, view the [loading indicator component](/design/loading-indicators/). +To see how progress bars are used as loading indicators, view the [loading indicator component](/design/loading-indicator/).
        From 23f6cf0182690c4f897da2d66a5294a07c318929 Mon Sep 17 00:00:00 2001 From: github-bot Date: Thu, 21 Nov 2024 22:22:42 +0000 Subject: [PATCH 14/14] chore: enter prerelease mode --- .changeset/pre.json | 1 + website/react-magma-docs/CHANGELOG.md | 6 ++++++ website/react-magma-docs/package.json | 2 +- 3 files changed, 8 insertions(+), 1 deletion(-) diff --git a/.changeset/pre.json b/.changeset/pre.json index 657784a78..cc4428c87 100644 --- a/.changeset/pre.json +++ b/.changeset/pre.json @@ -51,6 +51,7 @@ "feat-treeview-add-support-for-isdisabled", "feat-treeview-onexpandedchange", "fix-blockQuote-border-color", + "fix-docs-examples", "fix-initial-expanded-items-should-expand-all-parents", "fix-input-focus-outline", "fix-input-help-link", diff --git a/website/react-magma-docs/CHANGELOG.md b/website/react-magma-docs/CHANGELOG.md index bdb2b1ce5..dce1ee291 100644 --- a/website/react-magma-docs/CHANGELOG.md +++ b/website/react-magma-docs/CHANGELOG.md @@ -1,5 +1,11 @@ # Change Log +## 5.0.9-next.14 + +### Patch Changes + +- 78aad0925: fix(Docs): Within the Docs site, these components have had fixes for missing references and general clean-up for CodeSandbox examples: Grid, Container, Stepper, Combobox, Hyperlink, IconButton, Toast, DatePicker, Dropdown, Form, FormGroup, useFocusLock + ## 5.0.9-next.13 ### Patch Changes diff --git a/website/react-magma-docs/package.json b/website/react-magma-docs/package.json index 8cbe4de4f..7adc85137 100644 --- a/website/react-magma-docs/package.json +++ b/website/react-magma-docs/package.json @@ -1,7 +1,7 @@ { "name": "react-magma-docs", "description": "React Magma docs", - "version": "5.0.9-next.13", + "version": "5.0.9-next.14", "private": true, "repository": { "type": "git",