@workday/canvas-kit-react 8.0.0-alpha.208-next.1 → 8.0.0-alpha.216-next.4

package/layout/lib/utils/other.ts

@@ -1,20 +1,147 @@
+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 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);