UI: Add button to fail running deployments

[backspace]

As suggested in #9826. As a GIF from the preview deployment:

This necessitated some customisation options for TwoStepButton. One is inlineText, which puts the confirmation text in the same line as the buttons. Also, there was a single-use configuration option named isInfoAction that I removed in favour of passing a set of class configuration options like this:

                @classes={{hash
                  idleButton="is-warning"
                  confirmationMessage="inherit-color"
                  cancelButton="is-danger is-important"
                  confirmButton="is-warning"}}

This seemed preferable to me to adding another opaquely-named flag that bundles together a set of class overrides for each part of the button, but I’m open to other approaches!

The new two-step-button stories are here and here in the preview deployment.

[github-actions]

Ember Asset Size action

As of 13ab142

Files that got Bigger 🚨:

File	raw	gzip
nomad-ui.js	+1.58 kB	+330 B
nomad-ui.css	+224 B	-7 B

Files that stayed the same size 🤷‍:

File	raw	gzip
vendor.js	0 B	0 B
vendor.css	0 B	0 B

[github-actions]

Ember Test Audit comparison

	master	13ab142	change
passes	1551	1553	+2
failures	0	2	+2
flaky	0	0	0
duration	8m 25s 196ms	000ms	-8m 25s 196ms

[DingoEatingFuzz]

This is a welcome addition. I have a couple thoughts, dunno how blocking they are, but I think they're at least worth talking through.

1. The padding-bottom specific value seems brittle. Ideally we can achieve the baseline matching in a way that still works if we change the button styles or button size.
2. Changing to the classes hash (which is a neat implementation, btw) really opens up the surface area of the component's API. I'm not saying it's wrong, but it gave me pause.

[DingoEatingFuzz]

Hmm, is this to match baselines? I wonder if there's a way to do with either line-height or vertical-align that won't require such a specific value.

[backspace]

yeah, that was admittedly ridiculous 😳 I couldn’t get those to work but what do you think about this?

  &.has-inline-text {
    display: inline-flex;
    align-items: center;

    button {
      margin-left: 0.3rem;
    }

    .confirmation-text {
      position: static;
      margin-right: 0.2rem;
    }
  }

I’ve learned while looking at this that the spaces between the button are true spaces, not CSS spaces, but with flexbox I added the 0.3rem margins to bring back the space 🧐

[DingoEatingFuzz]

I dig it! There is also the hip new ch unit that is based on character width that may be worth experimenting with. With a variable width font I don't think this is as simple as 1ch, you'd probably still need some fraction. And at that point maybe it doesn't even matter... I dunno.

[backspace]

agreed that @classes is a significant expansion of the interface; my approach was driven by the way isInfoAction was handled:

I was reluctant to add another set of conditionals in each of those classes, but they could be extracted to computed properties instead. It seemed nice to me to be able to use TwoStepButton and style its components independently without having to change anything inside the component itself.

[DingoEatingFuzz]

Reading through the @classes approach, I'm more comfortable with it this time. I think your summary of it being styling the individual pieces without having to fuss with structure sold me on it.

My root concern was opening up the API to the point where we aren't really providing a constraint in the way a style guide/design system should. But since the structure and components are fixed and only the individual modifiers are consumer-editable I think this is good 👍

[backspace]

Thanks for the rereview! 💞

I changed to ch 😆

I encountered this test failure but it’s surely unrelated and it disappeared when I reran, so I’ll look at it separately.

[github-actions]

I'm going to lock this pull request because it has been closed for 120 days ⏳. This helps our maintainers find and focus on the active contributions.
If you have found a problem that seems related to this change, please open a new issue and complete the issue template so we can capture all the details necessary to investigate further.