feat(#5): Add Button component #11
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| ```hbs template | ||
| <Button @onClick={{this.onClick}} @variant='secondary'>Button</Button> | ||
|
There was a problem hiding this comment. This Button instance actually has a collision with the Button component from The eventual goal is to:
A bit of a 🐔 and 🥚 problem |
||
| ``` | ||
|
|
||
| ```js component | ||
| import Component from '@glimmer/component'; | ||
| import { action } from '@ember/object'; | ||
|
|
||
| export default class extends Component { | ||
| @action | ||
| onClick(e) { | ||
| alert('Button clicked!'); | ||
| } | ||
| } | ||
| ``` | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,152 @@ | ||
| # Button | ||
|
|
||
| Buttons are clickable elements used primarily for actions. Button content expresses what action will occur when the user interacts with it. | ||
|
There was a problem hiding this comment. I am not a writer, so appreciate any feedback in this entire document. I did my best tho There was a problem hiding this comment. Unlike our internal docs, which focus on all disciplines at once, these "core" docs, are primarily focused on developers. |
||
|
|
||
| ## Variants | ||
|
|
||
| You can customize the appearance of the button with the `@variant` component argument. | ||
|
|
||
| <div class="flex gap-x-4"> | ||
| <Button @variant="primary">Primary</Button> | ||
| <Button @variant="secondary">Secondary</Button> | ||
| <Button @variant="destructive">Destructive</Button> | ||
| <Button @variant="link">Link</Button> | ||
| <Button @variant="quiet">Quiet</Button> | ||
| <Button @variant="bare">Bare</Button> | ||
| </div> | ||
|
|
||
| ## Handling Clicks | ||
|
|
||
| To handle click events use the `@onClick` component argument. | ||
|
|
||
| ```hbs | ||
| <Button @onClick={{this.handleClick}}>Click Me</Button> | ||
| ``` | ||
|
|
||
| ## Disabled State | ||
|
|
||
| `aria-disabled` is used over the `disabled` attribute so that screenreaders can still focus the element. To set the button as disabled, use `@isDisabled`. | ||
|
|
||
| ```hbs | ||
| <Button @isDisabled={{true}}>Disabled</Button> | ||
| ``` | ||
|
|
||
| A disabled named block is provided so that users can optionally render additional content when the button is disabled. | ||
|
|
||
| ```hbs | ||
| <Button @isDisabled={{true}}> | ||
| <:disabled> | ||
| <svg | ||
|
There was a problem hiding this comment. The icon I used in this example is from an MIT-licensed open source library I built. We can replace it at any time, as we see fit. |
||
| class='h-4 w-4' | ||
| xmlns='http://www.w3.org/2000/svg' | ||
| width='24' | ||
| height='24' | ||
| stroke='currentColor' | ||
| viewBox='0 0 24 24' | ||
| > | ||
| <path | ||
| d='M18.644 21h-13.2a.945.945 0 01-1-1v-7.2a.945.945 0 011-1h13.1a.945.945 0 011 1V20a.808.808 0 01-.225.725.966.966 0 01-.675.275zm-10.9-9.2V7.3a4.3 4.3 0 118.6 0v4.5m-4.3 3.7v2' | ||
| fill='none' | ||
| stroke-linecap='round' | ||
| stroke-linejoin='round' | ||
| stroke-width='2' | ||
| /> | ||
| </svg> | ||
| </:disabled> | ||
| <:default> | ||
| Disabled | ||
| </:default> | ||
| </Button> | ||
| ``` | ||
|
|
||
| <div class="flex gap-x-4"> | ||
| {{#each (array "primary" "secondary" "destructive" "link" "quiet" "bare") as |variant|}} | ||
| <Button @variant={{variant}} @isDisabled={{true}}> | ||
| <:disabled> | ||
| <svg | ||
| class='h-4 w-4' | ||
| xmlns='http://www.w3.org/2000/svg' | ||
| width='24' | ||
| height='24' | ||
| stroke='currentColor' | ||
| viewBox='0 0 24 24' | ||
| > | ||
| <path | ||
| d="M18.644 21h-13.2a.945.945 0 01-1-1v-7.2a.945.945 0 011-1h13.1a.945.945 0 011 1V20a.808.808 0 01-.225.725.966.966 0 01-.675.275zm-10.9-9.2V7.3a4.3 4.3 0 118.6 0v4.5m-4.3 3.7v2" | ||
| fill='none' | ||
| stroke-linecap='round' | ||
| stroke-linejoin='round' | ||
| stroke-width='2' | ||
| /> | ||
| </svg> | ||
| </:disabled> | ||
| <:default> | ||
| {{variant}} | ||
| </:default> | ||
| </Button> | ||
| {{/each}} | ||
| </div> | ||
|
|
||
| ## Loading State | ||
|
|
||
| Button exposes an `@isLoading` component argument. The button content will be only visible to screenreaders. | ||
|
|
||
| ```hbs | ||
| <Button @isLoading={{true}}>Loading…</Button> | ||
| ``` | ||
|
|
||
| A loading named block is also provided for providing custom loading content. | ||
|
|
||
| ```hbs | ||
| <Button @isLoading={{true}}> | ||
| <:loading> | ||
| <svg | ||
|
There was a problem hiding this comment. Same comment as above in regards to icons here |
||
| class='h-4 w-4 animate-spin' | ||
| xmlns='http://www.w3.org/2000/svg' | ||
| width='24' | ||
| height='24' | ||
| stroke='currentColor' | ||
| viewBox='0 0 24 24' | ||
| > | ||
| <path | ||
| d='M5.95 5.7L7 6.75 8.05 7.8m8.4 8.4l.95.95.95.95m.2-12.4L17.5 6.75 16.45 7.8M6.35 12h-3.1m17.5 0h-2.6m-5.9 9v-3.1m0-14.9v3.1' | ||
| fill='none' | ||
| stroke-linecap='round' | ||
| stroke-linejoin='round' | ||
| stroke-width='2' | ||
| /> | ||
| </svg> | ||
| </:loading> | ||
| <:default> | ||
| Loading… | ||
| </:default> | ||
| </Button> | ||
| ``` | ||
|
|
||
| <div class="flex gap-x-4"> | ||
| {{#each (array "primary" "secondary" "destructive" "link" "quiet" "bare") as |variant|}} | ||
| <Button @variant={{variant}} @isLoading={{true}}> | ||
| <:loading> | ||
| <svg | ||
| class='h-4 w-4 animate-spin' | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| width="24" | ||
| height="24" | ||
| stroke="currentColor" | ||
| viewBox="0 0 24 24" | ||
| > | ||
| <path | ||
| d="M5.95 5.7L7 6.75 8.05 7.8m8.4 8.4l.95.95.95.95m.2-12.4L17.5 6.75 16.45 7.8M6.35 12h-3.1m17.5 0h-2.6m-5.9 9v-3.1m0-14.9v3.1" | ||
| fill="none" | ||
| stroke-linecap="round" | ||
| stroke-linejoin="round" | ||
| stroke-width="2" | ||
| /> | ||
| </svg> | ||
| </:loading> | ||
| <:default> | ||
| {{variant}} | ||
| </:default> | ||
| </Button> | ||
| {{/each}} | ||
| </div> | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| <button | ||
| aria-disabled={{if @isDisabled "true"}} | ||
| class={{this.styles}} | ||
| type="button" | ||
| {{on "click" this.onClick}} | ||
| ...attributes | ||
| > | ||
| {{#if @isLoading}} | ||
| {{yield to="loading"}} | ||
| <span class="sr-only" data-loading>{{yield}}</span> | ||
| {{else if @isDisabled}} | ||
| <span class="flex items-center gap-x-2"> | ||
| {{yield}} | ||
| {{yield to="disabled"}} | ||
| </span> | ||
| {{else}} | ||
| {{yield}} | ||
| {{/if}} | ||
| </button> |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I haven't really dived deep into the more special CI setup you and @NullVoxPopuli have in use for GH repos here (forms is still on blueprint defaults), so leaving the final assessment to you guys. But it seems to me if the intend was to do less by reusing build artefacts across jobs, then we loose much (all?) of this benefit when forcing to install all dependencies again, don't we?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good point. Some background:
I was talking to @NullVoxPopuli about this yesterday as I was hitting an issue where the lint step (which runs
glint) was failing for thetest-app. We essentially need the dist directory to be able to successfully run lint, or else we get type errors when running glint. Here's an example: https://github.com/CrowdStrike/ember-toucan-core/actions/runs/4009103591Talking to @NullVoxPopuli , the reason we need to re-install dependencies is due to pnpm. We need to re-run
pnpm ito re-sync the injected links. We do the same thing over inember-headless-table(https://github.com/CrowdStrike/ember-headless-table/blob/f08ff968d862d2267a3b2f6269116806549d51b0/.github/actions/download-built-package/action.yml#L11).I do agree with you though, that this feels like we add additional time to each step using this action by forcing dependencies to re-install. Maybe there's an optimization we can make in the future though? I'm also completely new to
pnpm, so I don't have much context other than these convos! 🙇There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Oh, I see. I guess this is this inject thing that Preston told me also about...
Yeah, ok. Unfortunate, but hopefully this will be sorted out in the future somehow...
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yeah, hoping we can work out a plan of attack with @zkochan (pnpm owner) with making injected auto-sync.
My current best idea is to analyze package.json#files/exports for folders, and symlink those, so that files automatically sync, and we don't need the extra
pnpm i.Related: