@mackin.com/styleguide 7.4.1 → 7.6.0

package/index.d.ts

@@ -133,6 +133,7 @@ interface PagerStyleProps {
     noResultsText?: string;
     /** Used for localizations.  Defaults to 'Page' */
     pageText?: string;
+    /** @deprecated Use theme.controls.borderRadius (global) or style the components individually. */
     rounded?: boolean;
     className?: string;
     leftControls?: JSX.Element;
@@ -182,7 +183,7 @@ interface ButtonProps {
     block?: boolean;
     /** As round as can be. */
     round?: boolean;
-    /** Just taking the edge off. */
+    /** @deprecated Use theme.controls.borderRadius (global) or style the components individually. */
     rounded?: boolean;
     className?: string;
     rightIcon?: JSX.Element;
@@ -309,6 +310,8 @@ declare const InfoPanel: (props: {
     variant?: 'info' | 'warning' | 'error' | 'negative' | 'positive';
     className?: string;
     style?: React.CSSProperties;
+    /** Defaults to 'p'. */
+    tag?: 'p' | 'div';
 }) => JSX.Element;
 
 interface InfoTipProps {
@@ -455,7 +458,7 @@ interface OmniLinkProps {
     title?: string;
     /** Only for button variants. */
     round?: boolean;
-    /** Only for button variants. */
+    /** @deprecated Use theme.controls.borderRadius (global) or style the components individually.  Only for button variants. */
     rounded?: boolean;
     /** Only for button variants. */
     small?: boolean;
@@ -474,6 +477,7 @@ interface PickerProps<T extends PickerValue> {
     })[];
     onChange: (value: T) => void;
     id?: string;
+    /** @deprecated Use theme.controls.borderRadius (global) or style the components individually. */
     rounded?: boolean;
     disabled?: boolean;
     className?: string;
@@ -500,6 +504,7 @@ interface SearchBoxProps {
     id?: string;
     placeholder?: string;
     round?: boolean;
+    /** @deprecated Use theme.controls.borderRadius (global) or style the components individually. */
     rounded?: boolean;
     className?: string;
     onSubmit?: () => Promise<void>;
@@ -622,6 +627,7 @@ interface DatePickerProps {
     required?: boolean;
     /** Defaults to 250ms */
     debounceMs?: number;
+    /** @deprecated Use theme.controls.borderRadius (global) or style the components individually. */
     rounded?: boolean;
     round?: boolean;
     /** This is the ms from Date.valueOf(). */
@@ -639,6 +645,7 @@ interface TabHeaderTabProps {
 interface TabHeaderProps {
     tabs: TabHeaderTabProps[];
     id?: string;
+    /** @deprecated Use theme.controls.borderRadius (global) or style the components individually. */
     rounded?: boolean;
     /** Defaults to 10rem. */
     maxTabWidth?: string;
@@ -702,6 +709,7 @@ interface MackinTheme {
         fontSize: string;
         borderWidth: string;
         border: string;
+        borderRadius: string;
         height: string;
         heightSmall: string;
         boxShadow: string;
@@ -712,6 +720,7 @@ interface MackinTheme {
         focusOutlineShadow: string;
         focusOutlineRequiredShadow: string;
         roundRadius: string;
+        /** @deprecated Use theme.controls.borderRadius (global) or style the components individually. */
         roundedRadius: string;
         disabledOpacity: string;
         formButtonMinWidth: string;
@@ -919,6 +928,7 @@ declare type AutocompleteValue = string | AutoCompleteItem;
 interface AutocompleteProps {
     value: AutocompleteValue | undefined;
     round?: boolean;
+    /** @deprecated Use theme.controls.borderRadius (global) or style the components individually. */
     rounded?: boolean;
     rightControl?: JSX.Element;
     placeholder?: string;

package/index.js

@@ -116,6 +116,7 @@ const defaultTheme = {
         padding: '0.5rem',
         fontSize: '1rem',
         borderWidth: '1px',
+        borderRadius: '',
         border: ``,
         height: '44px',
         heightSmall: '34px',
@@ -127,6 +128,7 @@ const defaultTheme = {
         focusOutlineShadow: '',
         focusOutlineRequiredShadow: '',
         roundRadius: '3rem',
+        /** @deprecated Use theme.controls.borderRadius (global) or style the components individually. */
         roundedRadius: '0.5rem',
         disabledOpacity: '0.5',
         formButtonMinWidth: '7rem',
@@ -303,6 +305,7 @@ const Button = (props) => {
 		padding-right: ${theme.controls.padding};
 		background-color: white;
 		border: ${theme.controls.border};
+		border-radius: ${theme.controls.borderRadius};
 		cursor: pointer;
 		box-shadow: ${theme.controls.boxShadow};
 		color: ${theme.colors.font};
@@ -697,6 +700,7 @@ const Picker = (props) => {
 			font-size: ${theme.controls.fontSize};
 			width: 100%;
 			border: ${theme.controls.border};
+			border-radius: ${theme.controls.borderRadius};
 			transition: ${theme.controls.transition};
 			&:disabled {
 				color: ${theme.colors.font};
@@ -785,6 +789,7 @@ const Pager = (props) => {
 		grid-template-columns: ${theme.controls.height} 1fr ${theme.controls.height};
 		grid-column-gap: ${theme.controls.gap};
 		border: ${theme.controls.border};
+		border-radius: ${theme.controls.borderRadius};
 		padding: 0.5rem;
 		background-color: ${theme.colors.pagerBg};
 		@media(min-width: ${theme.breakpoints.tablet}) {
@@ -1788,7 +1793,7 @@ const InfoPanel = (props) => {
 			color:${theme.colors.positiveFont};
 		`}
 	`;
-    return (React__namespace.createElement(Text, { style: props.style, align: "center", className: css.cx('infoPanel', styles, props.className) }, props.children));
+    return (React__namespace.createElement(Text, { tag: props.tag || 'p', style: props.style, align: "center", className: css.cx('infoPanel', styles, props.className) }, props.children));
 };
 
 const Popover = (p) => {
@@ -1798,13 +1803,14 @@ const Popover = (p) => {
     return (React__namespace.createElement(reactTinyPopover.Popover, { containerClassName: css.css({
             zIndex: theme.zIndexes.tooltip
         }), reposition: resposition, isOpen: p.isOpen, positions: (_b = p.positions) !== null && _b !== void 0 ? _b : ['right', 'top', 'left', 'bottom'], onClickOutside: p.onClickOutside, content: ({ position, childRect, popoverRect }) => {
-            var _a, _b, _c;
+            var _a, _b, _c, _d;
             return (React__namespace.createElement(reactTinyPopover.ArrowContainer, { position: position, childRect: childRect, popoverRect: popoverRect, arrowColor: (_a = p.arrorColor) !== null && _a !== void 0 ? _a : theme.colors.border, arrowSize: 10 },
                 React__namespace.createElement(TabLocker, null,
                     React__namespace.createElement("div", { className: css.css({
                             border: (_b = p.border) !== null && _b !== void 0 ? _b : theme.controls.border,
+                            borderRadius: (_c = p.border) !== null && _c !== void 0 ? _c : theme.controls.borderRadius,
                             boxShadow: theme.controls.boxShadow,
-                            backgroundColor: (_c = p.backgroundColor) !== null && _c !== void 0 ? _c : theme.colors.bg,
+                            backgroundColor: (_d = p.backgroundColor) !== null && _d !== void 0 ? _d : theme.colors.bg,
                         }) }, p.content))));
         } },
         React__namespace.createElement("span", null, p.parent)));
@@ -1935,6 +1941,7 @@ const Input = React__namespace.forwardRef((props, ref) => {
         fontSize: theme.fonts.size,
         width: '100%',
         border: theme.controls.border,
+        borderRadius: theme.controls.borderRadius,
         color: theme.colors.font,
         paddingLeft: theme.controls.padding,
         paddingRight: theme.controls.padding,
@@ -2282,6 +2289,7 @@ const OmniLink = (props) => {
 			padding-left: ${theme.controls.padding};
 			padding-right: ${theme.controls.padding};
 			border: ${theme.controls.border};
+			border-radius: ${theme.controls.borderRadius};
 			box-shadow: ${theme.controls.boxShadow};
 			height: ${theme.controls.height};
 			line-height: ${theme.controls.height};
@@ -2521,6 +2529,7 @@ const ToggleButtonGroup = (props) => {
     const groupStyles = css.css `
 		display: flex;
 		box-shadow: ${theme.controls.boxShadow};
+		border-radius: ${theme.controls.borderRadius};
 		${props.round && `
 			border-radius: ${theme.controls.roundRadius};
 		`}
@@ -2531,6 +2540,15 @@ const ToggleButtonGroup = (props) => {
 		&:nth-of-type(1n+2){
 			margin-left: -1px;
 		}
+		border-radius: 0;
+		&:first-of-type{
+			border-top-left-radius: ${theme.controls.borderRadius};
+			border-bottom-left-radius: ${theme.controls.borderRadius};
+		}
+		&:last-child {
+			border-top-right-radius: ${theme.controls.borderRadius};
+			border-bottom-right-radius: ${theme.controls.borderRadius};
+		}
 		${props.round && `
 			&:first-of-type{
 				border-top-left-radius: ${theme.controls.roundRadius};
@@ -2770,7 +2788,7 @@ const DatePicker = (p) => {
             } }))), content: (React__namespace.createElement("div", { ref: popover, className: css.css({
                 paddingLeft: '1rem',
                 paddingRight: '1rem',
-                paddingBottom: '1rem',
+                paddingBottom: '1rem'
             }) },
             React__namespace.createElement(Calendar, { onClick: date => {
                     p.onChange(date.valueOf());
@@ -2822,12 +2840,15 @@ const TabHeader = (p) => {
                     zIndex: 1,
                 }, active && {
                     border: theme.controls.border,
+                    borderRadius: theme.controls.borderRadius,
+                    borderBottomLeftRadius: 0,
+                    borderBottomRightRadius: 0,
                     borderBottom: 'none',
                     zIndex: 3,
                 }, active && p.rounded && {
                     borderRadius: p.rounded && theme.controls.roundedRadius,
                     borderBottomLeftRadius: 0,
-                    borderBottomRightRadius: 0
+                    borderBottomRightRadius: 0,
                 });
                 buttonVariant = 'link';
                 buttonStyles = css.css({
@@ -3402,6 +3423,7 @@ const Autocomplete = (p) => {
 		position: absolute;
 		width: 100%;
 		border: ${theme.controls.border};
+		border-radius: ${theme.controls.borderRadius};
 		box-shadow: ${theme.controls.boxShadow};
 		background-color: ${theme.colors.bg};
 		margin-top: -4px !important;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@mackin.com/styleguide",
-	"version": "7.4.1",
+	"version": "7.6.0",
 	"description": "",
 	"main": "./index.js",
 	"types": "./index.d.ts",