@workday/canvas-kit-docs 6.0.0-alpha.0-next.30 → 6.0.0-alpha.0-next.36

package/dist/mdx/react/tabs/examples/DynamicTabs.tsx

@@ -1,22 +1,50 @@
 import React from 'react';
 import {space} from '@workday/canvas-kit-react/tokens';
 
-import {Tabs, useTabsModel} from '@workday/canvas-kit-react/tabs';
+import {Tabs, useTabsModel, TabsModel} from '@workday/canvas-kit-react/tabs';
+import {SelectionModel} from '../../lib/selection';
 
 export default () => {
   const [tabs, setTabs] = React.useState([
-    {tab: 'Tab 1', name: 'tab-1'},
-    {tab: 'Tab 2', name: 'tab-2'},
-    {tab: 'Tab 3', name: 'tab-3'},
+    {tab: 'Tab 1', id: 'tab-1'},
+    {tab: 'Tab 2', id: 'tab-2'},
+    {tab: 'Tab 3', id: 'tab-3'},
   ]);
   const addedRef = React.useRef(tabs.length);
   const model = useTabsModel({
-    shouldActivate: ({data}) => data.tab !== 'last',
+    shouldSelect: ({data}) => data.id !== 'last',
   });
 
-  const onKeyDown = (e: React.KeyboardEvent<HTMLElement>, name: string) => {
-    if (e.key === 'Backspace') {
-      setTabs(tabs.filter(item => item.name !== name));
+  /**
+   * Helper function that should be called when an item is programmatically removed. The following
+   * side effects depend on state of the model:
+   * * **Item is focused**: Focus will be moved to next item in the list
+   * * **Item is selected**: Selection will be moved to the next item in the list
+   * @param id The id of the item that will be removed
+   */
+  const removeItem = (id: string, model: SelectionModel) => {
+    const index = model.state.items.findIndex(item => model.getId(item) === model.state.cursorId);
+    const nextIndex = index === model.state.items.length - 1 ? index - 1 : index + 1;
+    const nextId = model.getId(model.state.items[nextIndex]);
+    if (model.state.selectedIds[0] === id) {
+      // We're removing the currently selected item. Select next item
+      model.events.select({id: nextId});
+    }
+    if (model.state.cursorId === id) {
+      // We're removing the currently focused item. Focus next item
+      model.events.goTo({id: nextId});
+
+      // wait for stabilization of state
+      requestAnimationFrame(() => {
+        document.querySelector<HTMLElement>(`#${model.state.id}-${nextId}`)?.focus();
+      });
+    }
+  };
+
+  const onKeyDown = (e: React.KeyboardEvent<HTMLElement>, id: string) => {
+    if (e.key === 'Delete') {
+      setTabs(tabs.filter(item => item.id !== id));
+      removeItem(id, model);
     }
   };
 
@@ -25,10 +53,10 @@ export default () => {
       <Tabs.List>
         {tabs.map((item, index) => (
           <Tabs.Item
-            key={item.name}
-            name={item.name}
+            key={item.id}
+            name={item.id}
             index={index}
-            onKeyDown={e => onKeyDown(e, item.name)}
+            onKeyDown={e => onKeyDown(e, item.id)}
           >
             {item.tab}
           </Tabs.Item>
@@ -40,7 +68,7 @@ export default () => {
           onClick={() => {
             addedRef.current += 1;
             setTabs(tabs =>
-              tabs.concat({tab: `Tab ${addedRef.current}`, name: `tab-${addedRef.current}`})
+              tabs.concat({tab: `Tab ${addedRef.current}`, id: `tab-${addedRef.current}`})
             );
             model.events.goTo({id: 'last'});
           }}
@@ -50,7 +78,7 @@ export default () => {
       </Tabs.List>
       <div style={{marginTop: space.m}}>
         {tabs.map((item, index) => (
-          <Tabs.Panel key={item.name} name={item.name}>
+          <Tabs.Panel key={item.id} name={item.id}>
             Contents of {item.tab}
           </Tabs.Panel>
         ))}

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

@@ -6,8 +6,8 @@ import {Tabs, useTabsModel} from '@workday/canvas-kit-react/tabs';
 
 export default () => {
   const model = useTabsModel({
-    onActivate({data, prevState}) {
-      console.log('Activated Tab', data, prevState);
+    onSelect({data, prevState}) {
+      console.log('Selected Tab', data, prevState);
     },
   });
 
@@ -27,10 +27,10 @@ export default () => {
       </Tabs>
       <SecondaryButton
         onClick={() => {
-          model.events.activate({tab: 'third'});
+          model.events.select({id: 'third'});
         }}
       >
-        Activate third tab
+        Select Third Tab
       </SecondaryButton>
     </>
   );

package/dist/mdx/react/tabs/examples/Icons.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+
+import {space} from '@workday/canvas-kit-react/tokens';
+import {starIcon, searchIcon, selectIcon, shareIcon} from '@workday/canvas-system-icons-web';
+import {Tabs} from '@workday/canvas-kit-react/tabs';
+
+export default () => {
+  return (
+    <Tabs>
+      <Tabs.List>
+        <Tabs.Item hasIcon>
+          <Tabs.Item.Icon icon={starIcon} />
+          <Tabs.Item.Text>First Tab</Tabs.Item.Text>
+        </Tabs.Item>
+        <Tabs.Item hasIcon>
+          <Tabs.Item.Icon icon={searchIcon} />
+          <Tabs.Item.Text>Second Tab</Tabs.Item.Text>
+        </Tabs.Item>
+        <Tabs.Item hasIcon>
+          <Tabs.Item.Icon icon={selectIcon} />
+          <Tabs.Item.Text>Third Tab</Tabs.Item.Text>
+        </Tabs.Item>
+        <Tabs.Item hasIcon>
+          <Tabs.Item.Icon icon={shareIcon} />
+          <Tabs.Item.Text>Fourth Tab</Tabs.Item.Text>
+        </Tabs.Item>
+      </Tabs.List>
+      <div style={{marginTop: space.m}}>
+        <Tabs.Panel>Contents of First Tab</Tabs.Panel>
+        <Tabs.Panel>Contents of Second Tab</Tabs.Panel>
+        <Tabs.Panel>Contents of Third Tab</Tabs.Panel>
+        <Tabs.Panel>Contents of Fourth Tab</Tabs.Panel>
+      </div>
+    </Tabs>
+  );
+};

package/dist/mdx/react/tabs/examples/OverflowTabs.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+
+import {Tabs, useTabsModel} from '@workday/canvas-kit-react/tabs';
+import {HStack} from '@workday/canvas-kit-labs-react';
+import {SecondaryButton} from '../../../button';
+
+type MyTabItem = {
+  id: string;
+  text: React.ReactNode;
+  contents: string;
+};
+
+export default () => {
+  const [items] = React.useState<MyTabItem[]>([
+    {id: 'first', text: 'First Tab', contents: 'Contents of First Tab'},
+    {id: 'second', text: 'Second Tab', contents: 'Contents of Second Tab'},
+    {id: 'third', text: 'Third Tab', contents: 'Contents of Third Tab'},
+    {id: 'fourth', text: 'Fourth Tab', contents: 'Contents of Fourth Tab'},
+    {id: 'fifth', text: 'Fifth Tab', contents: 'Contents of Fifth Tab'},
+    {id: 'sixth', text: 'Sixth Tab', contents: 'Contents of Sixth Tab'},
+    {id: 'seventh', text: 'Seventh Tab', contents: 'Contents of Seventh Tab'},
+  ]);
+  const model = useTabsModel({
+    items,
+  });
+  const [containerWidth, setContainerWidth] = React.useState('100%');
+  return (
+    <div style={{width: containerWidth}}>
+      <Tabs model={model}>
+        <Tabs.List overflowButton={<Tabs.OverflowButton>More</Tabs.OverflowButton>}>
+          {(item: MyTabItem) => <Tabs.Item name={item.id}>{item.text}</Tabs.Item>}
+        </Tabs.List>
+        <Tabs.Menu.Popper>
+          <Tabs.Menu.Card maxWidth={300} maxHeight={200}>
+            <Tabs.Menu.List>
+              {(item: MyTabItem) => <Tabs.Menu.Item name={item.id}>{item.text}</Tabs.Menu.Item>}
+            </Tabs.Menu.List>
+          </Tabs.Menu.Card>
+        </Tabs.Menu.Popper>
+        <Tabs.Panels>
+          {(item: MyTabItem) => (
+            <Tabs.Panel marginTop="m" name={item.id}>
+              {item.contents}
+            </Tabs.Panel>
+          )}
+        </Tabs.Panels>
+      </Tabs>
+      <hr />
+      <h4>Change tab container size</h4>
+      <HStack spacing="xs">
+        <SecondaryButton onClick={() => setContainerWidth('100%')}>100%</SecondaryButton>
+        <SecondaryButton onClick={() => setContainerWidth('500px')}>500px</SecondaryButton>
+        <SecondaryButton onClick={() => setContainerWidth('235px')}>235px</SecondaryButton>
+        <SecondaryButton onClick={() => setContainerWidth('150px')}>150px</SecondaryButton>
+      </HStack>
+    </div>
+  );
+};

package/dist/mdx/react/tabs/examples/SinglePanel.tsx

@@ -34,7 +34,7 @@ export default () => {
         </Tabs.Item>
       </Tabs.List>
       <Tabs.Panel style={{marginTop: space.m}} hidden={undefined} id="mytab-panel">
-        {contents[model.state.activeTab]}
+        {contents[model.state.selectedIds[0]]}
       </Tabs.Panel>
     </Tabs>
   );

package/dist/mdx/react/toast/toast.mdx

@@ -29,52 +29,36 @@ Below are examples we expect will work for most use cases. Note that all example
 they are an important signifier to communicate meaning. For this reason, Toast notifications should
 always include an icon.
 
----
-
 #### Complete Example with Popper
 
 We use Popper to position Toast. Here's an example of how to use them together.
 
 <ExampleCodeBlock code={WithPopper} />
 
----
-
 #### Success
 
 <ExampleCodeBlock code={Success} />
 
----
-
 #### Error
 
 <ExampleCodeBlock code={Error} />
 
----
-
 #### WithCloseButton
 
 <ExampleCodeBlock code={WithCloseButton} />
 
----
-
 #### With an Action Link
 
 <ExampleCodeBlock code={WithActionLink} />
 
----
-
 #### With an Action Link and CloseIcon
 
 <ExampleCodeBlock code={WithActionLinkAndCloseIcon} />
 
----
-
 #### With RTL
 
 <ExampleCodeBlock code={RTL} />
 
----
-
-## Component Props
+## Props
 
 <ArgsTable of={Toast} />

package/dist/mdx/react/tooltip/Tooltip.mdx

@@ -3,6 +3,7 @@ import {Specifications} from '@workday/canvas-kit-docs';
 
 import Default from './examples/Default';
 import CustomContent from './examples/CustomContent';
+import DelayedTooltip from './examples/DelayedTooltip';
 import DescribeType from './examples/DescribeType';
 import Muted from './examples/Muted';
 import Placements from './examples/Placements';
@@ -87,6 +88,13 @@ a dialog instead.
 
 <ExampleCodeBlock code={CustomContent} />
 
+### Delayed Tooltip
+
+The default delay for showing and hiding a tooltip are 300ms and 100ms, respectively. You can
+control the length of the delay by providing custom `showDelay` and `hideDelay` in ms.
+
+<ExampleCodeBlock code={DelayedTooltip} />
+
 ### Placements
 
 The tooltip allows for a `placement` configuration. The tooltip uses
@@ -168,7 +176,7 @@ example uses those parts directly while being functionally equivalent to the ori
 
 <ExampleCodeBlock code={UseTooltip} />
 
-## Properties
+## Props
 
 <ArgsTable of={Tooltip} />
 

package/dist/mdx/react/tooltip/examples/DelayedTooltip.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import {SecondaryButton} from '@workday/canvas-kit-react/button';
+import {Tooltip} from '@workday/canvas-kit-react/tooltip';
+
+export default () => {
+  return (
+    <React.Fragment>
+      <Tooltip type="describe" title="Tooltip Text" showDelay={2000} hideDelay={1000}>
+        <SecondaryButton>
+          Tooltip appears after 2 seconds and disappears after 1 second
+        </SecondaryButton>
+      </Tooltip>
+    </React.Fragment>
+  );
+};

package/dist/mdx/react/tooltip/examples/Ellipsis.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import {SecondaryButton} from '@workday/canvas-kit-react/button';
 import {OverflowTooltip} from '@workday/canvas-kit-react/tooltip';
 import {space} from '@workday/canvas-kit-react/tokens';
+import {resetIcon} from '@workday/canvas-system-icons-web';
 
 const CustomContent = ({...elemProps}) => (
   <button
@@ -30,6 +31,11 @@ export default () => {
           Super Mega Ultra Long Content With Max Width On The Button
         </SecondaryButton>
       </OverflowTooltip>
+      <OverflowTooltip>
+        <SecondaryButton icon={resetIcon} style={{maxWidth: 200}}>
+          Super Mega Ultra Long Content With Max Width On The Button with Icon
+        </SecondaryButton>
+      </OverflowTooltip>
       <OverflowTooltip>
         <button
           style={{

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "6.0.0-alpha.0-next.30+38d21d80",
+  "version": "6.0.0-alpha.0-next.36+5890bf68",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -35,7 +35,8 @@
     "build:specs": "node ./utils/build-specifications.js",
     "build:downlevel-dts": "yarn run downlevel-dts dist ts3.5/dist",
     "build": "npm-run-all --parallel build:cjs build:es6 build:mdx --sequential build:specs build:downlevel-dts",
-    "depcheck": "node ../../utils/check-dependencies-exist.js"
+    "depcheck": "node ../../utils/check-dependencies-exist.js",
+    "typecheck:src": "tsc -p . --noEmit --incremental false"
   },
   "publishConfig": {
     "access": "public"
@@ -49,7 +50,7 @@
   ],
   "dependencies": {
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-react": "^6.0.0-alpha.0-next.30+38d21d80"
+    "@workday/canvas-kit-react": "^6.0.0-alpha.0-next.36+5890bf68"
   },
   "devDependencies": {
     "fs-extra": "^10.0.0",
@@ -57,5 +58,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "^3.8.3"
   },
-  "gitHead": "38d21d80658997a8a7ebbab29230548fc13ec854"
+  "gitHead": "5890bf680def9c37d6e386472634cc3e1b6d81e9"
 }

package/dist/mdx/CODE_OF_CONDUCT.md

@@ -1,68 +0,0 @@
-# Contributor Covenant Code of Conduct
-
-## Our Pledge
-
-In the interest of fostering an open and welcoming environment, we as contributors and maintainers
-pledge to making participation in our project and our community a harassment-free experience for
-everyone, regardless of age, body size, disability, ethnicity, sex characteristics, gender identity
-and expression, level of experience, education, socio-economic status, nationality, personal
-appearance, race, religion, or sexual identity and orientation.
-
-## Our Standards
-
-Examples of behavior that contributes to creating a positive environment include:
-
-- Using welcoming and inclusive language
-- Being respectful of differing viewpoints and experiences
-- Gracefully accepting constructive criticism
-- Focusing on what is best for the community
-- Showing empathy towards other community members
-
-Examples of unacceptable behavior by participants include:
-
-- The use of sexualized language or imagery and unwelcome sexual attention or advances
-- Trolling, insulting/derogatory comments, and personal or political attacks
-- Public or private harassment
-- Publishing others' private information, such as a physical or electronic address, without explicit
-  permission
-- Other conduct which could reasonably be considered inappropriate in a professional setting
-
-## Our Responsibilities
-
-Project maintainers are responsible for clarifying the standards of acceptable behavior and are
-expected to take appropriate and fair corrective action in response to any instances of unacceptable
-behavior.
-
-Project maintainers have the right and responsibility to remove, edit, or reject comments, commits,
-code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or
-to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate,
-threatening, offensive, or harmful.
-
-## Scope
-
-This Code of Conduct applies both within project spaces and in public spaces when an individual is
-representing the project or its community. Examples of representing a project or community include
-using an official project e-mail address, posting via an official social media account, or acting as
-an appointed representative at an online or offline event. Representation of a project may be
-further defined and clarified by project maintainers.
-
-## Enforcement
-
-Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting
-the project team at design@workday.com. All complaints will be reviewed and investigated and will
-result in a response that is deemed necessary and appropriate to the circumstances. The project team
-is obligated to maintain confidentiality with regard to the reporter of an incident. Further details
-of specific enforcement policies may be posted separately.
-
-Project maintainers who do not follow or enforce the Code of Conduct in good faith may face
-temporary or permanent repercussions as determined by other members of the project's leadership.
-
-## Attribution
-
-This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at
-https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
-
-[homepage]: https://www.contributor-covenant.org
-
-For answers to common questions about this code of conduct, see
-https://www.contributor-covenant.org/faq

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

@@ -1,46 +0,0 @@
-import React from 'react';
-import {TextInput} from '@workday/canvas-kit-labs-react/text-input';
-import {VStack} from '@workday/canvas-kit-labs-react/layout';
-import {styled} from '@workday/canvas-kit-react/common';
-import {useThemedRing} from '@workday/canvas-kit-labs-react/common';
-import {CSSProperties, space} from '@workday/canvas-kit-react/tokens';
-
-const StyledField = styled(TextInput.Field)<{alertStyles?: CSSProperties}>(
-  ({alertStyles}) => alertStyles
-);
-
-export default () => {
-  const [value, setValue] = React.useState('foo');
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setValue(event.target.value);
-  };
-
-  const alertStyles = useThemedRing(
-    value.length < 3 ? 'error' : value.length < 5 ? 'alert' : 'success'
-  );
-
-  return (
-    <VStack spacing="xxxs" alignItems="flex-start">
-      <TextInput>
-        <TextInput.Label>Password</TextInput.Label>
-        <StyledField
-          alertStyles={alertStyles}
-          onChange={handleChange}
-          value={value}
-          type="password"
-        />
-        <TextInput.Hint paddingTop={space.xxs}>
-          <strong>Password Strength: </strong>
-          {value.length < 3 ? (
-            <span>Weak</span>
-          ) : value.length < 5 ? (
-            <span>Average</span>
-          ) : (
-            <span>Strong</span>
-          )}
-        </TextInput.Hint>
-      </TextInput>
-    </VStack>
-  );
-};

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

@@ -1,20 +0,0 @@
-import React from 'react';
-import {TextInput} from '@workday/canvas-kit-labs-react/text-input';
-import {VStack} from '@workday/canvas-kit-labs-react/layout';
-
-export default () => {
-  const [value, setValue] = React.useState('');
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setValue(event.target.value);
-  };
-
-  return (
-    <VStack spacing="xxxs" alignItems="flex-start">
-      <TextInput>
-        <TextInput.Label>Email</TextInput.Label>
-        <TextInput.Field onChange={handleChange} value={value} />
-      </TextInput>
-    </VStack>
-  );
-};

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

@@ -1,20 +0,0 @@
-import React from 'react';
-import {TextInput} from '@workday/canvas-kit-labs-react/text-input';
-import {VStack} from '@workday/canvas-kit-labs-react/layout';
-
-export default () => {
-  const [value, setValue] = React.useState('');
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setValue(event.target.value);
-  };
-
-  return (
-    <VStack spacing="xxxs" alignItems="flex-start">
-      <TextInput>
-        <TextInput.Label>Email</TextInput.Label>
-        <TextInput.Field onChange={handleChange} value={value} disabled />
-      </TextInput>
-    </VStack>
-  );
-};

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

@@ -1,20 +0,0 @@
-import React from 'react';
-import {TextInput} from '@workday/canvas-kit-labs-react/text-input';
-import {VStack} from '@workday/canvas-kit-labs-react/layout';
-
-export default () => {
-  const [value, setValue] = React.useState('');
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setValue(event.target.value);
-  };
-
-  return (
-    <VStack spacing="xxxs">
-      <TextInput>
-        <TextInput.Label>Street Address</TextInput.Label>
-        <TextInput.Field onChange={handleChange} value={value} />
-      </TextInput>
-    </VStack>
-  );
-};

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

@@ -1,20 +0,0 @@
-import React from 'react';
-import {TextInput} from '@workday/canvas-kit-labs-react/text-input';
-import {HStack} from '@workday/canvas-kit-labs-react/layout';
-
-export default () => {
-  const [value, setValue] = React.useState('');
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setValue(event.target.value);
-  };
-
-  return (
-    <HStack spacing="l" alignItems="center">
-      <TextInput>
-        <TextInput.Label>Email</TextInput.Label>
-        <TextInput.Field onChange={handleChange} value={value} />
-      </TextInput>
-    </HStack>
-  );
-};

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

@@ -1,20 +0,0 @@
-import React from 'react';
-import {TextInput} from '@workday/canvas-kit-labs-react/text-input';
-import {VStack} from '@workday/canvas-kit-labs-react/layout';
-
-export default () => {
-  const [value, setValue] = React.useState('SuperSecret1');
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setValue(event.target.value);
-  };
-
-  return (
-    <VStack spacing="xxxs" alignItems="flex-start">
-      <TextInput>
-        <TextInput.Label>Password</TextInput.Label>
-        <TextInput.Field onChange={handleChange} value={value} type="password" />
-      </TextInput>
-    </VStack>
-  );
-};

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

@@ -1,20 +0,0 @@
-import React from 'react';
-import {TextInput} from '@workday/canvas-kit-labs-react/text-input';
-import {VStack} from '@workday/canvas-kit-labs-react/layout';
-
-export default () => {
-  const [value, setValue] = React.useState('');
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setValue(event.target.value);
-  };
-
-  return (
-    <VStack spacing="xxxs" alignItems="flex-start">
-      <TextInput>
-        <TextInput.Label>Email</TextInput.Label>
-        <TextInput.Field onChange={handleChange} value={value} placeholder="user@email.com" />
-      </TextInput>
-    </VStack>
-  );
-};

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

@@ -1,20 +0,0 @@
-import React from 'react';
-import {TextInput} from '@workday/canvas-kit-labs-react/text-input';
-import {VStack} from '@workday/canvas-kit-labs-react/layout';
-
-export default () => {
-  const [value, setValue] = React.useState('');
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setValue(event.target.value);
-  };
-
-  return (
-    <VStack spacing="xxxs" alignItems="flex-start">
-      <TextInput isRequired={true}>
-        <TextInput.Label>Email</TextInput.Label>
-        <TextInput.Field onChange={handleChange} value={value} />
-      </TextInput>
-    </VStack>
-  );
-};