diff --git a/src/docs/contribute/composition.mdx b/src/docs/contribute/composition.mdx index 87a11538..d6447001 100644 --- a/src/docs/contribute/composition.mdx +++ b/src/docs/contribute/composition.mdx @@ -15,8 +15,8 @@ There are several types of composition approaches. outside their parent components. - **Mandatory subcomponents:** subcomponent must be used at least once in - order for the composition to work. E.g. `List` + `ListItem`, `Media` + - `MediaObject` + `MediaBody`, `Tabs` + `TabsItem`, etc. + order for the composition to work. E.g. `Media` + `MediaObject` + + `MediaBody`, `Tabs` + `TabsItem`, etc. - **Optional subcomponents:** optional subcomponents may be used to achieve special results. E.g. `FormLayout` + `FormLayoutCustomField` or `Grid` + diff --git a/src/docs/customize/theming/overview.mdx b/src/docs/customize/theming/overview.mdx index 23d528b5..cb6205e5 100644 --- a/src/docs/customize/theming/overview.mdx +++ b/src/docs/customize/theming/overview.mdx @@ -15,7 +15,7 @@ for two main reasons: a thing, but it's not necessary to go as far as for CSS-in-JS to make a UI customizable. -2. Thanks to its JavaScript API, CSS custom properties are both **readable and +2. Thanks to JavaScript API, CSS custom properties are both **readable and writable by JS**. ## Theming Options diff --git a/src/docs/index.mdx b/src/docs/index.mdx index 53274f7b..810663e3 100644 --- a/src/docs/index.mdx +++ b/src/docs/index.mdx @@ -43,8 +43,8 @@ React UI consists of four building blocks: [Learn how to get started quickly.](/getting-started/installation) 2. **Components:** reusable and themeable React components and layouts: - [buttons](/components/button), [cards](/components/card), - [lists](/components/list), and more. + [alerts](/components/alert), [buttons](/components/button), + [cards](/components/card), and more. 3. **Theme:** a collection of CSS custom properties that define the visual appearance of the UI. diff --git a/src/lib/components/FormLayout/README.mdx b/src/lib/components/FormLayout/README.mdx index de78502c..93cedc48 100644 --- a/src/lib/components/FormLayout/README.mdx +++ b/src/lib/components/FormLayout/README.mdx @@ -75,10 +75,9 @@ there are longer validation messages or help texts. ## Vertical Layout -Vertical FormLayout works similar to the [List](/components/list) layout -except that no equivalent of ListItems is needed. It stacks the form fields -vertically while it forces the vertical layout mode on them. To use this layout, -simply wrap your form fields with the FormLayout component: +Vertical FormLayout works similar to single-column [Grid](/components/grid) +layout while it also forces vertical layout mode on form fields. To use this +layout, simply wrap your form fields with the FormLayout component: diff --git a/src/lib/components/Grid/Grid.scss b/src/lib/components/Grid/Grid.scss index 0e782275..75589dc2 100644 --- a/src/lib/components/Grid/Grid.scss +++ b/src/lib/components/Grid/Grid.scss @@ -40,6 +40,11 @@ justify-items: var(--rui-local-justify-items, #{map.get(theme.$responsive-properties, justify-items)}); // 2. } +// stylelint-disable-next-line selector-max-universal -- Reset any previously added margins. +.root > * { + margin-block: 0; +} + .span { $responsive-properties: ( column-span: 1, @@ -58,5 +63,6 @@ ol.root, ul.root { padding-left: 0; margin-left: 0; + list-style: none; } // stylelint-enable selector-no-qualifying-type diff --git a/src/lib/components/Grid/README.mdx b/src/lib/components/Grid/README.mdx index 16c166e7..739b48ec 100644 --- a/src/lib/components/Grid/README.mdx +++ b/src/lib/components/Grid/README.mdx @@ -27,10 +27,7 @@ import { Grid } from '@react-ui-org/react-ui'; And use it: - - Grid item - Grid item - Grid item + Grid item Grid item Grid item @@ -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. +Unless the defaults are modified, stack is the default outcome of Grid. Use the +`columns` option to organize your items into grid. - + Grid item Grid item Grid item @@ -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. + + + + Grid item + Grid item + Grid item + Grid item + Grid item + Grid item + + + ## Gaps Both column and row gaps can be customized. @@ -141,6 +155,25 @@ Individual items and the entire grid content can be aligned and along both axes. +## Custom HTML Tag + +To render as list for example, just change the output `tag` to `ul` or `ol` and +wrap your items with `
  • `. + + + +
  • + List item +
    • +
  • + List item +
    • +
  • + List item +
    • +     +     + ## Media Queries If you need to build more complicated layouts, you have full control over the @@ -253,7 +286,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 diff --git a/src/lib/components/List/List.jsx b/src/lib/components/List/List.jsx deleted file mode 100644 index 16f04c13..00000000 --- a/src/lib/components/List/List.jsx +++ /dev/null @@ -1,80 +0,0 @@ -import PropTypes from 'prop-types'; -import React from 'react'; -import { withGlobalProps } from '../../provider'; -import { classNames } from '../../utils/classNames'; -import { isChildrenEmpty } from '../_helpers/isChildrenEmpty'; -import styles from './List.scss'; - -export const List = ({ - align, - autoWidth, - children, - id, -}) => { - 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 ( -
    -
      - {children} -
    -
    - ); -}; - -List.defaultProps = { - align: 'start', - autoWidth: false, - children: null, - id: undefined, -}; - -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, - /** - * ID of the root HTML element. - */ - id: PropTypes.string, -}; - -export const ListWithGlobalProps = withGlobalProps(List, 'List'); - -export default ListWithGlobalProps; diff --git a/src/lib/components/List/List.scss b/src/lib/components/List/List.scss deleted file mode 100644 index fb81713e..00000000 --- a/src/lib/components/List/List.scss +++ /dev/null @@ -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; -} diff --git a/src/lib/components/List/ListItem.jsx b/src/lib/components/List/ListItem.jsx deleted file mode 100644 index 758402df..00000000 --- a/src/lib/components/List/ListItem.jsx +++ /dev/null @@ -1,40 +0,0 @@ -import PropTypes from 'prop-types'; -import React from 'react'; -import { withGlobalProps } from '../../provider'; -import { isChildrenEmpty } from '../_helpers/isChildrenEmpty'; -import styles from './List.scss'; - -export const ListItem = ({ - children, - id, -}) => { - if (isChildrenEmpty(children)) { - return null; - } - - return ( -
  • - {children} -
    • - ); -}; - -ListItem.defaultProps = { - children: null, - id: undefined, -}; - -ListItem.propTypes = { - /** - * Content of the list item. If none are provided nothing is rendered. - */ - children: PropTypes.node, - /** - * ID of the root HTML element. - */ - id: PropTypes.string, -}; - -export const ListItemWithGlobalProps = withGlobalProps(ListItem, 'ListItem'); - -export default ListItemWithGlobalProps; diff --git a/src/lib/components/List/README.mdx b/src/lib/components/List/README.mdx deleted file mode 100644 index d7c3b073..00000000 --- a/src/lib/components/List/README.mdx +++ /dev/null @@ -1,114 +0,0 @@ ---- -name: List -menu: 'Layouts' -route: /components/list ---- - -# List - -import { - Playground, - Props, -} from 'docz' -import { Placeholder } from '../../../docs/_components/Placeholder/Placeholder' -import { List } from './List' -import { ListItem } from './ListItem' - -The List aligns content into an organized list. - -## Basic Usage - -To implement the List component, you need to import it first: - -```js -import { List, ListItem } from '@react-ui-org/react-ui'; -``` - -And use it: - - - - - List item - - - List item - - - List item - - - - -See [API](#api) for all available options. - -## General Guidelines - -- **Wrap your items** into the [ListItem](#listitem) component. This ensures - your content is properly spaced and aligned with other List elements. Do - **not** try to put any custom HTML or React components directly into the - List layout without wrapping it with the ListItem first. - -- For forms, use rather the [FormLayout](/components/form-layout) - component which is designed specifically for that purpose. - -## List Alignment - -You can simply set the list alignment by specifying the `align` option. - -πŸ‘‰ At the current stage of development, React UI is **RTL aware** so switching -to a fully RTL-compatible behavior in the future should be painless. That's why -the alignment values are called rather `start` than `left` and `end` instead of -`right`. - - - - - List item - - - List item - - - List item - - - - -## Auto Width - -For cases when you prefer the list items to keep their original width and don't -want them to expand over the full width of the parent of the list, there is the -`autoWidth` option. It **shrinks the list according to its longest item.** -However, the root div always behaves as a full-width block element (unless you -put it inside a flex or grid layout). - - - - - List item - - - List item that is longer - - - List item that is even a bit longer - - - - -## API - - - -### ListItem API - -A wrapper for individual list items. - - - -## Theming - -| Custom Property | Description | -|------------------------------------------------------|--------------------------------------------------------------| -| `--rui-List__row-gap` | Gap between list items | diff --git a/src/lib/components/List/__tests__/List.test.jsx b/src/lib/components/List/__tests__/List.test.jsx deleted file mode 100644 index e32eeafa..00000000 --- a/src/lib/components/List/__tests__/List.test.jsx +++ /dev/null @@ -1,48 +0,0 @@ -import React from 'react'; -import { - render, - within, -} from '@testing-library/react'; -import { childrenEmptyPropTest } from '../../../../../tests/propTests/childrenEmptyPropTest'; -import { idPropTest } from '../../../../../tests/propTests/idPropTest'; -import { List } from '../List'; - -const defaultProps = { - children:
    content
    , -}; - -describe('rendering', () => { - it.each([ - [ - { align: 'start' }, - (rootElement) => expect(within(rootElement).getByRole('list')).toHaveClass('alignStart'), - ], - [ - { align: 'end' }, - (rootElement) => expect(within(rootElement).getByRole('list')).toHaveClass('alignEnd'), - ], - [ - { autoWidth: true }, - (rootElement) => expect(rootElement).toHaveClass('isAutoWidth'), - ], - [ - { autoWidth: false }, - (rootElement) => expect(rootElement).not.toHaveClass('isAutoWidth'), - ], - ...childrenEmptyPropTest, - [ - { children:
    content text
    }, - (rootElement) => expect(within(rootElement).getByText('content text')), - ], - ...idPropTest, - ])('renders with props: "%s"', (testedProps, assert) => { - const dom = render(( - - )); - - assert(dom.container.firstChild); - }); -}); diff --git a/src/lib/components/List/__tests__/ListItem.test.jsx b/src/lib/components/List/__tests__/ListItem.test.jsx deleted file mode 100644 index 59209b7a..00000000 --- a/src/lib/components/List/__tests__/ListItem.test.jsx +++ /dev/null @@ -1,32 +0,0 @@ -import React from 'react'; -import { - render, - within, -} from '@testing-library/react'; -import { childrenEmptyPropTest } from '../../../../../tests/propTests/childrenEmptyPropTest'; -import { idPropTest } from '../../../../../tests/propTests/idPropTest'; -import { ListItem } from '../ListItem'; - -const defaultProps = { - children: 'content', -}; - -describe('rendering', () => { - it.each([ - ...childrenEmptyPropTest, - [ - { children:
    content text
    }, - (rootElement) => expect(within(rootElement).getByText('content text')), - ], - ...idPropTest, - ])('renders with props: "%s"', (testedProps, assert) => { - const dom = render(( - - )); - - assert(dom.container.firstChild); - }); -}); diff --git a/src/lib/components/List/_theme.scss b/src/lib/components/List/_theme.scss deleted file mode 100644 index 1e0a9502..00000000 --- a/src/lib/components/List/_theme.scss +++ /dev/null @@ -1 +0,0 @@ -$row-gap: var(--rui-List__row-gap); diff --git a/src/lib/components/List/index.js b/src/lib/components/List/index.js deleted file mode 100644 index a8064b34..00000000 --- a/src/lib/components/List/index.js +++ /dev/null @@ -1,2 +0,0 @@ -export { default as List } from './List'; -export { default as ListItem } from './ListItem'; diff --git a/src/lib/components/Table/README.mdx b/src/lib/components/Table/README.mdx index eac78025..d94bbd77 100644 --- a/src/lib/components/Table/README.mdx +++ b/src/lib/components/Table/README.mdx @@ -77,7 +77,7 @@ See [API](#api) for all available options. - Tables are **good for displaying complex tabular data.** For simpler data sets or even plain key-value pairs, consider using the - [List](/components/list) component. + [Grid](/components/grid) component. - Tables make **lots of information easier to scan and compare.** If you have fewer sections and want to emphasize each group more, consider using diff --git a/src/lib/components/Toolbar/README.mdx b/src/lib/components/Toolbar/README.mdx index facce342..adc22d3b 100644 --- a/src/lib/components/Toolbar/README.mdx +++ b/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 @@ -346,6 +346,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 diff --git a/src/lib/index.js b/src/lib/index.js index 67cab626..b9fcc6f9 100644 --- a/src/lib/index.js +++ b/src/lib/index.js @@ -18,10 +18,6 @@ export { Grid, GridSpan, } from './components/Grid'; -export { - List, - ListItem, -} from './components/List'; export { Media, MediaBody, diff --git a/src/lib/theme.scss b/src/lib/theme.scss index 01873491..4ce26a89 100644 --- a/src/lib/theme.scss +++ b/src/lib/theme.scss @@ -210,12 +210,6 @@ --rui-Grid__justify-content: initial; --rui-Grid__justify-items: initial; - // - // List - // ==== - - --rui-List__row-gap: var(--rui-spacing-2); - // // Toolbar // ======= diff --git a/webpack.config.js b/webpack.config.js index e640c3f4..056f73f3 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -3,7 +3,7 @@ const StyleLintPlugin = require('stylelint-webpack-plugin'); const VisualizerPlugin = require('webpack-visualizer-plugin'); const MAX_DEVELOPMENT_OUTPUT_SIZE = 2800000; -const MAX_PRODUCTION_OUTPUT_SIZE = 330000; +const MAX_PRODUCTION_OUTPUT_SIZE = 320000; module.exports = (env, argv) => ({ devtool: argv.mode === 'production'