Drop Buttons style update

Added image and fixed link to final design specs

Postponing until #3021087: Buttons is in.

Buttons have been committed! 🎉 We should be able to work on this now.

My priority is alpha blocker issues, but I'm working on this when I'm blocked on those. If another contributor is interested in taking this on to get it through quicker, they can ping me on Drupal Slack and I'll provide a patch of what I've done so far.

@neslee-canil-pinto contacted me on Slack with interest in working on this issue, so I've provided my work so far so he (or anyone else interested) can continue.
Some things to be aware of going in:

1. Haven't tested at all in IE/Edge yet
2. RTL still needs some work
3. No work done yet on .dropbutton-single styling, so that one still looks like Seven. Pretty much anything after line 215 in dropbutton.css is older CSS.
4. The new styles have all secondary actions in a container with its own box shadow. I'm currently accomplishing this by using JS to wrap a div around those <li> elements. This was intended to be a (probably?) temporary approach so I could focus on getting the CSS moving. Creating a template specific to dropbuttons is probably a better way to accomplish this, but it wasn't immediately clear how to best do it without creating the need for a bunch of Claro-specific dropbutton JS.
5. It's likely there are some no-longer-necessary rules in dropbutton.css that are left over from earlier versions. I found and removed several of them, but a few may still be there.
6. Dropbuttons are very complex,so there will be no surprise/offense if an approach completely different than the one in this patch is preferred😉.

To confirm this patch is applied properly, compare your results to this screenshot of how it looks on my local.

added patch for this issue

@Mahenkvyas22 thank you for working on this issue! Did you see that there was already a patch posted on this issue on #9?

It seems like your patch is modifying the compiled CSS files directly. When creating patches, you should use the 8.x-1.x branch. Patches should contain changes only for the source files. For more info, you can reference our documentation.

Test module added to Clarodist tools.

Note that we have two render elements for this: Dropbutton and Operations.

Furthermore, Views UI provides a small variant for Dropbutton by CSS. This can be viewed on view edit pages like /admin/structure/views/view/content.

I tried to push the dropbutton forward and worked on the patch provided in #9.
My focus was on getting the border-radius behavior and the (hover) colors right.

I'll continue this issue if you don't mind.

Please, be sure to set the appropriate issue status.

We just discussed on Slack with @huzooka: since there isn't any current implementation on core for the primary dropdown right now, it would be great for now to just use the grey one for now as an MVP and work on a follow-up to get the primary one on the future. Here's the issue I just opened: #3056372: Primary Drop Button style update.

Attached the patch that show my progress.

1. Tested only manually and only on my local browsers (Chrome, Safari, Firefox on OS X), other browsers should be covered (IE11, Edge normal / high contrast; IOS Safari, Chrome and Firefox on Ubuntu).
2. I found three interesting issues that should be reported (and that should be referenced in the patch).

I only set NR to see that the patch can be applied.

Patch wasn't attached, sorry.

I think that this is ready for review.

I'll attach the screenshots ASAP.

IE11/Edge hogh contrast arrows needs some improvement (they have the same size for every size variant).

Issues have to be reported:

• Add js- prefixed classes for separation of JS & CSS functionality of Dropbutton element
• Convert display details actions of Views UI view edit form to a real Dropbutton element
• Add support for Dropbutton type[s] (e.g. 'small') and use that type[s] in Views UI instead of non-reusable CSS modifiers

Screenshot attached (excluding Ubuntu/linux env).

These are looking really good, and it's very impressive that you added the screenshots for each browser and type of dropbutton.
I agree with your approach to proceed with this styling in Claro and open the new issues for the variants, buttons and prefixes.

I was able to test this patch on chrome, safari and firefox on osx, chrome and safari on iOS, and Edge and IE11.
Everything matched the screenshots you posted and the buttons and operations links look and function identically.
High Contrast mode on IE11 and Edge seem clear and correct as well.

I only noticed a couple small issues with focus and hover:

In Figma, the "focus" outline appears "behind" the other parts of the button.

The way it appears in the browser looks correct to me, I thought maybe this change was discussed elsewhere.

The hover state adds an additional dropshadow which makes the hovered part of the dropbutton appear to have a darker border, which also covers the white divider line.

I think these 2 lines could be removed:

1. +++ b/css/src/components/dropbutton.css
   @@ -0,0 +1,345 @@
   +  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
   

2. +++ b/css/src/components/dropbutton.css
   @@ -0,0 +1,345 @@
   +  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
   

In iOS on chrome and safari I wasn't able to see any focus styles, and the "hover" state for the drop arrow persisted instead. That could just be my misunderstanding, that I was not sure how to trigger them.

The white divider line is missing in the "small" version of the button in iOS also.

Fixed the missing separator for iOS Safari – but nothing else.

It turned out that iOS Safari forces a min-width for buttons, but that min-width depends on the font size.

Re-generated screenshots attached.

Good catch with the min-width problem! I can confirm that the small dropbutton separator is now added in iOS safari and iOS chrome.
Marking RTBC.

Todo:

1. Focus styles of first dropbutton list item + the toggle should strictly follow design
2. Dropbuttons inside tables should use the extra small variant.
3. Fix the border radius of the dropdown (should be 2px) + implement the same focus styles for non-first elements that (mobile) local tasks have

Addressing some of #35:

1. Focus style follows Figma as strict as possible
2. Partially done: We still have to find a way to use the small variant inside a views with table display style plugin
3. Done

The workaround for #35.2 is that Operations element is always styled with the extra small variant.

For the most part, the code looks good. Reviewed also changes to the views-ui.css by using diff.

+++ b/css/src/components/dropbutton.css
@@ -0,0 +1,367 @@
+.js .dropbutton-wrapper.open .dropbutton-widget {
+  z-index: 500;
+}

What is this value based on? It seems higher than it was before, at least according to the documentation.

No reason have 500 for this, back to NW.

Re #39: Fixed, and I also removed the unnecessary .open .dropbutton-widget rule.

I forgot to use the binary flag...

I have to test this on out supported browsers and platforms since there where major changes.

I had to add a minor fix for high contrast mode.

New screenshots attached.

It seems like the text isn't aligned correctly vertically on Android Chrome. I checked the images and other than that, this seems to work fine across all browsers 👍

Re #47:

It seems that this is a Chrome (~ for Android) specific issue that happens with Seven theme as well. I opened a follow-up for this: #3059536: Extra small Dropbutton text is vertically misaligned on Chrome for Android

We also agreed on that we'll ship the no-js version with the styles applied, and we won't try to optimizing for less than the 1% of the users. That will cause only a 'jump' in the table rows, but we won't show the Dropbutton items completely unstyled. I added some minor workaround for this case that lets Dropbuttons occupy the needed space if JavaScript interpretation is missing.

Follow-up for smaller variants: #3059537: Apply smaller Dropbutton variants only for non-touch capable screens

These are the options we chose from:

Option 1 (#48):

Option 2 (same a Seven):

This is starting to look really solid. Few more changes we should make before committing this:

1. +++ b/claro.theme
   @@ -410,6 +431,56 @@ function claro_form_view_edit_form_alter(&$form, FormStateInterface $form_state)
   +    $prefix_regex = '/(<.*class\s*= *["\']?)([^"\']*)(.*)/i';
   ...
   +          $dummy_dropbutton[$key][$nested_key]['#prefix'] = preg_replace($prefix_regex, '$1$2 dropbutton__item dropbutton__item--extrasmall$3', $prefix);
   ...
   +        $dummy_dropbutton[$key]['#prefix'] = preg_replace($prefix_regex, '$1$2 dropbutton__item dropbutton__item--extrasmall$3', $prefix);
   ...
   +      $dummy_dropbutton['prefix']['#markup'] = preg_replace($prefix_regex, '$1$2 ' . $classes . '$3', $prefix);
   

   🤦‍♂️

2. +++ b/css/src/components/button.css
   @@ -20,7 +20,11 @@
   + * Copied to dropbutton.
   

   Maybe we could add more detail to here. Something like: These styles have been duplicated to dropbutton.css since the component inherits some of the design elements. Whenever making changes to this file, remember to check if that needs to be applied to dropbutton.css as well.

3. +++ b/css/src/components/dropbutton.css
   @@ -0,0 +1,374 @@
   +  margin-left: calc(var(--size-dropbutton-toggle) + var(--size-dropbutton-toggle-spacing)); /* LTR */
   ...
   +  margin-left: calc(var(--size-dropbutton-toggle--small) + var(--size-dropbutton-toggle-spacing)); /* LTR */
   ...
   +  margin-left: calc(var(--size-dropbutton-toggle--extrasmall) + var(--size-dropbutton-toggle-spacing)); /* LTR */
   

   We should remove the LTR comment from these lines.

4. +++ b/css/src/components/dropbutton.css
   @@ -0,0 +1,374 @@
   +  border: var(--size-dropbutton-border) solid transparent !important;
   ...
   +  border: var(--size-dropbutton-border) solid transparent !important;
   ...
   +  border: var(--size-dropbutton-border) solid transparent !important;
   ...
   +    border-color: transparent !important;
   ...
   +  border-color: var(--color-focus) !important;
   

   Could we copy the comment from button component to explain why we have to use !important here?

5. +++ b/css/src/theme/views_ui.admin.theme.css
   @@ -0,0 +1,809 @@
   + * Replaces the inherited theme provided by Stable.
   

   s/inherited theme/inherited styles

6. +++ b/js/claro.theme.es6.js
   @@ -12,4 +12,23 @@
   +   * Overrides the dropbutton toggle.
   

   s/Overrides the dropbutton toggle./Overrides the dropbutton toggle markup.

7. +++ b/js/claro.theme.es6.js
   @@ -12,4 +12,23 @@
   +   * We have to keep the 'dropbutton-toggle' CSS class because the dropbutton JS
   +   * operates with that one.
   

   👍

Sorry.

I re-rolled the original patch and fixed everything of #50.

Looks all good! Thank you everyone for your help on this one, this is a huge step forward 🚀

Very proud about this. Thank you!