@workday/canvas-kit-react 16.0.0-alpha.0464-next.0 → 16.0.0-alpha.0470-next.0

package/popup/lib/PopupButtonGroup.tsx

@@ -0,0 +1,60 @@
+import * as React from 'react';
+
+import {GrowthBehavior, createSubcomponent} from '@workday/canvas-kit-react/common';
+import {CSProps, createStencil, handleCsProp} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+import {usePopupModel} from './hooks';
+
+export interface PopupButtonGroupProps extends GrowthBehavior, CSProps {
+  /**
+   * The contents of the PopupButtonGroup. Can be `Button` children or any valid elements.
+   */
+  children?: React.ReactNode;
+  /**
+   * The position of elements within the PopupButtonGroup. Can be `start`, `center`, or `end`.
+   * @default 'end'
+   */
+  position?: 'start' | 'center' | 'end';
+}
+
+export const popupButtonGroupStencil = createStencil({
+  base: {
+    display: 'flex',
+    gap: system.legacy.gap.sm,
+    '@media screen and (max-width: 768px)': {
+      flexDirection: 'column',
+    },
+  },
+  modifiers: {
+    position: {
+      start: {
+        justifyContent: 'flex-start',
+      },
+      center: {
+        justifyContent: 'center',
+      },
+      end: {
+        justifyContent: 'flex-end',
+      },
+    },
+    grow: {
+      true: {
+        '& button': {
+          width: '100%',
+        },
+      },
+    },
+  },
+});
+
+export const PopupButtonGroup = createSubcomponent('div')({
+  displayName: 'Popup.ButtonGroup',
+  modelHook: usePopupModel,
+})(({children, position = 'end', grow, ...elemProps}: PopupButtonGroupProps, Element) => {
+  return (
+    <Element {...handleCsProp(elemProps, popupButtonGroupStencil({position, grow}))}>
+      {children}
+    </Element>
+  );
+});

package/popup/lib/PopupCard.tsx

@@ -115,6 +115,7 @@ export const popupCardStencil = createStencil({
     },
     '@media screen and (max-width: 768px)': {
       transformOrigin: 'bottom center',
+      padding: system.legacy.padding.lg,
     },
   }),
 });

package/toast/lib/ToastCloseIcon.tsx

@@ -1,15 +1,16 @@
 import {ExtractProps, createComponent} from '@workday/canvas-kit-react/common';
 import {mergeStyles} from '@workday/canvas-kit-react/layout';
 import {Popup} from '@workday/canvas-kit-react/popup';
-import {createStencil, px2rem} from '@workday/canvas-kit-styling';
+import {createStencil} from '@workday/canvas-kit-styling';
+import {base} from '@workday/canvas-tokens-web';
 
 export interface ToastCloseIconProps extends ExtractProps<typeof Popup.CloseIcon, never> {}
 
 export const toastCloseIconStencil = createStencil({
   base: {
     position: 'absolute',
-    insetBlockStart: px2rem(2),
-    insetInlineEnd: px2rem(2),
+    insetBlockStart: base.legacy.size50,
+    insetInlineEnd: base.legacy.size50,
   },
 });