@workday/canvas-kit-docs 10.0.8 → 10.0.10

package/dist/es6/lib/specs.js

@@ -378,10 +378,6 @@ module.exports = {specifications: [
                                   {
                                     "type": "it",
                                     "name": "should change the combobox value to reflect the key entered"
-                                  },
-                                  {
-                                    "type": "it",
-                                    "name": "should change the filtered results"
                                   }
                                 ]
                               }

package/dist/mdx/preview-react/_examples/examples/SelectWithFormik.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import {useFormik} from 'formik';
-import {Select} from '@workday/canvas-kit-preview-react/select';
+import {Select, useSelectModel} from '@workday/canvas-kit-react/select';
 import {
   FormField,
   useFormFieldInput,
@@ -8,6 +8,31 @@ import {
 } from '@workday/canvas-kit-preview-react/form-field';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
+import {
+  activityStreamIcon,
+  avatarIcon,
+  uploadCloudIcon,
+  userIcon,
+} from '@workday/canvas-system-icons-web';
+
+export default [
+  {
+    label: 'Dessert Person by Claire Saffitz',
+    serverId: 1,
+    icon: activityStreamIcon,
+  },
+  {
+    label: 'Elements of Pizza by Ken Forkish',
+    serverId: 2,
+    icon: avatarIcon,
+  },
+  {
+    label: 'Flour Water Salt Yeast by Ken Forkish',
+    serverId: 3,
+    icon: uploadCloudIcon,
+  },
+  {label: 'Mastering Pasta by Marc Verti', serverId: 4, icon: userIcon},
+];
 
 export default () => {
   const formik = useFormik({
@@ -22,34 +47,45 @@ export default () => {
     },
   });
 
-  const model = useFormFieldModel();
-  const formFieldInputProps = useFormFieldInput(model);
+  const selectModel = useSelectModel({
+    items: customOptionsMain,
+    getId: item => {
+      return item.serverId;
+    },
+    getTextValue: item => item.label,
+  });
 
   return (
     <form onSubmit={formik.handleSubmit} action=".">
       <Flex gap="xs" flexDirection="column" alignItems="flex-start">
         <FormField orientation="vertical" alignSelf="stretch" alignItems="normal">
-          <FormField.Label>Choose a book</FormField.Label>
-          <Select
-            name="selectedBook"
-            options={bookList}
-            onChange={event => formik.setFieldValue('selectedBook', event.currentTarget.value)}
-            value={formik.values.selectedBook}
-            grow
-            {...formFieldInputProps}
-          />
+          <Select model={selectModel}>
+            <FormField.Label>Choose a book</FormField.Label>
+            <FormField.Input
+              as={Select.Input}
+              name="selectedBook"
+              onChange={event => formik.setFieldValue('selectedBook', event.currentTarget.value)}
+              value={formik.values.selectedBook}
+              grow
+            />
+            <Select.Popper>
+              <Select.Card>
+                <Select.List maxHeight={200}>
+                  {item => {
+                    return (
+                      <Select.Item data-id={item.serverId} data-text={item.label}>
+                        <Select.Item.Icon icon={item.icon} />
+                        {item.label}
+                      </Select.Item>
+                    );
+                  }}
+                </Select.List>
+              </Select.Card>
+            </Select.Popper>
+          </Select>
         </FormField>
         <PrimaryButton type="submit">Submit</PrimaryButton>
       </Flex>
     </form>
   );
 };
-
-const bookList = [
-  {label: 'Dessert Person by Claire Saffitz', value: 'dessert person'},
-  {label: 'Elements of Pizza by Ken Forkish', value: 'the elements of pizza'},
-  {label: 'Flour Water Salt Yeast by Ken Forkish', value: 'flour water salt yeast'},
-  {label: 'Mastering Pasta by Marc Verti', value: 'mastering pasta'},
-  {label: 'Patisserie by Christophe Felder', value: 'patisserie'},
-  {label: 'Tartine by Elisabeth Prueitt & Chad Robertson', value: 'tartine'},
-];

package/dist/mdx/preview-react/_examples/examples/TextInputWithReactHookForm.tsx

@@ -6,6 +6,8 @@ import {object, SchemaOf, string} from 'yup';
 import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {TertiaryButton, PrimaryButton} from '@workday/canvas-kit-react/button';
+import {Select} from '@workday/canvas-kit-react/select';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {visibleIcon, invisibleIcon} from '@workday/canvas-system-icons-web';
 import {useUniqueId} from '@workday/canvas-kit-react/common';
 
@@ -13,7 +15,7 @@ type YupValidationResolver = <T extends {}>(
   validationSchema: SchemaOf<T>
 ) => (data: T) => Promise<{values: T; errors: {}} | {values: {}; errors: FieldErrorsImpl<T>}>;
 
-const useYupValidationResolver: any = validationSchema => {
+const useYupValidationResolver: YupValidationResolver = validationSchema => {
   return React.useCallback(
     async data => {
       try {
@@ -42,22 +44,23 @@ const useYupValidationResolver: any = validationSchema => {
 interface LoginSchema {
   email: string;
   password: string;
+  role: string;
 }
 
 const passwordMinimum = 8;
 const passwordHint = `Password should be of minimum ${passwordMinimum} characters length`;
 const emailRequired = 'Email is required';
 const passwordRequired = 'Password is required';
+const roleRequired = 'Role is required';
 
 const validationSchema: SchemaOf<LoginSchema> = object({
-  email: string()
-    .email('Enter a valid email')
-    .required(emailRequired),
-  password: string()
-    .min(passwordMinimum, passwordHint)
-    .required(passwordRequired),
+  email: string().email('Enter a valid email').required(emailRequired),
+  password: string().min(passwordMinimum, passwordHint).required(passwordRequired),
+  role: string().required(roleRequired),
 });
 
+const options = ['Developer', 'Designer', 'Product Manager'];
+
 export default () => {
   const {
     handleSubmit,
@@ -67,6 +70,7 @@ export default () => {
     defaultValues: {
       email: 'example@baz.com',
       password: 'foobarbaz',
+      role: 'Designer',
     },
     resolver: useYupValidationResolver(validationSchema),
     mode: 'onTouched',
@@ -92,6 +96,22 @@ export default () => {
   return (
     <form onSubmit={onSubmit} action=".">
       <Flex gap="xs" flexDirection="column" alignItems="flex-start">
+        <FormField orientation="vertical" isRequired={true} hasError={!!errors.role}>
+          <Select items={options}>
+            <FormField.Label>What is your role?</FormField.Label>
+            <FormField.Input as={Select.Input} {...register('role')} width="280px" />
+            <Select.Popper>
+              <Select.Card>
+                <Select.List maxHeight={200}>
+                  {item => {
+                    return <Select.Item>{item}</Select.Item>;
+                  }}
+                </Select.List>
+              </Select.Card>
+            </Select.Popper>
+            <FormField.Hint>{errors.role?.message}</FormField.Hint>
+          </Select>
+        </FormField>
         <TextInput orientation="vertical" isRequired={true} hasError={!!errors.email}>
           <TextInput.Label>Email</TextInput.Label>
           <TextInput.Field

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "10.0.8",
+  "version": "10.0.10",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -44,10 +44,10 @@
   "dependencies": {
     "@emotion/styled": "^11.6.0",
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-labs-react": "^10.0.8",
-    "@workday/canvas-kit-preview-react": "^10.0.8",
-    "@workday/canvas-kit-react": "^10.0.8",
-    "@workday/canvas-kit-styling": "^10.0.8",
+    "@workday/canvas-kit-labs-react": "^10.0.10",
+    "@workday/canvas-kit-preview-react": "^10.0.10",
+    "@workday/canvas-kit-react": "^10.0.10",
+    "@workday/canvas-kit-styling": "^10.0.10",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^1.0.0",
     "markdown-to-jsx": "^6.10.3",
@@ -59,5 +59,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "4.2"
   },
-  "gitHead": "b68a344126cb563661e92ca9d63776050c89e23e"
+  "gitHead": "0151ebb7cf081ea1aae115fd90770765cd949714"
 }