@mackin.com/styleguide 8.3.0 → 8.4.1

package/index.d.ts

@@ -468,6 +468,8 @@ declare const Nav: (props: {
     children?: React.ReactNode;
     responsive?: boolean | undefined;
     className?: string | undefined;
+    /** Duration of the slide animation in ms.  Defaults to `theme.timings.nav.slideMs`. */
+    slideMs?: number | undefined;
     __debug?: boolean | undefined;
 }) => JSX.Element;
 
@@ -815,6 +817,11 @@ interface MackinTheme {
         desktop: string;
         tablet: string;
     };
+    timings: {
+        nav: {
+            slideMs: number;
+        };
+    };
 }
 /** Call this on your theme after messing with the props.  It will re-build things that depend on sizes and colors. */
 declare const calcDynamicThemeProps: <T extends MackinTheme>(theme: T) => void;
@@ -1061,4 +1068,4 @@ interface ThemeRendererProps extends MackinTheme {
 }
 declare const ThemeRenderer: (p: ThemeRendererProps) => JSX.Element;
 
-export { Accordian, AccordianProps, Alignment, Autocomplete, AutocompleteProps, AutocompleteValue, Backdrop$1 as Backdrop, Backdrop as Backdrop2, BoundMemoryPager, BoundStaticPager, Button, ButtonProps, Calendar, CalendarProps, Checkbox, CheckboxProps, ConfirmModal, ConfirmModalProps, CopyButton, DateInput, DateInputProps, Divider, ErrorModal, FileUploader, Form, FormColumnRow, FormFlexRow, FormProps, GlobalStyles, Header, Highlight, ICONS, Icon, Image, ImageProps, InfoPanel, InfoTip, InfoTipProps, Input, InputProps, ItemPager, Label, LabelProps, Link, LinkProps, List, ListItem, ListItemProps, ListProps, MackinTheme, Modal, Nav, NormalizeCss, NumberInput, NumberInputProps, OmniLink, OmniLinkProps, PagedResult, Pager, PagerProps, Picker, PickerOption, PickerProps, PickerValue, Popover, ProgressBar, ProgressBarProps, SearchBox, SearchBoxProps, Slider, TabHeader, TabHeaderProps, TabLocker, Table, Td, TdCurrency, TdNumber, Text, TextArea, TextAreaProps, TextInput, TextInputProps, TextProps, Th, ThSort, ThemeProvider, ThemeRenderer, ToggleButton, ToggleButtonGroup, ToggleButtonGroupProps, ToggleButtonProps, TogglePasswordInput, Tr, WaitingIndicator, calcDynamicThemeProps, defaultTheme, enumToEntities, getCurrencyDisplay, getFileSizeDisplay, useAccordianState, useBooleanChanged, useIgnoreMount, useMediaQuery, useScrollbarSize, useThemeSafely, useWaiting };
+export { Accordian, AccordianProps, Alignment, Autocomplete, AutocompleteProps, AutocompleteValue, Backdrop$1 as Backdrop, Backdrop as Backdrop2, BoundMemoryPager, BoundStaticPager, Button, ButtonProps, Calendar, CalendarProps, Checkbox, CheckboxProps, ConfirmModal, ConfirmModalProps, CopyButton, DateInput, DateInputProps, Divider, ErrorModal, FileUploader, Form, FormColumnRow, FormFlexRow, FormProps, GlobalStyles, Header, Highlight, ICONS, Icon, Image, ImageProps, InfoPanel, InfoTip, InfoTipProps, Input, InputProps, ItemPager, Label, LabelProps, Link, LinkProps, List, ListItem, ListItemProps, ListProps, MackinTheme, Modal, ModalProps, Nav, NormalizeCss, NumberInput, NumberInputProps, OmniLink, OmniLinkProps, PagedResult, Pager, PagerProps, Picker, PickerOption, PickerProps, PickerValue, Popover, ProgressBar, ProgressBarProps, SearchBox, SearchBoxProps, Slider, TabHeader, TabHeaderProps, TabLocker, Table, Td, TdCurrency, TdNumber, Text, TextArea, TextAreaProps, TextInput, TextInputProps, TextProps, Th, ThSort, ThemeProvider, ThemeRenderer, ToggleButton, ToggleButtonGroup, ToggleButtonGroupProps, ToggleButtonProps, TogglePasswordInput, Tr, WaitingIndicator, calcDynamicThemeProps, defaultTheme, enumToEntities, getCurrencyDisplay, getFileSizeDisplay, useAccordianState, useBooleanChanged, useIgnoreMount, useMediaQuery, useScrollbarSize, useThemeSafely, useWaiting };

package/index.js

@@ -107,7 +107,7 @@ const ICONS = {
 const Icon = (props) => {
     var _a;
     const icon = (_a = ICONS[props.id]) !== null && _a !== void 0 ? _a : ICONS['noIcon'];
-    return React__namespace.createElement(reactFontawesome.FontAwesomeIcon, { title: props.title, style: props.style, onClick: props.onClick, spin: props.spin, className: css.cx('icon', props.className), icon: icon });
+    return React__namespace.createElement(reactFontawesome.FontAwesomeIcon, { title: props.title, style: props.style, onClick: props.onClick, spin: props.spin, className: css.cx('icon', css.css({ label: 'Icon' }), props.className), icon: icon });
 };
 
 /** Call this on your theme after messing with the props.  It will re-build things that depend on sizes and colors. */
@@ -218,6 +218,11 @@ const defaultTheme = {
     mediaQueries: {
         desktop: '',
         tablet: '' // set in calcDynamicThemeProps
+    },
+    timings: {
+        nav: {
+            slideMs: 250
+        }
     }
 };
 calcDynamicThemeProps(defaultTheme);
@@ -362,6 +367,7 @@ const Button = React__namespace.forwardRef((props, ref) => {
 			display: flex;
 			justify-content: center;
 			align-items: center;
+			background-color: transparent;
 			${props.small && `
 				width: ${theme.controls.heightSmall};
 				min-width: ${theme.controls.heightSmall};
@@ -373,8 +379,11 @@ const Button = React__namespace.forwardRef((props, ref) => {
 			width: auto;
 			box-shadow: none;
 			border: none;
+			background-color: transparent;
 		`}
 		${(props.variant === 'text') && `
+			background-color: transparent;
+			font-weight: normal;
 			cursor: auto;
 			display: inline-block;
 			width: auto;
@@ -796,7 +805,7 @@ const List = React__namespace.forwardRef((props, ref) => {
     return (React__namespace.createElement("ul", Object.assign({}, listProps, { ref: ref, className: css.cx('list', listStyles, props.className) }), children));
 });
 const ListItem = (props) => {
-    const liProps = __rest(props, ["variant"]);
+    const liProps = __rest(props, ["variant", "noContentStyling"]);
     const theme = useThemeSafely();
     const itemStyles = css.css `
 		border-bottom: ${theme.controls.border};
@@ -1557,6 +1566,8 @@ const Modal = (p) => {
         }
     }, [p.show]);
     const modalBodyStyles = css.css({
+        maxHeight: p.scrollable ? undefined : '99vh',
+        overflow: 'hidden',
         zIndex: theme.zIndexes.modal,
         cursor: 'default',
         margin: '1rem',
@@ -2516,13 +2527,17 @@ const DateInput = React__namespace.forwardRef((props, ref) => {
     const nativeProps = __rest(props, ["customError", "reposition", "onValueChange"]);
     useIgnoreMount(() => {
         var _a;
+        /*
+            Run this right away.
+            If not, our value may be valid but our error system reports it otherwise due to not being updated yet.
+        */
+        updateDateErrorMessages();
         if ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.checkValidity()) {
             props.onValueChange(dateValue);
         }
         else {
             props.onValueChange(undefined);
         }
-        updateDateErrorMessages();
     }, [dateValue]);
     useIgnoreMount(() => {
         updateDateErrorMessages();
@@ -2839,13 +2854,14 @@ const useMediaQuery = (query) => {
 };
 
 const Nav = (props) => {
-    var _a, _b;
+    var _a, _b, _c;
     const nav = React__namespace.useRef(null);
     const theme = useThemeSafely();
     const totalNavOffset = `calc(${theme.layout.navWidth} + 20px)`;
     const backdrop = React__namespace.useContext(BackdropContext);
     const isLargeScreen = useMediaQuery(`(min-width:${theme.breakpoints.desktop})`);
     const log = useLogger(`Nav ${(_a = props.id) !== null && _a !== void 0 ? _a : '?'}`, (_b = props.__debug) !== null && _b !== void 0 ? _b : false);
+    const slideMs = (_c = props.slideMs) !== null && _c !== void 0 ? _c : theme.timings.nav.slideMs;
     const slideRight = css.keyframes `
 		0% {
 			transform: translateX(0);
@@ -2865,13 +2881,14 @@ const Nav = (props) => {
 		}
 	`;
     const classNavShowing = css.css `
-		animation: ${slideRight} 0.250s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+		animation: ${slideRight} ${slideMs}ms cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
 	`;
     const classNavNotShowing = css.css `
-		animation: ${slideLeft} 0.250s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+		animation: ${slideLeft} ${slideMs}ms cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
 	`;
     // the padding-top here is to offset the navs' content from the header.  the shadow creeps over it.
     const navStyles = css.css `
+		label: Nav;
 		position: fixed;
 		top: 0;
 		left: calc(${totalNavOffset} * -1);
@@ -2926,7 +2943,7 @@ const Nav = (props) => {
                         if (nav && nav.current) {
                             nav.current.classList.remove(classNavNotShowing);
                         }
-                    }, 250);
+                    }, slideMs);
                 }
             }
         }
@@ -3088,6 +3105,7 @@ const generateLinkStyles = (props, theme) => {
 		border: none;
 	`}
 	${props.variant === 'text' && `
+		font-weight: normal;
 		box-shadow: none;
 		border: none;
 		cursor: auto;
@@ -3098,6 +3116,9 @@ const generateLinkStyles = (props, theme) => {
 		border-radius: 100%;
 		width: ${theme.controls.height};
 		text-align: center;
+		font-size: 1.6rem;
+		padding-left: 0;
+		padding-right: 0;
 	`}
 	${props.block && `
 		display: block;

package/package.json

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