fix(block-section): increased top and bottom margins on block-section…

… label to fix focus ring overlap (#862) (#863)
Esri · Mar 2, 2020 · 3b00652 · 3b00652
1 parent e41e460
commit 3b00652
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 0 deletions.
diff --git a/src/components/calcite-block-section/calcite-block-section.scss b/src/components/calcite-block-section/calcite-block-section.scss
@@ -14,6 +14,7 @@
   cursor: pointer;
   display: flex;
   justify-content: space-between;
+  margin: var(--calcite-app-cap-spacing-quarter) 0;
   padding: var(--calcite-app-cap-spacing-half) 0;
   user-select: none;
 

diff --git a/src/demos/shell/demo-app-full-window.html b/src/demos/shell/demo-app-full-window.html
@@ -291,6 +291,11 @@
                 </calcite-value-list>
                 <calcite-block collapsible open heading="Contextual Content" summary="Select goodness">
                   <calcite-block-content>
+                    <calcite-block-section text="Cool things" toggle-display="switch">
+                      <calcite-action text-enabled text="cool thing"></calcite-action>
+                      <calcite-action text-enabled text="cool thing"></calcite-action>
+                      <calcite-action text-enabled text="cool thing"></calcite-action>
+                    </calcite-block-section>
                     <calcite-value-list id="one" multiple>
                       <calcite-value-list-item
                         text-label="2018 Population Density (Esri)"