@workday/canvas-kit-docs 13.0.0-alpha.996-next.0 → 13.0.0

package/dist/mdx/preview-react/information-highlight/examples/Informational.tsx

@@ -0,0 +1,55 @@
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight';
+import {system} from '@workday/canvas-tokens-web';
+import {createStyles} from '@workday/canvas-kit-styling';
+
+const contentTextStyles = createStyles({
+  margin: 0,
+});
+
+const contentListStyles = createStyles({
+  listStyle: 'inside',
+  marginInlineStart: 0,
+  marginBlockStart: system.space.x2,
+  marginBlockEnd: 0,
+  padding: 0,
+});
+
+export default () => {
+  return (
+    <Flex flexDirection={'column'} gap={system.space.x2}>
+      <InformationHighlight variant={'informational'}>
+        <InformationHighlight.Icon />
+        <InformationHighlight.Heading> Informational Highlight </InformationHighlight.Heading>
+        <InformationHighlight.Body>
+          <p className={contentTextStyles}>
+            This is a low-emphasis, informational callout. You should use this for nice-to-have
+            information, such as:
+          </p>
+          <ul className={contentListStyles}>
+            <li>tangential information or context</li>
+            <li>related features</li>
+            <li>additional opportunities</li>
+          </ul>
+        </InformationHighlight.Body>
+        <InformationHighlight.Link href="#hyperlink">Learn More</InformationHighlight.Link>
+      </InformationHighlight>
+      <InformationHighlight variant={'informational'} emphasis={'high'}>
+        <InformationHighlight.Icon />
+        <InformationHighlight.Heading> Informational Highlight </InformationHighlight.Heading>
+        <InformationHighlight.Body>
+          <p className={contentTextStyles}>
+            This is a high-emphasis, informational callout. You should use this for nice-to-have
+            information, such as:
+          </p>
+          <ul className={contentListStyles}>
+            <li>tangential information or context</li>
+            <li>related features</li>
+            <li>additional opportunities</li>
+          </ul>
+        </InformationHighlight.Body>
+        <InformationHighlight.Link href="#hyperlink">Learn More</InformationHighlight.Link>
+      </InformationHighlight>
+    </Flex>
+  );
+};

package/dist/mdx/preview-react/{InformationHighlight → information-highlight}/examples/RTL.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import {Flex} from '@workday/canvas-kit-react/layout';
-import {InformationHighlight} from '@workday/canvas-kit-preview-react/InformationHighlight';
+import {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight';
 import {CanvasProvider, ContentDirection} from '@workday/canvas-kit-react/common';
 import {system} from '@workday/canvas-tokens-web';
 export default () => {

package/dist/mdx/preview-react/loading-sparkles/examples/Basic.tsx

@@ -35,7 +35,7 @@ export default () => {
   };
 
   return (
-    <>
+    <div>
       <div className={containerStyles}>
         {quote && <Text cs={{maxWidth: '60ch'}}>{quote}</Text>}
         <AriaLiveRegion>
@@ -46,7 +46,7 @@ export default () => {
         </AriaLiveRegion>
       </div>
       <SecondaryButton onClick={handleClick}>Generate Quote</SecondaryButton>
-    </>
+    </div>
   );
 };
 

package/dist/mdx/preview-react/multi-select/examples/Basic.tsx

@@ -9,7 +9,7 @@ export default () => {
   return (
     <>
       <MultiSelect items={items} initialSelectedIds={['Olives', 'Onions', 'Pepperoni']}>
-        <FormField orientation="horizontal">
+        <FormField orientation="horizontalStart">
           <FormField.Label>Toppings</FormField.Label>
           <FormField.Input
             as={MultiSelect.Input}

package/dist/mdx/preview-react/multi-select/examples/Complex.tsx

@@ -34,7 +34,7 @@ export default () => {
         >
           <main className={mainContentStyles}>
             <MultiSelect items={items} getId={i => i.id} getTextValue={i => i.text}>
-              <FormField orientation="horizontal">
+              <FormField orientation="horizontalStart">
                 <FormField.Label>Toppings</FormField.Label>
                 <FormField.Input
                   as={MultiSelect.Input}

package/dist/mdx/preview-react/multi-select/examples/Controlled.tsx

@@ -41,7 +41,7 @@ export default () => {
       >
         <Flex gap="s" flexDirection="column">
           <MultiSelect items={items}>
-            <FormField orientation="horizontal">
+            <FormField orientation="horizontalStart">
               <FormField.Label>Toppings</FormField.Label>
               <FormField.Input
                 as={MultiSelect.Input}

package/dist/mdx/preview-react/multi-select/examples/Icons.tsx

@@ -21,7 +21,7 @@ const items = [
 export default () => {
   return (
     <MultiSelect items={items}>
-      <FormField orientation="horizontal">
+      <FormField orientation="horizontalStart">
         <FormField.Label>Controls</FormField.Label>
         <FormField.Input
           as={MultiSelect.Input}

package/dist/mdx/preview-react/multi-select/examples/Searching.tsx

@@ -83,7 +83,7 @@ export default () => {
         >
           <main className={mainContentStyles}>
             <MultiSelect model={model}>
-              <FormField orientation="horizontal">
+              <FormField orientation="horizontalStart">
                 <FormField.Label>Fruits</FormField.Label>
                 <FormField.Input
                   as={MultiSelect.SearchInput}

package/dist/mdx/preview-react/pill/Pill.mdx

@@ -6,6 +6,7 @@ import Basic from './examples/Basic';
 import WithCount from './examples/WithCount';
 import WithRemovable from './examples/WithRemovable';
 import WithList from './examples/WithList';
+import CustomStyles from './examples/CustomStyles';
 
 
 # Canvas Kit Pill
@@ -27,7 +28,7 @@ information to help with scanning and organization.
 
 ### Basic Pills
 
-By default a Pill is considered interactive, therefore it's default variant is `default`.All leading
+By default a Pill is considered interactive, therefore it's default variant is `default`. All leading
 elements (icons or avatars) are intended to be descriptive, helping support the label. Do not rely
 on the leading element to indicate the interaction behavior.
 
@@ -35,7 +36,11 @@ on the leading element to indicate the interaction behavior.
 
 You can render an icon inside the `Pill` with `Pill.Icon`. It will render a `plusIcon` by default,
 but it can be customized by providing an icon to the `icon` prop. Because it uses `SystemIcon` under
-the hood, you also have to all `SystemIconProps`.
+the hood, you also have access to all `SystemIconProps`.
+
+#### Accessibility
+
+You must provide an `aria-label` to the `Pill.Icon` for proper accessibility.
 
 <ExampleCodeBlock code={Basic} />
 
@@ -49,19 +54,15 @@ You can render an avatar image inside the `Pill` with `Pill.Avatar`. It should a
 #### Count
 
 The count appears after the label. It is usually associated with the label. If you have a category,
-the count will dirrectly correlate to that category.
+the count will directly correlate to that category.
 
 <ExampleCodeBlock code={WithCount} />
 
 ### Read Only
 
-If the `Pill` has `variant='readOnly'`, it will look like a read-only `Pill`. This is a
-non-interactive element that is used to display information.
+The `readOnly` variant is a non-interactive element that is used to display information. 
 
-> **_NOTE:_** `maxWidth` measures the width of the `Pill.Label` (or text) and not the width of the
-> entire `Pill`. By default, this `maxWidth` is set to `200px` and the text will be truncated with
-> an ellipsis and render an OverflowTooltip on hover and focus. This max width can be changed by
-> providing a `maxWidth` prop on the Pill.
+You can define a read only `Pill` by providing a `variant='readOnly'` prop.
 
 <ExampleCodeBlock code={WithReadOnly} />
 
@@ -97,6 +98,14 @@ accordingly.
 
 <ExampleCodeBlock code={WithList} />
 
+### Custom Styles
+
+`Pill` supports custom styling via the `cs` prop. For more information, check our
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--docs)
+or view the example below.
+
+<ExampleCodeBlock code={CustomStyles} />
+
 ## Component API
 
 <SymbolDoc name="Pill" fileName="/preview-react/" />

package/dist/mdx/preview-react/pill/examples/Basic.tsx

@@ -2,24 +2,30 @@ import React from 'react';
 
 import {Pill} from '@workday/canvas-kit-preview-react/pill';
 
-import {Box, Flex} from '@workday/canvas-kit-react/layout';
 import {BodyText} from '@workday/canvas-kit-react/text';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const flexStyles = createStyles({
+  display: 'flex',
+  gap: system.space.x2,
+});
 
 export default () => {
   const [text, setText] = React.useState('');
   return (
-    <Box>
-      <Flex gap="xxs">
+    <div>
+      <div className={flexStyles}>
         <Pill onClick={() => setText('The first pill is clicked!')}>
-          <Pill.Icon />
+          <Pill.Icon aria-label="Add user" />
           <Pill.Label>Regina Skeltor</Pill.Label>
         </Pill>
-        <Pill onClick={() => setText('The second pill is clicked!')} disabled>
-          <Pill.Icon />
+        <Pill disabled>
+          <Pill.Icon aria-label="Add user" />
           <Pill.Label>Regina Skeltor</Pill.Label>
         </Pill>
-      </Flex>
+      </div>
       <BodyText size="medium">{text}</BodyText>
-    </Box>
+    </div>
   );
 };

package/dist/mdx/preview-react/pill/examples/CustomStyles.tsx

@@ -0,0 +1,45 @@
+import {Pill, pillCountStencil, pillStencil} from '@workday/canvas-kit-preview-react/pill';
+
+import {createStencil} from '@workday/canvas-kit-styling';
+import {base} from '@workday/canvas-tokens-web';
+import {systemIconStencil} from '@workday/canvas-kit-react/icon';
+
+const customPillStencil = createStencil({
+  base: {
+    [pillStencil.vars.background]: base.berrySmoothie300,
+    [pillStencil.vars.border]: base.berrySmoothie500,
+    [pillStencil.vars.label]: base.frenchVanilla100,
+    [systemIconStencil.vars.color]: base.frenchVanilla100,
+    [pillCountStencil.vars.backgroundColor]: base.berrySmoothie400,
+
+    '&:hover, &.hover': {
+      [pillStencil.vars.background]: base.berrySmoothie400,
+      [pillStencil.vars.label]: base.frenchVanilla100,
+      [pillCountStencil.vars.backgroundColor]: base.berrySmoothie500,
+      [systemIconStencil.vars.color]: base.frenchVanilla100,
+    },
+    '&:active, &.active': {
+      [pillStencil.vars.background]: base.berrySmoothie400,
+      [pillStencil.vars.label]: base.frenchVanilla100,
+      [systemIconStencil.vars.color]: base.frenchVanilla100,
+      [pillCountStencil.vars.backgroundColor]: base.berrySmoothie500,
+    },
+    '&:disabled, &.disabled': {
+      [pillStencil.vars.background]: base.berrySmoothie400,
+      [pillStencil.vars.label]: base.frenchVanilla100,
+      [systemIconStencil.vars.color]: base.frenchVanilla100,
+    },
+  },
+});
+
+export default () => {
+  return (
+    <div>
+      <Pill cs={customPillStencil()}>
+        <Pill.Icon aria-label="Add user" />
+        <Pill.Label>Custom Pill Color</Pill.Label>
+        <Pill.Count>10</Pill.Count>
+      </Pill>
+    </div>
+  );
+};

package/dist/mdx/preview-react/pill/examples/WithAvatar.tsx

@@ -3,24 +3,30 @@ import React from 'react';
 import {Pill} from '@workday/canvas-kit-preview-react/pill';
 // @ts-ignore: Cannot find module error
 import testAvatar from './test-avatar.png';
-import {Flex, Box} from '@workday/canvas-kit-react/layout';
 import {BodyText} from '@workday/canvas-kit-react/text';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const flexStyles = createStyles({
+  display: 'flex',
+  gap: system.space.x2,
+});
 
 export default () => {
   const [text, setText] = React.useState('');
   return (
-    <Box>
-      <Flex gap="xxs">
+    <div>
+      <div className={flexStyles}>
         <Pill onClick={() => setText('The first pill is clicked!')}>
-          <Pill.Avatar url={testAvatar} />
-          Regina Skeltor
+          <Pill.Avatar altText="Avatar" url={testAvatar} />
+          <Pill.Label>Regina Skeltor</Pill.Label>
         </Pill>
-        <Pill onClick={() => setText('The second pill is clicked!')} disabled maxWidth={50}>
-          <Pill.Avatar url={testAvatar} />
-          Regina Skeltor
+        <Pill disabled>
+          <Pill.Avatar altText="Avatar" />
+          <Pill.Label>Regina Skeltor</Pill.Label>
         </Pill>
-      </Flex>
+      </div>
       <BodyText size="medium">{text}</BodyText>
-    </Box>
+    </div>
   );
 };

package/dist/mdx/preview-react/pill/examples/WithCount.tsx

@@ -1,23 +1,29 @@
 import React from 'react';
 import {Pill} from '@workday/canvas-kit-preview-react/pill';
-import {Flex, Box} from '@workday/canvas-kit-react/layout';
 import {BodyText} from '@workday/canvas-kit-react/text';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const flexStyles = createStyles({
+  display: 'flex',
+  gap: system.space.x2,
+});
 
 export default () => {
   const [text, setText] = React.useState('');
   return (
-    <Box>
-      <Flex gap="xxs">
+    <div>
+      <div className={flexStyles}>
         <Pill onClick={() => setText('The first pill is clicked!')}>
           Shoes
           <Pill.Count>30</Pill.Count>
         </Pill>
-        <Pill onClick={() => setText('The second pill is clicked!')} disabled>
+        <Pill disabled>
           Shoes
           <Pill.Count>30</Pill.Count>
         </Pill>
-      </Flex>
+      </div>
       <BodyText size="medium">{text}</BodyText>
-    </Box>
+    </div>
   );
 };

package/dist/mdx/preview-react/pill/examples/WithList.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 
 import {Pill} from '@workday/canvas-kit-preview-react/pill';
-import {Flex} from '@workday/canvas-kit-react/layout';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 const data = [
   'Shoes',
@@ -17,19 +18,28 @@ const data = [
   'Jewelry',
 ];
 
+const flexWrapStyles = createStyles({
+  display: 'flex',
+  flexWrap: 'wrap',
+  gap: system.space.x2,
+});
+
 export default () => {
   const [items, setItems] = React.useState(data);
 
   return (
-    <Flex flexWrap="wrap">
+    <div className={flexWrapStyles}>
       {items.map((cat, index) => {
         return (
-          <Pill key={index} variant="removable" marginBottom="xxs" marginInlineEnd="xxs">
+          <Pill key={index} variant="removable">
             <Pill.Label>{cat}</Pill.Label>
-            <Pill.IconButton onClick={() => setItems(items.filter(i => i !== cat))} />
+            <Pill.IconButton
+              aria-label="Remove"
+              onClick={() => setItems(items.filter(i => i !== cat))}
+            />
           </Pill>
         );
       })}
-    </Flex>
+    </div>
   );
 };

package/dist/mdx/preview-react/pill/examples/WithReadOnly.tsx

@@ -1,15 +1,18 @@
-import * as React from 'react';
-
 import {Pill} from '@workday/canvas-kit-preview-react/pill';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
-import {Flex} from '@workday/canvas-kit-react/layout';
+const flexStyles = createStyles({
+  display: 'flex',
+  gap: system.space.x2,
+});
 
 export default () => (
-  <Flex gap="xxs" id="read-only-list">
+  <div className={flexStyles} id="read-only-list">
     <Pill variant="readOnly">Read-only</Pill>
     <Pill variant="readOnly" maxWidth={250}>
       Read-only but with super long text in case you want to read a paragraph in a Pill which we
       don't recommend
     </Pill>
-  </Flex>
+  </div>
 );

package/dist/mdx/preview-react/pill/examples/WithRemovable.tsx

@@ -3,29 +3,41 @@ import React from 'react';
 import {Pill} from '@workday/canvas-kit-preview-react/pill';
 // @ts-ignore: Cannot find module error
 import testAvatar from './test-avatar.png';
-import {Box, Flex} from '@workday/canvas-kit-react/layout';
 import {BodyText} from '@workday/canvas-kit-react/text';
+import {system} from '@workday/canvas-tokens-web';
+import {createStyles} from '@workday/canvas-kit-styling';
+
+const flexStyles = createStyles({
+  display: 'flex',
+  gap: system.space.x2,
+});
 
 export default () => {
   const [text, setText] = React.useState('');
   return (
-    <Box>
-      <Flex gap="xxs">
+    <div>
+      <div className={flexStyles}>
         <Pill variant="removable">
-          Pink Shirts
-          <Pill.IconButton onClick={() => setText('The first pill is clicked!')} />
+          <Pill.Label>Pink Shirts</Pill.Label>
+          <Pill.IconButton
+            aria-label="Remove"
+            onClick={() => setText('The first pill is clicked!')}
+          />
         </Pill>
         <Pill variant="removable">
-          <Pill.Avatar url={testAvatar} />
-          Carolyn Grimaldi
-          <Pill.IconButton onClick={() => setText('The second pill is clicked!')} />
+          <Pill.Avatar altText="Avatar" url={testAvatar} />
+          <Pill.Label>Carolyn Grimaldi</Pill.Label>
+          <Pill.IconButton
+            aria-label="Remove"
+            onClick={() => setText('The second pill is clicked!')}
+          />
         </Pill>
         <Pill variant="removable" disabled>
           <Pill.Label>This is a category that should not exist because it is too long</Pill.Label>
-          <Pill.IconButton />
+          <Pill.IconButton aria-label="Remove" />
         </Pill>
-      </Flex>
+      </div>
       <BodyText size="medium">{text}</BodyText>
-    </Box>
+    </div>
   );
 };

package/dist/mdx/preview-react/segmented-control/examples/Disabled.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {SegmentedControl} from '@workday/canvas-kit-preview-react/segmented-control';
 import {
   gridIcon,

package/dist/mdx/preview-react/segmented-control/examples/RTL.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {CanvasProvider, ContentDirection} from '@workday/canvas-kit-react/common';
 import {
   gridIcon,

package/dist/mdx/preview-react/segmented-control/examples/Vertical.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {SegmentedControl} from '@workday/canvas-kit-preview-react/segmented-control';
 import {
   gridIcon,

package/dist/mdx/preview-react/select/examples/Left Label/DefaultWithCustomOptionsLeft.tsx

@@ -7,7 +7,7 @@ import {controlComponent} from '../../../../../../utils/storybook';
 
 export default () => {
   return (
-    <FormField orientation="horizontal" id="select-default-custom">
+    <FormField orientation="horizontalStart" id="select-default-custom">
       <FormField.Label>Label</FormField.Label>
       <FormField.Field>
         {controlComponent(

package/dist/mdx/preview-react/select/examples/Left Label/DefaultWithSimpleOptionsLeft.tsx

@@ -7,7 +7,7 @@ import {controlComponent} from '../../../../../../utils/storybook';
 
 export default () => {
   return (
-    <FormField orientation="horizontal" id="select-default-simple">
+    <FormField orientation="horizontalStart" id="select-default-simple">
       <FormField.Label>Label</FormField.Label>
       <FormField.Field>
         {controlComponent(<FormField.Input as={Select} name="state" options={simpleOptions} />)}

package/dist/mdx/preview-react/select/examples/Top Label/Alert.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Select} from '@workday/canvas-kit-preview-react/select';
 import {hintText, options} from '../storiesData';

package/dist/mdx/preview-react/select/examples/Top Label/Default.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Select} from '@workday/canvas-kit-preview-react/select';
 import {options} from '../storiesData';

package/dist/mdx/preview-react/select/examples/Top Label/DefaultWithCustomOptions.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Select} from '@workday/canvas-kit-preview-react/select';
 import {customOptions, customRenderOption, customRenderSelected} from '../storiesData';

package/dist/mdx/preview-react/select/examples/Top Label/DefaultWithSimpleOptions.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Select} from '@workday/canvas-kit-preview-react/select';
 import {simpleOptions} from '../storiesData';

package/dist/mdx/preview-react/select/examples/Top Label/Disabled.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Select} from '@workday/canvas-kit-preview-react/select';
 import {options} from '../storiesData';

package/dist/mdx/preview-react/select/examples/Top Label/Error.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Select} from '@workday/canvas-kit-preview-react/select';
 import {hintText, options} from '../storiesData';

package/dist/mdx/preview-react/select/examples/Top Label/Grow.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Select} from '@workday/canvas-kit-preview-react/select';
 import {options} from '../storiesData';

package/dist/mdx/preview-react/select/examples/Top Label/Scrollable.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Select} from '@workday/canvas-kit-preview-react/select';
 import {manyOptions} from '../storiesData';

package/dist/mdx/preview-react/select/examples/storiesData.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import {SystemIcon} from '@workday/canvas-kit-react/icon';
 import {
   activityStreamIcon,

package/dist/mdx/preview-react/side-panel/SidePanel.mdx

@@ -41,9 +41,12 @@ logic or styling for bidirecitonal support.
 
 ### Hidden Name
 
-`SidePanel` should always have an accessible label. Often this is the heading element with an `id`
-attribute. However, as seen in the example below, you can apply a `hidden` attribute to your label
-if you do not want it to be visible.
+`SidePanel` must always have an accessible label for both the HTML `<section>` container and the
+`ToggleButton`. The `labelProps` component must always be present in the DOM in order for the
+`panelProps` and `controlProps` component labels to be assigned properly. A `hidden` attribute can
+be applied to the `labelProps` component. In the example below, we are demonstrating the
+`AccessibleHide` component that relies on CSS properties to visually hide text for screen readers
+only.
 
 <ExampleCodeBlock code={HiddenName} />
 
@@ -60,6 +63,28 @@ used (this case is covered in the Examples section).
 Sometimes you'll want to control `SidePanel`'s' expand / collapse behavior from outside the
 component. In that case, you can use the `controlProps` supplied by the `useSidePanel` hook.
 
+#### Notes about accessibility
+
+The `controlProps` object delivers ARIA attributes to a component under the following assumptions:
+
+1. The control is an icon button that does not already have an accessible name
+2. The control appears at (or near) the top of the expandable content in the `SidePanel`
+
+Spreading the `controlProps` onto an external control can introduce serious accessibility issues:
+
+- `aria-labelledby` HTML `id` reference may become invalid when the SidePanel is collapsed, or when
+  the `labelProps` component isn't present in the DOM.
+- `aria-labelledby` will change the name of `controlProps` component to the title of the
+  `SidePanel`. (This may be undesirable. For example, the "Show Side Panel" button will be
+  overwritten with the "Tasks Panel" heading.)
+- `aria-expanded` won't make sense to screen reader users when the expanded `SidePanel` content
+  isn't logically following the control.
+- `aria-controls` is unsupported by screen readers and will not allow users to navigate to the
+  controlled content.
+
+In the following example, the `controlProps` click handler function is passed down to the
+`SecondaryButton` and a toggle state was added to the button using the `aria-pressed` property.
+
 <ExampleCodeBlock code={ExternalControl} />
 
 ### Right Origin