baseui 0.0.0-next-3a57782 → 0.0.0-next-d12da36

package/dialog/constants.d.ts

@@ -13,8 +13,3 @@ export declare const PLACEMENT: Readonly<{
     readonly bottomCenter: "bottomCenter";
     readonly bottomRight: "bottomRight";
 }>;
-export declare const CLOSE_KIND: Readonly<{
-    readonly notCloseable: "notCloseable";
-    readonly closeable: "closeable";
-    readonly closeableWithButton: "closeableWithButton";
-}>;

package/dialog/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SIZE = exports.PLACEMENT = exports.CLOSE_KIND = void 0;
+exports.SIZE = exports.PLACEMENT = void 0;
 
 /*
 Copyright (c) Uber Technologies, Inc.
@@ -27,10 +27,4 @@ var PLACEMENT = Object.freeze({
   bottomCenter: 'bottomCenter',
   bottomRight: 'bottomRight'
 });
-exports.PLACEMENT = PLACEMENT;
-var CLOSE_KIND = Object.freeze({
-  notCloseable: 'notCloseable',
-  closeable: 'closeable',
-  closeableWithButton: 'closeableWithButton'
-});
-exports.CLOSE_KIND = CLOSE_KIND;
+exports.PLACEMENT = PLACEMENT;

package/dialog/dialog.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import type { DialogProps } from './types';
-declare const Dialog: ({ artwork, buttonDock, children, closeKind, handleClose, hasOverlay, heading, isOpen, overrides, placement, numHeadingLines, size, }: DialogProps) => JSX.Element;
+declare const Dialog: ({ artwork, buttonDock, children, handleDismiss, showDismissButton, hasOverlay, heading, isOpen, overrides, placement, numHeadingLines, size, }: DialogProps) => JSX.Element;
 export default Dialog;

package/dialog/dialog.js

@@ -52,7 +52,7 @@ function renderArtwork(artwork) {
   return null;
 }
 
-var DefaultCloseButton = function DefaultCloseButton(props) {
+var DefaultDismissButton = function DefaultDismissButton(props) {
   var overrides = {
     BaseButton: {
       style: {
@@ -97,9 +97,9 @@ var Dialog = function Dialog(_ref) {
   var artwork = _ref.artwork,
       buttonDock = _ref.buttonDock,
       children = _ref.children,
-      _ref$closeKind = _ref.closeKind,
-      closeKind = _ref$closeKind === void 0 ? _constants.CLOSE_KIND.closeableWithButton : _ref$closeKind,
-      handleClose = _ref.handleClose,
+      handleDismiss = _ref.handleDismiss,
+      _ref$showDismissButto = _ref.showDismissButton,
+      showDismissButton = _ref$showDismissButto === void 0 ? true : _ref$showDismissButto,
       _ref$hasOverlay = _ref.hasOverlay,
       hasOverlay = _ref$hasOverlay === void 0 ? true : _ref$hasOverlay,
       heading = _ref.heading,
@@ -138,10 +138,10 @@ var Dialog = function Dialog(_ref) {
       ButtonDock = _getOverrides10[0],
       buttonDockProps = _getOverrides10[1];
 
-  var _getOverrides11 = (0, _overrides.getOverrides)(overrides.CloseButton, DefaultCloseButton),
+  var _getOverrides11 = (0, _overrides.getOverrides)(overrides.DismissButton, DefaultDismissButton),
       _getOverrides12 = _slicedToArray(_getOverrides11, 2),
-      CloseButton = _getOverrides12[0],
-      closeButtonProps = _getOverrides12[1];
+      DismissButton = _getOverrides12[0],
+      dismissButtonProps = _getOverrides12[1];
 
   var dialogRef = _react.default.useRef(null);
 
@@ -159,13 +159,13 @@ var Dialog = function Dialog(_ref) {
 
   function handleOutsideClick(e) {
     if (!dialogRef.current.contains(e.target) || e.target.nodeName === 'DIALOG') {
-      handleClose();
+      handleDismiss();
     }
   }
 
   function handleEscapeKey(e) {
     if (e.key === 'Escape') {
-      handleClose();
+      handleDismiss();
     }
   }
 
@@ -193,11 +193,11 @@ var Dialog = function Dialog(_ref) {
     $isOpen: isOpen,
     $size: size,
     $placement: placement
-  }, rootProps), closeKind === _constants.CLOSE_KIND.closeableWithButton && /*#__PURE__*/_react.default.createElement(CloseButton, _extends({
+  }, rootProps), handleDismiss && showDismissButton && /*#__PURE__*/_react.default.createElement(DismissButton, _extends({
     onClick: function onClick() {
-      return handleClose();
+      return handleDismiss();
     }
-  }, closeButtonProps)), /*#__PURE__*/_react.default.createElement(ScrollContainer, _extends({}, scrollContainerProps, {
+  }, dismissButtonProps)), /*#__PURE__*/_react.default.createElement(ScrollContainer, _extends({}, scrollContainerProps, {
     tabIndex: 0
   }), renderArtwork(artwork), /*#__PURE__*/_react.default.createElement(Heading, _extends({
     $numHeadingLines: numHeadingLines

package/dialog/index.js.flow

@@ -27,24 +27,17 @@ declare export var PLACEMENT: {
   bottomRight: 'bottomRight',
 };
 
-declare export var CLOSE_KIND: {
-  notCloseable: 'notCloseable',
-  closeable: 'closeable',
-  closeableWithButton: 'closeableWithButton',
-};
-
 export type DialogOverridesT = {
   Root?: OverrideT,
   ScrollContainer?: OverrideT,
   Heading?: OverrideT,
   Body?: OverrideT,
   ButtonDock?: OverrideT,
-  CloseButton?: OverrideT,
+  DismissButton?: OverrideT,
 };
 
 export type SizeT = $Values<typeof SIZE>;
 export type PlacementT = $Values<typeof PLACEMENT>;
-export type CloseKindT = $Values<typeof CLOSE_KIND>;
 //flowlint-next-line unclear-type:off
 export type ArtworkT = React.Element<any> | React.ComponentType<{}>;
 
@@ -52,8 +45,8 @@ export type DialogPropsT = {
   artwork?: ArtworkT,
   buttonDock?: ButtonDockPropsT,
   children?: React.Node,
-  closeKind?: CloseKindT,
-  handleClose?: () => void,
+  handleDismiss?: () => void,
+  showDismissButton?: boolean,
   hasOverlay?: boolean,
   heading: string,
   isOpen: boolean,

package/dialog/styled-components.js

@@ -91,6 +91,8 @@ var StyledRoot = (0, _styles.styled)('dialog', function (_ref) {
     maxWidth: "calc(100% - 2 * ".concat(wideViewportGutter, ")"),
     borderRadius: $theme.borders.radius500,
     boxShadow: $theme.lighting.shallowBelow,
+    backgroundColor: $theme.colors.backgroundPrimary,
+    color: $theme.colors.contentPrimary,
     overflow: 'hidden',
     border: 'none',
     width: DIALOG_WIDTHS[$size]

package/dialog/types.d.ts

@@ -2,30 +2,36 @@ import type * as React from 'react';
 import type { ComponentType, ReactElement } from 'react';
 import type { Override } from '../helpers/overrides';
 import type { ButtonDockProps } from '../button-dock';
-import type { SIZE, PLACEMENT, CLOSE_KIND } from './constants';
+import type { SIZE, PLACEMENT } from './constants';
 export type DialogOverrides = {
     Root?: Override;
     ScrollContainer?: Override;
     Heading?: Override;
     Body?: Override;
     ButtonDock?: Override;
-    CloseButton?: Override;
+    DismissButton?: Override;
 };
 export type Size = (typeof SIZE)[keyof typeof SIZE];
 export type Placement = (typeof PLACEMENT)[keyof typeof PLACEMENT];
-export type CloseKind = (typeof CLOSE_KIND)[keyof typeof CLOSE_KIND];
-export type Artwork<P = {}> = ReactElement | ComponentType<P>;
+export type Artwork = ReactElement | ComponentType<{}>;
 export type DialogProps = {
     artwork?: Artwork;
+    /** Passes through directly to the internal ButtonDock instance within the Dialog component. */
     buttonDock?: ButtonDockProps;
+    /** The contents of the body of Dialog */
     children?: React.ReactNode | (() => React.ReactNode);
-    closeKind?: CloseKind;
-    handleClose?: () => void;
+    /** Determine if and how dialog can be dismissed */
+    handleDismiss?: () => void | null;
+    /** Should Dialog include a dedicated X button to dismiss the dialog. Ignored if handleDismiss is not supplied. */
+    showDismissButton?: boolean;
+    /** Determines whether the background behind the Dialog is dimmed when Dialog is open  */
     hasOverlay?: boolean;
     heading: string;
     isOpen: boolean;
+    /** The maximum number of lines before heading truncates */
     numHeadingLines?: number;
     overrides?: DialogOverrides;
+    /** Determines where on the screen the dialog appears when open */
     placement?: Placement;
     size?: Size;
 };

package/es/dialog/constants.js

@@ -18,9 +18,4 @@ export const PLACEMENT = Object.freeze({
   bottomLeft: 'bottomLeft',
   bottomCenter: 'bottomCenter',
   bottomRight: 'bottomRight'
-});
-export const CLOSE_KIND = Object.freeze({
-  notCloseable: 'notCloseable',
-  closeable: 'closeable',
-  closeableWithButton: 'closeableWithButton'
 });

package/es/dialog/dialog.js

@@ -13,7 +13,7 @@ import { ButtonDock } from '../button-dock';
 import { Button, KIND, SHAPE } from '../button';
 import { Delete } from '../icon';
 import { StyledHeading, StyledBody, StyledRoot, StyledScrollContainer } from './styled-components';
-import { CLOSE_KIND, PLACEMENT, SIZE } from './constants';
+import { PLACEMENT, SIZE } from './constants';
 
 function renderArtwork(artwork) {
   if ( /*#__PURE__*/isValidElement(artwork)) {
@@ -26,7 +26,7 @@ function renderArtwork(artwork) {
   return null;
 }
 
-const DefaultCloseButton = props => {
+const DefaultDismissButton = props => {
   const overrides = {
     BaseButton: {
       style: {
@@ -68,8 +68,8 @@ const Dialog = ({
   artwork,
   buttonDock,
   children,
-  closeKind = CLOSE_KIND.closeableWithButton,
-  handleClose,
+  handleDismiss,
+  showDismissButton = true,
   hasOverlay = true,
   heading,
   isOpen,
@@ -83,7 +83,7 @@ const Dialog = ({
   const [Heading, headingProps] = getOverrides(overrides.Heading, StyledHeading);
   const [Body, bodyProps] = getOverrides(overrides.Body, StyledBody);
   const [ButtonDock, buttonDockProps] = getOverrides(overrides.ButtonDock, DefaultButtonDock);
-  const [CloseButton, closeButtonProps] = getOverrides(overrides.CloseButton, DefaultCloseButton);
+  const [DismissButton, dismissButtonProps] = getOverrides(overrides.DismissButton, DefaultDismissButton);
   const dialogRef = React.useRef(null);
   React.useEffect(() => {
     if (isOpen) {
@@ -99,13 +99,13 @@ const Dialog = ({
 
   function handleOutsideClick(e) {
     if (!dialogRef.current.contains(e.target) || e.target.nodeName === 'DIALOG') {
-      handleClose();
+      handleDismiss();
     }
   }
 
   function handleEscapeKey(e) {
     if (e.key === 'Escape') {
-      handleClose();
+      handleDismiss();
     }
   }
 
@@ -132,9 +132,9 @@ const Dialog = ({
     $isOpen: isOpen,
     $size: size,
     $placement: placement
-  }, rootProps), closeKind === CLOSE_KIND.closeableWithButton && /*#__PURE__*/React.createElement(CloseButton, _extends({
-    onClick: () => handleClose()
-  }, closeButtonProps)), /*#__PURE__*/React.createElement(ScrollContainer, _extends({}, scrollContainerProps, {
+  }, rootProps), handleDismiss && showDismissButton && /*#__PURE__*/React.createElement(DismissButton, _extends({
+    onClick: () => handleDismiss()
+  }, dismissButtonProps)), /*#__PURE__*/React.createElement(ScrollContainer, _extends({}, scrollContainerProps, {
     tabIndex: 0
   }), renderArtwork(artwork), /*#__PURE__*/React.createElement(Heading, _extends({
     $numHeadingLines: numHeadingLines

package/es/dialog/styled-components.js

@@ -86,6 +86,8 @@ export const StyledRoot = styled('dialog', ({
     maxWidth: `calc(100% - 2 * ${wideViewportGutter})`,
     borderRadius: $theme.borders.radius500,
     boxShadow: $theme.lighting.shallowBelow,
+    backgroundColor: $theme.colors.backgroundPrimary,
+    color: $theme.colors.contentPrimary,
     overflow: 'hidden',
     border: 'none',
     width: DIALOG_WIDTHS[$size],

package/es/radio/styled-components.js

@@ -204,10 +204,11 @@ export const RadioMarkInner = styled('div', props => {
     borderTopRightRadius: '50%',
     borderBottomRightRadius: '50%',
     borderBottomLeftRadius: '50%',
-    height: props.$checked ? sizing.scale200 : sizing.scale550,
+    height: '100%',
     transitionDuration: animation.timing200,
     transitionTimingFunction: animation.easeOutCurve,
-    width: props.$checked ? sizing.scale200 : sizing.scale550
+    width: '100%',
+    transform: props.$checked ? 'scale(.3)' : 'scale(.7)'
   };
 });
 RadioMarkInner.displayName = "RadioMarkInner";

package/esm/dialog/constants.js

@@ -18,9 +18,4 @@ export var PLACEMENT = Object.freeze({
   bottomLeft: 'bottomLeft',
   bottomCenter: 'bottomCenter',
   bottomRight: 'bottomRight'
-});
-export var CLOSE_KIND = Object.freeze({
-  notCloseable: 'notCloseable',
-  closeable: 'closeable',
-  closeableWithButton: 'closeableWithButton'
 });

package/esm/dialog/dialog.js

@@ -25,7 +25,7 @@ import { ButtonDock } from '../button-dock';
 import { Button, KIND, SHAPE } from '../button';
 import { Delete } from '../icon';
 import { StyledHeading, StyledBody, StyledRoot, StyledScrollContainer } from './styled-components';
-import { CLOSE_KIND, PLACEMENT, SIZE } from './constants';
+import { PLACEMENT, SIZE } from './constants';
 
 function renderArtwork(artwork) {
   if ( /*#__PURE__*/isValidElement(artwork)) {
@@ -38,7 +38,7 @@ function renderArtwork(artwork) {
   return null;
 }
 
-var DefaultCloseButton = function DefaultCloseButton(props) {
+var DefaultDismissButton = function DefaultDismissButton(props) {
   var overrides = {
     BaseButton: {
       style: {
@@ -83,9 +83,9 @@ var Dialog = function Dialog(_ref) {
   var artwork = _ref.artwork,
       buttonDock = _ref.buttonDock,
       children = _ref.children,
-      _ref$closeKind = _ref.closeKind,
-      closeKind = _ref$closeKind === void 0 ? CLOSE_KIND.closeableWithButton : _ref$closeKind,
-      handleClose = _ref.handleClose,
+      handleDismiss = _ref.handleDismiss,
+      _ref$showDismissButto = _ref.showDismissButton,
+      showDismissButton = _ref$showDismissButto === void 0 ? true : _ref$showDismissButto,
       _ref$hasOverlay = _ref.hasOverlay,
       hasOverlay = _ref$hasOverlay === void 0 ? true : _ref$hasOverlay,
       heading = _ref.heading,
@@ -124,10 +124,10 @@ var Dialog = function Dialog(_ref) {
       ButtonDock = _getOverrides10[0],
       buttonDockProps = _getOverrides10[1];
 
-  var _getOverrides11 = getOverrides(overrides.CloseButton, DefaultCloseButton),
+  var _getOverrides11 = getOverrides(overrides.DismissButton, DefaultDismissButton),
       _getOverrides12 = _slicedToArray(_getOverrides11, 2),
-      CloseButton = _getOverrides12[0],
-      closeButtonProps = _getOverrides12[1];
+      DismissButton = _getOverrides12[0],
+      dismissButtonProps = _getOverrides12[1];
 
   var dialogRef = React.useRef(null);
   React.useEffect(function () {
@@ -144,13 +144,13 @@ var Dialog = function Dialog(_ref) {
 
   function handleOutsideClick(e) {
     if (!dialogRef.current.contains(e.target) || e.target.nodeName === 'DIALOG') {
-      handleClose();
+      handleDismiss();
     }
   }
 
   function handleEscapeKey(e) {
     if (e.key === 'Escape') {
-      handleClose();
+      handleDismiss();
     }
   }
 
@@ -177,11 +177,11 @@ var Dialog = function Dialog(_ref) {
     $isOpen: isOpen,
     $size: size,
     $placement: placement
-  }, rootProps), closeKind === CLOSE_KIND.closeableWithButton && /*#__PURE__*/React.createElement(CloseButton, _extends({
+  }, rootProps), handleDismiss && showDismissButton && /*#__PURE__*/React.createElement(DismissButton, _extends({
     onClick: function onClick() {
-      return handleClose();
+      return handleDismiss();
     }
-  }, closeButtonProps)), /*#__PURE__*/React.createElement(ScrollContainer, _extends({}, scrollContainerProps, {
+  }, dismissButtonProps)), /*#__PURE__*/React.createElement(ScrollContainer, _extends({}, scrollContainerProps, {
     tabIndex: 0
   }), renderArtwork(artwork), /*#__PURE__*/React.createElement(Heading, _extends({
     $numHeadingLines: numHeadingLines

package/esm/dialog/styled-components.js

@@ -89,6 +89,8 @@ export var StyledRoot = styled('dialog', function (_ref) {
     maxWidth: "calc(100% - 2 * ".concat(wideViewportGutter, ")"),
     borderRadius: $theme.borders.radius500,
     boxShadow: $theme.lighting.shallowBelow,
+    backgroundColor: $theme.colors.backgroundPrimary,
+    color: $theme.colors.contentPrimary,
     overflow: 'hidden',
     border: 'none',
     width: DIALOG_WIDTHS[$size]

package/esm/radio/styled-components.js

@@ -186,10 +186,11 @@ export var RadioMarkInner = styled('div', function (props) {
     borderTopRightRadius: '50%',
     borderBottomRightRadius: '50%',
     borderBottomLeftRadius: '50%',
-    height: props.$checked ? sizing.scale200 : sizing.scale550,
+    height: '100%',
     transitionDuration: animation.timing200,
     transitionTimingFunction: animation.easeOutCurve,
-    width: props.$checked ? sizing.scale200 : sizing.scale550
+    width: '100%',
+    transform: props.$checked ? 'scale(.3)' : 'scale(.7)'
   };
 });
 RadioMarkInner.displayName = "RadioMarkInner";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "baseui",
-  "version": "0.0.0-next-3a57782",
+  "version": "0.0.0-next-d12da36",
   "description": "A React Component library implementing the Base design language",
   "keywords": [
     "react",

package/radio/styled-components.js

@@ -190,10 +190,11 @@ var RadioMarkInner = (0, _styles.styled)('div', function (props) {
     borderTopRightRadius: '50%',
     borderBottomRightRadius: '50%',
     borderBottomLeftRadius: '50%',
-    height: props.$checked ? sizing.scale200 : sizing.scale550,
+    height: '100%',
     transitionDuration: animation.timing200,
     transitionTimingFunction: animation.easeOutCurve,
-    width: props.$checked ? sizing.scale200 : sizing.scale550
+    width: '100%',
+    transform: props.$checked ? 'scale(.3)' : 'scale(.7)'
   };
 });
 exports.RadioMarkInner = RadioMarkInner;