Action link component

Attached the separated patch from #3021087: Buttons#82

Added patch with realisation of `action-link` component.
Added also "delete" variation of `action-link` component.

So default markup and screen:
<a href="/" class="action-link">Test link</a>

Delete variation markup and screen:
<a href="/" class="action-link action-link--delete">Delete</a>

Also this component linked to node/#/edit delete link

Split up .action-link--delete(color) and .action-link--trash(icon).
When both classes are applied on the Action Link, change the color of the trash icon to red.

Forgot to change .action-link--delete to .action-link--danger.
Done in this patch.

I reviewed this and the patch provided in #8 looks really good already.

I found two trifles:

1. 
   The current delete link looks a bit smaller because of the missing box shadow, that's not even bad but I want to mention it here.

2. +[dir="rtl"] .action-links {
   +  /* This is required to win over specificity of [dir="rtl"] ul */
   +  margin-right: 0;
   +}
   

   This comment can be moved before/outside the selector.

Fixed #9.2, and besides that:

What happened:

1. action-link--trash changed to action-link--icon-trash.
2. New action link icons are added for covering the ones on the Appearance page (unblocks #3023319: Card Style Update).
3. Every possible combination of the implemented modifiers should be covered.
4. I've defined a custom helper callback for transforming ['#type' => 'link'] renderable arrays to action-links: _claro_convert_link_to_action_link((). That's where most of the magic happens.

Some background: previously, @lauriii, @ckrina and I agreed that we need to implement the variation with the trash icon and the variations that are (or will be) used on the Appearance form page.

Think that are still missing:

1. Cross-browser testing.
2. Screenshots.

Think that are a bit weird:

1. It seems to me that the action links on the appearance page are a bit smaller than the 'Delete' link on the node edit page. Is this really true?
2. Re #9.1: yes, this is really weird, I agree with you.
   Actually, these action-links are now a separately-themed buttons with a white background and with an icon:
   • The link text does not have underline.
   • They have a notable padding (that becomes visible if you interact with them or when they are placed on a dark(er) background)

I'm setting this to Needs review only for testing this patch.

For anyone interested in working on this, it seems like interdiff and actual patch are mixed in #11.

Re #13: Actually I completely missed adding the main part of the action link component modifications.

Here is the updated patch with high contrast related improvements, so the only remaining task is generating the screenshots.

1. 
   I think we should remove the icon from the default variation and make it it's own variation instead.

2. +++ b/claro.theme
   @@ -400,6 +402,106 @@ function claro_preprocess_details(&$variables) {
   +function _claro_convert_link_to_action_link(array &$link, $icon_name = NULL, $variant = 'default') {
   

   Any thoughts on returning a new link instead of editing a referenced link? It seems better for readability and more versatile.

3. +++ b/claro.theme
   --- a/css/src/components/action-links.css
   +++ b/css/src/components/action-links.css
   

   Should we rename this to action-link.css to be more consistent?

Addressing #16.

1. +++ b/claro.theme
   @@ -400,6 +402,108 @@ function claro_preprocess_details(&$variables) {
   +    _claro_convert_link_to_action_link($form['actions']['delete'], 'trash', 'danger');
   ...
   +            _claro_convert_link_to_action_link($links_item['link'], 'cog');
   ...
   +            _claro_convert_link_to_action_link($links_item['link'], 'ex');
   ...
   +            _claro_convert_link_to_action_link($links_item['link'], 'checkmark');
   

   We have to replace the original link with the action link now that we are not changing it as a reference.

2. +++ b/css/src/components/action-link.css
   @@ -0,0 +1,238 @@
   +  padding: var(--space-m);
   

   According to the design system, the left padding should be 0.75rem.

3. +++ b/css/src/components/action-link.css
   @@ -0,0 +1,238 @@
   +  -webkit-font-smoothing: antialiased;  /* 3 */
   

   What is this comment referencing to?

4. +++ b/css/src/components/action-link.css
   @@ -0,0 +1,238 @@
   +/* Plus - default */
   

   We should remove default from the comment.

5. +++ b/css/src/layout/action-links.css
   @@ -0,0 +1,43 @@
   + * Layout styles for local actions.
   

   👍

#19.2 is still not solved by #20.

Re #21: You're wrong. It is resolved.

Sorry, that was my mistake. I looked at the patch too quickly and didn't notice the change.

1. +++ b/css/src/components/action-link.css
   @@ -0,0 +1,256 @@
   +    background-image: url("...") !important;
   ...
   +    background-image: url("...") !important;
   ...
   +    background-image: url("...") !important;
   ...
   +    background-image: url("...") !important;
   ...
   +    background-image: url("...") !important;
   

   Any thoughts on using filter instead of replacing the background image? I used this approach on #3023301: Messages style update. This allows us to get rid of the !important and allows us to have one less variation of the icons.

2. 
   The margins should be still update to match with the design system.

Patch #20 gives wrong padding on .action-link (like mentioned in #19.2)

On the screenshot I focused the button elements so you could see the wrong padding.

The padding on action-link class should be the same as the button class. Which now is
calc(1rem - 1px) calc(1.5rem - 1px)

I've changed this

Adding the missing interdiff between #20 and #25.

This patch fixes #24.2 and #25.

Re #24:

1. I don't want to say that this is not possible, but due to the fact that CSS3 filters represent relative effects, I was unable to find a filter combination that works for dark AND high contrast mode as well. Since Windows 10 provides not only dark and bright high contrast mode, I'd keep this background replacement.
2. Thanks for pointing this! I think that also the spacing between form-action buttons has changed in the past, so I've fixed those spacing as well.

Re #25:

1. 👍 Thanks for this! Height was streched because the pseuso element that holds the icon was higher than the ascender height of the font:

   The pseudo has 1rem height while the font's (ascender height + the descender height) was 1rem. I increased the line-height of action-links and decreased their vertical padding.

+++ b/css/src/components/button.css
@@ -42,10 +43,10 @@
+  margin: var(--space-m) var(--space-xs) var(--space-m) 0; /* LTR */
...
+  margin: var(--space-m) 0 var(--space-m) var(--space-xs);

According to the design system, the margin between buttons should be 12px, but the margin between a button and action link should be 8px 🤠

Here's screenshots of the spec:

This patch applies the most recent design changes for action-links and buttons.

Srceenshots attached.

1. +++ b/css/src/components/action-link.css
   @@ -0,0 +1,276 @@
   +  .action-link--icon-plus::before {
   ...
   +  .action-link--icon-trash::before {
   ...
   +  .action-link--icon-ex::before {
   ...
   +  .action-link--icon-checkmark::before {
   ...
   +  .action-link--icon-cog::before {
   

   Instead of using !important, maybe we should use the duplicate selector trick to increase the weight of this selector.

2. +++ b/css/src/components/button.css
   @@ -75,6 +76,17 @@
   +/**
   + * Buttons inside form-actions.
   + */
   +.form-actions .button {
   +  margin-right: var(--space-s);
   +}
   +[dir="rtl"] .form-actions .button {
   +  margin-right: 0;
   +  margin-left: var(--space-s);
   +}
   +
   

   I can't find where it is mentioned that this is specific to form actions.

3. +++ b/claro.theme
   @@ -400,6 +402,117 @@ function claro_preprocess_details(&$variables) {
   + * @param string|null $icon_name
   + *   The name of the icon.
   ...
   +function _claro_convert_link_to_action_link(array $link, $icon_name = NULL, $variant = NULL, $small = FALSE) {
   

   Should we document which icons are available or where to find a list of available icons?

4. +++ b/claro.theme
   @@ -400,6 +402,117 @@ function claro_preprocess_details(&$variables) {
   +    $link['#attributes'] = NestedArray::mergeDeep(
   +      $link['#attributes'],
   +      $link['#options']['attributes']);
   +  }
   

   It doesn't seem like Drupal\Core\Render\Element\Link::preRenderLink is using the deep merge. I'm wondering if this difference could lead to unwanted changes in behavior 🤔

5. +++ b/claro.theme
   @@ -400,6 +402,117 @@ function claro_preprocess_details(&$variables) {
   +  // to the attributes of  the Url object.
   

   Nit: there's double space between of and URL.

6. +++ b/claro.theme
   @@ -400,6 +402,117 @@ function claro_preprocess_details(&$variables) {
   +  // Make entity form's delete link use the action-link component.
   

   Nit: s/form's/forms

This addresses everything from #38 hopefully.

1. +++ b/claro.theme
   @@ -449,65 +449,101 @@ function claro_preprocess_links(&$variables) {
   +  if ($variant = $variant === NULL && !empty($link['#options']['attributes']['class']) && in_array('button--danger', $link['#options']['attributes']['class'])) {
   +    $variant = 'danger';
   +  }
   ...
   +  if ($small === NULL && !empty($link['#options']['attributes']['class']) && in_array('button--small', $link['#options']['attributes']['class'])) {
   +    $small = TRUE;
      }
   

   This seems a bit overkill to me. I'd just keep the $variant parameter and let that define the variation. Or do we have a specific use case in mind where it couldn't be used?

2. +++ b/css/src/components/action-link.css
   @@ -154,8 +154,9 @@
   +  .action-link.action-link--icon-plus::before,
   +  .action-link.action-link--icon-plus.action-link--danger::before {
   
   @@ -183,7 +184,8 @@
   +  .action-link.action-link--icon-trash::before,
   +  .action-link.action-link--icon-trash.action-link--danger::before {
   
   @@ -212,7 +214,8 @@
   +  .action-link.action-link--icon-ex::before,
   +  .action-link.action-link--icon-ex.action-link--danger::before {
   
   @@ -241,7 +244,8 @@
   +  .action-link.action-link--icon-checkmark::before,
   +  .action-link.action-link--icon-checkmark.action-link--danger::before {
   

   This is fine, but it might be clearer to just duplicate the same class name because it makes it obvious that it's used for increasing the weight, not to increase the specificity.

Addressing #41.

Looks great! Good job everyone! 👏

Saving issue credits