feat: larger select body [ci visual] (#2218)

SAP · Mar 30, 2021 · ecf1f7c · ecf1f7c
1 parent b4249dd
commit ecf1f7c
Show file tree

Hide file tree

Showing 5 changed files with 302 additions and 21 deletions.
diff --git a/src/_listDefinitions.scss b/src/_listDefinitions.scss
@@ -47,6 +47,9 @@ $fd-list-item-counter-spacing: 1rem !default;
 
 $fd-list-rating-indicator-spacing: 0.5rem !default;
 
+$fd-list-dropdown-max-width: 40rem !default;
+$fd-list-dropdown-optional-max-width: 62rem !default;
+
 $semantic-color: (
   "neutral": ("color": var(--sapNeutralTextColor)),
   "positive": ("color": var(--sapPositiveTextColor)),

diff --git a/src/_listDropdown.scss b/src/_listDropdown.scss
@@ -1,4 +1,3 @@
-
 @import "./listDefinitions.scss";
 
 .#{$block} {
@@ -20,12 +19,6 @@
         padding: $fd-dropdown-vertical-compact-padding $fd-list-item-padding-x;
       }
     }
-
-    .#{$block}__secondary {
-      width: auto;
-      max-width: 15rem;
-      display: contents;
-    }
   }
 
   &--multi-input {
@@ -113,15 +106,30 @@
 
   &--dropdown,
   &--multi-input {
-    display: block;
-    min-width: 7rem;
-    max-width: 37.5rem;
+    @mixin list-width-limit($maxWidth: $fd-list-dropdown-max-width) {
+      max-width: $maxWidth;
+
+      .#{$block}__title {
+        max-width: 0.6 * $maxWidth;
+
+        &:first-child:last-child {
+          max-width: $maxWidth;
+        }
+      }
+
+      .#{$block}__secondary {
+        max-width: 0.4 * $maxWidth;
+      }
 
-    // for when dropdown and multi input are used in mobile mode
-    &.#{$block}--mobile {
-      max-width: 100%;
+      // for when dropdown and multi input are used in mobile mode
+      &.#{$block}--mobile {
+        max-width: 100%;
+      }
     }
 
+    display: block;
+    min-width: 7rem;
+
     .#{$block}__item {
       cursor: pointer;
       border: none;
@@ -142,17 +150,23 @@
       }
     }
 
-    .#{$block}__title {
+    .#{$block}__secondary {
       width: auto;
-      max-width: 22.5rem;
+      display: block;
+    }
 
-      &:first-child:last-child {
-        max-width: 37.5rem;
-      }
+    .#{$block}__title {
+      width: auto;
     }
 
+    @include list-width-limit($fd-list-dropdown-max-width);
+
     .#{$block}__icon {
       line-height: 1rem;
     }
+
+    &.#{$block}--large-dropdown {
+      @include list-width-limit($fd-list-dropdown-optional-max-width);
+    }
   }
 }
diff --git a/src/popover.scss b/src/popover.scss
@@ -194,7 +194,7 @@ $block: #{$fd-namespace}-popover;
 
       &-fill {
         display: block;
-        max-width: 37.5rem;
+        max-width: 40rem;
         width: $fd-popover-full-filled-width;
       }
     }

diff --git a/stories/select/__snapshots__/select.stories.storyshot b/stories/select/__snapshots__/select.stories.storyshot
@@ -1924,6 +1924,188 @@ exports[`Storyshots Components/Select Grouping 1`] = `
   </div>
 
 
+</div>
+`;
+
+exports[`Storyshots Components/Select Large Select 1`] = `
+<div
+  style="height: 250px"
+>
+
+
+  <label
+    class="fd-form-label"
+    id="largeSelectPopoverSizeLabel"
+  >
+    Choose an option
+  </label>
+  <br />
+
+
+  <div
+    class="fd-popover"
+  >
+
+
+    <div
+      class="fd-popover__control"
+    >
+
+
+      <div
+        class="fd-select"
+      >
+
+
+        <button
+          aria-expanded="true"
+          aria-haspopup="listbox"
+          aria-labelledby="largeSelectPopoverSizeLabel"
+          class="fd-select__control"
+          id="largeSelectPopoverBodySizeLabelCombobx"
+          onclick="
+                    toggleElAttrs('h0GTKE325', ['aria-hidden']);
+                    toggleElAttrs('matchSelectPopoverBodySizeSelectCombobox', ['aria-expanded']);
+                "
+          tabindex="0"
+        >
+
+
+          <span
+            class="fd-select__text-content"
+            id="largeSelectPopoverSizeValue"
+          >
+            Larger Option Than Usual
+          </span>
+
+
+          <span
+            class="fd-button fd-button--transparent fd-select__button"
+          >
+
+
+            <i
+              class="sap-icon--slim-arrow-down"
+            />
+
+
+          </span>
+
+
+        </button>
+
+
+      </div>
+
+
+    </div>
+
+
+    <div
+      aria-hidden="false"
+      class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--dropdown"
+      id="h0GGFE325"
+    >
+
+
+      <ul
+        aria-activedescendant="largeSelectPopoverBodySizeSelectCombobox-currentlyFocusedItem"
+        aria-labelledby="largeSelectPopoverSizeLabel"
+        class="fd-list fd-list--dropdown fd-list--large-dropdown"
+        role="listbox"
+      >
+
+
+        <li
+          aria-selected="true"
+          class="fd-list__item is-selected"
+          id="largeSelectPopoverBodySizeSelectCombobox-currentlyFocusedItem"
+          role="option"
+          tabindex="0"
+        >
+
+
+          <span
+            class="fd-list__title"
+          >
+
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+          </span>
+
+
+        </li>
+
+
+        <li
+          class="fd-list__item"
+          role="option"
+          tabindex="-1"
+        >
+
+
+          <span
+            class="fd-list__title"
+          >
+            List item 2
+          </span>
+
+
+        </li>
+
+
+        <li
+          class="fd-list__item"
+          role="option"
+          tabindex="-1"
+        >
+
+
+          <span
+            class="fd-list__title"
+          >
+            List item 3
+          </span>
+
+
+        </li>
+
+
+        <li
+          class="fd-list__item"
+          role="option"
+          tabindex="-1"
+        >
+
+
+          <span
+            class="fd-list__title"
+          >
+            List item 4
+          </span>
+
+
+        </li>
+
+
+      </ul>
+
+
+    </div>
+
+
+  </div>
+
+
 </div>
 `;
 
@@ -3686,7 +3868,11 @@ exports[`Storyshots Components/Select Text wrapping 1`] = `
           <span
             class="fd-list__title"
           >
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
+
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore 
+                    et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut 
+                    aliquip ex ea commodo consequat.
+
           </span>
 
 

diff --git a/stories/select/select.stories.js b/stories/select/select.stories.js
@@ -879,7 +879,11 @@ export const textWrapping = () => `<div style="height: 300px">
             <li
                 id="textWrappingSelectCombobox-currentlyFocusedItem"
                 class="fd-list__item is-selected" aria-selected="true" role="option" tabindex="0">
-                <span class="fd-list__title">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </span>
+                <span class="fd-list__title">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore 
+                    et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut 
+                    aliquip ex ea commodo consequat.
+                </span>
                 <span class="fd-list__secondary">A1</span>
             </li>
             <li class="fd-list__item" role="option" tabindex="-1">
@@ -1044,6 +1048,80 @@ Select can be displayed as a popover, using all of its specifications. The defau
     }
 };
 
+export const largerSelect = () => `<div style="height: 250px">
+    <label class="fd-form-label" id="largeSelectPopoverSizeLabel">Choose an option</label><br />
+    <div class="fd-popover">
+    <div class="fd-popover__control">
+        <div class="fd-select">
+            <button
+                aria-labelledby="largeSelectPopoverSizeLabel"
+                class="fd-select__control"
+                tabindex="0"
+                id="largeSelectPopoverBodySizeLabelCombobx"
+                onclick="
+                    toggleElAttrs('h0GTKE325', ['aria-hidden']);
+                    toggleElAttrs('matchSelectPopoverBodySizeSelectCombobox', ['aria-expanded']);
+                "
+                aria-expanded="true"
+                aria-haspopup="listbox">
+                <span id="largeSelectPopoverSizeValue" class="fd-select__text-content">Larger Option Than Usual</span>
+                <span class="fd-button fd-button--transparent fd-select__button">
+                    <i class="sap-icon--slim-arrow-down"></i>
+                </span>
+            </button>
+        </div>
+    </div>
+    <div
+        class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--dropdown"
+        aria-hidden="false"
+        id="h0GGFE325">
+        <ul
+            aria-activedescendant="largeSelectPopoverBodySizeSelectCombobox-currentlyFocusedItem"
+            aria-labelledby="largeSelectPopoverSizeLabel"
+            class="fd-list fd-list--dropdown fd-list--large-dropdown"
+            role="listbox">
+            <li
+                id="largeSelectPopoverBodySizeSelectCombobox-currentlyFocusedItem"
+                class="fd-list__item is-selected" aria-selected="true" role="option" tabindex="0">
+                <span class="fd-list__title">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                </span>
+            </li>
+            <li class="fd-list__item" role="option" tabindex="-1">
+                <span class="fd-list__title">List item 2</span>
+            </li>
+            <li class="fd-list__item" role="option" tabindex="-1">
+                <span class="fd-list__title">List item 3</span>
+            </li>
+            <li class="fd-list__item" role="option" tabindex="-1">
+                <span class="fd-list__title">List item 4</span>
+            </li>
+        </ul>
+    </div>
+    </div>
+</div>
+`;
+
+largerSelect.storyName = 'Large Select';
+
+largerSelect.parameters = {
+    docs: {
+        iframeHeight: 300,
+        storyDescription: `
+There is a way to make larger select select body, To achieve it, add \`fd-list--large-dropdown\` to \`fd-list\` element.        
+        `
+    }
+};
+
 export const disabled = () => `<label class="fd-form-label" id="disabledLabel">Choose an option</label><br />
 <div class="fd-popover">
     <div class="fd-popover__control" aria-disabled="true">