@react-ui-org/react-ui 0.44.0 → 0.44.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-ui-org/react-ui",
   "description": "React UI is a themeable UI library for React apps.",
-  "version": "0.44.0",
+  "version": "0.44.1",
   "keywords": [
     "react",
     "ui",

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

@@ -207,7 +207,7 @@ of your choice and display label once you know there is enough room for it.
 
 ## Buttons with Badges
 
-A [Badge](/components/ui/badge) can be added to buttons to provide additional
+A [Badge](/components/badge) can be added to buttons to provide additional
 information or to draw user's attention.
 
 <Playground>

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

@@ -44,11 +44,11 @@ See [API](#api) for all available options.
 - Use **short labels or icons** so the buttons can fit small screens.
 
 - For toggling between on/off states, use rather the
-  [Toggle](/components/ui/toggle) component.
+  [Toggle](/components/toggle) component.
 
 - For switching between options in a form that needs to be submitted, use rather
-  the [SelectField](/components/ui/select-field) or
-  [Radio](/components/ui/radio) components.
+  the [SelectField](/components/select-field) or
+  [Radio](/components/radio) components.
 
 - Be careful with using `startCorner` and `endCorner` options for grouped
   buttons. Overflowing elements may cause undesired interaction problems.
@@ -65,7 +65,7 @@ different types or sizes.
 ## Priorities
 
 There are three **visual priorities** of buttons which exactly copy the
-priorities of the [Button](/components/ui/button) component:
+priorities of the [Button](/components/button) component:
 
 1. filled
 2. outline

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

@@ -61,7 +61,7 @@ See [API](#api) for all available options.
 
 - Place rather **a few smaller elements** into the layout, so they fit the
   screen even at the smallest size. For complex layouts and a lot of actions,
-  consider using the [Toolbar](/components/layout/toolbar) layout.
+  consider using the [Toolbar](/components/toolbar) layout.
 
 📐 On screen sizes smaller than 66 em (the `lg`
 [breakpoint](/foundation/breakpoints)), the start element expands over the full

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

@@ -53,7 +53,7 @@ See [API](#api) for all available options.
   grid. It will help you keep the UI clean and easy to scan.
 
 - **Card, or Paper?** Card is a versatile surface for displaying content.
-  However, there is also the [Paper](/components/ui/paper) component. While Card
+  However, there is also the [Paper](/components/paper) component. While Card
   is designed for displaying items (and also supports more visual options),
   Paper is usually used to hold larger content areas like lists, grids, or
   forms.
@@ -119,7 +119,7 @@ card should be also smaller to keep the card contained and easy to scan.
 
 ## Scrollable Card
 
-Combine Card with [ScrollView](/components/ui/scroll-view) to enable scrolling
+Combine Card with [ScrollView](/components/scroll-view) to enable scrolling
 for card content.
 
 <Playground>

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

@@ -44,13 +44,13 @@ See [API](#api) for all available options.
 - Use the CheckboxField when there are lists of options and the user may
   **select any number of choices,** including zero, one, or several. For
   selecting just a single option from the list, use either the
-  [Radio](/components/ui/radio) or [SelectField](/components/ui/select-field)
+  [Radio](/components/radio) or [SelectField](/components/select-field)
   component.
 
 - Use the CheckboxField for boolean (true/false) input **in forms that require
   to be confirmed** by a button to become active. To toggle things on or off
   with an immediate effect (without confirmation), use rather the
-  [Toggle](/components/ui/toggle) component.
+  [Toggle](/components/toggle) component.
 
 - **Use positive wording for the checkbox label,** so that it's clear what will
   happen when the user turns on the checkbox. Avoid negations such as “Don't

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

@@ -60,10 +60,10 @@ the job: the
   are supported!). All React UI form components are ready for this use case and
   don't need to be wrapped in any `div`s. Namely, the FormLayout supports the
   following React UI components:
-  [CheckboxField](/components/ui/checkbox-field),
-  [Radio](/components/ui/radio), [SelectField](/components/ui/select-field),
-  [TextArea](/components/ui/text-area), [TextField](/components/ui/text-field),
-  and [Toggle](/components/ui/toggle).
+  [CheckboxField](/components/checkbox-field),
+  [Radio](/components/radio), [SelectField](/components/select-field),
+  [TextArea](/components/text-area), [TextField](/components/text-field),
+  and [Toggle](/components/toggle).
 
 - Use the [FormLayoutCustomField](#custom-fields) component when you need to
   place any **custom content** inside the FormLayout. This layout helper ensures
@@ -80,7 +80,7 @@ in cases when there are longer validation messages or help texts.
 
 ## Vertical Layout
 
-Vertical FormLayout works similar to the [List](/components/layout/list) 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:
@@ -209,7 +209,7 @@ with CSS custom properties.
 
 Please note the `auto` and `limited` label width options may not function
 correctly in combination with other auto layout mechanisms, e.g. the auto-width
-[Modal](/components/ui/modal). It's just too much of magic that doesn't quite
+[Modal](/components/modal). It's just too much of magic that doesn't quite
 work together yet 🎩.
 
 #### Inline Form Fields
@@ -226,7 +226,7 @@ is fully supported in
 ## Alignment
 
 To align whole FormLayout to center of a container, simply wrap it with the
-[Center](/components/layout/center) layout.
+[Center](/components/center) layout.
 
 <Playground>
   <Placeholder bordered height="24rem">

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

@@ -51,3 +51,14 @@
   grid-column: span var(--rui-local-column-span, 1); // 2.
   grid-row: span var(--rui-local-row-span, 1); // 2.
 }
+
+/* stylelint-disable selector-no-qualifying-type */
+
+dl.root,
+ol.root,
+ul.root {
+  padding-left: 0;
+  margin-left: 0;
+}
+
+/* stylelint-enable selector-no-qualifying-type */

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

@@ -33,7 +33,7 @@ See [API](#api) for all available options.
 
 ## General Guidelines
 
-**Avoid using links for actions**, use a [Button](/components/ui/button)
+**Avoid using links for actions**, use a [Button](/components/button)
 instead. This is because users expect navigation to happen when clicking on
 something what looks like a link.
 

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

@@ -49,7 +49,7 @@ See [API](#api) for all available options.
   **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/layout/form-layout)
+- For forms, use rather the [FormLayout](/components/form-layout)
   component which is designed specifically for that purpose.
 
 ## List Alignment

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

@@ -155,7 +155,7 @@ On top of that, the modal is able to adjust to the width of its content.
 
 👉 Please note the auto width may not function correctly in combination with
 other auto layout mechanisms, e.g. the auto-width
-[FormLayout](/components/layout/form-layout#label-width). It's just too much
+[FormLayout](/components/form-layout#label-width). It's just too much
 magic that doesn't work together yet 🎩.
 
 <Playground>
@@ -248,7 +248,7 @@ When modals become too long for the user's viewport or device, they scroll
 independent of the page itself.
 
 The inner implementation of body scrolling uses a partially
-[customizable](#api) instance of the [ScrollView](/components/ui/scroll-view)
+[customizable](#api) instance of the [ScrollView](/components/scroll-view)
 component.
 
 <Playground>

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

@@ -39,7 +39,7 @@ See [API](#api) for all available options.
   the default appearance to make it stand out on white background.
 
 - **Paper, or Card?** Paper is a basic surface to put content on. However,
-  there is also the [Card](/components/ui/card) component. While Paper is
+  there is also the [Card](/components/card) component. While Paper is
   usually used to hold larger content areas like lists, grids, or forms, Card is
   designed for displaying items. Card also supports more visual options.
 

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

@@ -56,13 +56,13 @@ See [API](#api) for all available options.
 ## General Guidelines
 
 - Use Radio for **just a few options**. For larger sets of many options (say 4
-  and more) consider using the [SelectField](/components/ui/select-field)
+  and more) consider using the [SelectField](/components/select-field)
   component. This will help keep your UI clean and uncluttered and prevent your
   users from being overwhelmed by too many options.
 
 - **Don't use for boolean** (true/false) selection or to toggle things on and
-  off. [CheckboxField](/components/ui/checkbox-field) and
-  [Toggle](/components/ui/toggle) are more suitable for such cases.
+  off. [CheckboxField](/components/checkbox-field) and
+  [Toggle](/components/toggle) are more suitable for such cases.
 
 - Use **short and descriptive labels**, ideally nouns rather than seemingly
   polite phrases like _Please select your favourite fruit_. Short labels will

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

@@ -358,7 +358,7 @@ Aside from setting a custom shadow color and size, you can entirely customize
 the scrolling shadows with `background` or `box-shadow` CSS properties.
 
 The following example demonstrates exactly the same custom scrolling shadows as
-we use in the [Modal](/components/ui/modal#scrolling-long-content) component.
+we use in the [Modal](/components/modal#scrolling-long-content) component.
 
 <Playground>
   <Placeholder height="200px">

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

@@ -56,13 +56,13 @@ See [API](#api) for all available options.
 ## General Guidelines
 
 - Use SelectField for **many options**. For sets of just a few options
-  (say 3 at maximum) consider using the [Radio](/components/ui/radio) component.
+  (say 3 at maximum) consider using the [Radio](/components/radio) component.
   This will help keep your UI clean and uncluttered and prevent your users from
   being overwhelmed by too many options.
 
 - **Don't use for boolean** (true/false) selection or to toggle things on and
-  off. [CheckboxField](/components/ui/checkbox-field) and
-  [Toggle](/components/ui/toggle) are more suitable for such cases.
+  off. [CheckboxField](/components/checkbox-field) and
+  [Toggle](/components/toggle) are more suitable for such cases.
 
 - Use **short and descriptive labels**, ideally nouns rather than seemingly
   polite phrases like _Please select your favourite fruit_. Short labels will

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

@@ -77,16 +77,16 @@ 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/layout/list) component.
+  [List](/components/list) 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
-  [Cards](/components/ui/card).
+  [Cards](/components/card).
 
 ## Responsive Tables
 
 The easiest way to make tables responsive is to wrap them with the
-[ScrollView](/components/ui/scroll-view) component in the horizontal mode.
+[ScrollView](/components/scroll-view) component in the horizontal mode.
 
 <Playground>
   <ScrollView direction="horizontal" shadowSize="100px">

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

@@ -119,7 +119,7 @@ for each tab and don't leave some tabs without an icon.
 
 If you have more than a few tabs, you may need to make sure they will be all
 accessible no matter the space they have around. Wrap Tabs into
-[ScrollView](/components/ui/scroll-view) to make them scrollable if necessary.
+[ScrollView](/components/scroll-view) to make them scrollable if necessary.
 
 <Playground>
   {() => {

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

@@ -40,6 +40,7 @@ export const TextField = ({
         styles.root,
         fullWidth ? styles.isRootFullWidth : '',
         hasSmallInput ? styles.hasRootSmallInput : '',
+        inputSize ? styles.hasRootCustomInputSize : '',
         context ? styles.isRootInFormLayout : '',
         resolveContextOrProp(context && context.layout, layout) === 'horizontal'
           ? styles.rootLayoutHorizontal

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

@@ -44,7 +44,7 @@ See [API](#api) for all available options.
 - Use the toggle only for boolean (true/false) input **with an immediate effect
   (without confirmation)**. To toggle things on or off in forms that require to
   be submitted by a button, use rather the
-  [CheckboxField](/components/ui/checkbox-field) component.
+  [CheckboxField](/components/checkbox-field) component.
 
 - **Use positive wording for the toggle label,** so that it's clear what will
   happen when the user turns on the toggle. Avoid negations such as “Don't send
@@ -63,7 +63,7 @@ See [API](#api) for all available options.
 - The toggle is designed for **switching things on and off.** Don't use it to
   switch between two different things that cannot be described as on or off
   using a single label, e.g. different viewing modes. In such cases, consider
-  using the [ButtonGroup](/components/ui/button-group) component.
+  using the [ButtonGroup](/components/button-group) component.
 
 ## Help Text
 

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

@@ -329,7 +329,7 @@ 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/layout/grid
-[list]: /components/layout/list
+[grid]: /components/grid
+[list]: /components/list
 [spacing]: /css-helpers/spacing
-[text]: /components/ui/text
+[text]: /components/text