style: minimize title/description space on the list when prop value i…

…s not provided (#3373)
Esri · Nov 29, 2021 · 97b6fa6 · 97b6fa6
1 parent b23fae0
commit 97b6fa6
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 18 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
@@ -91,13 +91,17 @@
 }
 
 .actions {
-  @apply items-stretch flex justify-end m-0 flex-initial;
+  @apply items-stretch flex m-0 flex-initial;
 }
 
 .actions--start ~ .label {
   @apply pl-1;
 }
 
+.actions--end {
+  @apply justify-end flex-1;
+}
+
 .calcite--rtl .actions--start ~ .label {
   padding-left: unset;
   @apply pr-1;

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
@@ -289,23 +289,25 @@ export class CalcitePickListItem {
       <Fragment>
         {this.renderIcon()}
         {this.renderActionsStart()}
-        <label
-          aria-label={label}
-          class={CSS.label}
-          onClick={this.pickListClickHandler}
-          onKeyDown={this.pickListKeyDownHandler}
-          ref={(focusEl): HTMLLabelElement => (this.focusEl = focusEl)}
-          tabIndex={0}
-        >
-          <div
-            aria-checked={this.selected.toString()}
-            class={CSS.textContainer}
-            role="menuitemcheckbox"
+        {(label || description) && (
+          <label
+            aria-label={label}
+            class={CSS.label}
+            onClick={this.pickListClickHandler}
+            onKeyDown={this.pickListKeyDownHandler}
+            ref={(focusEl): HTMLLabelElement => (this.focusEl = focusEl)}
+            tabIndex={0}
           >
-            <span class={CSS.title}>{label}</span>
-            {description ? <span class={CSS.description}>{description}</span> : null}
-          </div>
-        </label>
+            <div
+              aria-checked={this.selected.toString()}
+              class={CSS.textContainer}
+              role="menuitemcheckbox"
+            >
+              <span class={CSS.title}>{label}</span>
+              {description ? <span class={CSS.description}>{description}</span> : null}
+            </div>
+          </label>
+        )}
         {this.renderActionsEnd()}
       </Fragment>
     );

diff --git a/src/components/calcite-value-list-item/calcite-value-list-item.tsx b/src/components/calcite-value-list-item/calcite-value-list-item.tsx
@@ -67,7 +67,7 @@ export class CalciteValueListItem {
   /**
    * The main label for this item. Appears next to the icon.
    */
-  @Prop({ reflect: true }) label!: string;
+  @Prop({ reflect: true }) label: string;
 
   /**
    * Used to provide additional metadata to an item, primarily used when the parent list has a filter.