bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-16 00:03:56 +00:00
Code Issues Releases Wiki Activity

[CL-265] CL/extension refresh feature branch (#8696)

Browse Source 
* [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
2024-11-15 09:21:17 -05:00
committed by GitHub
parent 5c540a86f4
commit 3b5b2d6bd6
150 changed files with 1767 additions and 1059 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
libs/components/src/badge/badge.directive.ts
View File

@@ -5,21 +5,25 @@ import { FocusableElement } from "../shared/focusable-element";
export type BadgeVariant = "primary" | "secondary" | "success" | "danger" | "warning" | "info";
const styles: Record<BadgeVariant, string[]> = {
primary: ["tw-bg-primary-600"],
secondary: ["tw-bg-text-muted"],
success: ["tw-bg-success-600"],
danger: ["tw-bg-danger-600"],
warning: ["tw-bg-warning-600"],
info: ["tw-bg-info-600"],
primary: ["tw-bg-primary-100", "tw-border-primary-700", "!tw-text-primary-700"],
secondary: ["tw-bg-secondary-100", "tw-border-secondary-700", "!tw-text-secondary-700"],
success: ["tw-bg-success-100", "tw-border-success-700", "!tw-text-success-700"],
danger: ["tw-bg-danger-100", "tw-border-danger-700", "!tw-text-danger-700"],
warning: ["tw-bg-warning-100", "tw-border-warning-700", "!tw-text-warning-700"],
info: ["tw-bg-info-100", "tw-border-info-700", "!tw-text-info-700"],
};
const hoverStyles: Record<BadgeVariant, string[]> = {
primary: ["hover:tw-bg-primary-700"],
secondary: ["hover:tw-bg-secondary-700"],
success: ["hover:tw-bg-success-700"],
danger: ["hover:tw-bg-danger-700"],
warning: ["hover:tw-bg-warning-700"],
info: ["hover:tw-bg-info-700"],
primary: ["hover:tw-bg-primary-600", "hover:tw-border-primary-600", "hover:!tw-text-contrast"],
secondary: [
"hover:tw-bg-secondary-600",
"hover:tw-border-secondary-600",
"hover:!tw-text-contrast",
],
success: ["hover:tw-bg-success-600", "hover:tw-border-success-600", "hover:!tw-text-contrast"],
danger: ["hover:tw-bg-danger-600", "hover:tw-border-danger-600", "hover:!tw-text-contrast"],
warning: ["hover:tw-bg-warning-600", "hover:tw-border-warning-600", "hover:!tw-text-black"],
info: ["hover:tw-bg-info-600", "hover:tw-border-info-600", "hover:!tw-text-black"],
};
@Directive({
@@ -30,22 +34,29 @@ export class BadgeDirective implements FocusableElement {
@HostBinding("class") get classList() {
return [
"tw-inline-block",
"tw-py-0.5",
"tw-px-1.5",
"tw-font-bold",
"tw-py-1",
"tw-px-2",
"tw-font-medium",
"tw-text-center",
"tw-align-text-top",
"!tw-text-contrast",
"tw-rounded",
"tw-border-none",
"tw-rounded-full",
"tw-border-[0.5px]",
"tw-border-solid",
"tw-box-border",
"tw-whitespace-nowrap",
"tw-text-xs",
"hover:tw-no-underline",
"focus:tw-outline-none",
"focus:tw-ring",
"focus:tw-ring-offset-2",
"focus:tw-ring-primary-700",
"focus-visible:tw-outline-none",
"focus-visible:tw-ring-2",
"focus-visible:tw-ring-offset-2",
"focus-visible:tw-ring-primary-600",
"disabled:tw-bg-secondary-300",
"disabled:hover:tw-bg-secondary-300",
"disabled:tw-border-secondary-300",
"disabled:hover:tw-border-secondary-300",
"disabled:!tw-text-muted",
"disabled:hover:!tw-text-muted",
"disabled:tw-cursor-not-allowed",
]
.concat(styles[this.variant])
.concat(this.hasHoverEffects ? hoverStyles[this.variant] : [])

9
libs/components/src/badge/badge.mdx
View File

@@ -10,12 +10,17 @@ import { BadgeModule } from "@bitwarden/components";
# Badge
The Badge directive can be used on a `<span>` (non clickable events), or an `<a>` or `<button>` tag
for interactive events. The Focus and Hover states only apply to badges used for interactive events.
Badges are primarily used as labels, counters, and small buttons.
Typically Badges are only used with text set to `text-xs`. If additional sizes are needed, the
component configurations may be reviewed and adjusted.
The Badge directive can be used on a `<span>` (non clickable events), or an `<a>` or `<button>` tag
for interactive events. The Focus and Hover states only apply to badges used for interactive events.
The `disabled` state only applies to buttons.
The story below uses the `<button>` element to demonstrate all the possible states.
<Primary />
<Controls />

41
libs/components/src/badge/badge.stories.ts
View File

@@ -26,10 +26,49 @@ export default {
type Story = StoryObj<BadgeDirective>;
export const Variants: Story = {
render: (args) => ({
props: args,
template: /*html*/ `
<span class="tw-text-main tw-mx-1">Default</span>
<button class="tw-mx-1" bitBadge variant="primary" [truncate]="truncate">Primary</button>
<button class="tw-mx-1" bitBadge variant="secondary" [truncate]="truncate">Secondary</button>
<button class="tw-mx-1" bitBadge variant="success" [truncate]="truncate">Success</button>
<button class="tw-mx-1" bitBadge variant="danger" [truncate]="truncate">Danger</button>
<button class="tw-mx-1" bitBadge variant="warning" [truncate]="truncate">Warning</button>
<button class="tw-mx-1" bitBadge variant="info" [truncate]="truncate">Info</button>
<br/><br/>
<span class="tw-text-main tw-mx-1">Hover</span>
<button class="tw-mx-1 tw-test-hover" bitBadge variant="primary" [truncate]="truncate">Primary</button>
<button class="tw-mx-1 tw-test-hover" bitBadge variant="secondary" [truncate]="truncate">Secondary</button>
<button class="tw-mx-1 tw-test-hover" bitBadge variant="success" [truncate]="truncate">Success</button>
<button class="tw-mx-1 tw-test-hover" bitBadge variant="danger" [truncate]="truncate">Danger</button>
<button class="tw-mx-1 tw-test-hover" bitBadge variant="warning" [truncate]="truncate">Warning</button>
<button class="tw-mx-1 tw-test-hover" bitBadge variant="info" [truncate]="truncate">Info</button>
<br/><br/>
<span class="tw-text-main tw-mx-1">Focus Visible</span>
<button class="tw-mx-1 tw-test-focus-visible" bitBadge variant="primary" [truncate]="truncate">Primary</button>
<button class="tw-mx-1 tw-test-focus-visible" bitBadge variant="secondary" [truncate]="truncate">Secondary</button>
<button class="tw-mx-1 tw-test-focus-visible" bitBadge variant="success" [truncate]="truncate">Success</button>
<button class="tw-mx-1 tw-test-focus-visible" bitBadge variant="danger" [truncate]="truncate">Danger</button>
<button class="tw-mx-1 tw-test-focus-visible" bitBadge variant="warning" [truncate]="truncate">Warning</button>
<button class="tw-mx-1 tw-test-focus-visible" bitBadge variant="info" [truncate]="truncate">Info</button>
<br/><br/>
<span class="tw-text-main tw-mx-1">Disabled</span>
<button disabled class="tw-mx-1" bitBadge variant="primary" [truncate]="truncate">Primary</button>
<button disabled class="tw-mx-1" bitBadge variant="secondary" [truncate]="truncate">Secondary</button>
<button disabled class="tw-mx-1" bitBadge variant="success" [truncate]="truncate">Success</button>
<button disabled class="tw-mx-1" bitBadge variant="danger" [truncate]="truncate">Danger</button>
<button disabled class="tw-mx-1" bitBadge variant="warning" [truncate]="truncate">Warning</button>
<button disabled class="tw-mx-1" bitBadge variant="info" [truncate]="truncate">Info</button>
`,
}),
};
export const Primary: Story = {
render: (args) => ({
props: args,
template: `
template: /*html*/ `
<span class="tw-text-main">Span </span><span bitBadge [variant]="variant" [truncate]="truncate">Badge containing lengthy text</span>
<br /><br />
<span class="tw-text-main">Link </span><a href="#" bitBadge [variant]="variant" [truncate]="truncate">Badge</a>