diff --git a/.storybook/main.js b/.storybook/main.js index 8b268d06db..9a5a963511 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -25,13 +25,12 @@ module.exports = { // check: true, }, webpackFinal: async config => { - config.module.rules[0].exclude = /node_modules\/(?!(@carbon)\/).*/; - return { - ...config, - // devtool: false, - module: { - ...config.module, + return { + ...config, + // devtool: false, + module: { + ...config.module, }, // devtool: 'eval', resolve: { diff --git a/package-lock.json b/package-lock.json index 9a36dd283d..4bdb8eb3e7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -104,7 +104,8 @@ "ts-node": "^9.1.1", "tsdx": "^0.14.1", "typedoc": "^0.19.2", - "typescript": "^3.9.7" + "typescript": "^3.9.7", + "webpack-filter-warnings-plugin": "1.2.1" }, "engines": { "node": ">=18.20.4", @@ -15707,9 +15708,9 @@ } }, "node_modules/axios": { - "version": "1.7.7", - "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.7.tgz", - "integrity": "sha512-S4kL7XrjgBmvdGut0sN3yJxqYzrDOnivkBiN0OFs6hLiUam3UPvswUo0kqGyhqUZGEOytHyumEdXsAkgCOUf3Q==", + "version": "1.7.8", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.8.tgz", + "integrity": "sha512-Uu0wb7KNqK2t5K+YQyVCLM76prD5sRFjKHbJYCP1J7JFGEQ6nN7HWn9+04LAeiJ3ji54lgS/gZCH1oxyrf1SPw==", "dependencies": { "follow-redirects": "^1.15.6", "form-data": "^4.0.0", @@ -46364,8 +46365,9 @@ } }, "node_modules/readable-stream": { - "version": "3.6.0", - "license": "MIT", + "version": "3.6.2", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz", + "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==", "dependencies": { "inherits": "^2.0.3", "string_decoder": "^1.1.1", @@ -57462,7 +57464,7 @@ }, "packages/charts": { "name": "@react-magma/charts", - "version": "10.0.0-next.1", + "version": "10.0.0-next.2", "license": "MIT", "dependencies": { "@carbon/charts-react": "^1.14.8", @@ -57524,7 +57526,7 @@ } }, "packages/react-magma-dom": { - "version": "4.7.0-next.7", + "version": "4.7.0-next.50", "license": "MIT", "dependencies": { "@emotion/react": "^11.13.0", @@ -57559,7 +57561,7 @@ }, "packages/schema-renderer": { "name": "@react-magma/schema-renderer", - "version": "10.0.0-next.1", + "version": "10.0.0-next.2", "license": "MIT", "devDependencies": { "@data-driven-forms/react-form-renderer": "^3.6.0", @@ -57593,7 +57595,7 @@ }, "patterns/header": { "name": "@cengage-patterns/header", - "version": "12.0.0-next.1", + "version": "12.0.0-next.2", "license": "MIT", "devDependencies": { "@emotion/react": "^11.13.0", @@ -57624,11 +57626,11 @@ } }, "website/react-magma-docs": { - "version": "5.0.9-next.3", + "version": "5.0.9-next.13", "license": "MIT", "dependencies": { "@babel/plugin-transform-react-jsx": "7.10.4", - "@cengage-patterns/header": "12.0.0-next.1", + "@cengage-patterns/header": "12.0.0-next.2", "@data-driven-forms/react-form-renderer": "^3.6.0", "@emotion/react": "^11.13.0", "@emotion/styled": "^11.13.0", @@ -57636,7 +57638,7 @@ "@mdx-js/react": "^1.5.5", "@react-magma/charts": "^10.0.0-next.1", "@react-magma/dropzone": "10.0.0-next.1", - "@react-magma/schema-renderer": "^10.0.0-next.1", + "@react-magma/schema-renderer": "^10.0.0-next.2", "buble": "0.19.4", "buffer": "^6.0.3", "core-js": "^3.1.4", @@ -68604,9 +68606,9 @@ "version": "4.4.1" }, "axios": { - "version": "1.7.7", - "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.7.tgz", - "integrity": "sha512-S4kL7XrjgBmvdGut0sN3yJxqYzrDOnivkBiN0OFs6hLiUam3UPvswUo0kqGyhqUZGEOytHyumEdXsAkgCOUf3Q==", + "version": "1.7.8", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.8.tgz", + "integrity": "sha512-Uu0wb7KNqK2t5K+YQyVCLM76prD5sRFjKHbJYCP1J7JFGEQ6nN7HWn9+04LAeiJ3ji54lgS/gZCH1oxyrf1SPw==", "requires": { "follow-redirects": "^1.15.6", "form-data": "^4.0.0", @@ -89458,7 +89460,7 @@ "version": "file:website/react-magma-docs", "requires": { "@babel/plugin-transform-react-jsx": "7.10.4", - "@cengage-patterns/header": "12.0.0-next.1", + "@cengage-patterns/header": "12.0.0-next.2", "@data-driven-forms/react-form-renderer": "^3.6.0", "@emotion/react": "^11.13.0", "@emotion/styled": "^11.13.0", @@ -89466,7 +89468,7 @@ "@mdx-js/react": "^1.5.5", "@react-magma/charts": "^10.0.0-next.1", "@react-magma/dropzone": "10.0.0-next.1", - "@react-magma/schema-renderer": "^10.0.0-next.1", + "@react-magma/schema-renderer": "^10.0.0-next.2", "buble": "0.19.4", "buffer": "^6.0.3", "core-js": "^3.1.4", @@ -89716,7 +89718,9 @@ } }, "readable-stream": { - "version": "3.6.0", + "version": "3.6.2", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz", + "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==", "requires": { "inherits": "^2.0.3", "string_decoder": "^1.1.1", diff --git a/package.json b/package.json index 39227728b7..a880c2b4c5 100644 --- a/package.json +++ b/package.json @@ -147,6 +147,7 @@ "ts-node": "^9.1.1", "tsdx": "^0.14.1", "typedoc": "^0.19.2", - "typescript": "^3.9.7" + "typescript": "^3.9.7", + "webpack-filter-warnings-plugin": "1.2.1" } } diff --git a/packages/charts/CHANGELOG.md b/packages/charts/CHANGELOG.md index 12629f8f57..1acfaf41cc 100644 --- a/packages/charts/CHANGELOG.md +++ b/packages/charts/CHANGELOG.md @@ -1,5 +1,11 @@ # @react-magma/charts +## 10.0.0 + +### Patch Changes + +- 02db8e632: fix(Charts): Fix circle styles for `Charts`. + ## 10.0.0-next.2 ### Patch Changes diff --git a/packages/charts/package.json b/packages/charts/package.json index a73c39baf3..d714b367f8 100644 --- a/packages/charts/package.json +++ b/packages/charts/package.json @@ -1,6 +1,6 @@ { "name": "@react-magma/charts", - "version": "10.0.0-next.2", + "version": "10.0.0", "publishConfig": { "access": "public" }, @@ -12,7 +12,8 @@ "types": "dist/index.d.ts", "files": [ "dist", - "src" + "src", + "src/components/CarbonChart/styles.min.css" ], "engines": { "npm": ">=7.3.0", @@ -47,7 +48,11 @@ "identity-obj-proxy": "^3.0.0", "react": "^17.0.2", "react-dom": "^17.0.2", - "react-magma-dom": "^4.7.0-next.1", + "react-magma-dom": "^4.7.0", "react-magma-icons": "^3.0.0" + }, + "exports": { + ".": "./src", + "./src/components/CarbonChart/": "./styles.min.css" } } \ No newline at end of file diff --git a/packages/charts/src/components/LineChart/GraphTooltip.tsx b/packages/charts/src/components/LineChart/GraphTooltip.tsx index 5458269447..68b279c6e4 100644 --- a/packages/charts/src/components/LineChart/GraphTooltip.tsx +++ b/packages/charts/src/components/LineChart/GraphTooltip.tsx @@ -9,7 +9,6 @@ import { import styled from '@emotion/styled'; - const StyledGraphTooltip = styled(StyledTooltip)` background: ${(props: any) => props.theme.colors.neutral100}; border: 1px solid ${(props: any) => props.theme.colors.neutral300}; diff --git a/packages/dropzone/CHANGELOG.md b/packages/dropzone/CHANGELOG.md index d328c48415..2bdaa4fb7f 100644 --- a/packages/dropzone/CHANGELOG.md +++ b/packages/dropzone/CHANGELOG.md @@ -1,5 +1,7 @@ # Change Log +## 10.0.0 + ## 10.0.0-next.1 ### Patch Changes diff --git a/packages/dropzone/package.json b/packages/dropzone/package.json index 9738099f5c..1cf5a7b048 100644 --- a/packages/dropzone/package.json +++ b/packages/dropzone/package.json @@ -1,6 +1,6 @@ { "name": "@react-magma/dropzone", - "version": "10.0.0-next.1", + "version": "10.0.0", "publishConfig": { "access": "public" }, @@ -42,7 +42,7 @@ "@emotion/styled": "^11.13.0", "react": "^17.0.2", "react-dom": "^17.0.2", - "react-magma-dom": "^4.7.0-next.1", + "react-magma-dom": "^4.7.0", "react-magma-icons": "^3.0.0" } } diff --git a/packages/react-magma-dom/CHANGELOG.md b/packages/react-magma-dom/CHANGELOG.md index cd5de80725..2cf4959e65 100644 --- a/packages/react-magma-dom/CHANGELOG.md +++ b/packages/react-magma-dom/CHANGELOG.md @@ -1,30 +1,137 @@ -## 4.7.0-next.53 +## 4.7.0 -## 4.7.0-next.55 +## 4.7.0 -### Patch Changes +### Minor Changes -- 4ed9e5c7d: fix(TreeView): Add more unit tests +- 02db8e632: feat(Stepper): Add vertical orientation for `Stepper`. +- 02db8e632: feat(Input): Update colors for error message, icon and border in dark mode. +- 02db8e632: feat(Input): Update additional children position based on label position +- 02db8e632: feat(Tabs/NavTabs): Add support for overwriting text transform with `textTransform` prop. +- 02db8e632: feat(ProgressBar): Update colors from danger200/success200 to danger300/success300 in dark mode. +- 02db8e632: feat(Combobox, Select, Date picker, Dropdown): Support viewport detection and positioning +- 02db8e632: feat(Button): Add `success` button color +- 02db8e632: feat(TreeView): Add support for `isDisabled` trees and items +- 02db8e632: feat(TreeView): `onExpandedChange` returns an array of expanded IDs +- 02db8e632: fix(TreeView): Support "show all" button inside TreeView component +- 02db8e632: feat(TreeView): Add ability to update selected items from outside the tree -## 4.7.0-next.54 +### Patch Changes + +- 02db8e632: fix(Breadcrumb): Hide SVGs from screen readers by adding `aria-hidden="true"` to the `span` element that wraps the SVGs. +- 02db8e632: fix(Button): Remove animation presses for `Button`. +- 02db8e632: fix(CheckBox): Fix unreadable labels in `CheckBox` for screen readers. +- 02db8e632: fix(CheckBox): Hide SVGs from screen readers by adding `aria-hidden="true"` to the `span` element that wraps the SVGs. +- 02db8e632: fix(Combobox): Fix focus issue after triggering the clear button +- 02db8e632: fix(DatePicker): Fix navigation and accessibility issues. +- 02db8e632: fix(DatePicker): Remove shortcut to open `HelperInformation`. +- 02db8e632: fix(DatePicker): Add `aria-label` to calendar header columns. +- 02db8e632: fix(Drawer): Fix trapped focus +- 02db8e632: fix(Dropdown): Fix a11y for active index +- 02db8e632: fix(Dropdown): Hide SVGs from screen readers by adding `aria-hidden="true"` to the `svg` elements. +- 02db8e632: fix(List): Hide SVGs from assistive tech by adding `aria-hidden="true"` to the `span` element that wraps the SVGs. +- 02db8e632: fix(ProgressBar): Remove animation if the user has `prefers-reduced-motion` media query set. +- 02db8e632: fix(Search): Fix the disappearing focus on the button when loading +- 02db8e632: fix(Select): Fix accessibility issue for `clearIndicator` inside `SelectTriggerButton`. +- 02db8e632: fix(TreeView): Improve screenreader accessibility +- 02db8e632: fix(useFocusLock): Fix the `useFocusLock` hook if the first or last element is disabled. +- 02db8e632: chore(Dropdown): Deprecate `dropDirection` & `alignment` props. These are no longer necessary with viewport detection support. +- 02db8e632: fix(Dropdown): Fix the dropdown closing on second button click in Safari +- 02db8e632: fix(Heading): Add the `noTopMargin` and `noBottomMargin` props to the `Heading` component. +- 02db8e632: fix(BlockQuote): Fix border color respecting the `Theme` context. +- 02db8e632: fix(TreeView): Fix initialExpanded items expanding all parents +- 02db8e632: fix(Input): Update focus style on inputs. +- 02db8e632: fix(ListItem): Fix icon colors respecting the `Theme` context. +- 02db8e632: fix(Modal): Fix modal losing focus order with dynamic content. +- 02db8e632: fix(Select): Update outline offset on multiselected items +- 02db8e632: fix(Select): Fix placeholder color. +- 02db8e632: chore: Remove `.stories.` files from the production bundle. +- 02db8e632: fix(Tabs): Center preselected `Tab` on the `Scrollable Tabs`. +- 02db8e632: fix(TimePicker): Fix AM/PM width in the `TimePicker`. +- 02db8e632: fix(Toast): Fix loading ring alignment when zooming in Safari +- 02db8e632: fix(Heading): Update margins for `heading2XLarge` +- 02db8e632: fix(Input): Improve descriptions for `inputWrapperStyle` and `containerStyle` props. +- 02db8e632: fix(Input): Remove `flex-shrink` to allow inputs to shrink as needed. +- 02db8e632: fix(Search): Fix overlapping content issue with the clear button +- 02db8e632: fix(Combobox/Select:): Fix focus color for selected items when using `isMulti` + `isInverse` +- 02db8e632: fix(Tag): Update focus state ### Minor Changes - 4bec9c320: fix(TreeView): Support "show all" button inside TreeView component +- 78fc319ba: feat(TreeView): onExpandedChange returns an array of expanded IDs. +- 360cf8d29: feat(Input): Update colors for error message, icon and border in dark mode. +- d8662d6f6: feat(Input): Update Input additional children position based on label position. +- 5a928ea59: feat(ProgressBar): Update colors from danger200/success200 to danger300/success300 in dark mode. +- 40708c7c6: feat(Tabs, NavTabs): Add support for overwriting `TextTransform`: add `textTransform` prop. +- 1caced455: feat(TreeView): Add support for isDisabled. +- 68ff224cc: feat(Stepper): Add vertical orientation for `Stepper`. +- e926d3ddf: feat(button): Add `success` button. +- cdb304158: feat(Combobox, Select, Date picker, Dropdown): Update viewport detection/positioning. +- c815b89ac: feat(TreeView): Add ability to change items selection outside. ### Patch Changes - e432f97c9: fix(Input): Improve descriptions for `inputWrapperStyle` and `containerStyle` props. +- 4ed9e5c7d: fix(TreeView): Add more unit tests +- b8364bbca: fix(ToggleButtonGroup): Fix `enforced` and `exclusive` props. +- 6a8ed217b: fix(Tag): Update tag focus state. +- cf959a580: fix(Combobox/Select:): Fix focus color for selected items when using `isMulti` + `isInverse`. +- a163f4230: fix(Heading): Update margins for `heading2XLarge`. +- f37d5c4af: fix(TreeView): Fix undefined problem. +- febf617fc: fix(TreeView): Fix undefined problem. +- fbae9ce39: fix(Input): Style update: Fix HelpLink position on inputs. +- 5e39ab2b4: fix(Select): Fix multi Select selected item outline. +- 8004c9f55: fix(DatePicker): Add `aria-label` to calendar header columns. +- 3a97fe97f: patch(Heading): Add the `noTopMargin` and `noBottomMargin` props to the `Heading` component. +- 45be51cfc: fix(TreeView): Fix undefined problem. +- acbec5c8d: fix(Dropdown): Hide SVGs from screen readers by adding `aria-hidden="true"` to the `svg` elements. +- 08deb434d: fix(List): Hide SVGs from assistive tech by adding `aria-hidden="true"` to the `span` element that wraps the SVGs. +- a95d26ca7: fix(CheckBox): Hide SVGs from screen readers by adding `aria-hidden="true"` to the `span` element that wraps the SVGs. +- 044da059c: fix(TimePicker): Fixed AM/PM width in the `TimePicker`. +- f885d5906: fix(Breadcrumb): Hide SVGs from screen readers by adding `aria-hidden="true"` to the `span` element that wraps the SVGs. +- 7887c50b9: chore(dropdown): Deprecate `dropDirection` & `alignment` props. These are no longer necessary with viewport detection support. +- ddf476a38: fix(Tabs): Center preselected `Tab` on the `Scrollable Tabs`. +- e447c8af8: fix(Toast): Fixed loading ring alignment when zooming in Safari. +- d7423ebe5: fix(Button): Remove animation presses for `Button`. +- eb5f11fd8: fix(TreeView): Fix TreeView issues from verification +- 270e1f4ff: fix(Select): Fix placeholder color. +- 3c94afd1a: fix(Input): Style update: Focus style on inputs. +- eb2b3ab1e: fix(DatePicker): Fix navigation and accessibility issues. +- 2157b4708: fix(CheckBox): Fix for unreadable labels in `CheckBox` for screen readers. +- 7adf69a9f: fix(.srories.): Remove `.stories.` files from the production bundle. +- c0aecada5: fix(useFocusLock): Fix the `useFocusLock` hook if the first or last element is disabled. +- 1da99002f: fix(search): Fix the overlapping content issue around the clear button +- ac6ff21bb: fix(BlockQuote): Fix border color respecting the `Theme` context. +- ac6ff21bb: fix(ListItem): Fix icon colors respecting the `Theme` context. +- b3fcc32b1: fix(combobox): Fix focus issue after triggering the clear button +- 7d8006fe1: fix(ProgressBar): Remove animation if the user has `prefers-reduced-motion` media query set. +- 35d9507ad: fix(drawer): Fix trapped focus in the drawer +- 1d1110dc3: fix(dropdown): Fix active index communication handled programmatically +- fbfd75e8b: fix(Modal): Fix modal losing focus order with dynamic content. +- d109847d8: fix(dropdown): Fix the dropdown closing on the second button click in `Safari` +- 24680b288: fix(TreeView): Fix initial expanded items should expand all parents. +- 631d01024: fix(TreeView): Fix switching to Focus Mode inside `TreeView`. +- 482268a7e: fix(Input): Remove flex-shrink to allow inputs to shrink as needed. +- a328ebe29: fix(Select): Fix the accessibility issue for `clearIndicator` inside `SelectTriggerButton`. +- 5c3d7fce3: fix(search):Fix the disappearing focus on the button when loading. ## 4.6.0 ### Minor Changes +- ca58152cb: feat(TreeView): Add support for `checkChildren`, `checkParents` props - fdf2dc929: feat(Modal): New `headerRef` prop that returns a reference to the header element - ca58152cb: feat(TreeView): Add support for `checkChildren`, `checkParents` props ### Patch Changes +- f45bdde78: fix(DatePicker): Remove shortcut to open `HelperInformation`. +- dc307446a: fix(Accordion): Fix screen scroll behavior during accordion navigation +- 6b413fb77: fix(List): Updated support for nested items +- d4164cacb: fix(Modal): Fix focus issue when using `isBackgroundClickDisabled` +- 84a8a17d6: fix(DatePicker): Fix error when using both `onChange` and `onDateChange` +- 48b7a5539: fix(Breadcrumbs): Fixed alignment issue between elements. - 616cbf9a0: fix(BreadCrumb): Improved accessibility by replace span with link to fix focus - aced1dd74: fix(DataGrid): Improved accessibility by adding `aria-live="polite"` and fixing labelText for checkboxes when `isSelectable={true}` - 9d840d863: fix(Indeterminate Checkbox): Improved accessibility for `Indeterminate` status @@ -42,7 +149,7 @@ ### Minor Changes -- ae668a3e5: chore: Updating emotion to v11 **Note: adopters will need to upgrade** their packages to the following versions `"@emotion/react": "^11.13.0", "@emotion/styled": "^11.13.0"`. Notice that `@emotion/core` has been replaced with `@emotion/styled` and that's the only breaking change, unless your project is using `@emotion/css` which may not work the same. Please review the emotion documentation when upgrading. +- ae668a3e5: chore: Updating emotion to v11. **Note: adopters will need to upgrade** their packages to the following versions `"@emotion/react": "^11.13.0", "@emotion/styled": "^11.13.0"`. Notice that `@emotion/core` has been replaced with `@emotion/styled` and that's the only breaking change. - 9e38e9e7f: feat(Stepper): New Stepper component. Displays step based content for use in multi-step interfaces. ### Patch Changes diff --git a/packages/react-magma-dom/package.json b/packages/react-magma-dom/package.json index 3d27a9d69a..337998997e 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.55", + "version": "4.7.0", "description": "", "main": "dist/index.js", "module": "dist/esm/index.js", diff --git a/packages/react-magma-dom/src/components/Accordion/AccordionPanel.tsx b/packages/react-magma-dom/src/components/Accordion/AccordionPanel.tsx index 0eace4ee9a..ca6ae86bdb 100644 --- a/packages/react-magma-dom/src/components/Accordion/AccordionPanel.tsx +++ b/packages/react-magma-dom/src/components/Accordion/AccordionPanel.tsx @@ -20,6 +20,7 @@ export interface AccordionPanelProps theme?: ThemeInterface; } + const StyledPanel = styled.div` background: transparent; color: ${props => diff --git a/packages/react-magma-dom/src/components/Breadcrumb/BreadcrumbItem.tsx b/packages/react-magma-dom/src/components/Breadcrumb/BreadcrumbItem.tsx index 785b24daf8..91221b5676 100644 --- a/packages/react-magma-dom/src/components/Breadcrumb/BreadcrumbItem.tsx +++ b/packages/react-magma-dom/src/components/Breadcrumb/BreadcrumbItem.tsx @@ -36,7 +36,6 @@ const StyledLink = styled.a<{ isInverse?: boolean }>` : props.theme.colors.neutral700}; text-decoration: none; cursor: default; - &:hover, &:focus { color: ${props => diff --git a/packages/react-magma-dom/src/components/DatePicker/CalendarMonth.tsx b/packages/react-magma-dom/src/components/DatePicker/CalendarMonth.tsx index 50359c6b15..5cac29d1b6 100644 --- a/packages/react-magma-dom/src/components/DatePicker/CalendarMonth.tsx +++ b/packages/react-magma-dom/src/components/DatePicker/CalendarMonth.tsx @@ -21,6 +21,7 @@ interface CalendarMonthProps { setDateFocused?: (value: boolean) => void; } + const CalendarContainer = styled.div<{ isInverse?: boolean }>` background: ${props => props.isInverse diff --git a/packages/react-magma-dom/src/components/DatePicker/DatePicker.test.js b/packages/react-magma-dom/src/components/DatePicker/DatePicker.test.js index cf984627c9..cd1b2fe965 100644 --- a/packages/react-magma-dom/src/components/DatePicker/DatePicker.test.js +++ b/packages/react-magma-dom/src/components/DatePicker/DatePicker.test.js @@ -180,9 +180,9 @@ describe('Date Picker', () => { userEvent.keyboard('[ArrowLeft]'); expect(startDateButton).toHaveFocus(); - + userEvent.keyboard('[ArrowRight]'); - + expect(startDateButton).not.toHaveFocus(); expect(selectedDateButton).toHaveFocus(); @@ -194,9 +194,7 @@ describe('Date Picker', () => { it('should lock focus inside', () => { const valueDate = new Date('January 1, 2020'); - const { getByText, getByRole } = render( - - ); + const { getByText, getByRole } = render(); const selectedDateButton = getByText(1); const button = getByRole('button'); diff --git a/packages/react-magma-dom/src/components/Dropdown/Dropdown.tsx b/packages/react-magma-dom/src/components/Dropdown/Dropdown.tsx index ab8b9075d1..5947b3a1a8 100644 --- a/packages/react-magma-dom/src/components/Dropdown/Dropdown.tsx +++ b/packages/react-magma-dom/src/components/Dropdown/Dropdown.tsx @@ -266,7 +266,7 @@ export const Dropdown = React.forwardRef( ['left-end', 'left-end'], ]); - // dropDirection & alignment are deprecated. + // dropDirection & alignment are deprecated. // this fallback can be removed when the props are deleted. const contentPosition = `${dropDirection}-${alignment}`; diff --git a/packages/react-magma-dom/src/components/Dropdown/DropdownContent.tsx b/packages/react-magma-dom/src/components/Dropdown/DropdownContent.tsx index 50c6bcd62e..6de656259d 100644 --- a/packages/react-magma-dom/src/components/Dropdown/DropdownContent.tsx +++ b/packages/react-magma-dom/src/components/Dropdown/DropdownContent.tsx @@ -1,7 +1,11 @@ import * as React from 'react'; import { css } from '@emotion/react'; import { Card } from '../Card'; -import { DropdownAlignment, DropdownContext, DropdownDropDirection } from './Dropdown'; +import { + DropdownAlignment, + DropdownContext, + DropdownDropDirection, +} from './Dropdown'; import { ThemeContext } from '../../theme/ThemeContext'; import { useForkedRef } from '../../utils'; import styled from '@emotion/styled'; @@ -40,10 +44,11 @@ const StyledCard = styled(Card)<{ transition: opacity 0.3s; white-space: nowrap; &:focus { - outline: 2px solid ${props => - props.isInverse - ? props.theme.colors.focusInverse - : props.theme.colors.focus}; + outline: 2px solid + ${props => + props.isInverse + ? props.theme.colors.focusInverse + : props.theme.colors.focus}; outline-offset: 0; } diff --git a/packages/react-magma-dom/src/components/Input/Input.stories.tsx b/packages/react-magma-dom/src/components/Input/Input.stories.tsx index 7fa03756f3..4329385726 100644 --- a/packages/react-magma-dom/src/components/Input/Input.stories.tsx +++ b/packages/react-magma-dom/src/components/Input/Input.stories.tsx @@ -181,10 +181,7 @@ export const HelpLink = args => { }; return ( <> - + { /> - + { /> - - + + { diff --git a/packages/react-magma-dom/src/components/Select/ItemsList.tsx b/packages/react-magma-dom/src/components/Select/ItemsList.tsx index 57d1c052e6..8f6ca26cb4 100644 --- a/packages/react-magma-dom/src/components/Select/ItemsList.tsx +++ b/packages/react-magma-dom/src/components/Select/ItemsList.tsx @@ -98,7 +98,7 @@ export function ItemsList(props: ItemsListProps) { } return ( -
+
= args => { Item Content Five , ]} - > - + > ); diff --git a/packages/react-magma-dom/src/components/TreeView/TreeItem.tsx b/packages/react-magma-dom/src/components/TreeView/TreeItem.tsx index aad3a993ac..26195c15af 100644 --- a/packages/react-magma-dom/src/components/TreeView/TreeItem.tsx +++ b/packages/react-magma-dom/src/components/TreeView/TreeItem.tsx @@ -202,8 +202,13 @@ export const TreeItem = React.forwardRef( const theme = React.useContext(ThemeContext); const isInverse = useIsInverse(); - const { selectable, hasIcons, onExpandedChange, itemToFocus, handleExpandedChange } = - React.useContext(TreeViewContext); + const { + selectable, + hasIcons, + onExpandedChange, + itemToFocus, + handleExpandedChange, + } = React.useContext(TreeViewContext); const { contextValue, handleClick, handleKeyDown } = useTreeItem( props, @@ -299,8 +304,8 @@ export const TreeItem = React.forwardRef( event.preventDefault(); onExpandedChange && - typeof onExpandedChange === 'function' && - handleExpandedChange(event, itemId); + typeof onExpandedChange === 'function' && + handleExpandedChange(event, itemId); }; const tabIndex = React.useMemo(() => { 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 8d048f47d1..21328f955d 100644 --- a/packages/react-magma-dom/src/components/TreeView/TreeView.test.js +++ b/packages/react-magma-dom/src/components/TreeView/TreeView.test.js @@ -98,30 +98,56 @@ const getTreeItemsWithDisabled = props => ( const getTreeItemsWithDisabledChildren = props => ( - - + + ); - const TreeItemsMultiLevelControlledOutside = props => { const apiRef = React.useRef(null); const [items, setItems] = React.useState([]); - + const onSelectedItemChange = items => { setItems(items); - props.onSelectedItemChange(items) - } + props.onSelectedItemChange(items); + }; return ( <> - - +