chore: wrap example radios in radiogroup

microsoft · Aug 10, 2020 · 9562e26 · 9562e26
1 parent 6a0e8be
commit 9562e26
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 6 deletions.
diff --git a/sites/fast-website/src/app/components/fast-frame/fast-frame.styles.ts b/sites/fast-website/src/app/components/fast-frame/fast-frame.styles.ts
@@ -141,10 +141,6 @@ export const FastFrameStyles = css`
         margin-inline-start: calc(var(--design-unit) * 2px + 2px);
     }
 
-    .control-container-column {
-        display: grid;
-    }
-
     .control-container-grid {
         display: grid;
         grid-template-columns: auto 1fr;
@@ -251,7 +247,17 @@ export const FastFrameStyles = css`
         background: transparent;
     }
 
-    fast-radio-group::part(positioning-region) {
+    fast-radio-group.example-radios {
+        margin: 0;
+    }
+
+    fast-radio-group.example-radios::part(positioning-region) {
+        display: grid;
+        grid-template-columns: auto;
+        height: 100%;
+    }
+
+    fast-radio-group.swatches::part(positioning-region) {
         display: grid;
         grid-gap: 10px;
         grid-auto-flow: column;

diff --git a/sites/fast-website/src/app/components/fast-frame/fast-frame.template.ts b/sites/fast-website/src/app/components/fast-frame/fast-frame.template.ts
@@ -48,6 +48,7 @@ export const FastFrameTemplate = html<FastFrame>`
                         <div class="content-control-container" >
                             <label for="neutral-color-pickers">Neutral color</label>
                             <fast-radio-group
+                                class="swatches"
                                 name="neutral-color-pickers"
                                 value="${x => x.previewNeutralPalette[0]}"
                                 @change="${(x, c) =>
@@ -70,6 +71,7 @@ export const FastFrameTemplate = html<FastFrame>`
                             </fast-radio-group>
                             <label for="accent-color-pickers">Accent color</label>
                             <fast-radio-group
+                            class="swatches"
                                 name="accent-color-pickers"
                                 value="${x => x.previewAccentPalette[0]}"
                                 @change="${(x, c) =>
@@ -271,7 +273,7 @@ export const FastFrameTemplate = html<FastFrame>`
                         <fast-menu-item role="menuitem" aria-label="Example menu item">Menu item 4</fast-menu-item>
                     </fast-menu>
                     <div class="control-container">
-                        <fast-radio-group name="example radio group" orientation="vertical">
+                        <fast-radio-group class="example-radios" name="example radio group" orientation="vertical">
                             <fast-radio aria-label="Example radio 1">Radio 1</fast-radio>
                             <fast-radio aria-label="Example radio 2">Radio 2</fast-radio>
                         </fast-radio-group>