@react-ui-org/react-ui 0.52.1 → 0.53.0

package/src/{lib/components/Radio/README.mdx → components/Radio/README.md}

@@ -1,19 +1,7 @@
----
-name: Radio
-menu: 'Inputs'
-route: /components/radio
----
-
 # Radio
 
 Radio allows users to select one option from a set.
 
-import {
-  Playground,
-  Props,
-} from 'docz'
-import { Radio } from '../..'
-
 ## Basic Usage
 
 To implement the Radio component, you need to import it first:
@@ -24,45 +12,45 @@ import { Radio } from '@react-ui-org/react-ui';
 
 And use it:
 
-<Playground>
-  {() => {
-    const [fruit, setFruit] = React.useState('apple');
-    return (
-      <Radio
-        label="Your favourite fruit"
-        onChange={(e) => setFruit(e.target.value)}
-        options={[
-          {
-            label: 'Apple',
-            value: 'apple',
-          },
-          {
-            label: 'Banana',
-            value: 'banana',
-          },
-          {
-            label: 'Grapefruit',
-            value: 'grapefruit',
-          },
-        ]}
-        value={fruit}
-      />
-    );
-  }}
-</Playground>
+```docoff-react-preview
+React.createElement(() => {
+  const [fruit, setFruit] = React.useState('apple');
+  return (
+    <Radio
+      label="Your favourite fruit"
+      onChange={(e) => setFruit(e.target.value)}
+      options={[
+        {
+          label: 'Apple',
+          value: 'apple',
+        },
+        {
+          label: 'Banana',
+          value: 'banana',
+        },
+        {
+          label: 'Grapefruit',
+          value: 'grapefruit',
+        },
+      ]}
+      value={fruit}
+    />
+  );
+})
+```
 
 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/select-field)
+  and more) consider using the [SelectField](/components/SelectField)
   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/checkbox-field) and
-  [Toggle](/components/toggle) are more suitable for such cases.
+  off. [CheckboxField](/components/CheckboxField) 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
@@ -91,33 +79,33 @@ simple forms, it's dangerous to hide labels from users in most cases. Keep in
 mind you should **provide another visual clue** so users know what to fill into
 the input.
 
-<Playground>
-  {() => {
-    const [frequency, setFrequency] = React.useState('weekly');
-    return (
-      <Radio
-        isLabelVisible={false}
-        label="Newsletter frequency"
-        onChange={(e) => setFrequency(e.target.value)}
-        options={[
-          {
-            label: 'I want to subscribe to the weekly newsletter',
-            value: 'weekly',
-          },
-          {
-            label: 'I want to subscribe to the monthly newsletter',
-            value: 'monthly',
-          },
-          {
-            label: "I don't wish to receive anything",
-            value: 'never',
-          },
-        ]}
-        value={frequency}
-      />
-    );
-  }}
-</Playground>
+```docoff-react-preview
+React.createElement(() => {
+  const [frequency, setFrequency] = React.useState('weekly');
+  return (
+    <Radio
+      isLabelVisible={false}
+      label="Newsletter frequency"
+      onChange={(e) => setFrequency(e.target.value)}
+      options={[
+        {
+          label: 'I want to subscribe to the weekly newsletter',
+          value: 'weekly',
+        },
+        {
+          label: 'I want to subscribe to the monthly newsletter',
+          value: 'monthly',
+        },
+        {
+          label: "I don't wish to receive anything",
+          value: 'never',
+        },
+      ]}
+      value={frequency}
+    />
+  );
+})
+```
 
 ## Horizontal Layout
 
@@ -125,66 +113,66 @@ The default vertical layout is very easy to use and work with. However, there
 are situations where horizontal layout suits better — and that's why React UI
 supports this kind of layout as well.
 
-<Playground>
-  {() => {
-    const [frequency, setFrequency] = React.useState('weekly');
-    return (
-      <Radio
-        label="Newsletter frequency"
-        layout="horizontal"
-        onChange={(e) => setFrequency(e.target.value)}
-        options={[
-          {
-            label: 'I want to subscribe to the weekly newsletter',
-            value: 'weekly',
-          },
-          {
-            label: 'I want to subscribe to the monthly newsletter',
-            value: 'monthly',
-          },
-          {
-            label: "I don't wish to receive anything",
-            value: 'never',
-          },
-        ]}
-        value={frequency}
-      />
-    );
-  }}
-</Playground>
+```docoff-react-preview
+React.createElement(() => {
+  const [frequency, setFrequency] = React.useState('weekly');
+  return (
+    <Radio
+      label="Newsletter frequency"
+      layout="horizontal"
+      onChange={(e) => setFrequency(e.target.value)}
+      options={[
+        {
+          label: 'I want to subscribe to the weekly newsletter',
+          value: 'weekly',
+        },
+        {
+          label: 'I want to subscribe to the monthly newsletter',
+          value: 'monthly',
+        },
+        {
+          label: "I don't wish to receive anything",
+          value: 'never',
+        },
+      ]}
+      value={frequency}
+    />
+  );
+})
+```
 
 ## Help Text
 
 You may provide an additional help text to clarify how the input should be
 filled.
 
-<Playground>
-  {() => {
-    const [fruit, setFruit] = React.useState('apple');
-    return (
-      <Radio
-        helpText="What do you prefer?"
-        label="Your favourite fruit"
-        onChange={(e) => setFruit(e.target.value)}
-        options={[
-          {
-            label: 'Apple',
-            value: 'apple',
-          },
-          {
-            label: 'Banana',
-            value: 'banana',
-          },
-          {
-            label: 'Grapefruit',
-            value: 'grapefruit',
-          },
-        ]}
-        value={fruit}
-      />
-    );
-  }}
-</Playground>
+```docoff-react-preview
+React.createElement(() => {
+  const [fruit, setFruit] = React.useState('apple');
+  return (
+    <Radio
+      helpText="What do you prefer?"
+      label="Your favourite fruit"
+      onChange={(e) => setFruit(e.target.value)}
+      options={[
+        {
+          label: 'Apple',
+          value: 'apple',
+        },
+        {
+          label: 'Banana',
+          value: 'banana',
+        },
+        {
+          label: 'Grapefruit',
+          value: 'grapefruit',
+        },
+      ]}
+      value={fruit}
+    />
+  );
+})
+```
 
 ## States
 
@@ -195,8 +183,8 @@ should always **provide a validation message for states other than valid** so
 users know what happened and what action they should take or what options they
 have.
 
-<Playground>
-  {() => {
+```docoff-react-preview
+  React.createElement(() => {
     const [fruit, setFruit] = React.useState('apple');
     const options = [
       {
@@ -243,15 +231,15 @@ have.
         />
       </>
     );
-  }}
-</Playground>
+  })
+```
 
 ### Disabled State
 
 It's possible to disable just some options or the whole set.
 
-<Playground>
-  {() => {
+```docoff-react-preview
+  React.createElement(() => {
     const [fruit, setFruit] = React.useState('apple');
     const options = [
       {
@@ -285,27 +273,27 @@ It's possible to disable just some options or the whole set.
         />
       </>
     );
-  }}
-</Playground>
+  })
+```
 
 ## Forwarding HTML Attributes
 
 In addition to the options below in the [component's API](#api) section, you
 can specify [React synthetic events] or you can **add whatever HTML attribute
 you like.** All attributes that don't interfere with the API are forwarded to
-the native HTML `<input>`. This enables making the component interactive and helps
-to improve its accessibility.
+the native HTML `<input>` elements. This enables making the component
+interactive and helps to improve its accessibility.
 
 👉 Refer to the MDN reference for the full list of supported attributes of the
 [radio] input type.
 
 ## API
 
-<Props table of={Radio} />
+<docoff-react-props src="/components/Radio/Radio.jsx"></docoff-react-props>
 
 ## Theming
 
-Head to [Forms Theming](/customize/theming/forms) to see shared form theming
+Head to [Forms Theming](/docs/customize/theming/forms) to see shared form theming
 options. On top of that, the following options are available for Radio.
 
 | Custom Property                                                    | Description                                    |

package/src/{lib/components → components}/Radio/Radio.jsx

@@ -26,7 +26,6 @@ export const Radio = ({
 
   return (
     <fieldset
-      {...transferProps(restProps)}
       className={classNames(
         styles.root,
         context && styles.isRootInFormLayout,
@@ -46,16 +45,15 @@ export const Radio = ({
       >
         {label}
       </legend>
-      <div
-        aria-hidden
-        className={classNames(
-          styles.label,
-          !isLabelVisible && styles.isLabelHidden,
-        )}
-        id={id && `${id}__displayLabel`}
-      >
-        {label}
-      </div>
+      {isLabelVisible && (
+        <div
+          aria-hidden
+          className={styles.label}
+          id={id && `${id}__displayLabel`}
+        >
+          {label}
+        </div>
+      )}
       <div className={styles.field}>
         <div className={styles.options}>
           {
@@ -69,10 +67,11 @@ export const Radio = ({
                   key={key}
                 >
                   <input
-                    className={styles.input}
+                    {...transferProps(restProps)}
                     checked={restProps.onChange
                       ? (value === option.value) || false
                       : undefined}
+                    className={styles.input}
                     disabled={disabled || option.disabled}
                     id={id && `${id}__item__${key}`}
                     name={id}

package/src/{lib/components → components}/Radio/Radio.scss

@@ -64,11 +64,6 @@
     @include variants.validation(warning);
 }
 
-// Invisible label
-.isLabelHidden {
-    @include accessibility.hide-text();
-}
-
 // Layouts
 .isRootLayoutVertical,
 .isRootLayoutHorizontal {