@workday/canvas-kit-react 7.0.0-alpha.129-next.3 → 7.0.0-alpha.256-next.2

package/layout/lib/utils/layout.ts

@@ -1,70 +1,129 @@
 import {Property} from 'csstype';
 
-/** style props to for layout properties */
+import {buildStyleFns, buildStylePropFn, StyleFnConfig} from './buildStyleFns';
+import {SystemPropValues} from './systemProps';
+
+/** style props to for CSS layout properties */
 export type LayoutStyleProps = {
-  /** sets `display` property */
+  /** sets [CSS display property](https://developer.mozilla.org/en-US/docs/Web/CSS/displaydisplay) */
   display?: Property.Display;
-  /** sets `height` property */
-  height?: number | string;
-  /** sets `list-style property */
+  /**
+   * - sets [CSS height property](https://developer.mozilla.org/en-US/docs/Web/CSS/height)
+   * - system tokens: `space`
+   * */
+  height?: SystemPropValues['space'];
+  /** sets [CSS list-style property](https://developer.mozilla.org/en-US/docs/Web/CSS/list-style) */
   listStyle?: Property.ListStyle;
-  /** sets `max-height` property */
-  maxHeight?: number | string;
-  /** sets `max-width` property */
-  maxWidth?: number | string;
-  /** sets `min-height` property */
-  minHeight?: number | string;
-  /** sets `min-width` property */
-  minWidth?: number | string;
-  /** sets `overflow` property */
+  /**
+   * - sets [CSS max-height property](https://developer.mozilla.org/en-US/docs/Web/CSS/max-height)
+   * - system tokens: `space`
+   * */
+  maxHeight?: SystemPropValues['space'];
+  /**
+   * - sets [CSS max-width property](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width)
+   * - system tokens: `space`
+   * */
+  maxWidth?: SystemPropValues['space'];
+  /**
+   * - sets [CSS min-height property](https://developer.mozilla.org/en-US/docs/Web/CSS/min-height)
+   * - system tokens: `space`
+   * */
+  minHeight?: SystemPropValues['space'];
+  /**
+   * - sets [CSS min-width property](https://developer.mozilla.org/en-US/docs/Web/CSS/min-width)
+   * - system tokens: `space`
+   * */
+  minWidth?: SystemPropValues['space'];
+  /** sets [CSS overflow property](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow) */
   overflow?: Property.Overflow;
-  /** sets `overflow-x` property */
+  /** sets [CSS overflow-x property](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x) */
   overflowX?: Property.OverflowX;
-  /** sets `overflow-y` property */
+  /** sets [CSS overflow-y property](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-y) */
   overflowY?: Property.OverflowY;
-  /** sets `vertical-align` property */
+  /** sets [CSS vertical-align property](https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align) */
   verticalAlign?: Property.VerticalAlign;
-  /** sets `width` property */
-  width?: number | string;
+  /**
+   * - sets [CSS width property](https://developer.mozilla.org/en-US/docs/Web/CSS/width)
+   * - system tokens: `space`
+   * */
+  width?: SystemPropValues['space'];
 };
 
-const layoutProps = {
-  display: 'display',
-  height: 'height',
-  listStyle: 'listStyle',
-  maxHeight: 'maxHeight',
-  maxWidth: 'maxWidth',
-  minHeight: 'minHeight',
-  minWidth: 'minWidth',
-  overflow: 'overflow',
-  overflowX: 'overflowX',
-  overflowY: 'overflowY',
-  verticalAlign: 'verticalAlign',
-  width: 'width',
-};
+export const layoutStyleFnConfigs: StyleFnConfig[] = [
+  {
+    name: 'display',
+    properties: ['display'],
+    system: 'none',
+  },
+  {
+    name: 'height',
+    properties: ['height'],
+    system: 'space',
+  },
+  {
+    name: 'listStyle',
+    properties: ['listStyle'],
+    system: 'none',
+  },
+  {
+    name: 'maxHeight',
+    properties: ['maxHeight'],
+    system: 'space',
+  },
+  {
+    name: 'maxWidth',
+    properties: ['maxWidth'],
+    system: 'space',
+  },
+  {
+    name: 'minHeight',
+    properties: ['minHeight'],
+    system: 'space',
+  },
+  {
+    name: 'minWidth',
+    properties: ['minWidth'],
+    system: 'space',
+  },
+  {
+    name: 'overflow',
+    properties: ['overflow'],
+    system: 'none',
+  },
+  {
+    name: 'overflowX',
+    properties: ['overflowX'],
+    system: 'none',
+  },
+  {
+    name: 'overflowY',
+    properties: ['overflowY'],
+    system: 'none',
+  },
+  {
+    name: 'verticalAlign',
+    properties: ['verticalAlign'],
+    system: 'none',
+  },
+  {
+    name: 'width',
+    properties: ['width'],
+    system: 'space',
+  },
+];
 
+export const layoutStyleFns = buildStyleFns(layoutStyleFnConfigs);
 /**
- * A style prop function that takes components props and returns layout styles.
+ * A style prop function that takes component props and returns layout styles.
  * If no `LayoutStyleProps` are found, it returns an empty object.
  *
  * @example
- * // You'll most likely use `layout` with low-level, styled components
- * const BoxExample = () => (
+ * ```tsx
+ * const LayoutExample = () => (
  *   <Box display="inline-block" height="50%">
- *     Hello, positions!
+ *     Hello, layout!
  *   </Box>
  * );
- *
+ * ```
  */
-export function layout<P extends LayoutStyleProps>(props: P) {
-  const styles = {};
-  for (const key in props) {
-    if (key in layoutProps) {
-      const attr = layoutProps[key as keyof LayoutStyleProps];
-      const value = props[key];
-      // @ts-ignore TS doesn't like adding a potentially unknown key to an object, but because we own this object, it's fine.
-      styles[attr] = value;
-    }
-  }
-  return styles;
-}
+export const layout = buildStylePropFn<LayoutStyleProps>(layoutStyleFns);

package/layout/lib/utils/other.ts

@@ -1,20 +1,149 @@
+import {Property} from 'csstype';
+
+import {buildStyleFns, buildStylePropFn, StyleFnConfig} from './buildStyleFns';
+
+/** style props to for other CSS properties */
 export type OtherStyleProps = {
-  animation?: string;
+  /** sets [CSS animation property](https://developer.mozilla.org/en-US/docs/Web/CSS/animation) */
+  animation?: Property.Animation;
+  /** sets [CSS appearance property](https://developer.mozilla.org/en-US/docs/Web/CSS/appearance) */
+  appearance?: Property.Appearance;
+  /** sets [CSS box-sizing property](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing) */
+  boxSizing?: Property.BoxSizing;
+  /** sets [CSS content property](https://developer.mozilla.org/en-US/docs/Web/CSS/content) */
+  content?: Property.Content;
+  /** sets [CSS cursor property](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) */
+  cursor?: Property.Cursor;
+  /** sets [CSS fill property](https://developer.mozilla.org/en-US/docs/Web/CSS/fill) */
+  fill?: Property.Fill;
+  /** sets [CSS float property](https://developer.mozilla.org/en-US/docs/Web/CSS/float) */
+  float?: Property.Float;
+  /** sets [CSS object-fit property](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) */
+  objectFit?: Property.ObjectFit;
+  /** sets [CSS object-position property](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position) */
+  objectPosition?: Property.ObjectPosition;
+  /** sets [CSS opacity](https://developer.mozilla.org/en-US/docs/Web/CSS/opacity) */
+  opacity?: Property.Opacity;
+  /** sets [CSS outline property](https://developer.mozilla.org/en-US/docs/Web/CSS/outline) */
+  outline?: Property.Outline;
+  /** sets [CSS outline-offset property](https://developer.mozilla.org/en-US/docs/Web/CSS/outline-offset) */
+  outlineOffset?: Property.OutlineOffset;
+  /** sets [CSS overflow-wrap property](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap) */
+  overflowWrap?: Property.OverflowWrap;
+  /** sets [CSS pointer-events property](https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events) */
+  pointerEvents?: Property.PointerEvents;
+  /** sets [CSS resize property](https://developer.mozilla.org/en-US/docs/Web/CSS/resize) */
+  resize?: Property.Resize;
+  /** sets [CSS stroke property](https://developer.mozilla.org/en-US/docs/Web/CSS/stroke) */
+  stroke?: Property.Stroke;
+  /** sets [CSS transform property](https://developer.mozilla.org/en-US/docs/Web/CSS/transform) */
+  transform?: Property.Transform;
+  /** sets [CSS transition property](https://developer.mozilla.org/en-US/docs/Web/CSS/transition) */
+  transition?: Property.Transition;
+  /** sets [CSS user-select property](https://developer.mozilla.org/en-US/docs/Web/CSS/user-select) */
+  userSelect?: Property.UserSelect;
+  /** sets [CSS visibility property](https://developer.mozilla.org/en-US/docs/Web/CSS/visibility) */
+  visibility?: Property.Visibility;
 };
 
-const otherProps = {
-  animation: (value: string) => {
-    return {animation: value};
+export const otherStyleFnConfigs: StyleFnConfig[] = [
+  {
+    name: 'animation',
+    properties: ['animation'],
+    system: 'none',
   },
-};
+  {
+    name: 'appearance',
+    properties: ['appearance'],
+    system: 'none',
+  },
+  {
+    name: 'boxSizing',
+    properties: ['boxSizing'],
+    system: 'none',
+  },
+  {
+    name: 'content',
+    properties: ['content'],
+    system: 'none',
+  },
+  {
+    name: 'cursor',
+    properties: ['cursor'],
+    system: 'none',
+  },
+  {
+    name: 'fill',
+    properties: ['fill'],
+    system: 'none',
+  },
+  {
+    name: 'float',
+    properties: ['float'],
+    system: 'none',
+  },
+  {
+    name: 'objectFit',
+    properties: ['objectFit'],
+    system: 'none',
+  },
+  {
+    name: 'objectPosition',
+    properties: ['objectPosition'],
+    system: 'none',
+  },
+  {
+    name: 'outline',
+    properties: ['outline'],
+    system: 'none',
+  },
+  {
+    name: 'outlineOffset',
+    properties: ['outlineOffset'],
+    system: 'none',
+  },
+  {
+    name: 'overflowWrap',
+    properties: ['overflowWrap'],
+    system: 'none',
+  },
+  {
+    name: 'pointerEvents',
+    properties: ['pointerEvents'],
+    system: 'none',
+  },
+  {
+    name: 'resize',
+    properties: ['resize'],
+    system: 'none',
+  },
+  {
+    name: 'stroke',
+    properties: ['stroke'],
+    system: 'none',
+  },
+  {
+    name: 'transform',
+    properties: ['transform'],
+    system: 'none',
+  },
+  {
+    name: 'transition',
+    properties: ['transition'],
+    system: 'none',
+  },
+  {
+    name: 'userSelect',
+    properties: ['userSelect'],
+    system: 'none',
+  },
+  {
+    name: 'visibility',
+    properties: ['visibility'],
+    system: 'none',
+  },
+];
+
+export const otherStyleFns = buildStyleFns(otherStyleFnConfigs);
 
-export function other<P extends OtherStyleProps>(props: P) {
-  for (const key in props) {
-    if (key in otherProps) {
-      const value = props[key as keyof OtherStyleProps] as keyof OtherStyleProps;
-      const styleFn = otherProps[key as keyof OtherStyleProps];
-      return styleFn(value);
-    }
-  }
-  return {};
-}
+export const other = buildStylePropFn<OtherStyleProps>(otherStyleFns);

package/layout/lib/utils/position.ts

@@ -1,96 +1,102 @@
-import {
-  ContentDirection,
-  PartialEmotionCanvasTheme,
-  useTheme,
-} from '@workday/canvas-kit-react/common';
 import {Property} from 'csstype';
 
-/** style props to for standard position properties */
-export type PositionStandardProps = {
-  /** sets `position` property  */
+import {buildStyleFns, buildStylePropFn, StyleFnConfig} from './buildStyleFns';
+
+/** style props to for CSS position properties */
+export type PositionStyleProps = {
+  /**
+   * - sets [CSS position property](https://developer.mozilla.org/en-US/docs/Web/CSS/position)
+   * */
   position?: Property.Position;
-  /** sets `zIndex` property  */
+  /**
+   * - sets [CSS z-index property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index)
+   * */
   zIndex?: Property.ZIndex;
-  /** sets `top` property  */
+  /**
+   * - sets [CSS top property](https://developer.mozilla.org/en-US/docs/Web/CSS/top)
+   * */
   top?: number | string;
-  /** sets `right` property (no bidirectional support) */
+  /**
+   * - sets [CSS right property](https://developer.mozilla.org/en-US/docs/Web/CSS/right)
+   * - no bidirectional support
+   * */
   right?: number | string;
-  /** sets `bottom` property  */
+  /**
+   * - sets [CSS bottom property](https://developer.mozilla.org/en-US/docs/Web/CSS/bottom)
+   * */
   bottom?: number | string;
-  /** sets `left` property (no bidirectional support)  */
+  /**
+   * - sets [CSS left property](https://developer.mozilla.org/en-US/docs/Web/CSS/left)
+   * - no bidirectional support
+   * */
   left?: number | string;
-};
-
-export type PositionLogicalProps = {
-  /** sets `left` property (bidirectional support)  */
+  /**
+   * - sets [CSS inset-inline-start property](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-start)
+   * - bidirectional support
+   * */
   insetInlineStart?: number | string;
-  /** sets `right` property (bidirectional support) */
+  /**
+   * - sets [CSS inset-inline-end property](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-end)
+   * - bidirectional support
+   * */
   insetInlineEnd?: number | string;
 };
 
-const getInsetInlineStartStyle = (value: number | string, isRTL = false) => {
-  const attr = isRTL ? 'right' : 'left';
-  return {[attr]: value};
-};
-
-const getInsetInlineEndStyle = (value: number | string, isRTL = false) => {
-  const attr = isRTL ? 'left' : 'right';
-  return {[attr]: value};
-};
-
-const standardPositionProps = {
-  position: 'position',
-  zIndex: 'zIndex',
-  top: 'top',
-  right: 'right',
-  bottom: 'bottom',
-  left: 'left',
-};
-
-const logicalPositionProps = {
-  insetInlineStart: getInsetInlineStartStyle,
-  insetInlineEnd: getInsetInlineEndStyle,
-};
-
-export type PositionStyleProps = PositionStandardProps & PositionLogicalProps;
+export const positionStyleFnConfigs: StyleFnConfig[] = [
+  {
+    name: 'position',
+    properties: ['position'],
+    system: 'none',
+  },
+  {
+    name: 'zIndex',
+    properties: ['zIndex'],
+    system: 'none',
+  },
+  {
+    name: 'top',
+    properties: ['top'],
+    system: 'none',
+  },
+  {
+    name: 'right',
+    properties: ['right'],
+    system: 'none',
+  },
+  {
+    name: 'bottom',
+    properties: ['bottom'],
+    system: 'none',
+  },
+  {
+    name: 'left',
+    properties: ['left'],
+    system: 'none',
+  },
+  {
+    name: 'insetInlineStart',
+    properties: ['insetInlineStart'],
+    system: 'none',
+  },
+  {
+    name: 'insetInlineEnd',
+    properties: ['insetInlineEnd'],
+    system: 'none',
+  },
+];
 
+export const positionStyleFns = buildStyleFns(positionStyleFnConfigs);
 /**
- * A style prop function that takes components props and returns position styles.
+ * A style prop function that takes component props and returns position styles.
  * If no `PositionProps` are found, it returns an empty object.
  *
  * @example
- * // You'll most likely use `position` with low-level, styled components
+ * ```
  * const BoxExample = () => (
  *   <Box position="absolute" top="50%">
  *     Hello, positions!
  *   </Box>
  * );
- *
+ * ```
  */
-export function position<P extends PositionStyleProps & {theme?: PartialEmotionCanvasTheme}>(
-  props: P
-) {
-  // position will always be used within the context of a component, but eslint doesn't know that
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  const {canvas} = useTheme(props.theme);
-  let styles = {};
-  for (const key in props) {
-    if (key in props) {
-      if (key in standardPositionProps) {
-        const value = props[key];
-        const attr = standardPositionProps[key as keyof PositionStandardProps];
-        // @ts-ignore TS doesn't like adding a potentially unknown key to an object, but because we own this object, it's fine.
-        styles[attr] = value;
-        continue;
-      }
-      if (key in logicalPositionProps) {
-        const value = props[key as keyof PositionLogicalProps] as string | number;
-        const styleFn = logicalPositionProps[key as keyof PositionLogicalProps];
-        const isRTL = canvas.direction === ContentDirection.RTL;
-        const style = styleFn(value, isRTL);
-        styles = {...styles, ...style};
-      }
-    }
-  }
-  return styles;
-}
+export const position = buildStylePropFn<PositionStyleProps>(positionStyleFns);