bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-14 15:23:33 +00:00
Code Issues Releases Wiki Activity

[SM-43] create product-switcher (#4189)

Browse Source 
* rebase to master

* use bit-menu in product switcher; add focusStrategy to bit-menu

* recommit locales after rebase

* add light style to iconButton, use in product-switcher

* move out of component library

* add buttonType input

* gate behind sm flag

* update aria-label

* add role input to bit-menu

* style changes

* simplify partition logic

* split into two components for Storybook

* update focus styles; update grid sizing to relative

* fix underline on hover

* update attribute binding

* move to layouts dir

* add bitLink; update grid gap

* reorder loose components

* move orgs mock

* move a11y module

* fix aria role bug; add aria label to menu

* update colors

* update ring color

* simplify colors

* remove duplicate link module
This commit is contained in:
Will Martin
2022-12-21 16:50:41 -05:00
committed by GitHub
parent 7d3063942e
commit eeb407b8a4
22 changed files with 387 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
libs/components/src/icon-button/icon-button.component.ts
View File

@@ -2,7 +2,7 @@ import { Component, HostBinding, Input } from "@angular/core";
import { ButtonLikeAbstraction, ButtonType } from "../shared/button-like.abstraction";
export type IconButtonType = ButtonType | "contrast" | "main" | "muted";
export type IconButtonType = ButtonType | "contrast" | "main" | "muted" | "light";
const focusRing = [
// Workaround for box-shadow with transparent offset issue:
@@ -99,6 +99,17 @@ const styles: Record<IconButtonType, string[]> = {
"disabled:hover:tw-border-danger-500",
...focusRing,
],
light: [
"tw-bg-transparent",
"!tw-text-alt2",
"tw-border-transparent",
"hover:tw-bg-transparent-hover",
"hover:tw-border-text-alt2",
"focus-visible:before:tw-ring-text-alt2",
"disabled:hover:tw-border-transparent",
"disabled:hover:tw-bg-transparent",
...focusRing,
],
unstyled: [],
};

11
libs/components/src/icon-button/icon-button.stories.ts
View File

@@ -9,6 +9,7 @@ const buttonTypes: IconButtonType[] = [
"primary",
"secondary",
"danger",
"light",
];
export default {
@@ -38,15 +39,15 @@ const Template: Story<BitIconButtonComponent> = (args: BitIconButtonComponent) =
<tr>
<td></td>
<td *ngFor="let buttonType of buttonTypes" class="tw-capitalize tw-font-bold tw-p-4"
[class.tw-text-contrast]="buttonType === 'contrast'"
[class.tw-bg-primary-500]="buttonType === 'contrast'">{{buttonType}}</td>
[class.tw-text-contrast]="['contrast', 'light'].includes(buttonType)"
[class.tw-bg-primary-500]="['contrast', 'light'].includes(buttonType)">{{buttonType}}</td>
</tr>
</thead>
<tbody>
<tr>
<td class="tw-font-bold tw-p-4 tw-text-left">Default</td>
<td *ngFor="let buttonType of buttonTypes" class="tw-p-2" [class.tw-bg-primary-500]="buttonType === 'contrast'">
<td *ngFor="let buttonType of buttonTypes" class="tw-p-2" [class.tw-bg-primary-500]="['contrast', 'light'].includes(buttonType)">
<button
[bitIconButton]="bitIconButton"
[buttonType]="buttonType"
@@ -58,7 +59,7 @@ const Template: Story<BitIconButtonComponent> = (args: BitIconButtonComponent) =
<tr>
<td class="tw-font-bold tw-p-4 tw-text-left">Disabled</td>
<td *ngFor="let buttonType of buttonTypes" class="tw-p-2" [class.tw-bg-primary-500]="buttonType === 'contrast'">
<td *ngFor="let buttonType of buttonTypes" class="tw-p-2" [class.tw-bg-primary-500]="['contrast', 'light'].includes(buttonType)">
<button
[bitIconButton]="bitIconButton"
[buttonType]="buttonType"
@@ -71,7 +72,7 @@ const Template: Story<BitIconButtonComponent> = (args: BitIconButtonComponent) =
<tr>
<td class="tw-font-bold tw-p-4 tw-text-left">Loading</td>
<td *ngFor="let buttonType of buttonTypes" class="tw-p-2" [class.tw-bg-primary-500]="buttonType === 'contrast'">
<td *ngFor="let buttonType of buttonTypes" class="tw-p-2" [class.tw-bg-primary-500]="['contrast', 'light'].includes(buttonType)">
<button
[bitIconButton]="bitIconButton"
[buttonType]="buttonType"