@workday/canvas-kit-docs 14.1.0-1284-next.0 → 15.0.0-alpha.1283-next.0

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

@@ -0,0 +1,111 @@
+import React from 'react';
+
+import {useFormik} from 'formik';
+import {object, SchemaOf, string} from 'yup';
+
+import {TextInput} from '@workday/canvas-kit-react/text-input';
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {TertiaryButton, PrimaryButton} from '@workday/canvas-kit-react/button';
+import {visibleIcon, invisibleIcon} from '@workday/canvas-system-icons-web';
+import {useUniqueId} from '@workday/canvas-kit-react/common';
+import {FormField} from '@workday/canvas-kit-react/form-field';
+
+interface LoginSchema {
+  email: string;
+  password: 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 validationSchema: SchemaOf<LoginSchema> = object({
+  email: string().email('Enter a valid email').required(emailRequired),
+  password: string().min(passwordMinimum, passwordHint).required(passwordRequired),
+});
+
+export default () => {
+  const passwordRef = React.useRef<HTMLInputElement>(null);
+  const [showPassword, setShowPassword] = React.useState(false);
+  const passwordId = useUniqueId();
+
+  const formik = useFormik({
+    initialValues: {
+      email: 'example@baz.com',
+      password: 'foobarbaz',
+    },
+    validationSchema: validationSchema,
+    onSubmit: values => {
+      setShowPassword(false);
+      // Send data to server
+      setTimeout(() => {
+        alert(JSON.stringify(values, null, 2));
+      }, 0);
+    },
+  });
+
+  return (
+    <form onSubmit={formik.handleSubmit} action=".">
+      <Flex gap="xs" flexDirection="column" alignItems="flex-start">
+        <FormField
+          orientation="vertical"
+          isRequired={true}
+          error={formik.touched.email && !!formik.errors.email ? 'error' : undefined}
+        >
+          <FormField.Label>Email</FormField.Label>
+          <FormField.Field>
+            <FormField.Input
+              as={TextInput}
+              name="email"
+              autoComplete="username"
+              placeholder="yourName@example.com"
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              value={formik.values.email}
+            />
+          </FormField.Field>
+          <FormField.Hint>{formik.touched.email && formik.errors.email}</FormField.Hint>
+        </FormField>
+        <FormField
+          orientation="vertical"
+          id={passwordId}
+          error={formik.touched.password && !!formik.errors.password ? 'error' : undefined}
+          isRequired={true}
+        >
+          <FormField.Label>Password</FormField.Label>
+          <Flex gap="xxs">
+            <FormField.Field>
+              <FormField.Input
+                as={TextInput}
+                type={showPassword ? 'text' : 'password'}
+                name="password"
+                autoComplete="current-password"
+                spellCheck={false}
+                ref={passwordRef}
+                onChange={formik.handleChange}
+                onBlur={formik.handleBlur}
+                value={formik.values.password}
+              />
+            </FormField.Field>
+            <TertiaryButton
+              type="button"
+              icon={showPassword ? invisibleIcon : visibleIcon}
+              aria-label={showPassword ? 'Hide Password' : 'Show Password'}
+              aria-controls={`input-${passwordId}`}
+              onClick={() => {
+                setShowPassword(state => !state);
+                passwordRef.current?.focus();
+              }}
+            />
+          </Flex>
+          <FormField.Hint>
+            {(formik.touched.password && formik.errors.password) || passwordHint}
+          </FormField.Hint>
+        </FormField>
+
+        <PrimaryButton type="submit">Submit</PrimaryButton>
+      </Flex>
+    </form>
+  );
+};

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

@@ -10,14 +10,6 @@ import {Select} from '@workday/canvas-kit-react/select';
 import {FormField} from '@workday/canvas-kit-react/form-field';
 import {visibleIcon, invisibleIcon} from '@workday/canvas-system-icons-web';
 import {useUniqueId} from '@workday/canvas-kit-react/common';
-import {createStyles, cssVar} from '@workday/canvas-kit-styling';
-import {system} from '@workday/canvas-tokens-web';
-
-const styles = createStyles({
-  gap: system.space.x3,
-  flexDirection: 'column',
-  alignItems: 'flex-start',
-});
 
 type YupValidationResolver = <T extends {}>(
   validationSchema: SchemaOf<T>
@@ -107,7 +99,7 @@ export default () => {
   };
   return (
     <form onSubmit={onSubmit} action="." noValidate={true}>
-      <Flex cs={styles}>
+      <Flex gap="xs" flexDirection="column" alignItems="flex-start">
         <FormField
           orientation="vertical"
           isRequired={true}
@@ -151,7 +143,7 @@ export default () => {
           error={!!errors.password ? 'error' : undefined}
         >
           <FormField.Label>Password</FormField.Label>
-          <Flex cs={{gap: cssVar(system.space.x2)}}>
+          <Flex gap="xxs">
             <FormField.Field>
               <FormField.Input
                 as={TextInput}

package/dist/mdx/style-props/STYLE_PROPS.mdx

@@ -1,8 +1,4 @@
-import {
-  ExampleCodeBlock,
-  StylePropsTable,
-  StorybookStatusIndicator,
-} from '@workday/canvas-kit-docs';
+import {ExampleCodeBlock, StylePropsTable} from '@workday/canvas-kit-docs';
 
 import {
   backgroundStyleFnConfigs,
@@ -19,7 +15,8 @@ import {
   spaceStyleFnConfigs,
   textStyleFnConfigs,
 } from '@workday/canvas-kit-react/layout';
-import {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight';
+import {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight'
+import {Hyperlink} from '@workday/canvas-kit-react/button';
 
 import Background from './examples/Background';
 import Border from './examples/Border';
@@ -36,24 +33,19 @@ import Space from './examples/Space';
 import Text from './examples/Text';
 
 
-# Style Props <StorybookStatusIndicator type="deprecated" />
+# Style Props
 
 Style props provide a common, ergonomic API for modifying a component's styles by passing styles
 with props.
 
 <InformationHighlight className="sb-unstyled" variant="caution">
-  <InformationHighlight.Icon />
-  <InformationHighlight.Heading> Style props are deprecated!</InformationHighlight.Heading>
-  <InformationHighlight.Body>
-    As we transition away from Emotion's runtime costs, we advise to move away from using style props. Please use our [styling utilities](https://workday.github.io/canvas-kit/?path=/docs/styling-getting-started-overview--docs) instead. For more information on this change, view our discussion on the [Future of Styling](https://github.com/Workday/canvas-kit/discussions/2265).
-
-    You can use `14.1` codemod to automatic migration to `cs` prop. [More about codemods](http://localhost:9001/?path=/docs/guides-codemods--docs)
-
-  </InformationHighlight.Body>
+	<InformationHighlight.Icon />
+	<InformationHighlight.Heading> Caution: Performance Hit</InformationHighlight.Heading>
+	<InformationHighlight.Body>
+		As we transition away from Emotion's runtime costs, we advise against using style props. Please use our <Hyperlink src="https://workday.github.io/canvas-kit/?path=/docs/styling-getting-started-overview--docs">styling utilities</Hyperlink> instead. For more information on this change, view our discussion on the <Hyperlink src="https://github.com/Workday/canvas-kit/discussions/2265">Future of Styling</Hyperlink>.
+	</InformationHighlight.Body>
 </InformationHighlight>
 
-<br />
-
 ## System Prop Values
 
 Many style props are design-system-aware and translate `SystemPropValues` for you automatically. In

package/dist/mdx/styling/mdx/MergingStyles.mdx

@@ -1,4 +1,4 @@
-import {ExampleCodeBlock, SymbolDoc, StorybookStatusIndicator} from '@workday/canvas-kit-docs';
+import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
 import {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight';
 import {system} from '@workday/canvas-tokens-web';
 import StylingOverrides from './examples/StylingOverrides';
@@ -6,41 +6,7 @@ import StylingOverrides from './examples/StylingOverrides';
 
 # Merging Styles
 
-## handleCsProp
-
-But what about when using components that use `@emotion/react` or `@emotion/styled`? Those libraries
-use a different approach. Instead of multiple class names, they use a single, merged class name.
-
-`handleCsProp` was created to handle integration with existing components that use the `css` prop
-from `@emotion/react` or the `styled` components from `@emotion/styled`. If a class name from one of
-those libraries is detected, style merging will follow the same rules as those libraries. Instead of
-multiple class names, a single class name with all matching properties is created. The
-`handleCsProp` also takes care of merging `style` props, `className` props, and can handle the `cs`
-prop:
-
-```tsx
-const myStencil = createStencil({
-  // ...
-});
-
-const MyComponent = elemProps => {
-  return <div {...handleProps(elemProps, myStencil({}))} />;
-};
-
-// All props will be merged for you
-<MyComponent style={{color: 'red'}} className="my-classname" cs={{position: 'relative'}} />;
-```
-
-`handleCsProp` will make sure the `style` prop is passed to the `div` and that the `my-classname`
-CSS class name appears on the `div`'s class list. Also the `cs` prop will add the appropriate styles
-to the element via a CSS class name. If your component needs to handle being passed a `className`,
-`style`, or `cs` prop, use `handleCsProp`.
-
-### handleCsProp API
-
-<SymbolDoc hideHeading name="handleCsProp" />
-
-## mergeStyles <StorybookStatusIndicator type="deprecated" />
+## mergeStyles
 
 In v9, we used `@emotion/styled` or `@emotion/react` for all styling which is a runtime styling
 solution. Starting in v10, we're migrating our styling to a more static solution using
@@ -161,4 +127,38 @@ the last defined. This should be the expected order.
 
 ### mergeStyles API
 
-<SymbolDoc hideHeading name="mergeStyles" />
+<SymbolDoc hideHeading name="mergeStyles" />
+
+## handleCsProp
+
+But what about when using components that use `@emotion/react` or `@emotion/styled`? Those libraries
+use a different approach. Instead of multiple class names, they use a single, merged class name.
+
+`handleCsProp` was created to handle integration with existing components that use the `css` prop
+from `@emotion/react` or the `styled` components from `@emotion/styled`. If a class name from one of
+those libraries is detected, style merging will follow the same rules as those libraries. Instead of
+multiple class names, a single class name with all matching properties is created. The
+`handleCsProp` also takes care of merging `style` props, `className` props, and can handle the `cs`
+prop:
+
+```tsx
+const myStencil = createStencil({
+  // ...
+});
+
+const MyComponent = elemProps => {
+  return <div {...handleProps(elemProps, myStencil({}))} />;
+};
+
+// All props will be merged for you
+<MyComponent style={{color: 'red'}} className="my-classname" cs={{position: 'relative'}} />;
+```
+
+`handleCsProp` will make sure the `style` prop is passed to the `div` and that the `my-classname`
+CSS class name appears on the `div`'s class list. Also the `cs` prop will add the appropriate styles
+to the element via a CSS class name. If your component needs to handle being passed a `className`,
+`style`, or `cs` prop, use `handleCsProp`.
+
+### handleCsProp API
+
+<SymbolDoc hideHeading name="handleCsProp" />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "14.1.0-1284-next.0",
+  "version": "15.0.0-alpha.1283-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.1.0-1284-next.0",
-    "@workday/canvas-kit-preview-react": "^14.1.0-1284-next.0",
-    "@workday/canvas-kit-react": "^14.1.0-1284-next.0",
-    "@workday/canvas-kit-styling": "^14.1.0-1284-next.0",
+    "@workday/canvas-kit-labs-react": "^15.0.0-alpha.1283-next.0",
+    "@workday/canvas-kit-preview-react": "^15.0.0-alpha.1283-next.0",
+    "@workday/canvas-kit-react": "^15.0.0-alpha.1283-next.0",
+    "@workday/canvas-kit-styling": "^15.0.0-alpha.1283-next.0",
     "@workday/canvas-system-icons-web": "^3.0.36",
     "@workday/canvas-tokens-web": "^3.1.1",
     "markdown-to-jsx": "^7.2.0",
@@ -61,5 +61,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "5.0"
   },
-  "gitHead": "ef232455072b3e17bf0e3bc3da24b954f92d5911"
+  "gitHead": "69e1e3b1fb6262a3db424e4b538fb6dc1afb20f2"
 }