@workday/canvas-kit-docs 14.0.0-alpha.1148-next.0 → 14.0.0-alpha.1151-next.0

package/dist/mdx/styling/mdx/examples/EmotionButton.tsx

@@ -0,0 +1,111 @@
+import React from 'react';
+import styled from '@emotion/styled';
+
+interface ButtonProps {
+  variant: 'primary' | 'secondary' | 'danger';
+  size: 'large' | 'medium' | 'small';
+  backgroundColor?: string;
+  children?: React.ReactNode;
+}
+
+const StyledButton = styled('button')<ButtonProps>(
+  {
+    // base styles
+    fontSize: '1rem',
+    display: 'flex',
+    borderRadius: '1rem',
+  },
+  // variant styles
+  ({variant, backgroundColor}) => {
+    switch (variant) {
+      case 'primary':
+        return {
+          background: backgroundColor || 'blue',
+          color: 'white',
+        };
+      case 'secondary':
+        return {
+          background: backgroundColor || 'gray',
+        };
+      case 'danger':
+        return {
+          background: backgroundColor || 'red',
+        };
+      default:
+        return {};
+    }
+  },
+  // size styles
+  ({size}) => {
+    switch (size) {
+      case 'large':
+        return {
+          fontSize: '1.4rem',
+          height: '2rem',
+        };
+      case 'medium':
+        return {
+          fontSize: '1rem',
+          height: '1.5rem',
+        };
+      case 'small':
+        return {
+          fontSize: '0.8rem',
+          height: '1.2rem',
+        };
+      default:
+        return {};
+    }
+  }
+);
+
+export default () => {
+  return (
+    <div style={{display: 'flex', flexDirection: 'column', gap: '1rem'}}>
+      <div style={{display: 'flex', gap: '1rem'}}>
+        <StyledButton variant="primary" size="large">
+          Primary Large
+        </StyledButton>
+        <StyledButton variant="primary" size="medium">
+          Primary Medium
+        </StyledButton>
+        <StyledButton variant="primary" size="small">
+          Primary Small
+        </StyledButton>
+      </div>
+      <div style={{display: 'flex', gap: '1rem'}}>
+        <StyledButton variant="secondary" size="large">
+          Secondary Large
+        </StyledButton>
+        <StyledButton variant="secondary" size="medium">
+          Secondary Medium
+        </StyledButton>
+        <StyledButton variant="secondary" size="small">
+          Secondary Small
+        </StyledButton>
+      </div>
+      <div style={{display: 'flex', gap: '1rem'}}>
+        <StyledButton variant="danger" size="large">
+          Danger Large
+        </StyledButton>
+        <StyledButton variant="danger" size="medium">
+          Danger Medium
+        </StyledButton>
+        <StyledButton variant="danger" size="small">
+          Danger Small
+        </StyledButton>
+      </div>
+      <div style={{display: 'flex', gap: '1rem'}}>
+        <StyledButton variant="danger" size="large" backgroundColor="orange">
+          Custom Large
+        </StyledButton>
+        <StyledButton variant="danger" size="medium" backgroundColor="orange">
+          Custom Medium
+        </StyledButton>
+        <StyledButton variant="danger" size="small" backgroundColor="orange">
+          Custom Small
+        </StyledButton>
+      </div>
+    </div>
+  );
+};

package/dist/mdx/styling/mdx/examples/ManualStylesButton.tsx

@@ -0,0 +1,107 @@
+import React from 'react';
+import {createStyles} from '@workday/canvas-kit-styling';
+
+interface ButtonProps {
+  variant: 'primary' | 'secondary' | 'danger';
+  size: 'large' | 'medium' | 'small';
+  backgroundColor?: string;
+  children?: React.ReactNode;
+}
+
+const baseStyles = createStyles({
+  fontSize: '1rem',
+  display: 'flex',
+  borderRadius: '1rem',
+});
+
+const modifierStyles = {
+  variant: {
+    primary: createStyles({
+      background: `var(--button-background-color, blue)`,
+      color: 'white',
+    }),
+    secondary: createStyles({
+      background: `var(--button-background-color, gray)`,
+    }),
+    danger: createStyles({
+      background: `var(--button-background-color, red)`,
+    }),
+  },
+  size: {
+    large: createStyles({
+      fontSize: '1.4rem',
+      height: '2rem',
+    }),
+    medium: createStyles({
+      fontSize: '1rem',
+      height: '1.5rem',
+    }),
+    small: createStyles({
+      fontSize: '0.8rem',
+      height: '1.2rem',
+    }),
+  },
+};
+
+const Button = ({variant, size, backgroundColor, children}: ButtonProps) => {
+  const className = [baseStyles, modifierStyles.variant[variant], modifierStyles.size[size]].join(
+    ' '
+  );
+  const style = {'--button-background-color': backgroundColor} as React.CSSProperties;
+  return (
+    <button className={className} style={style}>
+      {children}
+    </button>
+  );
+};
+
+export default () => {
+  return (
+    <div style={{display: 'flex', flexDirection: 'column', gap: '1rem'}}>
+      <div style={{display: 'flex', gap: '1rem'}}>
+        <Button variant="primary" size="large">
+          Primary Large
+        </Button>
+        <Button variant="primary" size="medium">
+          Primary Medium
+        </Button>
+        <Button variant="primary" size="small">
+          Primary Small
+        </Button>
+      </div>
+      <div style={{display: 'flex', gap: '1rem'}}>
+        <Button variant="secondary" size="large">
+          Secondary Large
+        </Button>
+        <Button variant="secondary" size="medium">
+          Secondary Medium
+        </Button>
+        <Button variant="secondary" size="small">
+          Secondary Small
+        </Button>
+      </div>
+      <div style={{display: 'flex', gap: '1rem'}}>
+        <Button variant="danger" size="large">
+          Danger Large
+        </Button>
+        <Button variant="danger" size="medium">
+          Danger Medium
+        </Button>
+        <Button variant="danger" size="small">
+          Danger Small
+        </Button>
+      </div>
+      <div style={{display: 'flex', gap: '1rem'}}>
+        <Button variant="danger" size="large" backgroundColor="orange">
+          Custom Large
+        </Button>
+        <Button variant="danger" size="medium" backgroundColor="orange">
+          Custom Medium
+        </Button>
+        <Button variant="danger" size="small" backgroundColor="orange">
+          Custom Small
+        </Button>
+      </div>
+    </div>
+  );
+};

package/dist/mdx/styling/mdx/examples/StyledButton.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+import {system} from '@workday/canvas-tokens-web';
+import {caretDownIcon} from '@workday/canvas-system-icons-web';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {buttonStencil, PrimaryButton} from '@workday/canvas-kit-react/button';
+import {systemIconStencil} from '@workday/canvas-kit-react/icon';
+
+const varStyles = createStyles({
+  [buttonStencil.vars.background]: system.color.static.gray.soft,
+  [buttonStencil.vars.label]: system.color.static.blue.strong,
+  // Because PrimaryButton uses SystemIcon under the hood,
+  // we also can change system icon variable for color
+  [systemIconStencil.vars.color]: system.color.static.blue.strong,
+  '&:hover': {
+    [buttonStencil.vars.background]: system.color.static.amber.default,
+    [buttonStencil.vars.label]: system.color.static.white,
+    [systemIconStencil.vars.color]: system.color.static.white,
+  },
+  '&:focus-visible': {
+    [buttonStencil.vars.background]: system.color.static.green.default,
+    [buttonStencil.vars.boxShadowOuter]: system.color.static.green.strong,
+    [buttonStencil.vars.boxShadowInner]: system.color.static.white,
+  },
+});
+
+export default () => (
+  <PrimaryButton cs={varStyles} icon={caretDownIcon} iconPosition="end">
+    Overwrite styles by setting variables
+  </PrimaryButton>
+);

package/dist/mdx/styling/mdx/examples/StylingButton.tsx

@@ -0,0 +1,107 @@
+import React from 'react';
+import {createStyles, createModifiers, createVars, cssVar} from '@workday/canvas-kit-styling';
+
+interface ButtonProps {
+  variant: 'primary' | 'secondary' | 'danger';
+  size: 'large' | 'medium' | 'small';
+  backgroundColor?: string;
+  children?: React.ReactNode;
+}
+
+const variables = createVars('backgroundColor');
+
+const baseStyles = createStyles({
+  fontSize: '1rem',
+  display: 'flex',
+  borderRadius: '1rem',
+});
+
+const modifierStyles = createModifiers({
+  variant: {
+    primary: createStyles({
+      background: cssVar(variables.backgroundColor, 'blue'),
+      color: 'white',
+    }),
+    secondary: createStyles({
+      background: cssVar(variables.backgroundColor, 'gray'),
+    }),
+    danger: createStyles({
+      background: cssVar(variables.backgroundColor, 'red'),
+    }),
+  },
+  size: {
+    large: createStyles({
+      fontSize: '1.4rem',
+      height: '2rem',
+    }),
+    medium: createStyles({
+      fontSize: '1rem',
+      height: '1.5rem',
+    }),
+    small: createStyles({
+      fontSize: '0.8rem',
+      height: '1.2rem',
+    }),
+  },
+});
+
+const Button = ({variant, size, backgroundColor, children}: ButtonProps) => {
+  const className = [baseStyles, modifierStyles({variant, size})].join(' ');
+  const style = variables({backgroundColor});
+  return (
+    <button className={className} style={style}>
+      {children}
+    </button>
+  );
+};
+
+export default () => {
+  return (
+    <div style={{display: 'flex', flexDirection: 'column', gap: '1rem'}}>
+      <div style={{display: 'flex', gap: '1rem'}}>
+        <Button variant="primary" size="large">
+          Primary Large
+        </Button>
+        <Button variant="primary" size="medium">
+          Primary Medium
+        </Button>
+        <Button variant="primary" size="small">
+          Primary Small
+        </Button>
+      </div>
+      <div style={{display: 'flex', gap: '1rem'}}>
+        <Button variant="secondary" size="large">
+          Secondary Large
+        </Button>
+        <Button variant="secondary" size="medium">
+          Secondary Medium
+        </Button>
+        <Button variant="secondary" size="small">
+          Secondary Small
+        </Button>
+      </div>
+      <div style={{display: 'flex', gap: '1rem'}}>
+        <Button variant="danger" size="large">
+          Danger Large
+        </Button>
+        <Button variant="danger" size="medium">
+          Danger Medium
+        </Button>
+        <Button variant="danger" size="small">
+          Danger Small
+        </Button>
+      </div>
+      <div style={{display: 'flex', gap: '1rem'}}>
+        <Button variant="danger" size="large" backgroundColor="orange">
+          Custom Large
+        </Button>
+        <Button variant="danger" size="medium" backgroundColor="orange">
+          Custom Medium
+        </Button>
+        <Button variant="danger" size="small" backgroundColor="orange">
+          Custom Small
+        </Button>
+      </div>
+    </div>
+  );
+};

package/dist/mdx/styling/mdx/examples/StylingOverrides.tsx

@@ -0,0 +1,158 @@
+import * as React from 'react';
+import styled from '@emotion/styled';
+import {jsx} from '@emotion/react';
+
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {PrimaryButton} from '@workday/canvas-kit-react/button';
+import {base} from '@workday/canvas-tokens-web';
+import {createStyles, cssVar} from '@workday/canvas-kit-styling';
+
+const backgroundColors = {
+  cssProp: cssVar(base.orange500),
+  styledComponent: cssVar(base.green500),
+  styleProps: cssVar(base.pink500),
+  createStyles: cssVar(base.purple500),
+};
+
+const StyledPrimaryButton = styled(PrimaryButton)({
+  backgroundColor: backgroundColors.styledComponent,
+});
+
+const styles = createStyles({
+  backgroundColor: backgroundColors.createStyles,
+});
+
+const CSSProp = () => (
+  <div
+    style={{
+      color: 'white',
+      padding: '0 4px',
+      height: 40,
+      width: 100,
+      backgroundColor: backgroundColors.cssProp,
+    }}
+  >
+    CSS Prop
+  </div>
+);
+const StyledComponent = () => (
+  <div
+    style={{
+      color: 'white',
+      padding: '0 4px',
+      height: 40,
+      width: 100,
+      backgroundColor: backgroundColors.styledComponent,
+    }}
+  >
+    Styled Component
+  </div>
+);
+const CreateStyles = () => (
+  <div
+    style={{
+      color: 'white',
+      padding: '0 4px',
+      height: 40,
+      width: 100,
+      backgroundColor: backgroundColors.createStyles,
+    }}
+  >
+    createStyles
+  </div>
+);
+const StyleProps = () => (
+  <div
+    style={{
+      color: 'white',
+      padding: '0 4px',
+      height: 40,
+      width: 100,
+      backgroundColor: backgroundColors.styleProps,
+    }}
+  >
+    Style Props
+  </div>
+);
+
+// We use this object and cast to `{}` to keep TypeScript happy. Emotion extends the JSX interface
+// to include the `css` prop, but the `jsx` function type doesn't accept the `css` prop. Casting to
+// an empty object keeps TypeScript happy and the `css` prop is valid at runtime.
+const cssProp = {css: {backgroundColor: backgroundColors.cssProp}} as {};
+
+export default () => {
+  return (
+    <Flex flexDirection="column" minHeight="100vh" gap="s">
+      <Flex flexDirection="column" gap="s">
+        <h2>Buttons</h2>
+        <Flex flexDirection="row" gap="s">
+          <PrimaryButton cs={styles}>createStyles</PrimaryButton>
+          {jsx(PrimaryButton, {...cssProp}, 'CSS Prop')}
+          <StyledPrimaryButton>Styled Component</StyledPrimaryButton>
+          <PrimaryButton backgroundColor={backgroundColors.styleProps}>Style Props</PrimaryButton>
+        </Flex>
+        <div>
+          {jsx(
+            PrimaryButton,
+            {
+              ...cssProp,
+              cs: styles,
+            },
+            'createStyles + CSS Prop'
+          )}
+        </div>
+        <div>
+          <StyledPrimaryButton cs={styles}>createStyles + Styled Component</StyledPrimaryButton>
+        </div>
+        <div>
+          <PrimaryButton cs={styles} backgroundColor={backgroundColors.styleProps}>
+            createStyles + Style Props
+          </PrimaryButton>
+        </div>
+        <div>
+          <StyledPrimaryButton backgroundColor={backgroundColors.styleProps} cs={styles}>
+            createStyles + Styled Component + Style Props
+          </StyledPrimaryButton>
+        </div>
+        <div>
+          {jsx(
+            StyledPrimaryButton,
+            {
+              ...cssProp,
+              backgroundColor: backgroundColors.styleProps,
+              cs: styles,
+            },
+            'createStyles + CSS Prop + Styled Component + Style Props'
+          )}
+        </div>
+        <div>{jsx(StyledPrimaryButton, {...cssProp}, 'CSS Prop + Styled Component')}</div>
+        <div>
+          {jsx(
+            PrimaryButton,
+            {
+              ...cssProp,
+              backgroundColor: backgroundColors.styleProps,
+            },
+            'CSS Prop + Style Props'
+          )}
+        </div>
+        <div>
+          <StyledPrimaryButton backgroundColor={backgroundColors.styleProps}>
+            Styled Component + Style Props
+          </StyledPrimaryButton>
+        </div>
+      </Flex>
+      <div>
+        <p>Legend:</p>
+        <CreateStyles />
+        <CSSProp />
+        <StyledComponent />
+        <StyleProps />
+      </div>
+      <p>
+        Style Precedence: <strong>createStyles</strong> &gt; <strong>CSS Props</strong> &gt;{' '}
+        <strong>Styled Component</strong> &gt; <strong>Style Props</strong>
+      </p>
+    </Flex>
+  );
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "14.0.0-alpha.1148-next.0",
+  "version": "14.0.0-alpha.1151-next.0",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -45,10 +45,10 @@
     "@emotion/styled": "^11.6.0",
     "@stackblitz/sdk": "^1.11.0",
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-labs-react": "^14.0.0-alpha.1148-next.0",
-    "@workday/canvas-kit-preview-react": "^14.0.0-alpha.1148-next.0",
-    "@workday/canvas-kit-react": "^14.0.0-alpha.1148-next.0",
-    "@workday/canvas-kit-styling": "^14.0.0-alpha.1148-next.0",
+    "@workday/canvas-kit-labs-react": "^14.0.0-alpha.1151-next.0",
+    "@workday/canvas-kit-preview-react": "^14.0.0-alpha.1151-next.0",
+    "@workday/canvas-kit-react": "^14.0.0-alpha.1151-next.0",
+    "@workday/canvas-kit-styling": "^14.0.0-alpha.1151-next.0",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "3.0.0-alpha.5",
     "markdown-to-jsx": "^7.2.0",
@@ -61,5 +61,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "5.0"
   },
-  "gitHead": "17badcb6f4a0ecd0faa19e2d8fd7fa6241aa9393"
+  "gitHead": "891b0d79a8054c5cd3799eb8dd2e0c3b0f15a47b"
 }

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

@@ -1,105 +0,0 @@
-import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
-import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
-import Basic from './examples/Basic';
-import ContextMenu from './examples/ContextMenu';
-import CustomMenuItem from './examples/CustomMenuItem';
-import Icons from './examples/Icons';
-import Headers from './examples/Headers';
-import ManyItems from './examples/ManyItems';
-
-
-# Canvas Kit Menu
-
-<StatusIndicator variant="red">
-  <StatusIndicator.Label>Deprecated</StatusIndicator.Label>
-</StatusIndicator>
-
-`Menu` in Preview been deprecated and will be removed in a future major version. Please use
-[Menu in Main](https://workday.github.io/canvas-kit/?path=/docs/components-popups-menu--basic)
-instead.
-
-`DeprecatedMenu` 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)
-
-## Installation
-
-```sh
-yarn add @workday/canvas-kit-preview-react
-```
-
-## Usage
-
-### Basic Example
-
-`DeprecatedMenu` 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} />
-
-`DeprecatedMenu` 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 `DeprecatedMenu`.
-
-`DeprecatedMenu` 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
-actions.
-
-| Key                | Action                                                                                                                                           |
-| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `Enter` or `Space` | Activates the menu item and then closes the menu                                                                                                 |
-| `Escape`           | Closes the menu                                                                                                                                  |
-| `Up Arrow`         | Moves focus to the previous menu item – if focus is on first menu item, it moves focus to the last menu item                                     |
-| `Down Arrow`       | Moves focus to the next menu item – if focus is on last menu item, it moves focus to the first menu item                                         |
-| `Home`             | Moves focus to the first menu item                                                                                                               |
-| `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 |
-
-Note that although `DeprecatedMenu` 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
-
-<ExampleCodeBlock code={ContextMenu} />
-
-### Custom Menu Item
-
-`DeprecatedMenu` renders a styled `<ul>` element with a role of `menu`, and `DeprecatedMenuItem`s
-are `<li>` elements with the correct attributes to ensure they are accessible. If you choose to
-implement your own custom menu items, be sure to use semantic `<li>` elements with the following
-attributes:
-
-- `role="menuitem"`
-- `tabindex={-1}`
-
-Below is an example:
-
-<ExampleCodeBlock code={CustomMenuItem} />
-
-### Icons
-
-<ExampleCodeBlock code={Icons} />
-
-### Headers
-
-You can group menu items logically by adding a `isHeader` attribute on your `<MenuItems>`. To make
-your new items screen reader friendly add an `aria-label` around each grouped item.
-
-<ExampleCodeBlock code={Headers} />
-
-### Many Items
-
-<ExampleCodeBlock code={ManyItems} />
-
-## Component API
-
-### DeprecatedMenu
-
-<SymbolDoc name="DeprecatedMenu" fileName="/preview-react/" />
-
-### DeprecatedMenuItem
-
-<SymbolDoc name="DeprecatedMenuItem" fileName="/preview-react/" />