@workday/canvas-kit-docs 5.3.0-next.11 → 5.3.0-next.18

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": "5.3.0-next.11+693103f1",
+  "version": "5.3.0-next.18+6a7c92ab",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -49,7 +49,7 @@
   ],
   "dependencies": {
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-react": "^5.3.0-next.11+693103f1"
+    "@workday/canvas-kit-react": "^5.3.0-next.18+6a7c92ab"
   },
   "devDependencies": {
     "fs-extra": "^10.0.0",
@@ -57,5 +57,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "^3.8.3"
   },
-  "gitHead": "693103f14f975faef6595327795dc3838c8f32d3"
+  "gitHead": "6a7c92ab26c236a362790dceab7a2f10d84fe9ae"
 }

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>
-  );
-};

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

@@ -1,51 +0,0 @@
-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>
-  );
-};