feat(picker): adds support for displaying full list without cutting c…

…ontent
Lundalogik · Sep 10, 2019 · 7f0a31a · 7f0a31a
1 parent 86afaf6
commit 7f0a31a
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 5 deletions.
diff --git a/src/components/picker/picker.mdx b/src/components/picker/picker.mdx
@@ -20,7 +20,7 @@ When importing ListItem, see [Import Statements](/#import-statements).
 
 <limel-example name="limel-example-picker-multiple" path="picker" />
 
-### With icons
+### With icons and displaying full list without cutting content
 
 When importing ListItem, see [Import Statements](/#import-statements).
 

diff --git a/src/components/picker/picker.scss b/src/components/picker/picker.scss
@@ -20,7 +20,10 @@
 .dropdown--list {
     background-color: white;
     position: absolute;
-    margin-top: pxToRem(-8);
-    max-height: pxToRem(250);
-    overflow-y: auto;
+    margin-top: pxToRem(-1);
+
+    &:not(.display-full-list) {
+        max-height: pxToRem(250);
+        overflow-y: auto;
+    }
 }
diff --git a/src/components/picker/picker.tsx b/src/components/picker/picker.tsx
@@ -74,6 +74,12 @@ export class Picker {
     @Prop()
     public multiple: boolean = false;
 
+    /**
+     * True if the dropdown list should be displayed without cutting the content
+     */
+    @Prop()
+    public displayFullList: boolean = false;
+
     /**
      * Fired when a new value has been selected from the picker
      */
@@ -261,7 +267,12 @@ export class Picker {
                 style={{
                     width: `${boundingRect.width}px`,
                 }}
-                class="dropdown--list mdc-elevation-transition mdc-elevation--z4 mdc-menu-surface mdc-menu-surface--open"
+                class={`dropdown--list
+                        mdc-elevation-transition
+                        mdc-elevation--z4
+                        mdc-menu-surface mdc-menu-surface--open
+                        ${this.displayFullList ? 'display-full-list' : ''}	
+                        `}
                 tabindex="-1"
             >
                 <limel-list

diff --git a/src/examples/picker/picker-icons.tsx b/src/examples/picker/picker-icons.tsx
@@ -123,6 +123,7 @@ export class PickerIconsExample {
                 value={this.selectedItems}
                 searchLabel={'Search your awesomenaut'}
                 multiple={true}
+                displayFullList={true}
                 searcher={this.search}
                 onChange={this.onChange}
                 onInteract={this.onInteract}