feat: styles for a tighter calcite-filter and related styles in pick-…

…list and value-list

* Minor padding and margin tweaks to filter + value-list (#781)

* Filter border and margin in lists. (#795)

src/components/calcite-filter/calcite-filter.scss

@@ -1,7 +1,7 @@
 :host {
   @extend %component-host;
   display: flex;
-  padding: var(--calcite-app-cap-spacing-quarter) var(--calcite-app-side-spacing-half);
+  padding: var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-half);
   width: 100%;
 }
 
@@ -10,7 +10,7 @@
 label {
   align-items: center;
   display: flex;
-  margin: var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-quarter);
+  margin: 0 var(--calcite-app-side-spacing-quarter);
   overflow: hidden;
   position: relative;
   width: 100%;

src/components/calcite-pick-list/calcite-pick-list.scss

@@ -21,10 +21,11 @@ header {
     top: 0;
     z-index: 1;
   }
+  @include borderShadow();
 }
 
 calcite-filter {
-  @include borderShadow();
+  margin-bottom: 1px;
 }
 
 slot[name="menu-actions"]::slotted(calcite-action) {

src/components/calcite-value-list/calcite-value-list.scss

@@ -21,12 +21,13 @@ header {
     top: 0;
     z-index: 1;
   }
+  @include borderShadow();
 }
 
-slot[name="menu-actions"]::slotted(calcite-action) {
-  padding: 0 var(--calcite-app-side-spacing-half);
+calcite-filter {
+  margin-bottom: 1px;
 }
 
-calcite-filter {
-  @include borderShadow();
+slot[name="menu-actions"]::slotted(calcite-action) {
+  padding: 0 var(--calcite-app-side-spacing-half);
 }

src/demos/pick-list/basic.html

@@ -18,19 +18,19 @@
         <h1>calcite-pick-list</h1>
 
         <h2>Pick List - Default</h2>
-        <calcite-pick-list id="one">
+        <calcite-pick-list id="one" compact>
           <calcite-pick-list-item text-label="T. Rex" text-description="arm strength impaired" value="trex">
-            <calcite-action appearance="clear" slot="secondary-action" text="click-me" onClick="console.log('clicked');">
+            <calcite-action scale="s" appearance="clear" slot="secondary-action" text="click-me" onClick="console.log('clicked');">
               <calcite-icon icon="x" scale="s"></calcite-icon>
             </calcite-action>
           </calcite-pick-list-item>
           <calcite-pick-list-item text-label="Triceratops" text-description="3 horn" value="triceratops" selected>
-            <calcite-action appearance="clear" slot="secondary-action" text="click-me" onClick="console.log('clicked');">
+            <calcite-action scale="s" appearance="clear" slot="secondary-action" text="click-me" onClick="console.log('clicked');">
               <calcite-icon icon="x" scale="s"></calcite-icon>
             </calcite-action>
           </calcite-pick-list-item>
           <calcite-pick-list-item text-label="hi" text-description="there" value="helloWorld">
-            <calcite-action appearance="clear" slot="secondary-action" text="click-me" onClick="console.log('clicked');">
+            <calcite-action scale="s" appearance="clear" slot="secondary-action" text="click-me" onClick="console.log('clicked');">
               <calcite-icon icon="x" scale="s"></calcite-icon>
             </calcite-action>
           </calcite-pick-list-item>
@@ -44,6 +44,9 @@ <h2>Pick List - Default</h2>
 
         <h2>Pick List - multi-select filter-enabled</h2>
         <calcite-pick-list id="two" multiple filter-enabled>
+          <calcite-action scale="s" text="filters" text-enabled="false" slot="menu-actions">
+            <calcite-icon icon="sliders" scale="s"></calcite-icon>
+          </calcite-action>
           <calcite-pick-list-item text-label="Chocolate" text-description="Dark is the best." value="chocolate">
             <calcite-action appearance="clear" slot="secondary-action" text="click-me" onClick="console.log('clicked');">
               <calcite-icon icon="x" scale="s"></calcite-icon>

src/demos/value-list/basic.html

@@ -13,8 +13,8 @@
         <h1>calcite-value-list</h1>
 
         <h3>multiple</h3>
-        <calcite-value-list id="one" multiple="true" filter-enabled>
-          <calcite-action slot="menu-actions" indicator text="Cool">
+        <calcite-value-list id="one" multiple="true" filter-enabled compact>
+          <calcite-action slot="menu-actions" indicator text="Cool" scale="s">
             <calcite-icon icon="hamburger" scale="s"></calcite-icon>
           </calcite-action>
           <calcite-value-list-item text-label="Dogs" text-description="Man's best friend" value="dogs">