Merge pull request #470 from Esri/asangma/pick-list-item-compact-447

feat(pick-list-item): Exclude text-description in compact mode.
Esri · Oct 29, 2019 · 4d7c652 · 4d7c652
2 parents 57b22f0 + 8e20e18
commit 4d7c652
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 5 deletions.
diff --git a/src/components/calcite-pick-list-item/calcite-pick-list-item.scss b/src/components/calcite-pick-list-item/calcite-pick-list-item.scss
@@ -33,7 +33,7 @@
 .label {
   display: flex;
   flex: 1 0 0;
-  padding: var(--calcite-app-cap-spacing) var(--calcite-app-side-spacing-half);
+  padding: var(--calcite-app-cap-spacing-three-quarters) var(--calcite-app-side-spacing-half);
   align-items: center;
   cursor: pointer;
 }
@@ -61,7 +61,7 @@
 .action {
   flex: 0 0 0%;
   justify-self: flex-end;
-  margin: 0 var(--calcite-app-side-spacing-half);
+  margin: var(--calcite-app-cap-spacing-quarter) var(--calcite-app-side-spacing-half);
 }
 
 .handle {

diff --git a/src/components/calcite-pick-list-item/calcite-pick-list-item.tsx b/src/components/calcite-pick-list-item/calcite-pick-list-item.tsx
@@ -193,9 +193,10 @@ export class CalcitePickListItem {
   }
 
   render() {
-    const description = this.textDescription ? (
-      <span class={CSS.description}>{this.textDescription}</span>
-    ) : null;
+    const description =
+      this.textDescription && !this.compact ? (
+        <span class={CSS.description}>{this.textDescription}</span>
+      ) : null;
 
     return (
       <Host selected={this.isSelected}>