@workday/canvas-kit-docs 5.3.0-next.3 → 5.3.0-next.32

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,15 @@
 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 props => (
+  <HStack spacing="s" padding="s">
+    <PrimaryButton {...props}>Primary</PrimaryButton>
+    <p>{JSON.stringify(props.theme)}</p>
+    <PrimaryButton icon={plusIcon} iconPosition="right" {...props}>
+      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/loading-animation/LoadingAnimation.mdx

@@ -1,6 +1,7 @@
 import {LoadingAnimation} from '@workday/canvas-kit-react/loading-animation';
 
 import Basic from './examples/Basic';
+import RTL from './examples/RTL';
 
 
 # Canvas Kit Loading Animation
@@ -22,6 +23,10 @@ yarn add @workday/canvas-kit-react
 
 <ExampleCodeBlock code={Basic} />
 
+### Right-to-Left (RTL)
+
+<ExampleCodeBlock code={RTL} />
+
 ## Props
 
 Loading Animation does not have any documented props. Undocumented props are spread to its outermost

package/dist/mdx/react/loading-animation/examples/RTL.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import {LoadingAnimation} from '@workday/canvas-kit-react/loading-animation';
+import {CanvasProvider, ContentDirection} from '@workday/canvas-kit-react/common';
+
+export default () => {
+  const theme = {
+    canvas: {
+      direction: ContentDirection.RTL,
+    },
+  };
+  return (
+    <CanvasProvider theme={theme}>
+      <LoadingAnimation />
+    </CanvasProvider>
+  );
+};

package/dist/mdx/react/pagination/PropTables.splitprops.tsx

@@ -0,0 +1,47 @@
+import {
+  PaginationModel,
+  PaginationState,
+  PaginationEvents,
+  UsePaginationModelConfig,
+} from '@workday/canvas-kit-react/pagination';
+
+// <ArgsTable of={Pagination} /> generates a very large props table given that
+// PaginationProps includes FlexProps. Use this dummy component instead to
+// limit the props shown.
+export const PaginationHoistedComponent = (_: {model: PaginationModel}) => <div />;
+
+// <ArgsTable of={Pagination.PageButton} /> generates a props table with
+// IconButton props. Use this dummy component instead to limit the props shown.
+export const PageButtonComponent = (_: {pageNumber: number}) => <div />;
+
+// <ArgsTable of={Pagination.PageListComponent} /> generates a very large props
+// table given that PageListProps includes FlexProps. Use this dummy component
+// instead to limit the props shown.
+export const PageListComponent = (_: {
+  /**
+   * Accepts child elements or a render prop.
+   */
+  children: (model: PaginationModel) => React.ReactNode | React.ReactNode;
+}) => <div />;
+
+// <ArgsTable of={Pagination.AdditionalDetails} /> generates a very large props
+// table given that AdditionalDetailsProps includes FlexProps. Use this dummy
+// component instead to limit the props shown.
+export const AdditionalDetailsComponent = (_: {
+  /**
+   * Accepts child elements or a render prop.
+   */
+  children: (model: PaginationModel) => React.ReactNode | React.ReactNode;
+  /**
+   * @default true
+   */
+  shouldAnnounceToScreenReader?: boolean;
+  /**
+   * @default false
+   */
+  shouldHideDetails?: boolean;
+}) => <div />;
+
+export const PaginationModelConfigComponent = (_: UsePaginationModelConfig) => <div />;
+export const PaginationStateComponent = (_: PaginationState) => <div />;
+export const PaginationEventsComponent = (_: PaginationEvents) => <div />;

package/dist/mdx/react/pagination/examples/{StepControls.tsx → Basic.tsx}

@@ -30,7 +30,7 @@ export default () => {
         </Pagination.PageList>
         <Pagination.StepToNextButton aria-label="Next" />
       </Pagination.Controls>
-      <Pagination.AdditionalDetails shouldHideDetails>
+      <Pagination.AdditionalDetails>
         {({state}) =>
           `${getVisibleResultsMin(state.currentPage, resultCount)}-${getVisibleResultsMax(
             state.currentPage,

package/dist/mdx/react/pagination/examples/GoToForm.tsx

@@ -33,7 +33,7 @@ export default () => {
         <Pagination.JumpToLastButton aria-label="Last" />
         <Pagination.GoToForm>
           <Pagination.GoToTextInput aria-label="Go to page number" />
-          <Pagination.GoToLabel>{({state}) => `of ${totalCount} results`}</Pagination.GoToLabel>
+          <Pagination.GoToLabel>{({state}) => `of ${state.lastPage} pages`}</Pagination.GoToLabel>
         </Pagination.GoToForm>
       </Pagination.Controls>
       <Pagination.AdditionalDetails shouldHideDetails>

package/dist/mdx/react/pagination/examples/HoistedModel.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import {SecondaryButton} from '@workday/canvas-kit-react/button';
 import {
   Pagination,
   getLastPage,
@@ -16,30 +17,43 @@ export default () => {
     lastPage,
     onPageChange: number => console.log(number),
   });
+
   return (
-    <Pagination aria-label="Pagination" model={model}>
-      <Pagination.Controls>
-        <Pagination.StepToPreviousButton aria-label="Previous" />
-        <Pagination.PageList>
+    <>
+      <Pagination aria-label="Pagination" model={model}>
+        <Pagination.Controls>
+          <Pagination.StepToPreviousButton aria-label="Previous" />
+          <Pagination.PageList>
+            {({state}) =>
+              state.range.map(pageNumber => (
+                <Pagination.PageListItem key={pageNumber}>
+                  <Pagination.PageButton
+                    aria-label={`Page ${pageNumber}`}
+                    pageNumber={pageNumber}
+                  />
+                </Pagination.PageListItem>
+              ))
+            }
+          </Pagination.PageList>
+          <Pagination.StepToNextButton aria-label="Next" />
+        </Pagination.Controls>
+        <Pagination.AdditionalDetails shouldHideDetails>
           {({state}) =>
-            state.range.map(pageNumber => (
-              <Pagination.PageListItem key={pageNumber}>
-                <Pagination.PageButton aria-label={`Page ${pageNumber}`} pageNumber={pageNumber} />
-              </Pagination.PageListItem>
-            ))
+            `${getVisibleResultsMin(state.currentPage, resultCount)}-${getVisibleResultsMax(
+              state.currentPage,
+              resultCount,
+              totalCount
+            )} of ${totalCount} results`
           }
-        </Pagination.PageList>
-        <Pagination.StepToNextButton aria-label="Next" />
-      </Pagination.Controls>
-      <Pagination.AdditionalDetails shouldHideDetails>
-        {({state}) =>
-          `${getVisibleResultsMin(state.currentPage, resultCount)}-${getVisibleResultsMax(
-            state.currentPage,
-            resultCount,
-            totalCount
-          )} of ${totalCount} results`
-        }
-      </Pagination.AdditionalDetails>
-    </Pagination>
+        </Pagination.AdditionalDetails>
+      </Pagination>
+      <SecondaryButton
+        onClick={() => {
+          model.events.goTo(7);
+        }}
+      >
+        Go to Page 7
+      </SecondaryButton>
+    </>
   );
 };

package/dist/mdx/react/pagination/examples/RTL.tsx

@@ -36,7 +36,7 @@ export default () => {
           <Pagination.JumpToLastButton aria-label="Last" />
           <Pagination.GoToForm>
             <Pagination.GoToTextInput aria-label="Go to page number" />
-            <Pagination.GoToLabel>{() => `من 100 صفحات`}</Pagination.GoToLabel>
+            <Pagination.GoToLabel>{({state}) => `از ${state.lastPage} صفحه`}</Pagination.GoToLabel>
           </Pagination.GoToForm>
         </Pagination.Controls>
         <Pagination.AdditionalDetails shouldHideDetails>