@workday/canvas-kit-docs 6.0.0-beta.0-next.16 → 6.0.3

package/dist/mdx/labs-react/text-input/examples/ThemedAlert.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import {TextInput} from '@workday/canvas-kit-labs-react/text-input';
+import {useThemedRing} from '@workday/canvas-kit-labs-react/common';
+import {VStack} from '@workday/canvas-kit-labs-react/layout';
+import {CanvasProvider, PartialEmotionCanvasTheme, styled} from '@workday/canvas-kit-react/common';
+import {colors, CSSProperties, space} from '@workday/canvas-kit-react/tokens';
+
+export default () => {
+  const theme: PartialEmotionCanvasTheme = {
+    canvas: {
+      palette: {
+        common: {
+          focusOutline: colors.grapeSoda300,
+        },
+        alert: {
+          main: colors.kiwi500,
+          darkest: colors.kiwi600,
+        },
+      },
+    },
+  };
+  return (
+    <CanvasProvider theme={theme}>
+      <AlertInput />
+    </CanvasProvider>
+  );
+};
+
+const StyledField = styled(TextInput.Field)<{alertStyles?: CSSProperties}>(
+  ({alertStyles}) => alertStyles
+);
+
+const AlertInput = () => {
+  const [value, setValue] = React.useState('invalid@email');
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value);
+  };
+
+  const alertStyles = useThemedRing('alert');
+
+  return (
+    <VStack spacing="xxxs" alignItems="flex-start">
+      <TextInput>
+        <TextInput.Label>Email</TextInput.Label>
+        <StyledField alertStyles={alertStyles} onChange={handleChange} value={value} />
+        <TextInput.Hint paddingTop={space.xxs}>Please enter a valid email.</TextInput.Hint>
+      </TextInput>
+    </VStack>
+  );
+};

package/dist/mdx/labs-react/text-input/examples/ThemedError.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import {TextInput} from '@workday/canvas-kit-labs-react/text-input';
+import {VStack} from '@workday/canvas-kit-labs-react/layout';
+import {CanvasProvider, PartialEmotionCanvasTheme} from '@workday/canvas-kit-react/common';
+import {colors, space} from '@workday/canvas-kit-react/tokens';
+
+export default () => {
+  const [value, setValue] = React.useState('');
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value);
+  };
+
+  const theme: PartialEmotionCanvasTheme = {
+    canvas: {
+      palette: {
+        common: {
+          focusOutline: colors.grapeSoda300,
+        },
+        error: {
+          main: colors.islandPunch400,
+        },
+      },
+    },
+  };
+
+  return (
+    <CanvasProvider theme={theme}>
+      <VStack spacing="xxxs" alignItems="flex-start">
+        <TextInput hasError={!value} isRequired={true}>
+          <TextInput.Label>Email</TextInput.Label>
+          <TextInput.Field onChange={handleChange} value={value} />
+          <TextInput.Hint paddingTop={space.xxs}>
+            {!value && 'Please enter an email.'}
+          </TextInput.Hint>
+        </TextInput>
+      </VStack>
+    </CanvasProvider>
+  );
+};

package/dist/mdx/preview-react/breadcrumbs/Breadcrumbs.mdx

@@ -46,7 +46,7 @@ you'll need to add `buttonAriaLabel` to `Breadcrumbs.CollapsibleList`.
 
 <ExampleCodeBlock code={CollapsibleList} />
 
-### Right-to-Left Example
+### Right-to-Left (RTL)
 
 Breadcrumbs has bidirectional support out of the box. That means outside of setting the content
 direction in your application's Canvas theme, you don't need to do anything else to make it work.

package/dist/mdx/preview-react/menu/Menu.mdx

@@ -3,7 +3,6 @@ import {Menu, MenuItem} from '@workday/canvas-kit-preview-react/menu';
 
 import Basic from './examples/Basic';
 import ContextMenu from './examples/ContextMenu';
-import ControlButton from './examples/ControlButton';
 import CustomMenuItem from './examples/CustomMenuItem';
 import Icons from './examples/Icons';
 import ManyItems from './examples/ManyItems';
@@ -11,7 +10,7 @@ import ManyItems from './examples/ManyItems';
 
 # Canvas Kit Menu
 
-Menus display a list of options when triggered by an action or UI element like an icon or button.
+`Menu` displays a list of options when triggered by an action or UI element like an icon or button.
 
 [> Workday Design Reference](https://design.workday.com/components/popups/menus)
 
@@ -25,8 +24,15 @@ yarn add @workday/canvas-kit-preview-react
 
 ### Basic Example
 
+`Menu` is typically triggered by an action such as pressing a button. Here's an example of how you
+might implement that behavior using a [`Popup`](/components/popups/popup/).
+
 <ExampleCodeBlock code={Basic} />
 
+`Menu` will automatically assign focus to itself when it appears provided you set the `isOpen` prop
+correctly, so you do **not** need to use the `useInitialFocus` `Popup` hook. You **will**, however,
+need to use `useReturnFocus` to return focus back to the triggering button after closing the `Menu`.
+
 `Menu` follows the
 [Actions Menu pattern](https://www.w3.org/TR/wai-aria-practices/examples/menu-button/menu-button-actions-active-descendant.html)
 using `aria-activedescendant`. Below is table of supported keyboard shortcuts and associated
@@ -42,10 +48,8 @@ actions.
 | `End`              | Moves focus to the last menu item                                                                                                                |
 | `A-Z / a-z`        | Moves focus to the next menu item with a label that starts with the typed character if such an menu item exists – otherwise, focus does not move |
 
-If you're using a menu button, you will need to add your own keyboard shortcuts, aria attributes,
-and focus management. See the example below.
-
-<ExampleCodeBlock code={ControlButton} />
+Note that although `Menu` includes support for keyboard shortcuts for the menu itself, you'll need
+to add your own keyboard handling and aria attributes to the triggering button.
 
 ### Context Menu
 
@@ -59,7 +63,6 @@ custom menu items, be sure to use semantic `<li>` elements with the following at
 
 - `role="menuitem"`
 - `tabindex={-1}`
-- `id`s following this pattern: `${MenuId}-${index}`
 
 Below is an example:
 
@@ -79,19 +82,22 @@ Below is an example:
 
 #### Usage
 
-`Menu` renders a styled `<ul>` element with a role of `menu` and follows the
+`Menu` renders a styled `<ul role="menu">` element within a [`Card`](/components/containers/card/)
+and follows the
 [Active Menu pattern](https://www.w3.org/TR/wai-aria-practices/examples/menu-button/menu-button-actions-active-descendant.html)
 using `aria-activedescendant`.
 
 #### Props
 
+Undocumented props are spread to the underlying `<ul>` element.
+
 <ArgsTable of={Menu} />
 
 ### MenuItem
 
 #### Usage
 
-`MenuItem` renders a `<li>` element with the correct attributes to ensure it is accessible. If you
+`MenuItem` renders an `<li>` element with the correct attributes to ensure it is accessible. If you
 choose to implement your own custom menu items, be sure to use semantic `<li>` elements with the
 following attributes:
 
@@ -101,6 +107,8 @@ following attributes:
 
 #### Props
 
+Undocumented props are spread to the underlying `<li>` element.
+
 <ArgsTable of={MenuItem} />
 
 ## Specifications

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

@@ -1,17 +1,72 @@
 import React from 'react';
-
 import {Menu, MenuItem} from '@workday/canvas-kit-preview-react/menu';
+import {SecondaryButton} from '@workday/canvas-kit-react/button';
+import {
+  Popup,
+  usePopupModel,
+  useAlwaysCloseOnOutsideClick,
+  useReturnFocus,
+  useCloseOnEscape,
+} from '@workday/canvas-kit-react/popup';
+
+const menuId = 'basic-menu';
 
 export default () => {
+  const model = usePopupModel();
+
+  useAlwaysCloseOnOutsideClick(model);
+  useCloseOnEscape(model);
+  useReturnFocus(model);
+
+  const isOpen = model.state.visibility !== 'hidden';
+
+  const handleButtonKeyDown = (event: React.KeyboardEvent) => {
+    let isShortcut = false;
+    if (event.key === `Spacebar` || event.key === ` ` || event.key === `Enter`) {
+      isShortcut = true;
+      if (isOpen) {
+        model.events.hide();
+      } else {
+        model.events.show();
+      }
+    } else if (event.key === `ArrowDown` || event.key === `ArrowUp`) {
+      isShortcut = true;
+      model.events.show();
+    }
+
+    if (isShortcut) {
+      // Prevent ArrowDown and ArrowUp keys from scrolling the entire page
+      event.preventDefault();
+    }
+  };
+
   return (
-    <Menu title="Menu Title">
-      <MenuItem>First Item</MenuItem>
-      <MenuItem>Second Item (with a really really really long label)</MenuItem>
-      <MenuItem isDisabled>Third Item (disabled)</MenuItem>
-      <MenuItem>
-        Fourth Item (<b>with markup</b>)
-      </MenuItem>
-      <MenuItem hasDivider>Fifth Item (with divider)</MenuItem>
-    </Menu>
+    <Popup model={model}>
+      <Popup.Target
+        as={SecondaryButton}
+        onKeyDown={handleButtonKeyDown}
+        aria-expanded={isOpen}
+        aria-haspopup={true}
+        aria-controls={isOpen ? menuId : undefined}
+      >
+        Open Menu
+      </Popup.Target>
+      <Popup.Popper placement="bottom-start">
+        {/*
+          isOpen must be set for focus to be properly assigned to the Menu;
+          onClose must be set in order to the Menu to close properly after
+          selecting a MenuItem
+        */}
+        <Menu id={menuId} isOpen={isOpen} onClose={model.events.hide}>
+          <MenuItem>First Item</MenuItem>
+          <MenuItem>Second Item (with a really really really long label)</MenuItem>
+          <MenuItem isDisabled>Third Item (disabled)</MenuItem>
+          <MenuItem>
+            Fourth Item (<b>with markup</b>)
+          </MenuItem>
+          <MenuItem hasDivider>Fifth Item (with divider)</MenuItem>
+        </Menu>
+      </Popup.Popper>
+    </Popup>
   );
 };

package/dist/mdx/preview-react/menu/examples/ContextMenu.tsx

@@ -1,49 +1,65 @@
 import * as React from 'react';
 
-import {CanvasProvider, ContentDirection} from '@workday/canvas-kit-react/common';
+import {createComponent, useForkRef} from '@workday/canvas-kit-react/common';
 import {Menu, MenuItem} from '@workday/canvas-kit-preview-react/menu';
 import {
   Popup,
+  PopupModelContext,
   usePopupModel,
   useAlwaysCloseOnOutsideClick,
   useCloseOnEscape,
 } from '@workday/canvas-kit-react/popup';
 
-import {ContextMenuTarget} from './ContextMenuTarget';
+const ContextMenuTarget = createComponent('div')({
+  displayName: 'Popup.ContextMenuTarget',
+  Component: ({children, ...elemProps}, ref, Element) => {
+    const model = React.useContext(PopupModelContext);
+    const elementRef = useForkRef(ref, model.state.targetRef as any);
 
-export default () => {
-  const canvasTheme = {
-    canvas: {
-      direction: ContentDirection.LTR,
-    },
-  };
+    const onContextMenu = (event: React.MouseEvent) => {
+      if (model.state.visibility === 'visible') {
+        model.events.hide({event});
+      } else if (model.state.visibility === 'hidden') {
+        model.events.show({event});
+      }
+
+      // Prevent the default context menu from showing to avoid double menus
+      event.preventDefault();
+    };
 
+    return (
+      <Element ref={elementRef} onContextMenu={onContextMenu} {...elemProps}>
+        {children}
+      </Element>
+    );
+  },
+});
+
+export default () => {
   const model = usePopupModel();
 
   useAlwaysCloseOnOutsideClick(model);
   useCloseOnEscape(model);
 
   return (
-    <CanvasProvider theme={canvasTheme}>
-      <Popup model={model}>
-        <ContextMenuTarget style={{display: 'inline'}} tabIndex={0}>
-          Right click on this text (Context menu target)
-        </ContextMenuTarget>
-        <Popup.Popper>
-          <Menu onClose={model.events.hide}>
-            <MenuItem>Back</MenuItem>
-            <MenuItem>Forward</MenuItem>
-            <MenuItem>Reload</MenuItem>
-            <MenuItem hasDivider>Bookmark Page</MenuItem>
-            <MenuItem>Save Page As...</MenuItem>
-            <MenuItem>Select All</MenuItem>
-            <MenuItem hasDivider>Take Screenshot</MenuItem>
-            <MenuItem hasDivider>View Page Source</MenuItem>
-            <MenuItem>Inspect Accessibility Properties</MenuItem>
-            <MenuItem>Inspect</MenuItem>
-          </Menu>
-        </Popup.Popper>
-      </Popup>
-    </CanvasProvider>
+    <Popup model={model}>
+      <ContextMenuTarget style={{display: 'inline'}} tabIndex={0}>
+        Right click on this text (Context menu target)
+      </ContextMenuTarget>
+      <Popup.Popper>
+        <Menu onClose={model.events.hide}>
+          <MenuItem>Back</MenuItem>
+          <MenuItem>Forward</MenuItem>
+          <MenuItem>Reload</MenuItem>
+          <MenuItem hasDivider>Bookmark Page</MenuItem>
+          <MenuItem>Save Page As...</MenuItem>
+          <MenuItem>Select All</MenuItem>
+          <MenuItem hasDivider>Take Screenshot</MenuItem>
+          <MenuItem hasDivider>View Page Source</MenuItem>
+          <MenuItem>Inspect Accessibility Properties</MenuItem>
+          <MenuItem>Inspect</MenuItem>
+        </Menu>
+      </Popup.Popper>
+    </Popup>
   );
 };

package/dist/mdx/preview-react/menu/examples/CustomMenuItem.tsx

@@ -4,10 +4,10 @@ import {Menu, MenuItem} from '@workday/canvas-kit-preview-react/menu';
 
 export default () => {
   return (
-    <Menu title="Menu Title">
+    <Menu>
       <MenuItem>First Item</MenuItem>
       <MenuItem>Second Item</MenuItem>
-      <li role="menuItem" id="customMenu-3" tabIndex={-1} style={{listStyle: 'none'}}>
+      <li role="menuitem" tabIndex={-1} style={{listStyle: 'none'}}>
         Third Item (custom)
       </li>
     </Menu>

package/dist/mdx/preview-react/menu/examples/Icons.tsx

@@ -10,7 +10,7 @@ import {Menu, MenuItem} from '@workday/canvas-kit-preview-react/menu';
 
 export default () => {
   return (
-    <Menu title="Menu Title">
+    <Menu>
       <MenuItem icon={uploadCloudIcon}>First Item</MenuItem>
       <MenuItem icon={setupIcon}>Second Item (with a really really really long label)</MenuItem>
       <MenuItem isDisabled icon={uploadCloudIcon} secondaryIcon={taskContactIcon}>

package/dist/mdx/preview-react/menu/examples/ManyItems.tsx

@@ -4,11 +4,11 @@ import {Menu, MenuItem} from '@workday/canvas-kit-preview-react/menu';
 
 export default () => {
   return (
-    <Menu title="Menu Titles">
+    <Menu>
       {'One Two Three Four Five Six Seven Eight Nine Ten Eleven Twelve Thirteen Fourteen Fifteen'
         .split(' ')
         .map(item => {
-          return <MenuItem>Item {item}</MenuItem>;
+          return <MenuItem key={item}>Item {item}</MenuItem>;
         })}
     </Menu>
   );

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

@@ -143,7 +143,7 @@ Below is an example:
 ```tsx
 import {useSidePanel} from '@workday/canvas-kit-preview-react/side-panel';
 
-const {expanded, setExpaned, panelProps, labelProps, controlProps} = useSidePanel({
+const {expanded, setExpanded, panelProps, labelProps, controlProps} = useSidePanel({
   initialExpanded: false,
   panelId: 'custom-panel-id',
   labelId: 'custom-label-id',

package/dist/mdx/react/action-bar/ActionBar.mdx

@@ -51,6 +51,6 @@ At 575px, responsive styles will take effect:
 
 ## Props
 
-Undocumented props are spread to the underlying container `div` element.
+Undocumented props are spread to the underlying container `<div>` element.
 
 <ArgsTable of={ActionBar} />

package/dist/mdx/react/button/button/Button.mdx

@@ -7,8 +7,11 @@ import {
 import {Specifications} from '@workday/canvas-kit-docs';
 
 import Primary from './examples/Primary';
+import PrimaryInverse from './examples/PrimaryInverse';
 import Secondary from './examples/Secondary';
+import SecondaryInverse from './examples/SecondaryInverse';
 import Tertiary from './examples/Tertiary';
+import TertiaryInverse from './examples/TertiaryInverse';
 import Delete from './examples/Delete';
 
 
@@ -35,11 +38,20 @@ Primary Buttons are high emphasis. Use once per screen to draw attention to the
 action. Multiple primary buttons make it confusing for the user to understand what action they
 should take. Not all screens require a Primary Button.
 
+Primary Buttons have four sizes: `extraSmall`, `small`, `medium`, and `large`. Icons are supported
+for every size and can be positioned to the `left` or `right` with the `iconPosition` prop.
+
 <ExampleCodeBlock code={Primary} />
 
+Primary Buttons also have an `inverse` variant. While it looks similar to the default Secondary
+Button, the default outline as well as the hover and focus states are different. Use this variant
+when you need to place a Primary Button on a dark or colorful background such as `blueberry400`.
+
+<ExampleCodeBlock code={PrimaryInverse} />
+
 #### Props
 
-Undocumented props are spread to the underlying `button` element.
+Undocumented props are spread to the underlying `<button>` element.
 
 <ArgsTable of={PrimaryButton} />
 
@@ -49,13 +61,19 @@ Secondary Buttons have a medium level of emphasis. Use them for non-critical act
 Buttons can be used on most pages without restrictions and work well for multiple actions of equal
 weight. They can be used in conjunction with a Primary Button or independently.
 
-Use the `inverse` variants on dark or colorful backgrounds.
+Secondary Buttons have four sizes: `extraSmall`, `small`, `medium`, and `large`. Icons are supported
+for every size and can be positioned to the `left` or `right` with the `iconPosition` prop.
 
 <ExampleCodeBlock code={Secondary} />
 
+Secondary Buttons also have an `inverse` variant. Use this when you need to place a Secondary Button on
+a dark or colorful background such as `blueberry400`.
+
+<ExampleCodeBlock code={SecondaryInverse} />
+
 #### Props
 
-Undocumented props are spread to the underlying `button` element.
+Undocumented props are spread to the underlying `<button>` element.
 
 <ArgsTable of={SecondaryButton} />
 
@@ -66,13 +84,20 @@ the user may not often be looking to do. Tertiary Buttons have lower prominence
 not visible until it is interacted with. Use Tertiary Buttons for supplemental actions such as “View
 More”, “Read More” or “Select a File”. Tertiary Buttons are frequently used on Cards.
 
-Use the `inverse` variants on dark or colorful backgrounds.
+Tertiary Buttons have three sizes: `extraSmall`, `small`, and `medium`. Icons are supported
+for every size and can be positioned to the `left` or `right` with the `iconPosition` prop.
 
 <ExampleCodeBlock code={Tertiary} />
 
+Tertiary Buttons also have an `inverse` variant. Use this when you need to place a Tertiary Button on
+a dark or colorful background such as `blueberry400`.
+
+<ExampleCodeBlock code={TertiaryInverse} />
+
+
 #### Props
 
-Undocumented props are spread to the underlying `button` element.
+Undocumented props are spread to the underlying `<button>` element.
 
 <ArgsTable of={TertiaryButton} />
 
@@ -86,16 +111,16 @@ before deleting.
 
 #### Props
 
-Undocumented props are spread to the underlying `button` element.
+Undocumented props are spread to the underlying `<button>` element.
 
 <ArgsTable of={DeleteButton} />
 
 ### Accessible Use of the `as` Prop
 
 Like many of our components, Buttons accept an `as` prop, which lets you change the underlying
-semantic element - usually an `a` (anchor), or a `button`. This should be done with caution to
-ensure the best accessibility. Generally, `button` elements should be used for actions, and `a`
-(anchor) elements should be used for navigation.
+semantic element - usually an `<a>`, or a `<button>`. This should be done with caution to ensure the
+best accessibility. Generally, `<button>` elements should be used for actions, and `<a>` elements
+should be used for navigation.
 
 ## Specifications
 

package/dist/mdx/react/button/button/examples/Primary.tsx

@@ -1,5 +1,14 @@
 import React from 'react';
 
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
+import {HStack} from '@workday/canvas-kit-labs-react/layout';
+import {plusIcon} from '@workday/canvas-system-icons-web';
 
-export default () => <PrimaryButton>Click Me</PrimaryButton>;
+export default () => (
+  <HStack spacing="s" padding="s">
+    <PrimaryButton>Primary</PrimaryButton>
+    <PrimaryButton icon={plusIcon} iconPosition="right">
+      Primary
+    </PrimaryButton>
+  </HStack>
+);

package/dist/mdx/react/button/button/examples/PrimaryInverse.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import {PrimaryButton} from '@workday/canvas-kit-react/button';
+import {HStack} from '@workday/canvas-kit-labs-react/layout';
+import {plusIcon} from '@workday/canvas-system-icons-web';
+
+export default () => (
+  <HStack spacing="s" backgroundColor="blueberry400" padding="s">
+    <PrimaryButton variant="inverse">Primary</PrimaryButton>
+    <PrimaryButton icon={plusIcon} iconPosition="right" variant="inverse">
+      Primary
+    </PrimaryButton>
+  </HStack>
+);

package/dist/mdx/react/button/button/examples/Secondary.tsx

@@ -1,5 +1,14 @@
 import React from 'react';
 
 import {SecondaryButton} from '@workday/canvas-kit-react/button';
+import {HStack} from '@workday/canvas-kit-labs-react/layout';
+import {plusIcon} from '@workday/canvas-system-icons-web';
 
-export default () => <SecondaryButton>Click Me</SecondaryButton>;
+export default () => (
+  <HStack spacing="s" padding="s">
+    <SecondaryButton>Secondary</SecondaryButton>
+    <SecondaryButton icon={plusIcon} iconPosition="right">
+      Secondary
+    </SecondaryButton>
+  </HStack>
+);

package/dist/mdx/react/button/button/examples/SecondaryInverse.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import {SecondaryButton} from '@workday/canvas-kit-react/button';
+import {HStack} from '@workday/canvas-kit-labs-react/layout';
+import {plusIcon} from '@workday/canvas-system-icons-web';
+
+export default () => (
+  <HStack spacing="s" backgroundColor="blueberry400" padding="s">
+    <SecondaryButton variant="inverse">Secondary</SecondaryButton>
+    <SecondaryButton icon={plusIcon} iconPosition="right" variant="inverse">
+      Secondary
+    </SecondaryButton>
+  </HStack>
+);

package/dist/mdx/react/button/button/examples/Tertiary.tsx

@@ -1,5 +1,14 @@
 import React from 'react';
 
 import {TertiaryButton} from '@workday/canvas-kit-react/button';
+import {HStack} from '@workday/canvas-kit-labs-react/layout';
+import {plusIcon} from '@workday/canvas-system-icons-web';
 
-export default () => <TertiaryButton>Click Me</TertiaryButton>;
+export default () => (
+  <HStack spacing="s" padding="s">
+    <TertiaryButton>Tertiary</TertiaryButton>
+    <TertiaryButton icon={plusIcon} iconPosition="right">
+      Tertiary
+    </TertiaryButton>
+  </HStack>
+);

package/dist/mdx/react/button/button/examples/TertiaryInverse.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import {TertiaryButton} from '@workday/canvas-kit-react/button';
+import {HStack} from '@workday/canvas-kit-labs-react/layout';
+import {plusIcon} from '@workday/canvas-system-icons-web';
+
+export default () => (
+  <HStack spacing="s" backgroundColor="blueberry400" padding="s">
+    <TertiaryButton variant="inverse">Tertiary</TertiaryButton>
+    <TertiaryButton icon={plusIcon} iconPosition="right" variant="inverse">
+      Tertiary
+    </TertiaryButton>
+  </HStack>
+);

package/dist/mdx/react/button/icon-button/IconButton.mdx

@@ -98,6 +98,6 @@ The `toggle` prop can be used to make icon buttons toggleable.
 
 ## Props
 
-Undocumented props are spread to the underlying `button` element.
+Undocumented props are spread to the underlying `<button>` element.
 
 <ArgsTable of={IconButton} />

package/dist/mdx/react/card/card.mdx

@@ -8,7 +8,7 @@ import Padding from './examples/Padding';
 # Canvas Kit Card
 
 A Card is a preview that serves as an entry point to more detailed information. Card is a
-presentational [compound component](/getting-started/for-developers/resources/compound-components/')
+presentational [compound component](/getting-started/for-developers/resources/compound-components/)
 used as a building block for other components such as [Popup](/components/popups/popup/) and
 [Modal](/components/popups/modal/).