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

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

@@ -10,6 +10,14 @@ 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>
@@ -99,7 +107,7 @@ export default () => {
   };
   return (
     <form onSubmit={onSubmit} action="." noValidate={true}>
-      <Flex gap="xs" flexDirection="column" alignItems="flex-start">
+      <Flex cs={styles}>
         <FormField
           orientation="vertical"
           isRequired={true}
@@ -143,7 +151,7 @@ export default () => {
           error={!!errors.password ? 'error' : undefined}
         >
           <FormField.Label>Password</FormField.Label>
-          <Flex gap="xxs">
+          <Flex cs={{gap: cssVar(system.space.x2)}}>
             <FormField.Field>
               <FormField.Input
                 as={TextInput}

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

@@ -1,4 +1,8 @@
-import {ExampleCodeBlock, StylePropsTable} from '@workday/canvas-kit-docs';
+import {
+  ExampleCodeBlock,
+  StylePropsTable,
+  StorybookStatusIndicator,
+} from '@workday/canvas-kit-docs';
 
 import {
   backgroundStyleFnConfigs,
@@ -15,8 +19,7 @@ import {
   spaceStyleFnConfigs,
   textStyleFnConfigs,
 } from '@workday/canvas-kit-react/layout';
-import {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight'
-import {Hyperlink} from '@workday/canvas-kit-react/button';
+import {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight';
 
 import Background from './examples/Background';
 import Border from './examples/Border';
@@ -33,19 +36,24 @@ import Space from './examples/Space';
 import Text from './examples/Text';
 
 
-# Style Props
+# Style Props <StorybookStatusIndicator type="deprecated" />
 
 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> 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.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>
 
+<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} from '@workday/canvas-kit-docs';
+import {ExampleCodeBlock, SymbolDoc, StorybookStatusIndicator} 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,7 +6,41 @@ import StylingOverrides from './examples/StylingOverrides';
 
 # Merging Styles
 
-## 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" />
+
+## mergeStyles <StorybookStatusIndicator type="deprecated" />
 
 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
@@ -127,38 +161,4 @@ the last defined. This should be the expected order.
 
 ### mergeStyles API
 
-<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" />
+<SymbolDoc hideHeading name="mergeStyles" />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "15.0.0-alpha.1283-next.0",
+  "version": "15.0.0-alpha.1285-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": "^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-kit-labs-react": "^15.0.0-alpha.1285-next.0",
+    "@workday/canvas-kit-preview-react": "^15.0.0-alpha.1285-next.0",
+    "@workday/canvas-kit-react": "^15.0.0-alpha.1285-next.0",
+    "@workday/canvas-kit-styling": "^15.0.0-alpha.1285-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": "69e1e3b1fb6262a3db424e4b538fb6dc1afb20f2"
+  "gitHead": "ef232455072b3e17bf0e3bc3da24b954f92d5911"
 }

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

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