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

package/src/lib/components/Grid/GridSpan.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withProviderContext } from '../../provider';
+import { withGlobalProps } from '../../provider';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import { generateResponsiveCustomProperties } from './_helpers/generateResponsiveCustomProperties';
 import styles from './Grid.scss';
@@ -59,8 +59,8 @@ GridSpan.propTypes = {
       md: PropTypes.number,
       lg: PropTypes.number,
       xl: PropTypes.number,
-      xxl: PropTypes.number,
-      xxxl: PropTypes.number,
+      x2l: PropTypes.number,
+      x3l: PropTypes.number,
     }),
   ]),
   /**
@@ -78,8 +78,8 @@ GridSpan.propTypes = {
       md: PropTypes.number,
       lg: PropTypes.number,
       xl: PropTypes.number,
-      xxl: PropTypes.number,
-      xxxl: PropTypes.number,
+      x2l: PropTypes.number,
+      x3l: PropTypes.number,
     }),
   ]),
   /**
@@ -89,6 +89,6 @@ GridSpan.propTypes = {
   tag: PropTypes.string,
 };
 
-export const GridSpanWithContext = withProviderContext(GridSpan, 'GridSpan');
+export const GridSpanWithGlobalProps = withGlobalProps(GridSpan, 'GridSpan');
 
-export default GridSpanWithContext;
+export default GridSpanWithGlobalProps;

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

@@ -27,10 +27,7 @@ import { Grid } from '@react-ui-org/react-ui';
 And use it:
 
 <Playground>
-  <Grid columns="1fr 1fr 1fr">
-    <Placeholder bordered>Grid item</Placeholder>
-    <Placeholder bordered>Grid item</Placeholder>
-    <Placeholder bordered>Grid item</Placeholder>
+  <Grid>
     <Placeholder bordered>Grid item</Placeholder>
     <Placeholder bordered>Grid item</Placeholder>
     <Placeholder bordered>Grid item</Placeholder>
@@ -41,7 +38,7 @@ See [API](#api) for all available options.
 
 ## General Guidelines
 
-- This component implements native [CSS grid layout][grid-layout], the right CSS
+- This component implements native [CSS grid layout][grid-layout], a powerful
   tool for two-dimensional layouts. You may use any value accepted by
   [grid-template-columns], [grid-template-rows], [grid-column-gap],
   [grid-row-gap], [grid-auto-flow], [align-content], [align-items],
@@ -53,20 +50,22 @@ See [API](#api) for all available options.
   markup** like GridItem or Cell is necessary for your items. But it's there
   when you really need it—see [Advanced Layouts](#advanced-layouts).
 
+- For forms, use rather the [FormLayout](/components/form-layout) component
+  which is designed specifically for that purpose.
+
 - The Grid component is so powerful that it enables you to build even very
   advanced layouts **without** having to write **a single line of custom CSS.**
   See [Advanced Layouts](#advanced-layouts) for more.
 
-👉 The default layout has one column, auto-sized rows and gaps of
-[size 4](/foundation/spacing). Defaults for all Grid API options can be
-[customized](/customize/theming/overview) with CSS custom properties.
+👉 Vertical margin of items inside Grid is reset to zero.
 
-## Columns and Rows
+## Columns
 
-Use `columns` and `rows` to specify your grid layout.
+Stack is the default outcome of Grid. Use the `columns` option to organize your
+items into grid.
 
 <Playground>
-  <Grid columns="1fr 2fr" rows="auto 200px auto">
+  <Grid columns="1fr 1fr 1fr">
     <Placeholder bordered>Grid item</Placeholder>
     <Placeholder bordered>Grid item</Placeholder>
     <Placeholder bordered>Grid item</Placeholder>
@@ -106,6 +105,21 @@ responsive layouts. Resize the playground to see it in action.
 👉 If you need your items to have **equal height** even with content of varying
 length, it may be necessary to set `height: 100%` on them.
 
+## Rows
+
+Use `columns` and `rows` to specify a more complicated grid layout.
+
+<Playground>
+  <Grid columns="1fr 2fr" rows="auto 200px auto">
+    <Placeholder bordered>Grid item</Placeholder>
+    <Placeholder bordered>Grid item</Placeholder>
+    <Placeholder bordered>Grid item</Placeholder>
+    <Placeholder bordered>Grid item</Placeholder>
+    <Placeholder bordered>Grid item</Placeholder>
+    <Placeholder bordered>Grid item</Placeholder>
+  </Grid>
+</Playground>
+
 ## Gaps
 
 Both column and row gaps can be customized.
@@ -141,13 +155,32 @@ Individual items and the entire grid content can be aligned and along both axes.
   </Grid>
 </Playground>
 
+## Custom HTML Tag
+
+To render as list for example, just change the output `tag` to `ul` or `ol` and
+wrap your items with `<li>`.
+
+<Playground>
+  <Grid tag="ul">
+    <li>
+      <Placeholder bordered>List item</Placeholder>
+    </li>
+    <li>
+      <Placeholder bordered>List item</Placeholder>
+    </li>
+    <li>
+      <Placeholder bordered>List item</Placeholder>
+    </li>
+  </Grid>
+</Playground>
+
 ## Media Queries
 
 If you need to build more complicated layouts, you have full control over the
 grid definition. Just specify your grid layout for
 [breakpoints](/foundation/breakpoints) where a change of layout is needed.
 The Grid component is written with the mobile-first approach so values for small
-breakpoints are used until they're overriden by a bigger breakpoint. If `xs`
+breakpoints are used until they're overridden by a bigger breakpoint. If `xs`
 settings are omitted, theme defaults are used. Resize your browser to see how it
 works.
 
@@ -237,15 +270,8 @@ Wrapper for content that should span multiple rows or columns.
 
 | Custom Property                                      | Description                                                  |
 |------------------------------------------------------|--------------------------------------------------------------|
-| `--rui-Grid__columns`                                | Default columns layout                                       |
 | `--rui-Grid__column-gap`                             | Default column gap                                           |
-| `--rui-Grid__rows`                                   | Default rows layout                                          |
 | `--rui-Grid__row-gap`                                | Default row gap                                              |
-| `--rui-Grid__align-content`                          | Default vertical alignment of the layout                     |
-| `--rui-Grid__align-items`                            | Default vertical alignment of grid items                     |
-| `--rui-Grid__justify-content`                        | Default horizontal alignment of the layout                   |
-| `--rui-Grid__justify-items`                          | Default horizontal alignment of grid items                   |
-| `--rui-Grid__auto-flow`                              | Default auto-flow algorithm                                  |
 
 [grid-layout]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
 [grid-template-columns]: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns
@@ -253,7 +279,7 @@ Wrapper for content that should span multiple rows or columns.
 [grid-column-gap]: https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap
 [grid-row-gap]: https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap
 [grid-auto-flow]: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow
-[aling-content]: https://developer.mozilla.org/en-US/docs/Web/CSS/align-content
+[align-content]: https://developer.mozilla.org/en-US/docs/Web/CSS/align-content
 [align-items]: https://developer.mozilla.org/en-US/docs/Web/CSS/align-items
 [justify-content]: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
 [justify-items]: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items

package/src/lib/components/Grid/_theme.scss

@@ -1,11 +1,11 @@
 $responsive-properties: (
-    columns: var(--rui-Grid__columns),
+    columns: 1fr,
     column-gap: var(--rui-Grid__column-gap),
-    rows: var(--rui-Grid__rows),
+    rows: auto,
     row-gap: var(--rui-Grid__row-gap),
-    auto-flow: var(--rui-Grid__auto-flow),
-    align-content: var(--rui-Grid__align-content),
-    align-items: var(--rui-Grid__align-items),
-    justify-content: var(--rui-Grid__justify-content),
-    justify-items: var(--rui-Grid__justify-items),
+    auto-flow: initial,
+    align-content: initial,
+    align-items: initial,
+    justify-content: initial,
+    justify-items: initial,
 );

package/src/lib/components/Modal/Modal.jsx

@@ -1,7 +1,10 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { createPortal } from 'react-dom';
-import { withProviderContext } from '../../provider';
+import {
+  RUIContext,
+  withGlobalProps,
+} from '../../provider';
 import { classNames } from '../../utils/classNames';
 import { transferProps } from '../_helpers/transferProps';
 import {
@@ -81,7 +84,6 @@ export class Modal extends React.Component {
       scrollView,
       size,
       title,
-      translations,
     } = this.props;
 
     const sizeClass = (modalSize) => {
@@ -173,15 +175,19 @@ export class Modal extends React.Component {
               {title}
             </h3>
             {onClose && (
-              <button
-                type="button"
-                className={styles.close}
-                onClick={onClose}
-                title={translations.close}
-                {...(id && { id: `${id}__closeModalHeaderButton` })}
-              >
-                ×
-              </button>
+              <RUIContext.Consumer>
+                {({ translations }) => (
+                  <button
+                    type="button"
+                    className={styles.close}
+                    onClick={onClose}
+                    title={translations.Modal.close}
+                    {...(id && { id: `${id}__closeModalHeaderButton` })}
+                  >
+                    ×
+                  </button>
+                )}
+              </RUIContext.Consumer>
             )}
           </div>
           {modalBody()}
@@ -205,12 +211,16 @@ export class Modal extends React.Component {
                 ))}
                 {onClose && (
                   <ToolbarItem>
-                    <Button
-                      label={translations.close}
-                      onClick={onClose}
-                      priority="flat"
-                      {...(id && { id: `${id}__closeModalFooterButton` })}
-                    />
+                    <RUIContext.Consumer>
+                      {({ translations }) => (
+                        <Button
+                          label={translations.Modal.close}
+                          onClick={onClose}
+                          priority="flat"
+                          {...(id && { id: `${id}__closeModalFooterButton` })}
+                        />
+                      )}
+                    </RUIContext.Consumer>
                   </ToolbarItem>
                 )}
               </Toolbar>
@@ -280,7 +290,7 @@ Modal.propTypes = {
    */
   onClose: PropTypes.func,
   /**
-   * If set, the modal is rendered in the React Portal with that ID.
+   * If set, modal is rendered in the React Portal with that ID.
    */
   portalId: PropTypes.string,
   /**
@@ -301,14 +311,8 @@ Modal.propTypes = {
    * Title displayed in modal header.
    */
   title: PropTypes.string.isRequired,
-  /**
-   * Translations required by the component.
-   */
-  translations: PropTypes.shape({
-    close: PropTypes.string.isRequired,
-  }).isRequired,
 };
 
-export const ModalWithContext = withProviderContext(Modal, 'Modal');
+export const ModalWithGlobalProps = withGlobalProps(Modal, 'Modal');
 
-export default ModalWithContext;
+export default ModalWithGlobalProps;

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

@@ -13,10 +13,7 @@ import {
   Props,
 } from 'docz'
 import Button from '../Button'
-import {
-  ModalWithContext as Modal,
-  Modal as ParsableModal,
-} from './Modal'
+import { Modal } from './Modal'
 
 ## Basic Usage
 
@@ -407,7 +404,7 @@ to prevent interaction. That's where blocking modals may come handy.
 
 ## API
 
-<Props table of={ParsableModal} />
+<Props table of={Modal} />
 
 ## Theming
 

package/src/lib/components/Paper/Paper.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 styles from './Paper.scss';
 
@@ -47,6 +47,6 @@ Paper.propTypes = {
   raised: PropTypes.bool,
 };
 
-export const PaperWithContext = withProviderContext(Paper, 'Paper');
+export const PaperWithGlobalProps = withGlobalProps(Paper, 'Paper');
 
-export default PaperWithContext;
+export default PaperWithGlobalProps;

package/src/lib/components/Popover/Popover.jsx

@@ -0,0 +1,94 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { createPortal } from 'react-dom';
+import { withGlobalProps } from '../../provider';
+import { classNames } from '../../utils/classNames';
+import { transferProps } from '../_helpers/transferProps';
+import withForwardedRef from '../withForwardedRef';
+import getRootSideClassName from './_helpers/getRootSideClassName';
+import getRootAlignmentClassName from './_helpers/getRootAlignmentClassName';
+import styles from './Popover.scss';
+
+export const Popover = ({
+  forwardedRef,
+  placement,
+  children,
+  id,
+  portalId,
+  ...restProps
+}) => {
+  const PopoverEl = (
+    <div
+      className={classNames(
+        styles.root,
+        forwardedRef && styles.isRootControlled,
+        getRootSideClassName(placement, styles),
+        getRootAlignmentClassName(placement, styles),
+      )}
+      id={id}
+      ref={forwardedRef}
+      {...transferProps(restProps)}
+    >
+      {children}
+      <span className={styles.arrow} />
+    </div>
+  );
+
+  if (portalId === null) {
+    return PopoverEl;
+  }
+
+  return createPortal(PopoverEl, document.getElementById(portalId));
+};
+
+Popover.defaultProps = {
+  forwardedRef: undefined,
+  id: undefined,
+  placement: 'bottom',
+  portalId: null,
+};
+
+Popover.propTypes = {
+  /**
+   * Popover content.
+   */
+  children: PropTypes.node.isRequired,
+  /**
+   * Reference forwarded to the root `div` element.
+   */
+  forwardedRef: PropTypes.oneOfType([
+    PropTypes.func,
+    // eslint-disable-next-line react/forbid-prop-types
+    PropTypes.shape({ current: PropTypes.any }),
+  ]),
+  /**
+   * ID of the root HTML element.
+   */
+  id: PropTypes.string,
+  /**
+   * Popover placement affects position of the arrow.
+   * Compatible with [Floating UI API](https://floating-ui.com/docs/computePosition#placement).
+   */
+  placement: PropTypes.oneOf([
+    'top',
+    'top-start',
+    'top-end',
+    'right',
+    'right-start',
+    'right-end',
+    'bottom',
+    'bottom-start',
+    'bottom-end',
+    'left',
+    'left-start',
+    'left-end',
+  ]),
+  /**
+   * If set, popover is rendered in the React Portal with that ID.
+   */
+  portalId: PropTypes.string,
+};
+
+export const PopoverWithContext = withForwardedRef(withGlobalProps(Popover, 'Popover'));
+
+export default PopoverWithContext;

package/src/lib/components/Popover/Popover.scss

@@ -0,0 +1,235 @@
+// 1. Reset positioning for controlled variant.
+// 2. Shift Popover so there is space for the arrow between Popover and reference element.
+// 3. Add top offset in case it's not defined by external library.
+
+@use "theme";
+
+.wrapper {
+    position: relative;
+}
+
+.root {
+    position: absolute;
+    width: theme.$width;
+    padding: theme.$padding;
+    color: theme.$color;
+    border: theme.$border-width solid theme.$border-color;
+    border-radius: theme.$border-radius;
+    background-color: theme.$background-color;
+    box-shadow: theme.$box-shadow;
+}
+
+.arrow {
+    position: absolute;
+    width: theme.$arrow-width;
+    height: theme.$arrow-height;
+    transform-origin: center bottom;
+
+    &::before,
+    &::after {
+        content: "";
+        position: absolute;
+        display: block;
+        border-style: solid;
+        border-color: transparent;
+    }
+
+    &::before {
+        bottom: 0;
+        border-width: theme.$arrow-height theme.$arrow-height 0;
+        border-top-color: theme.$border-color;
+    }
+
+    &::after {
+        bottom: theme.$border-width;
+        border-width: theme.$arrow-height theme.$arrow-height 0;
+        border-top-color: theme.$background-color;
+    }
+}
+
+// Sides
+.isRootAtTop {
+    bottom: 100%;
+}
+
+.isRootAtBottom {
+    top: 100%;
+}
+
+.isRootAtLeft {
+    right: 100%;
+}
+
+.isRootAtRight {
+    left: 100%;
+}
+
+// Arrows
+.isRootAtTop > .arrow {
+    top: 100%;
+}
+
+.isRootAtBottom > .arrow {
+    bottom: 100%;
+}
+
+.isRootAtLeft > .arrow {
+    left: 100%;
+}
+
+.isRootAtRight > .arrow {
+    right: 100%;
+}
+
+// Side alignments: top
+.isRootAtTop.isRootAtCenter {
+    left: 50%;
+    transform: translate(-50%, #{-1 * theme.$arrow-height});
+}
+
+.isRootAtTop.isRootAtStart {
+    left: 0;
+    transform: translate(0, #{-1 * theme.$arrow-height});
+}
+
+.isRootAtTop.isRootAtEnd {
+    right: 0;
+    transform: translate(0, #{-1 * theme.$arrow-height});
+}
+
+.isRootAtTop.isRootAtCenter > .arrow {
+    left: 50%;
+    transform: translate(-50%, 0) rotateZ(0);
+}
+
+.isRootAtTop.isRootAtStart > .arrow {
+    left: theme.$arrow-corner-offset;
+    transform: translate(0, 0) rotateZ(0);
+}
+
+.isRootAtTop.isRootAtEnd > .arrow {
+    right: theme.$arrow-corner-offset;
+    transform: translate(0, 0) rotateZ(0);
+}
+
+// Side alignments: bottom
+.isRootAtBottom.isRootAtCenter {
+    left: 50%;
+    transform: translate(-50%, #{theme.$arrow-height});
+}
+
+.isRootAtBottom.isRootAtStart {
+    left: 0;
+    transform: translate(0, #{theme.$arrow-height});
+}
+
+.isRootAtBottom.isRootAtEnd {
+    right: 0;
+    transform: translate(0, #{theme.$arrow-height});
+}
+
+.isRootAtBottom.isRootAtCenter > .arrow {
+    left: 50%;
+    transform: translate(-50%, -100%) rotateZ(180deg);
+}
+
+.isRootAtBottom.isRootAtStart > .arrow {
+    left: theme.$arrow-corner-offset;
+    transform: translate(0, -100%) rotateZ(180deg);
+}
+
+.isRootAtBottom.isRootAtEnd > .arrow {
+    right: theme.$arrow-corner-offset;
+    transform: translate(0, -100%) rotateZ(180deg);
+}
+
+// Side alignments: left
+.isRootAtLeft.isRootAtCenter {
+    top: 50%;
+    transform: translate(#{-1 * theme.$arrow-height}, -50%);
+}
+
+.isRootAtLeft.isRootAtStart {
+    top: 0;
+    transform: translate(#{-1 * theme.$arrow-height}, 0);
+}
+
+.isRootAtLeft.isRootAtEnd {
+    bottom: 0;
+    transform: translate(#{-1 * theme.$arrow-height}, 0);
+}
+
+.isRootAtLeft.isRootAtCenter > .arrow {
+    top: 50%;
+    transform: translate(0, -100%) rotateZ(-90deg);
+}
+
+.isRootAtLeft.isRootAtStart > .arrow {
+    top: theme.$arrow-corner-offset;
+    transform: translate(0, 0) rotateZ(-90deg);
+}
+
+.isRootAtLeft.isRootAtEnd > .arrow {
+    bottom: theme.$arrow-corner-offset;
+    transform: translate(0, -100%) rotateZ(-90deg);
+}
+
+// Side alignments: right
+.isRootAtRight.isRootAtCenter {
+    top: 50%;
+    transform: translate(#{theme.$arrow-height}, -50%);
+}
+
+.isRootAtRight.isRootAtStart {
+    top: 0;
+    transform: translate(#{theme.$arrow-height}, 0);
+}
+
+.isRootAtRight.isRootAtEnd {
+    bottom: 0;
+    transform: translate(#{theme.$arrow-height}, 0);
+}
+
+.isRootAtRight.isRootAtCenter > .arrow {
+    top: 50%;
+    transform: translate(0, -100%) rotateZ(90deg);
+}
+
+.isRootAtRight.isRootAtStart > .arrow {
+    top: theme.$arrow-corner-offset;
+    transform: translate(0, 0) rotateZ(90deg);
+}
+
+.isRootAtRight.isRootAtEnd > .arrow {
+    bottom: theme.$arrow-corner-offset;
+    transform: translate(0, -100%) rotateZ(90deg);
+}
+
+// Controlled
+.isRootControlled.isRootAtTop,
+.isRootControlled.isRootAtBottom,
+.isRootControlled.isRootAtLeft,
+.isRootControlled.isRootAtRight {
+    inset: unset; // 1.
+}
+
+.isRootControlled.isRootAtTop {
+    transform: translate(0, #{-1 * theme.$arrow-height}); // 2.
+}
+
+.isRootControlled.isRootAtBottom {
+    transform: translate(0, #{theme.$arrow-height}); // 2.
+}
+
+.isRootControlled.isRootAtLeft {
+    transform: translate(#{-1 * theme.$arrow-height}, 0); // 2.
+}
+
+.isRootControlled.isRootAtRight {
+    transform: translate(#{theme.$arrow-height}, 0); // 2.
+}
+
+.isRootControlled.isRootAtLeft.isRootAtStart,
+.isRootControlled.isRootAtRight.isRootAtStart {
+    top: 0; // 3.
+}