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] 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 0000000000..acfe3bd4b8 --- /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 8cf79dc264..247b5eb289 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 c4a26c60c2..0ddc291f8c 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 1f0f2f9fc8..e19c8ca891 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 b7eb337673..a22003a781 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 0491288819..84603c70da 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 a8b1536729..72e31b6dfa 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 d59e2f2c50..478aef5685 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 93e3c35200..66d4a8c180 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 908b2c9ef8..c3a2c5abea 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 c26605d09e..87a95ca25c 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 bcfa2a55d3..c071a8c4c9 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 2c20f08ef3..4369b42ce3 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 336054e3e3..fc1684fbc8 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 522aabb6f6..7610d13783 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 f8f0e74d5c..ab0ef5e19d 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 ab0709bd34..6265265b60 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 4ca4c21a06..2d863967b2 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 b1087ca599..9cb3426cbf 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/).