@react-ui-org/react-ui 0.50.2 → 0.51.0

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

@@ -164,22 +164,6 @@ Card supports all
 of your app.
 
 <Playground>
-  <Card color="primary">
-    <CardBody>
-      Hello! I&apos;m primary variant of card.
-    </CardBody>
-    <CardFooter>
-      <Button label="Read more" priority="outline" />
-    </CardFooter>
-  </Card>
-  <Card color="secondary">
-    <CardBody>
-      Hello! I&apos;m secondary variant of card.
-    </CardBody>
-    <CardFooter>
-      <Button label="Read more" priority="outline" color="secondary" />
-    </CardFooter>
-  </Card>
   <Card color="success">
     <CardBody>
       Hello! I&apos;m success variant of card.

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

@@ -9,16 +9,6 @@ $disabled-background-color: var(--rui-Card--disabled__background-color);
 $disabled-opacity: var(--rui-Card--disabled__opacity);
 
 $colors: (
-    primary: (
-        color: var(--rui-Card--primary__color),
-        border-color: var(--rui-Card--primary__border-color),
-        background-color: var(--rui-Card--primary__background-color),
-    ),
-    secondary: (
-        color: var(--rui-Card--secondary__color),
-        border-color: var(--rui-Card--secondary__border-color),
-        background-color: var(--rui-Card--secondary__background-color),
-    ),
     success: (
         color: var(--rui-Card--success__color),
         border-color: var(--rui-Card--success__border-color),

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

@@ -144,24 +144,31 @@ with CSS custom properties.
             <span id="label-width-options-label">Label width:</span>
           </ToolbarItem>
           <ToolbarItem>
-            <ButtonGroup aria-labelledby="label-width-options-label">
+            <ButtonGroup
+              aria-labelledby="label-width-options-label"
+              priority="outline"
+            >
               <Button
-                color={labelWidth === 'default' ? 'dark' : 'primary'}
+                aria-pressed={labelWidth === 'default'}
+                color={labelWidth === 'default' ? 'selected' : 'secondary'}
                 label="default"
                 onClick={() => setLabelWidth('default')}
               />
               <Button
-                color={labelWidth === 'auto' ? 'dark' : 'primary'}
+                aria-pressed={labelWidth === 'auto'}
+                color={labelWidth === 'auto' ? 'selected' : 'secondary'}
                 label="auto"
                 onClick={() => setLabelWidth('auto')}
               />
               <Button
-                color={labelWidth === 'limited' ? 'dark' : 'primary'}
+                aria-pressed={labelWidth === 'limited'}
+                color={labelWidth === 'limited' ? 'selected' : 'secondary'}
                 label="limited"
                 onClick={() => setLabelWidth('limited')}
               />
               <Button
-                color={labelWidth === 'custom' ? 'dark' : 'primary'}
+                aria-pressed={labelWidth === 'custom'}
+                color={labelWidth === 'custom' ? 'selected' : 'secondary'}
                 label="custom"
                 onClick={() => setLabelWidth('custom')}
               />
@@ -351,14 +358,16 @@ This is a demo of all components supported by FormLayout.
       <div>
         <Toolbar>
           <ToolbarItem>
-            <ButtonGroup>
+            <ButtonGroup priority="outline">
               <Button
-                color={fieldLayout === 'vertical' ? 'dark' : 'primary'}
+                aria-pressed={fieldLayout === 'vertical'}
+                color={fieldLayout === 'vertical' ? 'selected' : 'secondary'}
                 label="Vertical layout"
                 onClick={() => setFieldLayout('vertical')}
               />
               <Button
-                color={fieldLayout === 'horizontal' ? 'dark' : 'primary'}
+                aria-pressed={fieldLayout === 'horizontal'}
+                color={fieldLayout === 'horizontal' ? 'selected' : 'secondary'}
                 label="Horizontal layout"
                 onClick={() => setFieldLayout('horizontal')}
               />

package/src/lib/components/Grid/_helpers/generateResponsiveCustomProperties.js

@@ -1,6 +1,6 @@
 const prepareValueByType = (value, type) => {
   if (type === 'spacing') {
-    return `var(--rui-spacing-${value})`;
+    return `var(--rui-dimension-space-${value})`;
   }
 
   return value;

package/src/lib/components/Modal/ModalCloseButton.scss

@@ -8,11 +8,11 @@
     @include reset.button();
     @include accessibility.min-tap-target();
 
-    font-size: map.get(typography.$size-values, 3);
+    font-size: map.get(typography.$font-size-values, 4);
     line-height: 1;
     color: inherit;
 
     &:disabled {
-        cursor: var(--rui-disabled-cursor);
+        cursor: var(--rui-cursor-not-allowed);
     }
 }

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

@@ -14,6 +14,7 @@ import {
 } from 'docz'
 import {
   Button,
+  CheckboxField,
   FormLayout,
   Modal,
   ModalBody,
@@ -22,6 +23,7 @@ import {
   ModalFooter,
   ModalHeader,
   ModalTitle,
+  Radio,
   ScrollView,
   TextField,
   Toolbar,
@@ -55,11 +57,7 @@ And use it:
     const modalCloseButtonRef = React.useRef();
     return (
       <>
-        <Button
-          label="Launch modal"
-          onClick={() => setModalOpen(true)}
-          priority="outline"
-        />
+        <Button label="Launch modal" onClick={() => setModalOpen(true)} />
         <div>
           {modalOpen && (
             <Modal
@@ -86,6 +84,7 @@ And use it:
                   ref={modalPrimaryButtonRef}
                 />
                 <Button
+                  color="secondary"
                   label="Close"
                   onClick={() => setModalOpen(false)}
                   priority="outline"
@@ -152,7 +151,6 @@ e.g. dialog modal, blocking modal, scrollable modal, etc.
             setModalOpen(1);
             setTimeout(() => setModalOpen(null), 2500);
           }}
-          priority="outline"
         />
         <Button
           label="Launch blocking modal with title"
@@ -160,17 +158,14 @@ e.g. dialog modal, blocking modal, scrollable modal, etc.
             setModalOpen(2);
             setTimeout(() => setModalOpen(null), 3500);
           }}
-          priority="outline"
         />
         <Button
           label="Launch modal as dialog"
           onClick={() => setModalOpen(3)}
-          priority="outline"
         />
         <Button
           label="Launch modal as form"
           onClick={() => setModalOpen(4)}
-          priority="outline"
         />
         <div>
           {modalOpen === 1 && (
@@ -227,6 +222,7 @@ e.g. dialog modal, blocking modal, scrollable modal, etc.
                   ref={modalPrimaryButtonRef}
                 />
                 <Button
+                  color="secondary"
                   label="Close"
                   onClick={() => setModalOpen(false)}
                   priority="outline"
@@ -259,6 +255,7 @@ e.g. dialog modal, blocking modal, scrollable modal, etc.
                   ref={modalPrimaryButtonRef}
                 />
                 <Button
+                  color="secondary"
                   label="Close"
                   onClick={() => setModalOpen(false)}
                   priority="outline"
@@ -305,7 +302,6 @@ There are two ways how to position elements within the ModalHeader:
             setModalOpen(true);
             setVariant(1);
           }}
-          priority="outline"
         />
         <Button
           label="Launch without close button"
@@ -313,7 +309,6 @@ There are two ways how to position elements within the ModalHeader:
             setModalOpen(true);
             setVariant(2);
           }}
-          priority="outline"
         />
         <Button
           label="Launch without close button and with centered title"
@@ -321,7 +316,6 @@ There are two ways how to position elements within the ModalHeader:
             setModalOpen(true);
             setVariant(3);
           }}
-          priority="outline"
         />
         <Button
           label="Launch with custom layout"
@@ -329,7 +323,6 @@ There are two ways how to position elements within the ModalHeader:
             setModalOpen(true);
             setVariant(4);
           }}
-          priority="outline"
         />
         <div>
           {modalOpen && (
@@ -384,6 +377,7 @@ There are two ways how to position elements within the ModalHeader:
                   ref={modalPrimaryButtonRef}
                 />
                 <Button
+                  color="secondary"
                   label="Close"
                   onClick={() => setModalOpen(false)}
                   priority="outline"
@@ -432,44 +426,8 @@ There are two ways to position buttons within the ModalFooter:
     return (
       <>
         <Button
-          label="Launch with footer justified to start"
-          onClick={() => {
-            setModalOpen(true);
-            setModalJustify('start');
-          }}
-          priority="outline"
-        />
-        <Button
-          label="Launch with footer justified to center"
-          onClick={() => {
-            setModalOpen(true);
-            setModalJustify('center');
-          }}
-          priority="outline"
-        />
-        <Button
-          label="Launch with footer justified to end"
-          onClick={() => {
-            setModalOpen(true);
-            setModalJustify('end');
-          }}
-          priority="outline"
-        />
-        <Button
-          label="Launch with footer justified with space between"
-          onClick={() => {
-            setModalOpen(true);
-            setModalJustify('space-between');
-          }}
-          priority="outline"
-        />
-        <Button
-          label="Launch with footer with custom layout"
-          onClick={() => {
-            setModalOpen(true);
-            setModalJustify('stretch');
-          }}
-          priority="outline"
+          label="Launch modal with footer variants"
+          onClick={() => setModalOpen(true)}
         />
         <div>
           {modalOpen && (
@@ -478,15 +436,38 @@ There are two ways to position buttons within the ModalFooter:
               primaryButtonRef={modalPrimaryButtonRef}
             >
               <ModalHeader>
-                <ModalTitle>Delete the user?</ModalTitle>
+                <ModalTitle>Footer justification</ModalTitle>
                 <ModalCloseButton onClick={() => setModalOpen(false)} />
               </ModalHeader>
               <ModalBody>
                 <ModalContent>
-                  <p>
-                    Do you really want to delete the user <code>admin</code>?
-                    This cannot be undone.
-                  </p>
+                  <Radio
+                    label="Footer justification"
+                    onChange={(e) => setModalJustify(e.target.value)}
+                    options={[
+                      {
+                        label: 'start',
+                        value: 'start',
+                      },
+                      {
+                        label: 'center',
+                        value: 'center',
+                      },
+                      {
+                        label: 'end',
+                        value: 'end',
+                      },
+                      {
+                        label: 'space-between',
+                        value: 'space-between',
+                      },
+                      {
+                        label: 'stretch (with a custom layout)',
+                        value: 'stretch',
+                      },
+                    ]}
+                    value={modalJustify}
+                  />
                 </ModalContent>
               </ModalBody>
               <ModalFooter justify={modalJustify}>
@@ -514,6 +495,7 @@ There are two ways to position buttons within the ModalFooter:
                           </ToolbarGroup>
                         <ToolbarItem>
                           <Button
+                            color="secondary"
                             label="Close"
                             onClick={() => setModalOpen(false)}
                             priority="outline"
@@ -524,12 +506,12 @@ There are two ways to position buttons within the ModalFooter:
                     ) : (
                       <>
                         <Button
-                          color="danger"
-                          label="Delete"
+                          label="OK"
                           onClick={() => setModalOpen(false)}
                           ref={modalPrimaryButtonRef}
                         />
                         <Button
+                          color="secondary"
                           label="Close"
                           onClick={() => setModalOpen(false)}
                           priority="outline"
@@ -566,7 +548,6 @@ Modals of any size automatically shrink when they cannot fit the screen width.
             setModalSize('small');
             setModalOpen(true);
           }}
-          priority="outline"
         />
         <Button
           label="Launch medium modal"
@@ -574,7 +555,6 @@ Modals of any size automatically shrink when they cannot fit the screen width.
             setModalSize('medium');
             setModalOpen(true);
           }}
-          priority="outline"
         />
         <Button
           label="Launch large modal"
@@ -582,7 +562,6 @@ Modals of any size automatically shrink when they cannot fit the screen width.
             setModalSize('large');
             setModalOpen(true);
           }}
-          priority="outline"
         />
         <Button
           label="Launch fullscreen modal"
@@ -590,7 +569,6 @@ Modals of any size automatically shrink when they cannot fit the screen width.
             setModalSize('fullscreen');
             setModalOpen(true);
           }}
-          priority="outline"
         />
         <div>
           {modalOpen && (
@@ -619,6 +597,7 @@ Modals of any size automatically shrink when they cannot fit the screen width.
                   ref={modalPrimaryButtonRef}
                 />
                 <Button
+                  color="secondary"
                   label="Close"
                   onClick={() => setModalOpen(false)}
                   priority="outline"
@@ -645,7 +624,6 @@ On top of that, the modal can adjust to the width of its content.
         <Button
           label="Launch auto-width modal"
           onClick={() => setModalOpen(true)}
-          priority="outline"
         />
         <div>
           {modalOpen && (
@@ -674,6 +652,7 @@ On top of that, the modal can adjust to the width of its content.
                   ref={modalPrimaryButtonRef}
                 />
                 <Button
+                  color="secondary"
                   label="Close"
                   onClick={() => setModalOpen(false)}
                   priority="outline"
@@ -688,57 +667,61 @@ On top of that, the modal can adjust to the width of its content.
   }}
 </Playground>
 
-👉 Please note the auto width may not function correctly in combination with
-other auto-layout mechanisms, e.g. the auto-width
-[FormLayout](/components/form-layout#label-width). It's just too much
-magic that doesn't work together (yet?) 🎩.
+## Position
 
-👉 Beware of horizontal FormLayout inside `small` modals. While automatic
-overflow handling comes to the rescue in this kind of scenario, you will be
-better off with the combination of auto-sized modal and horizontal FormLayout
-with a fixed label width (i.e. any other than `auto`, see the previous note).
+Modal can be aligned either to the top or center of the screen.
 
 <Playground>
   {() => {
     const [modalOpen, setModalOpen] = React.useState(false);
+    const [modalPosition, setModalPosition] = React.useState('center');
     const modalPrimaryButtonRef = React.useRef();
     const modalCloseButtonRef = React.useRef();
     return (
       <>
         <Button
-          label="Launch auto-with modal with a form"
-          onClick={() => setModalOpen(true)}
-          priority="outline"
+          label="Launch modal at center"
+          onClick={() => {
+            setModalPosition('center');
+            setModalOpen(true);
+          }}
+        />
+        <Button
+          label="Launch modal at top"
+          onClick={() => {
+            setModalPosition('top');
+            setModalOpen(true);
+          }}
         />
         <div>
           {modalOpen && (
             <Modal
               closeButtonRef={modalCloseButtonRef}
+              position={modalPosition}
               primaryButtonRef={modalPrimaryButtonRef}
-              size="auto"
             >
               <ModalHeader>
-                <ModalTitle>Form inside modal</ModalTitle>
+                <ModalTitle>Delete the user?</ModalTitle>
                 <ModalCloseButton onClick={() => setModalOpen(false)} />
               </ModalHeader>
               <ModalBody>
                 <ModalContent>
-                  <FormLayout fieldLayout="horizontal">
-                    <TextField label="A form element" />
-                    <TextField label="Another form element" />
-                    <TextField label="Yet another one" />
-                  </FormLayout>
+                  <p>
+                    Do you really want to delete the user <code>admin</code>?
+                    This cannot be undone.
+                  </p>
                 </ModalContent>
               </ModalBody>
               <ModalFooter>
                 <Button
-                  color="primary"
-                  label="Save"
+                  color="danger"
+                  label="Delete"
                   onClick={() => setModalOpen(false)}
                   ref={modalPrimaryButtonRef}
                 />
                 <Button
-                  label="Cancel"
+                  color="secondary"
+                  label="Close"
                   onClick={() => setModalOpen(false)}
                   priority="outline"
                   ref={modalCloseButtonRef}
@@ -752,62 +735,64 @@ with a fixed label width (i.e. any other than `auto`, see the previous note).
   }}
 </Playground>
 
-## Position
+## Forms in Modals
 
-Modal can be aligned either to the top or center of the screen.
+You can safely place a FormLayout into a Modal of any size, including the
+auto-width Modal.
 
 <Playground>
   {() => {
     const [modalOpen, setModalOpen] = React.useState(false);
-    const [modalPosition, setModalPosition] = React.useState('center');
+    const [agree, setAgree] = React.useState(true);
     const modalPrimaryButtonRef = React.useRef();
     const modalCloseButtonRef = React.useRef();
     return (
       <>
         <Button
-          label="Launch modal at center"
-          onClick={() => {
-            setModalPosition('center');
-            setModalOpen(true);
-          }}
-          priority="outline"
-        />
-        <Button
-          label="Launch modal at top"
-          onClick={() => {
-            setModalPosition('top');
-            setModalOpen(true);
-          }}
-          priority="outline"
+          label="Launch auto-width modal with auto-width form"
+          onClick={() => setModalOpen(true)}
         />
         <div>
           {modalOpen && (
             <Modal
               closeButtonRef={modalCloseButtonRef}
-              position={modalPosition}
               primaryButtonRef={modalPrimaryButtonRef}
+              size="auto"
             >
               <ModalHeader>
-                <ModalTitle>Delete the user?</ModalTitle>
+                <ModalTitle>Auto-width form inside auto-width modal</ModalTitle>
                 <ModalCloseButton onClick={() => setModalOpen(false)} />
               </ModalHeader>
               <ModalBody>
                 <ModalContent>
-                  <p>
-                    Do you really want to delete the user <code>admin</code>?
-                    This cannot be undone.
-                  </p>
+                  <FormLayout autoWidth fieldLayout="horizontal">
+                    <TextField
+                      label="A form element"
+                      validationState="warning"
+                      validationText={`Account with this name already exists,
+                       pick a different one.`
+                      }
+                    />
+                    <TextField label="Another form element" />
+                    <TextField label="Yet another one" />
+                    <CheckboxField
+                      checked={agree}
+                      label="I agree"
+                      onChange={() => setAgree(!agree)}
+                    />
+                  </FormLayout>
                 </ModalContent>
               </ModalBody>
               <ModalFooter>
                 <Button
-                  color="danger"
-                  label="Delete"
+                  color="primary"
+                  label="Save"
                   onClick={() => setModalOpen(false)}
                   ref={modalPrimaryButtonRef}
                 />
                 <Button
-                  label="Close"
+                  color="secondary"
+                  label="Cancel"
                   onClick={() => setModalOpen(false)}
                   priority="outline"
                   ref={modalCloseButtonRef}
@@ -821,6 +806,14 @@ Modal can be aligned either to the top or center of the screen.
   }}
 </Playground>
 
+👉 Inside Modal, we recommend using the `autoWidth` option of FormLayout. This
+prevents the Modal from unwanted horizontal expansion when a long validation
+text pops up during user's interaction with the form.
+
+👉 Beware of horizontal FormLayout inside `small` modals. While automatic
+overflow handling comes to the rescue in this kind of scenario, you will be
+better off with the combination of auto-sized modal and horizontal FormLayout.
+
 ## Keyboard Control
 
 Modal can be controlled either by mouse or keyboard. To enhance user
@@ -832,8 +825,8 @@ To enable it, you just need to pass a reference to the buttons using
 a reference to the button is that if the button is disabled, the key press will
 not fire the event.
 
-👉 We strongly recommend using this feature together with Autofocus for a better
-user experience.
+👉 We strongly recommend using this feature together with
+[Autofocus](#autofocus) for a better user experience.
 
 ## Autofocus
 
@@ -948,7 +941,6 @@ independent of the page itself. This can be done in three ways using the
             setModalScrolling('auto');
             setModalOpen(true);
           }}
-          priority="outline"
         />
         <Button
           label="Launch modal with ScrollView"
@@ -956,7 +948,6 @@ independent of the page itself. This can be done in three ways using the
             setModalScrolling('custom');
             setModalOpen(true);
           }}
-          priority="outline"
         />
         <Button
           label="Launch modal with non-scrolling body"
@@ -964,7 +955,6 @@ independent of the page itself. This can be done in three ways using the
             setModalScrolling('none');
             setModalOpen(true);
           }}
-          priority="outline"
         />
         <div>
           {modalOpen && (
@@ -996,6 +986,7 @@ independent of the page itself. This can be done in three ways using the
                   ref={modalPrimaryButtonRef}
                 />
                 <Button
+                  color="secondary"
                   label="Close"
                   onClick={() => setModalOpen(false)}
                   priority="outline"

package/src/lib/components/Modal/_settings.scss

@@ -6,4 +6,4 @@
 $border-radius: borders.$radius;
 $z-index: z-indexes.$modal;
 $backdrop-z-index: z-indexes.$modal-backdrop;
-$title-font-size: map.get(typography.$size-values, 1);
+$title-font-size: map.get(typography.$font-size-values, 2);

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

@@ -88,19 +88,22 @@ complete list of accepted values.
           <span id="alignment-options-label">Alignment:</span>
         </ToolbarItem>
         <ToolbarItem>
-          <ButtonGroup aria-labelledby="alignment-options-label">
+          <ButtonGroup aria-labelledby="alignment-options-label" priority="outline">
             <Button
-              color={align === '-start' ? 'dark' : 'primary'}
+              aria-pressed={align === '-start'}
+              color={align === '-start' ? 'selected' : 'secondary'}
               label="start"
               onClick={() => setAlign('-start')}
             />
             <Button
-              color={align === '' ? 'dark' : 'primary'}
+              aria-pressed={align === ''}
+              color={align === '' ? 'selected' : 'secondary'}
               label="center"
               onClick={() => setAlign('')}
             />
             <Button
-              color={align === '-end' ? 'dark' : 'primary'}
+              aria-pressed={align === '-end'}
+              color={align === '-end' ? 'selected' : 'secondary'}
               label="end"
               onClick={() => setAlign('-end')}
             />

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

@@ -297,8 +297,8 @@ by smaller or bigger portions.
     arrows
     arrowsScrollStep={300}
     direction="horizontal"
-    nextArrowElement={(<span class="typography-size-3">➡️</span>)}
-    prevArrowElement={(<span class="typography-size-3">⬅️</span>)}
+    nextArrowElement={(<span class="font-size-3">➡️</span>)}
+    prevArrowElement={(<span class="font-size-3">⬅️</span>)}
     scrollbar={false}
   >
     <Placeholder>