diff --git a/src/_listDefinitions.scss b/src/_listDefinitions.scss index 94bdb3bb21..92f5c8a097 100644 --- 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 index ad433d7987..fbcfede62e 100644 --- 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 index 913f715086..469a55df86 100644 --- 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 index b0348007b2..0db7dda4f8 100644 --- a/stories/select/__snapshots__/select.stories.storyshot +++ b/stories/select/__snapshots__/select.stories.storyshot @@ -1924,6 +1924,188 @@ exports[`Storyshots Components/Select Grouping 1`] = ` + +`; + +exports[`Storyshots Components/Select Large Select 1`] = ` +
+ + + +
+ + +
+ + +
+ + +
+ + + + + +
+ + +
+ + +
+ + +
    + + +
  • + + + + + 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. + + + + +
  • + + +
  • + + + + List item 2 + + + +
  • + + +
  • + + + + List item 3 + + + +
  • + + +
  • + + + + List item 4 + + + +
  • + + +
+ + +
+ + +
+ +
`; @@ -3686,7 +3868,11 @@ exports[`Storyshots Components/Select Text wrapping 1`] = ` - 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. + diff --git a/stories/select/select.stories.js b/stories/select/select.stories.js index d86b0502c7..224d76cfbb 100644 --- a/stories/select/select.stories.js +++ b/stories/select/select.stories.js @@ -879,7 +879,11 @@ export const textWrapping = () => `
  • - 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. + A1
  • @@ -1044,6 +1048,80 @@ Select can be displayed as a popover, using all of its specifications. The defau } }; +export const largerSelect = () => `
    +
    +
    +
    +
    + +
    +
    +
    +
      +
    • + + 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. + +
    • +
    • + List item 2 +
    • +
    • + List item 3 +
    • +
    • + List item 4 +
    • +
    +
    +
    +
    +`; + +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 = () => `