@react-ui-org/react-ui 0.46.0 → 0.47.0

package/src/lib/components/TextField/TextField.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
-import { withProviderContext } from '../../provider';
+import { withGlobalProps } from '../../provider';
 import { classNames } from '../../utils/classNames';
 import { getRootSizeClassName } from '../_helpers/getRootSizeClassName';
 import { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName';
@@ -209,6 +209,6 @@ TextField.propTypes = {
   variant: PropTypes.oneOf(['filled', 'outline']),
 };
 
-export const TextFieldWithContext = withForwardedRef(withProviderContext(TextField, 'TextField'));
+export const TextFieldWithGlobalProps = withForwardedRef(withGlobalProps(TextField, 'TextField'));
 
-export default TextFieldWithContext;
+export default TextFieldWithGlobalProps;

package/src/lib/components/TextLink/TextLink.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withProviderContext } from '../../provider';
+import { withGlobalProps } from '../../provider';
 import { transferProps } from '../_helpers/transferProps';
 import styles from './TextLink.scss';
 
@@ -39,6 +39,6 @@ TextLink.propTypes = {
   label: PropTypes.string.isRequired,
 };
 
-export const LinkWithContext = withProviderContext(TextLink, 'Link');
+export const LinkWithGlobalProps = withGlobalProps(TextLink, 'TextLink');
 
-export default LinkWithContext;
+export default LinkWithGlobalProps;

package/src/lib/components/Toggle/Toggle.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
-import { withProviderContext } from '../../provider';
+import { withGlobalProps } from '../../provider';
 import { classNames } from '../../utils/classNames';
 import { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName';
 import { transferProps } from '../_helpers/transferProps';
@@ -159,6 +159,6 @@ Toggle.propTypes = {
   ]),
 };
 
-export const ToggleWithContext = withForwardedRef(withProviderContext(Toggle, 'Toggle'));
+export const ToggleWithGlobalProps = withForwardedRef(withGlobalProps(Toggle, 'Toggle'));
 
-export default ToggleWithContext;
+export default ToggleWithGlobalProps;

package/src/lib/components/Toolbar/README.mdx

@@ -50,8 +50,8 @@ See [API](#api) for all available options.
 ## General Guidelines
 
 - **Toolbar is great for flexible inline layouts.** For stacking your content
-  vertically, use the [List][list] layout. For two-dimensional layouts head to
-  the [Grid][grid] layout.
+  vertically or building two-dimensional layouts head to the [Grid][grid]
+  layout.
 
 - **Wrap your items** into the ToolbarItem component. This ensures your content
   is properly spaced and aligned with other Toolbar elements. Do **not** try to
@@ -88,7 +88,7 @@ of `right`.
               <span id="alignment-label">Alignment:</span>
             </ToolbarItem>
             <ToolbarItem>
-              <ButtonGroup aria-labelledby="#alignment-label">
+              <ButtonGroup aria-labelledby="alignment-label">
                 <Button
                   color={alignment === 'top' ? 'dark' : 'primary'}
                   label="top"
@@ -117,7 +117,7 @@ of `right`.
               <span id="justification-label">Justification:</span>
             </ToolbarItem>
             <ToolbarItem>
-              <ButtonGroup aria-labelledby="#justification-label">
+              <ButtonGroup aria-labelledby="justification-label">
                 <Button
                   color={justification === 'start' ? 'dark' : 'primary'}
                   label="start"
@@ -307,7 +307,7 @@ specifically for this kind of job.
 ## Flexible Items
 
 Toolbar items can be made flexible to grow and shrink according to the available
-space. This is useful e.g. when you need to combine text with an action.
+space. This is useful e.g. when you need to combine text with an action:
 
 <Playground>
   <Toolbar>
@@ -320,6 +320,19 @@ space. This is useful e.g. when you need to combine text with an action.
   </Toolbar>
 </Playground>
 
+Or to build a classic media layout with image on the left and text on the right:
+
+<Playground>
+  <Toolbar>
+    <ToolbarItem>
+      <Placeholder bordered>Media object</Placeholder>
+    </ToolbarItem>
+    <ToolbarItem flexible>
+      <Placeholder bordered>Media body</Placeholder>
+    </ToolbarItem>
+  </Toolbar>
+</Playground>
+
 ## API
 
 <Props table of={Toolbar} />
@@ -346,6 +359,5 @@ A wrapper for individual toolbar items.
 [inline-elements]: https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements
 [block-elements]: https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements
 [grid]: /components/grid
-[list]: /components/list
 [spacing]: /css-helpers/spacing
 [text]: /components/text

package/src/lib/components/Toolbar/Toolbar.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withProviderContext } from '../../provider';
+import { withGlobalProps } from '../../provider';
 import { classNames } from '../../utils/classNames';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import styles from './Toolbar.scss';
@@ -9,6 +9,7 @@ export const Toolbar = ({
   align,
   children,
   dense,
+  id,
   justify,
   nowrap,
 }) => {
@@ -57,6 +58,7 @@ export const Toolbar = ({
         alignClass(align),
         justifyClass(justify),
       )}
+      id={id}
     >
       {children}
     </div>
@@ -67,6 +69,7 @@ Toolbar.defaultProps = {
   align: 'top',
   children: null,
   dense: false,
+  id: undefined,
   justify: 'start',
   nowrap: false,
 };
@@ -88,6 +91,10 @@ Toolbar.propTypes = {
    * If `true`, spacing of all toolbar items in the toolbar will be reduced.
    */
   dense: PropTypes.bool,
+  /**
+   * ID of the root HTML element.
+   */
+  id: PropTypes.string,
   /**
    * Horizontal alignment (distribution) of toolbar items and groups.
    */
@@ -98,6 +105,6 @@ Toolbar.propTypes = {
   nowrap: PropTypes.bool,
 };
 
-export const ToolbarWithContext = withProviderContext(Toolbar, 'Toolbar');
+export const ToolbarWithGlobalProps = withGlobalProps(Toolbar, 'Toolbar');
 
-export default ToolbarWithContext;
+export default ToolbarWithGlobalProps;

package/src/lib/components/Toolbar/Toolbar.scss

@@ -7,19 +7,17 @@
 .group {
     display: flex;
     flex-wrap: wrap;
+    gap: theme.$gap;
 }
 
 .toolbar {
-    @include spacing.bottom(layouts, $compensation: theme.$gap);
-
-    margin: calc(-1 * #{theme.$gap});
+    @include spacing.bottom(layouts);
 }
 
 .item {
     display: flex; // 1.
     flex: none;
     flex-direction: column; // 1.
-    margin: theme.$gap;
 }
 
 .isItemFlexible {
@@ -59,16 +57,9 @@
     justify-content: space-between;
 }
 
-.isDense {
-    margin: calc(-1 * #{theme.$gap-dense});
-}
-
-.isDense .item {
-    margin: theme.$gap-dense;
-}
-
-.isDense > .isDense {
-    margin: 0;
+.isDense,
+.isDense .group {
+    gap: theme.$gap-dense;
 }
 
 .isNowrap {
@@ -78,12 +69,3 @@
 .isNowrap > .item:not(.isItemFlexible) {
     flex: 0 1 auto;
 }
-
-.toolbar.isDense {
-    @include spacing.bottom(layouts, $compensation: theme.$gap-dense);
-}
-
-.toolbar:not(.isDense) > .isDense,
-.group:not(.isDense) > .isDense {
-    margin: theme.$gap-dense;
-}

package/src/lib/components/Toolbar/ToolbarGroup.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withProviderContext } from '../../provider';
+import { withGlobalProps } from '../../provider';
 import { classNames } from '../../utils/classNames';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import styles from './Toolbar.scss';
@@ -9,6 +9,7 @@ export const ToolbarGroup = ({
   align,
   children,
   dense,
+  id,
   nowrap,
 }) => {
   if (isChildrenEmpty(children)) {
@@ -39,6 +40,7 @@ export const ToolbarGroup = ({
         nowrap && styles.isNowrap,
         alignClass(align),
       )}
+      id={id}
     >
       {children}
     </div>
@@ -49,6 +51,7 @@ ToolbarGroup.defaultProps = {
   align: 'top',
   children: null,
   dense: false,
+  id: undefined,
   nowrap: false,
 };
 
@@ -65,12 +68,16 @@ ToolbarGroup.propTypes = {
    * If `true`, spacing of toolbar items in the group will be reduced.
    */
   dense: PropTypes.bool,
+  /**
+   * ID of the root HTML element.
+   */
+  id: PropTypes.string,
   /**
    * If set, the toolbar group will not wrap.
    */
   nowrap: PropTypes.bool,
 };
 
-export const ToolbarGroupWithContext = withProviderContext(ToolbarGroup, 'ToolbarGroup');
+export const ToolbarGroupWithGlobalProps = withGlobalProps(ToolbarGroup, 'ToolbarGroup');
 
-export default ToolbarGroupWithContext;
+export default ToolbarGroupWithGlobalProps;

package/src/lib/components/Toolbar/ToolbarItem.jsx

@@ -1,13 +1,14 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { classNames } from '../../utils/classNames';
-import { withProviderContext } from '../../provider';
+import { withGlobalProps } from '../../provider';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import styles from './Toolbar.scss';
 
 export const ToolbarItem = ({
   children,
   flexible,
+  id,
 }) => {
   if (isChildrenEmpty(children)) {
     return null;
@@ -19,6 +20,7 @@ export const ToolbarItem = ({
         styles.item,
         flexible && styles.isItemFlexible,
       )}
+      id={id}
     >
       {children}
     </div>
@@ -28,6 +30,7 @@ export const ToolbarItem = ({
 ToolbarItem.defaultProps = {
   children: null,
   flexible: false,
+  id: undefined,
 };
 
 ToolbarItem.propTypes = {
@@ -39,8 +42,12 @@ ToolbarItem.propTypes = {
    * Allow item to grow and shrink if needed.
    */
   flexible: PropTypes.bool,
+  /**
+   * ID of the root HTML element.
+   */
+  id: PropTypes.string,
 };
 
-export const ToolbarItemWithContext = withProviderContext(ToolbarItem, 'ToolbarItem');
+export const ToolbarItemWithGlobalProps = withGlobalProps(ToolbarItem, 'ToolbarItem');
 
-export default ToolbarItemWithContext;
+export default ToolbarItemWithGlobalProps;

package/src/lib/index.js

@@ -18,17 +18,12 @@ export {
   Grid,
   GridSpan,
 } from './components/Grid';
-export {
-  List,
-  ListItem,
-} from './components/List';
-export {
-  Media,
-  MediaBody,
-  MediaObject,
-} from './components/Media';
 export { default as Modal } from './components/Modal';
 export { default as Paper } from './components/Paper';
+export {
+  Popover,
+  PopoverWrapper,
+} from './components/Popover';
 export { default as Radio } from './components/Radio';
 export { default as ScrollView } from './components/ScrollView';
 export { default as SelectField } from './components/SelectField';

package/src/lib/provider/index.js

@@ -1,2 +1,3 @@
 export { default as RUIProvider } from './RUIProvider';
-export { default as withProviderContext } from './withProviderContext';
+export { default as RUIContext } from './RUIContext';
+export { default as withGlobalProps } from './withGlobalProps';

package/src/lib/provider/withGlobalProps.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import RUIContext from './RUIContext';
+
+export default (Component, componentName) => {
+  const WithGlobalPropsComponent = (props) => (
+    <RUIContext.Consumer>
+      {({ globalProps }) => {
+        const contextGlobalProps = globalProps ? globalProps[componentName] : null;
+
+        return (
+          <Component
+            {...contextGlobalProps}
+            {...props}
+          />
+        );
+      }}
+    </RUIContext.Consumer>
+  );
+
+  return WithGlobalPropsComponent;
+};

package/src/lib/styles/settings/_breakpoints.scss

@@ -4,6 +4,6 @@ $values: (
     md: 48em,
     lg: 66em,
     xl: 84em,
-    xxl: 100em,
-    xxxl: 120em,
+    x2l: 100em,
+    x3l: 120em,
 );

package/src/lib/styles/theme-constants/_breakpoints.scss

@@ -8,5 +8,5 @@ $sm: map.get(breakpoints.$values, sm);
 $md: map.get(breakpoints.$values, md);
 $lg: map.get(breakpoints.$values, lg);
 $xl: map.get(breakpoints.$values, xl);
-$xxl: map.get(breakpoints.$values, xxl);
-$xxxl: map.get(breakpoints.$values, xxxl);
+$x2l: map.get(breakpoints.$values, x2l);
+$x3l: map.get(breakpoints.$values, x3l);

package/src/lib/styles/tools/_spacing.scss

@@ -11,17 +11,13 @@
     }
 }
 
-@mixin bottom($category: default, $compensation: null) {
+@mixin bottom($category: default) {
     @if not map.has-key(spacing.$bottom, $category) {
         @error "Invalid spacing category specified! #{$category} doesn't exist. "
             + "Choose one of #{map.keys(spacing.$bottom)}.";
     }
 
     &:not(:last-child) {
-        @if $compensation {
-            margin-bottom: calc(#{map.get(spacing.$bottom, $category)} - #{$compensation});
-        } @else {
-            margin-bottom: map.get(spacing.$bottom, $category);
-        }
+        margin-bottom: map.get(spacing.$bottom, $category);
     }
 }

package/src/lib/theme.scss

@@ -98,8 +98,8 @@
     --rui-breakpoint-md: #{breakpoints.$md};
     --rui-breakpoint-lg: #{breakpoints.$lg};
     --rui-breakpoint-xl: #{breakpoints.$xl};
-    --rui-breakpoint-xxl: #{breakpoints.$xxl};
-    --rui-breakpoint-xxxl: #{breakpoints.$xxxl};
+    --rui-breakpoint-x2l: #{breakpoints.$x2l};
+    --rui-breakpoint-x3l: #{breakpoints.$x3l};
 
     // Spacing
     --rui-spacing-0: 0;
@@ -145,6 +145,7 @@
 
     // Elevations
     --rui-elevation-1: 0 0.01rem 0.65rem -0.1rem #{rgba(0, 0, 0, 0.3)};
+    --rui-elevation-2: 0.2rem 0.25rem 1.2rem -0.1rem #{rgba(0, 0, 0, 0.15)};
 
     // Accessibility
     --rui-tap-target-size: 10mm;
@@ -199,28 +200,15 @@
     // Grid
     // ====
 
-    --rui-Grid__columns: 1fr;
     --rui-Grid__column-gap: var(--rui-spacing-4);
-    --rui-Grid__rows: auto;
     --rui-Grid__row-gap: var(--rui-spacing-4);
-    --rui-Grid__auto-flow: initial;
-    --rui-Grid__align-content: initial;
-    --rui-Grid__align-items: initial;
-    --rui-Grid__justify-content: initial;
-    --rui-Grid__justify-items: initial;
-
-    //
-    // List
-    // ====
-
-    --rui-List__row-gap: var(--rui-spacing-2);
 
     //
     // Toolbar
     // =======
 
-    --rui-Toolbar__gap: var(--rui-spacing-2);
-    --rui-Toolbar__gap--dense: var(--rui-spacing-1);
+    --rui-Toolbar__gap: var(--rui-spacing-4);
+    --rui-Toolbar__gap--dense: var(--rui-spacing-2);
 
     // ============================================================================================ //
     // 3. UI COMPONENTS                                                                             //
@@ -876,7 +864,7 @@
     // =====
 
     --rui-Modal__background: var(--rui-color-white);
-    --rui-Modal__box-shadow: none;
+    --rui-Modal__box-shadow: var(--rui-elevation-2);
     --rui-Modal__outer-spacing--xs: var(--rui-spacing-2);
     --rui-Modal__outer-spacing--sm: var(--rui-spacing-6);
     --rui-Modal__footer__background: var(--rui-color-gray-100);
@@ -902,6 +890,19 @@
     --rui-Paper--muted__opacity: var(--rui-disabled-opacity);
     --rui-Paper--raised__box-shadow: var(--rui-elevation-1);
 
+    //
+    // Popover
+    // =======
+
+    --rui-Popover__width: 15rem;
+    --rui-Popover__padding: var(--rui-spacing-3);
+    --rui-Popover__border-width: 0;
+    --rui-Popover__border-color: transparent;
+    --rui-Popover__border-radius: var(--rui-border-radius);
+    --rui-Popover__color: var(--rui-color-black);
+    --rui-Popover__background-color: var(--rui-color-white);
+    --rui-Popover__box-shadow: var(--rui-elevation-2);
+
     //
     // ScrollView
     // ==========

package/src/lib/components/List/List.jsx

@@ -1,73 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { withProviderContext } from '../../provider';
-import { classNames } from '../../utils/classNames';
-import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
-import styles from './List.scss';
-
-export const List = ({
-  align,
-  autoWidth,
-  children,
-}) => {
-  if (isChildrenEmpty(children)) {
-    return null;
-  }
-
-  let alignClass;
-
-  if (align === 'start') {
-    alignClass = styles.alignStart;
-  } else if (align === 'end') {
-    alignClass = styles.alignEnd;
-  }
-
-  let autoWidthClass;
-
-  if (autoWidth) {
-    autoWidthClass = styles.isAutoWidth;
-  }
-
-  return (
-    <div
-      className={classNames(
-        styles.root,
-        autoWidthClass,
-      )}
-    >
-      <ul
-        className={classNames(
-          styles.list,
-          alignClass,
-        )}
-      >
-        {children}
-      </ul>
-    </div>
-  );
-};
-
-List.defaultProps = {
-  align: 'start',
-  autoWidth: false,
-  children: null,
-};
-
-List.propTypes = {
-  /**
-   * Horizontal alignment of list items.
-   */
-  align: PropTypes.oneOf(['start', 'end']),
-  /**
-   * If `true`, the list items will take up only as much horizontal space as necessary.
-   */
-  autoWidth: PropTypes.bool,
-  /**
-   * Individual ListItems. If none are provided nothing is rendered.
-   */
-  children: PropTypes.node,
-};
-
-export const ListWithContext = withProviderContext(List, 'List');
-
-export default ListWithContext;

package/src/lib/components/List/List.scss

@@ -1,53 +0,0 @@
-@use "../../styles/tools/reset";
-@use "../../styles/tools/spacing";
-@use "theme";
-
-.root {
-    @include spacing.bottom(layouts);
-}
-
-.list {
-    @include reset.list();
-
-    display: flex;
-    flex-direction: column;
-}
-
-.item {
-    width: 100%;
-    margin-bottom: theme.$row-gap;
-
-    &:last-child {
-        margin-bottom: 0;
-    }
-}
-
-.alignStart {
-    align-items: flex-start;
-    text-align: left;
-}
-
-.alignEnd {
-    align-items: flex-end;
-    text-align: right;
-}
-
-[dir="rtl"] .alignStart {
-    text-align: right;
-}
-
-[dir="rtl"] .alignEnd {
-    text-align: left;
-}
-
-.isAutoWidth .list {
-    display: inline-flex;
-}
-
-.isAutoWidth .item {
-    width: auto;
-}
-
-.item .root {
-    margin-bottom: 0;
-}

package/src/lib/components/List/ListItem.jsx

@@ -1,32 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { withProviderContext } from '../../provider';
-import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
-import styles from './List.scss';
-
-export const ListItem = ({ children }) => {
-  if (isChildrenEmpty(children)) {
-    return null;
-  }
-
-  return (
-    <li className={styles.item}>
-      {children}
-    </li>
-  );
-};
-
-ListItem.defaultProps = {
-  children: null,
-};
-
-ListItem.propTypes = {
-  /**
-   * Content of the list item. If none are provided nothing is rendered.
-   */
-  children: PropTypes.node,
-};
-
-export const ListItemWithContext = withProviderContext(ListItem, 'ListItem');
-
-export default ListItemWithContext;