mirror of
https://github.com/bitwarden/browser
synced 2025-12-16 08:13:42 +00:00
[CL-265] CL/extension refresh feature branch (#8696)
* [CL-245] Update palette to new light and dark theme colors (#8633) * [CL-245] Add new color swatches to storybook (#8697) * [CL-238] update typography (#8997) * [CL-230] [CL-296] Update button styles (#9345) * [CL-237] Update menu styles for extension refresh (#9525) * [CL-267] Add 100-level color variants and update primary-600 (#9550) * [CL-286] Update badge to use focus-visible instead of focus (#9551) * [CL-250] Update badge styles for extension refresh (#9572) * [CL-234] callout style refresh (#9920) * [CL-233] Update form field styles (#9776) * [CL-239][CL-251][CL-342] dialog style refresh (#10096) * [CL-239] simple dialog style refresh * [CL-342] fix text overflow in dialog; add story * [CL-244] readonly fields (#10164) * [CL-352] Fix Angular errors related to form element changes (#10211) * [CL-273] Update styles for checkbox and form control (#10146) * [CL-274] Update styling for radio button (#10333) * [CL-338] Remove extra space in item content when end slot is empty (#10350) * [CL-377] Fix extension style conflict for input background (#10351) * [CL-271] Update styles for toggle (#10377) * [CL-381] Update spacing around form elements (#10432) * [CL-229] Update icon button styles (#10405) * [CL-380] Remove hover state from disabled form fields (#10639) * [CL-405] Allow toggle group input to be full width (#10658) * [CL-389] Exclude end slot label content from truncation (#10508) * [CL-383] Remove manual focus when password toggle is clicked (#10749) * [CL-278][CL-391] misc bit-item style fixes (#10758) * [CL-391] use pointer cursor on hover when link or button * [CL-210] Change base font size from 14px to 16px (#10779) * [CL-291] Finalize styling for chip select (#10771) * [CL-257] update banner component styles (#10766) * [CL-443] Fix sizing issues (#10893) * [CL-445] Fix small sizing and spacing issues (#10962) * [CL-382] Reduce element shifting on readonly hover (#10956) * [CL-396] Update theme colors to new hexes (#10968) * [CL-395] Remove text headers color (#10997) * [CL-404] Switch to primary-600 for all focus indicators (#11015) * [CL-397] Remove primary-500 (#11036) * [CL-447] Ensure DM Sans displays correctly at all font weights (#11041) * [CL-448] Scrollbar Styles (#11111) * CL-252/update toast (#10996) * [CL-275] Update link styles (#11174) * [CL-446] Update hover state for unselected chip selects (#11172) * [CL-454] Improve color a11y for toast and banner interactive elements (#11200) * [CL-457] Center input text for select and multiselect (#11239) * [CL-455] Do not use responsive margin for sections in dialogs or extension (#11243) * [CL-459] Fix chip behavior when opening menu while item is selected (#11227) * [CL-388] Update vertical nav colors for new palette (#11226) * scope styled scrollbar to only select elements (#11247) * edit radio buttons to be block inputs and update spacing (#11291) * [CL-453] Fix multiselect chip spacing and truncation (#11300) * [PM-11131] Prevent duplicated sr labels on form field icon buttons (#11383) * [CL-303] Prevent chip menu from running offscreen (#11348) * [CL-476] Fix DM Sans font on Windows (#11409) * implements scrollbar styles for firefox/chrome and safari (#11447) * [CL-472] Fix search background color in extension (#11466) * [CL-481] Style updates for bit-item, bit-card, and primary-100 (#11473) * [CL-478] Remove underline on hover for most components (#11477) * [CL-477] Remove focus styles for readonly input (#11510) * [CL-487] Fix vault items virtual scroll height (#11581) * [PM-8625] Increase popup width (#11686) * [CL-494] Wrap long words in toggle group (#11659) * [CL-13820] Add class to remove link underline (#11762) * [CL-435] Prevent Windows extension from shifting (#11851) * [CL-503] Add notification color variables (#11802) * [PM-14043] Update size of toggle group label to fit more content (#11881) * [CL-498] Set chip menu width minimum to chip select width (#11905) --------- Co-authored-by: Will Martin <contact@willmartian.com> Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com> Co-authored-by: Nick Krantz <125900171+nick-livefront@users.noreply.github.com> Co-authored-by: Merissa Weinstein <merissa.k.weinstein@gmail.com> Co-authored-by: Danielle Flinn <43477473+danielleflinn@users.noreply.github.com>
This commit is contained in:
Victoria League
GitHub
@@ -25,7 +25,7 @@ export class ToggleGroupComponent<TValue = unknown> {
|
||||
@HostBinding("attr.role") role = "radiogroup";
|
||||
@HostBinding("class")
|
||||
get classList() {
|
||||
return ["tw-flex"].concat(this.fullWidth ? ["tw-w-full", "[&>*]:tw-grow"] : []);
|
||||
return ["tw-flex"].concat(this.fullWidth ? ["tw-w-full", "[&>*]:tw-flex-1"] : []);
|
||||
}
|
||||
|
||||
onInputInteraction(value: TValue) {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Meta, Story, Primary, Controls } from "@storybook/addon-docs";
|
||||
import { Meta, Story, Primary, Controls, Canvas } from "@storybook/addon-docs";
|
||||
|
||||
import * as stories from "./toggle-group.stories";
|
||||
|
||||
@@ -15,22 +15,36 @@ Toggle groups function as radio buttons and a radio group under the hood.
|
||||
A button in a toggle group can have a badge counter added to show the number of items existing
|
||||
within that filter.
|
||||
|
||||
For focus states, use `focus-visible`.
|
||||
## Default
|
||||
|
||||
<Canvas of={stories.Default} />
|
||||
|
||||
<Primary />
|
||||
<Controls />
|
||||
|
||||
## Accessibility
|
||||
## Full width
|
||||
|
||||
- Follow contrast rules for the main button styles.
|
||||
- Focus:
|
||||
- Implement as a radio group with button styling and a context label (context label can be screen
|
||||
reader only depending on use case).
|
||||
- Since only 1 button can be selected at a time to filter the toggle group acts similarly to a
|
||||
radio group.
|
||||
- When moving focus to a button group, the focus should always move to the selected button. The
|
||||
screen reader should then announce the button group: example “[context label], [button content]
|
||||
selected, of [# of buttons]”), the number of buttons and the currently selected button. The user
|
||||
may navigate the options then via left/right arrow keys.
|
||||
If a toggle group should span the width of its container, pass the `fullWidth` input to the toggle
|
||||
group.
|
||||
|
||||
See WCAG for more: https://www.w3.org/WAI/ARIA/apg/patterns/radio/
|
||||
```
|
||||
<bit-toggle-group fullWidth>
|
||||
...toggle components here...
|
||||
</bit-toggle-group>
|
||||
```
|
||||
|
||||
<Canvas of={stories.FullWidth} />
|
||||
|
||||
## Label wrap
|
||||
|
||||
If the labels in a toggle group would overflow the width of the toggle group container, then the
|
||||
labels will wrap to 2 lines and truncate with an ellipsis past that. The full label text is
|
||||
accessible via the `title` prop (i.e. visible on hover).
|
||||
|
||||
<Canvas of={stories.LabelWrap} />
|
||||
|
||||
# Accessibility
|
||||
|
||||
- Since only 1 button can be selected at a time, the toggle group acts similarly to a radio group.
|
||||
- The user may navigate the options via left/right arrow keys.
|
||||
- The screen reader will announce the button group: example “[context label], [button content]
|
||||
selected, of [# of buttons]”), the number of buttons and the currently selected button.
|
||||
|
||||
@@ -46,3 +46,74 @@ export const Default: Story = {
|
||||
selected: "all",
|
||||
},
|
||||
};
|
||||
|
||||
export const FullWidth: Story = {
|
||||
render: (args) => ({
|
||||
props: args,
|
||||
template: /* HTML */ `
|
||||
<bit-toggle-group
|
||||
[(selected)]="selected"
|
||||
aria-label="People list filter"
|
||||
[fullWidth]="fullWidth"
|
||||
>
|
||||
<bit-toggle value="all"> All <span bitBadge variant="info">3</span> </bit-toggle>
|
||||
|
||||
<bit-toggle value="invited"> Invited </bit-toggle>
|
||||
|
||||
<bit-toggle value="accepted"> Accepted <span bitBadge variant="info">2</span> </bit-toggle>
|
||||
|
||||
<bit-toggle value="deactivated"> Deactivated </bit-toggle>
|
||||
</bit-toggle-group>
|
||||
`,
|
||||
}),
|
||||
args: {
|
||||
selected: "all",
|
||||
fullWidth: true,
|
||||
},
|
||||
};
|
||||
|
||||
export const LabelWrap: Story = {
|
||||
render: (args) => ({
|
||||
props: args,
|
||||
template: /* HTML */ `
|
||||
<code>fullWidth=false</code>
|
||||
<bit-toggle-group
|
||||
[(selected)]="selected"
|
||||
aria-label="People list filter"
|
||||
class="tw-max-w-[500px] tw-overflow-hidden tw-border tw-border-solid tw-border-danger-600 tw-py-3"
|
||||
>
|
||||
<bit-toggle value="all"> All</bit-toggle>
|
||||
|
||||
<bit-toggle value="invited"> Invited to a cool party with cool people </bit-toggle>
|
||||
|
||||
<bit-toggle value="accepted">
|
||||
Accepted the invitation<span bitBadge variant="info">2</span>
|
||||
</bit-toggle>
|
||||
|
||||
<bit-toggle value="deactivated">Deactivatedinvitationswraplabel</bit-toggle>
|
||||
</bit-toggle-group>
|
||||
<br />
|
||||
<code>fullWidth=true</code>
|
||||
<bit-toggle-group
|
||||
[(selected)]="selected"
|
||||
aria-label="People list filter"
|
||||
class="tw-max-w-[500px] tw-overflow-hidden tw-border tw-border-solid tw-border-danger-600 tw-py-3"
|
||||
[fullWidth]="fullWidth"
|
||||
>
|
||||
<bit-toggle value="all"> All</bit-toggle>
|
||||
|
||||
<bit-toggle value="invited"> Invited to a cool party with cool people </bit-toggle>
|
||||
|
||||
<bit-toggle value="accepted">
|
||||
Accepted the invitation<span bitBadge variant="info">2</span>
|
||||
</bit-toggle>
|
||||
|
||||
<bit-toggle value="deactivated">Deactivatedinvitationswraplabel</bit-toggle>
|
||||
</bit-toggle-group>
|
||||
`,
|
||||
}),
|
||||
args: {
|
||||
selected: "all",
|
||||
fullWidth: true,
|
||||
},
|
||||
};
|
||||
|
||||
@@ -6,6 +6,11 @@
|
||||
[checked]="selected"
|
||||
(change)="onInputInteraction()"
|
||||
/>
|
||||
<label for="bit-toggle-{{ id }}" [ngClass]="labelClasses">
|
||||
<ng-content></ng-content>
|
||||
<label for="bit-toggle-{{ id }}" [ngClass]="labelClasses" [title]="labelTextContent">
|
||||
<span class="tw-line-clamp-2 tw-break-words" #labelContent>
|
||||
<ng-content></ng-content>
|
||||
</span>
|
||||
<span class="tw-shrink-0" #bitBadgeContainer [hidden]="!bitBadgeContainerHasChidlren()">
|
||||
<ng-content select="[bitBadge]"></ng-content>
|
||||
</span>
|
||||
</label>
|
||||
|
||||
@@ -1,4 +1,12 @@
|
||||
import { Component, HostBinding, Input } from "@angular/core";
|
||||
import {
|
||||
AfterContentChecked,
|
||||
Component,
|
||||
ElementRef,
|
||||
HostBinding,
|
||||
Input,
|
||||
signal,
|
||||
ViewChild,
|
||||
} from "@angular/core";
|
||||
|
||||
import { ToggleGroupComponent } from "./toggle-group.component";
|
||||
|
||||
@@ -9,15 +17,19 @@ let nextId = 0;
|
||||
templateUrl: "./toggle.component.html",
|
||||
preserveWhitespaces: false,
|
||||
})
|
||||
export class ToggleComponent<TValue> {
|
||||
export class ToggleComponent<TValue> implements AfterContentChecked {
|
||||
id = nextId++;
|
||||
|
||||
@Input() value?: TValue;
|
||||
@ViewChild("labelContent") labelContent: ElementRef<HTMLSpanElement>;
|
||||
@ViewChild("bitBadgeContainer") bitBadgeContainer: ElementRef<HTMLSpanElement>;
|
||||
|
||||
constructor(private groupComponent: ToggleGroupComponent<TValue>) {}
|
||||
|
||||
@HostBinding("tabIndex") tabIndex = "-1";
|
||||
@HostBinding("class") classList = ["tw-group/toggle"];
|
||||
@HostBinding("class") classList = ["tw-group/toggle", "tw-flex", "tw-min-w-16"];
|
||||
|
||||
protected bitBadgeContainerHasChidlren = signal(false);
|
||||
|
||||
get name() {
|
||||
return this.groupComponent.name;
|
||||
@@ -31,38 +43,44 @@ export class ToggleComponent<TValue> {
|
||||
return ["tw-peer/toggle-input", "tw-appearance-none", "tw-outline-none"];
|
||||
}
|
||||
|
||||
get labelTextContent() {
|
||||
return this.labelContent?.nativeElement.innerText ?? null;
|
||||
}
|
||||
|
||||
get labelClasses() {
|
||||
return [
|
||||
"tw-h-full",
|
||||
"tw-w-full",
|
||||
"tw-flex",
|
||||
"tw-items-center",
|
||||
"tw-justify-center",
|
||||
"tw-gap-1.5",
|
||||
"!tw-font-semibold",
|
||||
"tw-inline-block",
|
||||
"tw-leading-5",
|
||||
"tw-transition",
|
||||
"tw-text-center",
|
||||
"tw-border-text-muted",
|
||||
"!tw-text-muted",
|
||||
"tw-text-sm",
|
||||
"tw-border-primary-600",
|
||||
"!tw-text-primary-600",
|
||||
"tw-border-solid",
|
||||
"tw-border-y",
|
||||
"tw-border-r",
|
||||
"tw-border-l-0",
|
||||
"tw-cursor-pointer",
|
||||
"hover:tw-bg-primary-100",
|
||||
|
||||
"group-first-of-type/toggle:tw-border-l",
|
||||
"group-first-of-type/toggle:tw-rounded-l",
|
||||
"group-last-of-type/toggle:tw-rounded-r",
|
||||
"group-first-of-type/toggle:tw-rounded-l-full",
|
||||
"group-last-of-type/toggle:tw-rounded-r-full",
|
||||
|
||||
"peer-focus/toggle-input:tw-outline-none",
|
||||
"peer-focus/toggle-input:tw-ring",
|
||||
"peer-focus/toggle-input:tw-ring-offset-2",
|
||||
"peer-focus/toggle-input:tw-ring-primary-600",
|
||||
"peer-focus/toggle-input:tw-z-10",
|
||||
"peer-focus/toggle-input:tw-bg-primary-600",
|
||||
"peer-focus/toggle-input:tw-border-primary-600",
|
||||
"peer-focus/toggle-input:!tw-text-contrast",
|
||||
|
||||
"hover:tw-no-underline",
|
||||
"hover:tw-bg-text-muted",
|
||||
"hover:tw-border-text-muted",
|
||||
"hover:!tw-text-contrast",
|
||||
"peer-focus-visible/toggle-input:tw-outline-none",
|
||||
"peer-focus-visible/toggle-input:tw-ring",
|
||||
"peer-focus-visible/toggle-input:tw-ring-offset-2",
|
||||
"peer-focus-visible/toggle-input:tw-ring-primary-600",
|
||||
"peer-focus-visible/toggle-input:tw-z-10",
|
||||
"peer-focus-visible/toggle-input:tw-bg-primary-600",
|
||||
"peer-focus-visible/toggle-input:tw-border-primary-600",
|
||||
"peer-focus-visible/toggle-input:!tw-text-contrast",
|
||||
|
||||
"peer-checked/toggle-input:tw-bg-primary-600",
|
||||
"peer-checked/toggle-input:tw-border-primary-600",
|
||||
@@ -72,13 +90,16 @@ export class ToggleComponent<TValue> {
|
||||
|
||||
// Fix for bootstrap styles that add bottom margin
|
||||
"!tw-mb-0",
|
||||
|
||||
// Fix for badge being slightly off center vertically
|
||||
"[&>[bitBadge]]:tw-mt-px",
|
||||
];
|
||||
}
|
||||
|
||||
onInputInteraction() {
|
||||
this.groupComponent.onInputInteraction(this.value);
|
||||
}
|
||||
|
||||
ngAfterContentChecked() {
|
||||
this.bitBadgeContainerHasChidlren.set(
|
||||
this.bitBadgeContainer?.nativeElement.childElementCount > 0,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user