Components/dropdown #1065

julio8a · 2019-03-20T18:36:22Z

Updated dropdowns UI (styles)

lib/sass/calcite-web/components/_dropdown.scss

paulcpederson · 2019-03-20T21:29:09Z

lib/sass/calcite-web/components/_dropdown.scss

-      html[dir="rtl"] &.is-active, html[dir="rtl"] &:focus {
-        border-left: none;
-        border-right: 3px solid $blue;
+      html[dir="rtl"] &.is-active:before, html[dir="rtl"] &:focus:before, html[dir="rtl"] &:hover:before {


you don't need all these selectors. You're only declaring the left value on the :before pseudo element above, so that's the only one you need to correct in right to left. Just using

html[dir="rtl"] &:before { left: unset; right: 10px; }

should be sufficient.

paulcpederson · 2019-03-20T21:29:38Z

lib/sass/calcite-web/components/_dropdown.scss

-        border-right: 3px solid $blue;
+      html[dir="rtl"] &.is-active:before, html[dir="rtl"] &:focus:before, html[dir="rtl"] &:hover:before {
+        right: 10px;
+        padding-right: 0;


the :before doesn't have any padding, so I don't think you need this either.

paulcpederson · 2019-03-20T21:31:54Z

lib/sass/calcite-web/components/_dropdown.scss

+    padding-left: 0;
+    &:hover {
+      background: $white;
+      &:before {


honestly I wonder if it would be easier to not inherit from dropdown link so you don't have to unset all of these.

paulcpederson · 2019-03-20T21:32:37Z

lib/sass/calcite-web/components/_dropdown.scss

@@ -68,6 +89,7 @@
    z-index: 1000;
    display: none;
    overflow: auto;
+    padding: 20px;


If possible we should probably use rem or baseline units here.

updated to rem or baseline

paulcpederson · 2019-03-20T21:46:43Z

lib/sass/calcite-web/components/_dropdown.scss

    cursor: auto;
+    border-bottom: 1px solid $lightest-gray;
+    margin: $baseline/3 $baseline/1.5 0 $baseline/1.5;


if we make the margin-bottom on this -1px it helps alleviate this weird UI moment when you hover on the first link under a title:

here it is with -1px, the hover blends in so it feels more seamless:

Behind door number 3.... Making the first-child link have a transparent 1px border that on hover becomes #eaeaea to match the header-bottom. That way the border beneath the headline is maintained but there is no staggering:

Couple other styling things:

Could we maybe tighten up the space between items by reducing y-padding 2-3 px ish? I think that would put it more in line with what's on DevExt now.

I think the active link and the header text are good candidates for 500 weight.

Cool with no animation / fade in or out for hover state?

Will work on these

updated spacing on title and links. Also added a fade in transition $transition

paulcpederson · 2019-03-20T23:53:26Z

lib/sass/calcite-web/components/_dropdown.scss

@@ -12,59 +12,79 @@
  }
 }

+%dot {


you know, now that I'm looking at it, I think that these classes are global to sass, so we might want to name this something a little more specific as it's pretty likely somebody someday will have a sass class called dot. Maybe active-dot or dropdown-dot. IDK. Maybe @macandcheese will have a good idea on the name

Yeah, either of those make sense.

%dot is really only used here in one place, it might be useful to define it in a utils file to re-use the style in other upcoming updates, like side nav, or filters.

ya, that's what I was thinking. @paulcpederson, you good with this?
Also, any thoughts on the class name? is dot good?

let's do like active-link-dot or something more specific

macandcheese

Looks good, few things.

macandcheese · 2019-03-21T00:20:38Z

lib/sass/calcite-web/components/_dropdown.scss

  }

  @mixin dropdown-btn {
-    cursor: pointer;
-    position: relative;
  }


Is this used anymore? If not, let's remove from here and the include at the end of the file.

macandcheese · 2019-03-21T00:22:13Z

lib/sass/calcite-web/components/_dropdown.scss

-        border-right: 3px solid $blue;
+      html[dir="rtl"] &:before {
+        left: unset;
+        right: .6rem;
      }


Could these be included in %dot?

macandcheese · 2019-03-21T00:23:55Z

lib/sass/calcite-web/components/_dropdown.scss

@@ -12,59 +12,79 @@
  }
 }

+%dot {


%dot is really only used here in one place, it might be useful to define it in a utils file to re-use the style in other upcoming updates, like side nav, or filters.

macandcheese · 2019-03-21T17:17:03Z

Last few style things... Could we lose a little bit of the heading top margin? It also seems like we could use a border on the dropdown to keep it from washing into the items behind it.

Current / suggested:

macandcheese · 2019-03-21T21:42:50Z

Is this how we want to handle multi-line options? Or center vertically within the element?

I also can't seem to get the dropdowns to trigger in IE 11., maybe that's something on my end?

paulcpederson · 2019-03-21T21:48:34Z

Is this how we want to handle multi-line options? Or center vertically within the element?

I think aligned with top line is good. Centered in element falls between the two lines of text and looks less intentional, IMO

active-link-dot mixin

…n animation

paulcpederson · 2019-03-21T23:08:37Z

lib/sass/calcite-web/components/_dropdown.scss

@@ -8,66 +8,50 @@
  position: relative;
  display: inline-block;
  &.is-active .dropdown-menu {
-    display: block;
+    opacity: 1;


So you generally can't use opacity alone to do UI's like this. The reason being I can't click anything behind the dropdown, even when it's closed. Also, you can tab into the hidden menu and focus on the links that are invisible.

If we want to do an animation, I would suggest using visibility: hidden and opacity together. There is a specific way you can combine them to get the animation and still have normal hiding. We do it in modals:

https://github.com/Esri/calcite-web/blob/master/lib/sass/calcite-web/patterns/_modal.scss#L21-L36

If we go that direction, a small transition down during the fade in would help relate the menu with the dropdown via the animation

- Added gray dots on hover - active state (click) hets blue dot - for some reason position was off, added top: 1 rem

macandcheese · 2019-03-24T15:33:52Z

Closing, will re-open fresh PR.

Julio Ochoa added 2 commits March 19, 2019 16:58

worked on dropdowns

9267159

added hover and focus states (accessibility)

d292066

julio8a self-assigned this Mar 20, 2019

julio8a requested review from paulcpederson and macandcheese March 20, 2019 18:36

Julio Ochoa added 2 commits March 20, 2019 11:58

cleaned up color arrangement

fe6f925

moved dot to it's own %class

e8b290e

paulcpederson reviewed Mar 20, 2019

View reviewed changes

updates based on Paul's feedback

8f50844

paulcpederson reviewed Mar 20, 2019

View reviewed changes

macandcheese reviewed Mar 21, 2019

View reviewed changes

removed dropdown-btn

8288eed

Julio Ochoa added 3 commits March 21, 2019 14:59

moved dot to utils

13f1985

forgot underscore prefix for filename. Also, moved the RTL to

3a27488

active-link-dot mixin

updated title top padding & changed dropdown to opacity for transitio…

3a504c0

…n animation

paulcpederson reviewed Mar 21, 2019

View reviewed changes

Julio Ochoa and others added 5 commits March 22, 2019 09:27

added visibility

dd757ef

added transition mixin

086dea2

stash

0031614

stash dropdown updates

bb9e0f3

Small style updates

02e8793

- Added gray dots on hover - active state (click) hets blue dot - for some reason position was off, added top: 1 rem

macandcheese closed this Mar 24, 2019

julio8a deleted the components/dropdown branch April 24, 2019 15:41

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Components/dropdown #1065

Components/dropdown #1065

julio8a commented Mar 20, 2019

paulcpederson Mar 20, 2019

julio8a Mar 21, 2019

paulcpederson Mar 20, 2019

julio8a Mar 21, 2019

paulcpederson Mar 20, 2019

julio8a Mar 21, 2019

paulcpederson Mar 20, 2019

julio8a Mar 21, 2019

paulcpederson Mar 20, 2019

paulcpederson Mar 20, 2019

macandcheese Mar 21, 2019 •

edited

Loading

julio8a Mar 21, 2019

julio8a Mar 21, 2019

paulcpederson Mar 20, 2019

macandcheese Mar 21, 2019

macandcheese Mar 21, 2019

julio8a Mar 21, 2019

paulcpederson Mar 21, 2019

julio8a Mar 21, 2019

macandcheese left a comment •

edited

Loading

macandcheese Mar 21, 2019

macandcheese Mar 21, 2019

julio8a Mar 21, 2019

macandcheese Mar 21, 2019

macandcheese commented Mar 21, 2019

macandcheese commented Mar 21, 2019 •

edited

Loading

paulcpederson commented Mar 21, 2019 •

edited

Loading

paulcpederson Mar 21, 2019

macandcheese commented Mar 24, 2019

@@ @@ -12,59 +12,79 @@ @@
                 }
               }
+              %dot {

Components/dropdown #1065

Components/dropdown #1065

Conversation

julio8a commented Mar 20, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

macandcheese Mar 21, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

macandcheese left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

macandcheese commented Mar 21, 2019

macandcheese commented Mar 21, 2019 • edited Loading

paulcpederson commented Mar 21, 2019 • edited Loading

Choose a reason for hiding this comment

macandcheese commented Mar 24, 2019

macandcheese Mar 21, 2019 •

edited

Loading

macandcheese left a comment •

edited

Loading

macandcheese commented Mar 21, 2019 •

edited

Loading

paulcpederson commented Mar 21, 2019 •

edited

Loading