UI - new Icon and Chevron components #6707
Conversation
| align-self: center; | ||
| border-radius: 3rem; | ||
| background: linear-gradient(135deg, $blue, $purple); | ||
| animation: env-banner-color-rotate 8s infinite linear alternate; |
There was a problem hiding this comment.
aww yesss, very excited about this 🌈
| @@ -1,5 +1,5 @@ | |||
| {{! template-lint-disable no-triple-curlies}} | |||
| <div class="console-ui-alert has-text-danger"> | |||
| {{i-con glyph="close-circled" aria-hidden="true" size=12}} | |||
| <Icon @glyph="cancel-circle-fill" aria-hidden="true" /> | |||
| <pre>{{{content}}}</pre> | |||
There was a problem hiding this comment.
are the triple curlies necessary here still?
There was a problem hiding this comment.
Yeah, since this is possibly inserting HTML, we don't want to escape at the template layer. I think the only time this is really used is in the control group flow - if you hit a Control Group, we log the token and a link to the lookup page right in the console.
| isButton: false, | ||
| glyph: computed('direction', function() { | ||
| let { direction } = this; | ||
| assert( |
There was a problem hiding this comment.
woah, i didn't know you could use assert to throw exceptions from outside of a test. very cool!
There was a problem hiding this comment.
Yeah it's a lot like invariant in React land. We don't use it a ton, but they get stripped in prod builds so it's handy. There's some other levels too: https://api.emberjs.com/ember/release/modules/@ember%2Fdebug
| @@ -0,0 +1,3 @@ | |||
| <span class="hs-icon {{class}}" ...attributes> | |||
There was a problem hiding this comment.
what does hs stand for? hashicorp structure? 😛
There was a problem hiding this comment.
Yep! Perhaps a bit ambitious, but it works for a "namespaced" CSS class - maybe we should go with vlt- 🤔
There was a problem hiding this comment.
vlt- is a little more clear to me, but 🤷♀
| // Set any properties with this.set('myProperty', 'value'); | ||
| // Handle any actions with this.set('myAction', function(val) { ... }); | ||
|
|
||
| await render(hbs`{{ic-on}}`); |
There was a problem hiding this comment.
where is ic-on coming from? I haven't seen it called this anywhere.
There was a problem hiding this comment.
Whoops, ember generators still don't like single-word components, so this was the generated test for icon.js - I'll update all of this before finalizing the PR!
|
|
||
| await render(hbs`{{ic-on}}`); | ||
|
|
||
| assert.equal(this.element.textContent.trim(), ''); |
There was a problem hiding this comment.
should we also be asserting that the correct classes are applied and aria-hidden is set correctly?
|
This looks great! Super excited about it. bonus points for all those deletions! |
…cation-summary component
|
OK, sorry for the rebase / force-push, I know that can sometimes lead to weirdness with tracking comments, etc. I rebased the parent branch first, and had to move a few things around to get tests back to 🍏 - that PR is here: #6712. After that, I rebased this PR on |
|
Gonna merge and then PR to master! 🎉 |
This is a follow-up to #6629.
This PR implements a new
Iconcomponent and a variant of theIconcomponent:Chevron. The new icons useember-svg-jarto inline SVG files from a set of configured paths. This add-on also gives us a handy ember app that lets us browse all of the discovered SVGs while the development server is running - to see it, run the ember dev server as usual (yarn startfrom theuidir) and then navigate to http://localhost:4200/ui/ember-svg-jar/index.html . The new Icon also sources most of the SVGs from HashiCorp's design system, Structure - https://www.npmjs.com/package/@hashicorp/structure-icons .These replace the usage of the old
i-con/IConcomponent. The old component's implementation relied on using partials to inline the SVGs, which will be deprecated in a future ember release and don't play well with ember-engines. Any SVGs used, but not provided by Structure were renamed to .svg and moved to thepublic/folder. The images used for the various types of mounts were moved topublic/eco/- they were previously in/templates/svg/enable/. The rest of the partials in/templates/svg/were removed.TODO - this before merging this branch
Following this, I think it makes sense to get this feature branch merged to master, and make progress on the auth/engines settings engine after that (that is the last check item on #6629 's TODO list).