@workday/canvas-kit-react 10.0.0-alpha.538-next.0 → 10.0.0-alpha.540-next.0

package/tokens/lib/space.ts

@@ -58,58 +58,71 @@ export const space: CanvasSpace = {
   xxxl: '5rem',
 };
 
-/** Type for the `spaceNumbers` object with keys and numeric rem values (numbers) */
+/**
+ * Example using `space` with calc instead of deprecated `spaceNumbers`.
+ *
+ * ```tsx
+ *  // With deprecated `spaceNumbers`
+ * {
+ *  paddingLeft: spaceNumbers.xl + 2 // 42px
+ * }
+ * ```
+ *
+ * ```tsx
+ * // With `rem` based `space` tokens
+ * {
+ *  padding: `calc(${space.xl} + 2px)` // 42px
+ * }
+ * ```
+ *
+ * @deprecated ⚠️ `spaceNumbers` has been deprecated in a future major version. Please use our `rem` based [`space`](https://workday.github.io/canvas-kit/?path=/docs/tokens--space) tokens. In the case where you need to calculate a value, use [CSS calc()](https://developer.mozilla.org/en-US/docs/Web/CSS/calc).
+ */
 export type CanvasSpaceNumbers = {
   zero: 0;
-  xxxs: 0.25;
-  xxs: 0.5;
-  xs: 0.75;
-  s: 1;
-  m: 1.5;
-  l: 2;
-  xl: 2.5;
-  xxl: 4;
-  xxxl: 5;
+  xxxs: 4;
+  xxs: 8;
+  xs: 12;
+  s: 16;
+  m: 24;
+  l: 32;
+  xl: 40;
+  xxl: 64;
+  xxxl: 80;
 };
 
-/** The numeric rem values for CanvasSpaceNumbers (numbers) */
+/** The numeric rem values for CanvasSpaceNumbers (numbers)
+ * @deprecated ⚠️ `CanvasSpaceNumberValues` has been deprecated in a future major version. Please use our `rem` based [`space`](https://workday.github.io/canvas-kit/?path=/docs/tokens--space) tokens. In the case where you need to calculate a value, use [CSS calc()](https://developer.mozilla.org/en-US/docs/Web/CSS/calc).
+ */
 export type CanvasSpaceNumberValues = ValueOf<CanvasSpaceNumbers>;
 
 /**
- * An object of space keys and their numeric rem values (numbers)
- * - These are helpful when you need a raw numeric rem value.
- * - Here's an example usage to perform calculations:
- * @example
+ * Example using `space` with calc instead of deprecated `spaceNumbers`.
+ *
  * ```tsx
- * const buttonPaddingLeft = `${spaceNumbers.s + iconSize}rem`;
+ *  // With deprecated `spaceNumbers`
+ * {
+ *  paddingLeft: spaceNumbers.xl + 2 // 42px
+ * }
  * ```
  *
- * Below is a table to show the equivalent values from `px` to `rem`.
- * This is based on the default browser font size which is `16px`.
- *
- * | px Value  | rem Value | space token |
- * | --------- | --------- | ----------- |
- * | 0         | 0         | zero        |
- * | 4px       | 0.25rem   | xxxs        |
- * | 8px       | 0.5rem    | xxs         |
- * | 12px      | 0.75rem   | xs          |
- * | 16px      | 1rem      | s           |
- * | 24px      | 1.5rem    | m           |
- * | 32px      | 2rem      | l           |
- * | 40px      | 2.5rem    | xl          |
- * | 64px      | 4rem      | xxl         |
- * | 80px      | 5rem      | xxxl        |
+ * ```tsx
+ * // With `rem` based `space` tokens
+ * {
+ *  padding: `calc(${space.xl} + 2px)` // 42px
+ * }
+ * ```
  *
+ * @deprecated ⚠️ `spaceNumbers` has been deprecated in a future major version. Please use our `rem` based [`space`](https://workday.github.io/canvas-kit/?path=/docs/tokens--space) tokens. In the case where you need to calculate a value, use [CSS calc()](https://developer.mozilla.org/en-US/docs/Web/CSS/calc).
  */
 export const spaceNumbers: CanvasSpaceNumbers = {
   zero: 0,
-  xxxs: 0.25,
-  xxs: 0.5,
-  xs: 0.75,
-  s: 1,
-  m: 1.5,
-  l: 2,
-  xl: 2.5,
-  xxl: 4,
-  xxxl: 5,
+  xxxs: 4,
+  xxs: 8,
+  xs: 12,
+  s: 16,
+  m: 24,
+  l: 32,
+  xl: 40,
+  xxl: 64,
+  xxxl: 80,
 };

package/tooltip/lib/TooltipContainer.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import {keyframes} from '@emotion/react';
 import styled from '@emotion/styled';
 
-import {borderRadius, colors, space, spaceNumbers, type} from '@workday/canvas-kit-react/tokens';
+import {borderRadius, colors, space, type} from '@workday/canvas-kit-react/tokens';
 import {TransformOrigin, getTranslateFromOrigin} from '@workday/canvas-kit-react/common';
 
 const tooltipAnimation = (transformOrigin: TransformOrigin) => {
@@ -72,9 +72,9 @@ export const TooltipContainer = styled('div')<TooltipContainerProps>(
 
     // offset tooltips by 2 pixels when a keyboard focus ring is detected
     '[data-whatinput=keyboard] &': {
-      padding: `${spaceNumbers.s - 0.125}rem`,
+      padding: `calc(${space.s} - 0.125rem)`,
       ':before': {
-        margin: `${spaceNumbers.xxxs + 0.125}rem`,
+        margin: `calc(${space.xxxs} + 0.125rem)`,
       },
     },