[components] Radioselect with using flex, Fixes #528

Author: kristofferjs

packages/@sanity/components/src/selects/styles/RadioSelect.css

@@ -8,15 +8,17 @@
 
 .horizontal {
   composes: root;
+
+  @nest & .radioContainer {
+    display: flex;
+    flex-wrap: wrap;
+  }
 }
 
 .container {
   display: block;
 }
 
 .item {
-  @nest .horizontal & {
-    margin-right: 1rem;
-    float: left;
-  }
+  margin-right: 1rem;
 }

packages/test-studio/schemas/strings.js

@@ -41,6 +41,30 @@ export default {
         ]
       }
     },
+    {
+      name: 'radioSelectHorizontal',
+      title: 'Select (layout: radio, direction: horizontal)',
+      type: 'string',
+      description: 'Select a single string value by choosing options from a list of radio buttons. It should *not* be possible to unset a selected value once its set.',
+      options: {
+        layout: 'radio',
+        direction: 'horizontal',
+        list: [
+          {
+            title: 'One (1)',
+            value: 'one'
+          },
+          {
+            title: 'Two (2)',
+            value: 'two'
+          },
+          {
+            title: 'Three (3)',
+            value: 'three'
+          }
+        ]
+      }
+    },
     {
       name: 'selectObjectOfString',
       title: 'Select string in object',
@@ -57,6 +81,7 @@ export default {
       description: 'Select a single string value by choosing options from a list of radio buttons. It should *not* be possible to unset a selected value once its set.',
       options: {
         layout: 'radio',
+        direction: 'vertical',
         list: [
           {
             title: 'One (1)',