-
Notifications
You must be signed in to change notification settings - Fork 1.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[CL-221] Add chip-select component #9021
Merged
Merged
Changes from all commits
Commits
Show all changes
26 commits
Select commit
Hold shift + click to select a range
11a60c8
testing icon sizes
vleague2 f7514ec
rename, add menu, update styling
vleague2 e66e0b7
rename class
willmartian d2b59a2
renamed template file
willmartian 864d1e7
fix templateUrl
willmartian 41a59da
wip
willmartian cac7624
add truncation and close icon
willmartian e6d3f2c
wip; implement form value accessor
willmartian 86cae84
add slots and truncation to bitMenuItem
willmartian 8aced14
add disabled button styles to bitMenuItem
willmartian b5673a8
wip
willmartian e71e260
update docs
willmartian c6c1f3a
add play function to stories
willmartian a64a634
add i18n
willmartian bdd7d06
resolve merge conflicts
willmartian 00c17f0
update comments
willmartian d6a231c
add disabled styles; show selected value option upon opening menu
willmartian bf63dbc
update i18n; use getters for placeholder content
willmartian 4e03672
fix label bug in prev commit
willmartian 32e83b0
fix: update rendered options after value change
willmartian 948ba12
style fixes
willmartian 143dc84
add focus ring
willmartian 2977cd5
update font-size in menu
willmartian 14edafb
init root tree in options setter
willmartian 05beb78
use parent map instead of in-tree reference
willmartian 4bd0d15
remove max width from menu; add to chip-select menu only
willmartian File filter
Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
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
91 changes: 91 additions & 0 deletions
91
libs/components/src/chip-select/chip-select.component.html
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,91 @@ | ||
<div | ||
bitTypography="body2" | ||
class="tw-inline-flex tw-items-center tw-rounded-full tw-max-w-52 tw-border-solid tw-border tw-border-text-muted" | ||
[ngClass]="[ | ||
selectedOption | ||
? 'tw-bg-text-muted tw-text-contrast tw-gap-1' | ||
: 'tw-bg-transparent tw-text-muted tw-gap-1.5', | ||
focusVisibleWithin() ? 'tw-ring-2 tw-ring-primary-500 tw-ring-offset-1' : '' | ||
]" | ||
> | ||
<!-- Primary button --> | ||
<button | ||
type="button" | ||
class="fvw-target tw-inline-flex tw-gap-1.5 tw-items-center tw-bg-transparent hover:tw-bg-transparent tw-border-none tw-outline-none tw-max-w-full tw-py-1 tw-pl-3 last:tw-pr-3 tw-truncate tw-text-[inherit]" | ||
[ngClass]="{ | ||
'tw-cursor-not-allowed': disabled | ||
}" | ||
[bitMenuTriggerFor]="menu" | ||
[disabled]="disabled" | ||
[title]="label" | ||
#menuTrigger="menuTrigger" | ||
> | ||
<i class="bwi !tw-text-[inherit]" [ngClass]="icon"></i> | ||
<span class="tw-truncate">{{ label }}</span> | ||
<i | ||
*ngIf="!selectedOption" | ||
class="bwi" | ||
[ngClass]="menuTrigger.isOpen ? 'bwi-angle-up' : 'bwi-angle-down'" | ||
></i> | ||
</button> | ||
|
||
<!-- Close button --> | ||
<button | ||
*ngIf="selectedOption" | ||
type="button" | ||
[attr.aria-label]="'removeItem' | i18n: label" | ||
[disabled]="disabled" | ||
class="tw-bg-transparent hover:tw-bg-transparent tw-outline-none tw-rounded-full tw-p-1 tw-my-1 tw-mr-1 tw-text-[inherit] tw-border-solid tw-border tw-border-text-muted hover:tw-border-text-contrast hover:disabled:tw-border-transparent tw-aspect-square tw-flex tw-items-center tw-justify-center tw-h-fit focus-visible:tw-ring-2 tw-ring-text-contrast focus-visible:hover:tw-border-transparent" | ||
[ngClass]="{ | ||
'tw-cursor-not-allowed': disabled | ||
}" | ||
(click)="clear()" | ||
> | ||
<i class="bwi bwi-close tw-text-xs"></i> | ||
</button> | ||
</div> | ||
|
||
<bit-menu #menu> | ||
<div *ngIf="renderedOptions" class="tw-max-h-80 tw-min-w-52 tw-max-w-80 tw-text-sm"> | ||
<ng-container *ngIf="getParent(renderedOptions) as parent"> | ||
<button | ||
type="button" | ||
bitMenuItem | ||
(click)="viewOption(parent, $event)" | ||
[title]="parent.label ? ('backTo' | i18n: parent.label) : ('back' | i18n)" | ||
> | ||
<i slot="start" class="bwi bwi-angle-left" aria-hidden="true"></i> | ||
{{ parent.label ? ("backTo" | i18n: parent.label) : ("back" | i18n) }} | ||
</button> | ||
|
||
<button | ||
type="button" | ||
bitMenuItem | ||
(click)="selectOption(renderedOptions, $event)" | ||
[title]="'viewItemsIn' | i18n: renderedOptions.label" | ||
> | ||
<i slot="start" class="bwi bwi-list" aria-hidden="true"></i> | ||
{{ "viewItemsIn" | i18n: renderedOptions.label }} | ||
</button> | ||
</ng-container> | ||
|
||
<button | ||
type="button" | ||
bitMenuItem | ||
*ngFor="let option of renderedOptions.children" | ||
(click)="option.children?.length ? viewOption(option, $event) : selectOption(option, $event)" | ||
[disabled]="option.disabled" | ||
[title]="option.label" | ||
> | ||
<i | ||
*ngIf="option.icon" | ||
slot="start" | ||
class="bwi" | ||
[ngClass]="option.icon" | ||
aria-hidden="true" | ||
></i> | ||
{{ option.label }} | ||
vleague2 marked this conversation as resolved.
Show resolved
Hide resolved
|
||
<i *ngIf="option.children?.length" slot="end" class="bwi bwi-angle-right"></i> | ||
</button> | ||
</div> | ||
</bit-menu> |
Oops, something went wrong.
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.
The focus ring is kind of oblong?
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.
Huh, I am not seeing that in FF, but I am on Chrome. Will solve that in the follow up PR for CL-291.
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.
That screenshot is from Chrome 😭