1
0
mirror of https://github.com/bitwarden/browser synced 2025-12-12 14:23:32 +00:00
Commit Graph

24 Commits

Author SHA1 Message Date
Bryan Cunningham
08a022fa52 [CL-227] Tooltip component (#16442)
* add tooltip component

* fix typescript errors

* fix more typescript errors

* remove css comments

* fix tooltip blocking mouse events

* move default position logic to shared util

* fix tooltip stories options

* add tooltip spec

* add offset arg to default positions

* add shadow to tooltip

* increase offset

* adding max width

* fix disabled button cursor

* add stronger position type

* fixing types

* change get positions function to type return correctly

* more fixing types

* default options object

* add mock to tooltip stories

* add figma link to story

* update positions file name. remove getter

* remove standalone. add comment about component use

* add jsdoc comment to directive inputs

* fix typo

* remove instances of setInput

* fix storybook injection error

* remove unneeded functions

* remove unneeded variables

* remove comment

* move popover positions back with component

* fix popover i18n mock

* creat etooltip positions file

* update test to account for change to setInput calls

* remove panel class as it's not necessary

* improve tooltip docs page

* use classes for styling. Simpliy position changes

* simplify tests. No longer need to track position changes

* move comment to correct place

* fix typos

* remove unnecessary standalone declaration
2025-10-01 14:01:53 -04:00
Bryan Cunningham
9d82fc7dfc [CL-95] loading spinner (#16363)
* add spiner from previous branch

* add loading spinner to button

* Add spinner to dialog

* Add spinner to icon button

* add spinner to multi select component

* fix spinner positioning

* Add mock i18n in stories where needed

* round stroke caps. Update classes

* fix ts error

* fix broken tests

* add missing translation keys to stories

* Add mising key for layout

* Add mising key for nav group

* Add mising key for spotlight

* Add mising key for product switcher

* Add mising key for dialog service

* add translation to copy click story
2025-09-23 15:36:18 -04:00
Bryan Cunningham
b0f46004ff [CL-796] unrevert aria disabled buttons (#15924)
* Use aria-disabled for button disabled state

* remove import from testing story

* use aria-disabled attr on bitLink button

* remove unnecessary story attrs

* remove disabled attr if on button element

* create caprture click util

* use caprture click util and fix tests

* fix lint errors

* fix event type

* combine click capture and attr modification

* fix lint error. Commit spec changes left out of last commit in error

* inject element ref

* move aria-disabled styles to common

* move disabled logic into util

* fix broken async actions stories

* fix broken tests asserting disabled attr

* have test check for string true vlalue

* fix Signal type

* fix form-field story import

* remove injector left in error

* aria-disable icon buttons

* update form component css selector to look for aria-disabled buttons

* use correct types. pass nativeElement directly

* add JSDoc comment for util function

* WIP

* WIP

* inject service in directive

* remove console log

* remove disabled attr left in error

* update comments

* remove unnecessary logic

* remove :disabled psuedo selector as its apparently not needed

* fix event type

* coerce disabled attr to boolean

* remove duplicate style concat left by conflict resolution

* add back buttonStyles default

* move reactive logic back to helper

* add test to ensure menu button doesn't open when trigger is disabled

* remove menu toggle to fix tests

* remove disabled menu story

* Fix usage of bitLink in verify email component

* Update varaible name

* no longer pass destroyRef
2025-08-21 09:14:08 -04:00
Bryan Cunningham
4449d8baf6 [CL-689][CL-799] Fix Icon button a11y errors (#15750)
* Throw error if appA11yTitle is null in icon button

* Add required label input

* Fix icon button errors in CL components and storeis

* fix popover aria-label errors

* remove commented code

* add labels to icon buttons in browser

* add labels to icon buttons in web

* add labels to icon buttons in license

* add labels to icon buttons in send

* add labels to icon buttons in angular

* fix missing pipe error

* fix sso icon button missed in error

* update labels in vault

* add section expand button label

* Adding labels to icon buttons

* Add lint rule to not allow icon buttons without label input

* rename util file

* trigger updates on title change

* update eslint rule name and folder

* add edit collection label to vault headers

* fix web header story label

* add show/hide summary labels

* update summary message

* fix breadcrumbs label message

* fix JSDoc to use correct input

* remove commented code

* use label as aria-label always. Remove init function

* add moreBreadcrumbs translation message to other apps

* add @bitwarden/team-ui-foundation as code owner for component eslint rules

* switch title to const variable

* add jsdoc comment on what the label input is used for

* [PM-22415] Tax ID notifications for Organizations and Providers (#15996)

* [NO LOGIC] Rename BillableEntity to BitwardenSubscriber

This helps us maintain paraody with server where we call this choice type ISubscriber. I chose BitwardenSubscriber to avoid overlap with RxJS

* [NO LOGIC] Move subscriber-billing.client to clients folder

* [NO LOGIC] Move organization warnings under organization folder

* Move getWarnings from OrganizationBillingApiService to new OrganizationBillingClient

I'd like us to move away from stashing so much in libs and utilizing the JsLibServicesModule when it's not necessary to do so. These are invocations used exclusively by the Web Vault and, until that changes, they should be treated as such

* Refactor OrganizationWarningsService

There was a case added to the Inactive Subscription warning for a free trial, but free trials do not represent inactive subscriptions so this was semantically incorrect. This creates another method that pulls the free trial warning and shows a dialog asking the user to subscribe if they're on one.

* Implement Tax ID Warnings throughout Admin Console and Provider Portal

* Fix linting error

* Jimmy's feedback

* remove duplicate messages keys

* revert changes to popover stories

* add back dupe myItems key for now as it was already here

* fix directive type errors

* remove variable left in error from merge conflict

* revert unintentional change to reports layout

* add back reports change

---------

Co-authored-by: Alex Morask <144709477+amorask-bitwarden@users.noreply.github.com>
2025-08-19 15:15:41 -04:00
Will Martin
827c4c0301 [PM-15847] libs/components strict migration (#15738)
This PR migrates `libs/components` to use strict TypeScript.

- Remove `@ts-strict-ignore` from each file in `libs/components` and resolved any new compilation errors
- Converted ViewChild and ContentChild decorators to use the new signal-based queries using the [Angular signal queries migration](https://angular.dev/reference/migrations/signal-queries)
  - Made view/content children `required` where appropriate, eliminating the need for additional null checking. This helped simplify the strict migration.

---

Co-authored-by: Vicki League <vleague@bitwarden.com>
2025-08-18 15:36:45 -04:00
Vicki League
26c0176e2e [CL-712] Update icon button, components using it, and affected virtual scroll heights (#15683) 2025-08-05 10:58:49 -04:00
Bryan Cunningham
250e46ee70 [PM-23816] Revert aria disabled buttons (#15656)
* Revert "[CL-295] Use aria-disabled on buttons (#15009)"

This reverts commit 682f1f83d9.

* fix import

* bring back story fixes
2025-07-17 11:40:22 -04:00
Vicki League
6811ea4c0b [CL-707] Migrate CL codebase to signals (#15340) 2025-07-16 08:39:37 -04:00
Bryan Cunningham
682f1f83d9 [CL-295] Use aria-disabled on buttons (#15009)
* Use aria-disabled for button disabled state

* remove import from testing story

* use aria-disabled attr on bitLink button

* remove unnecessary story attrs

* remove disabled attr if on button element

* create caprture click util

* use caprture click util and fix tests

* fix lint errors

* fix event type

* combine click capture and attr modification

* fix lint error. Commit spec changes left out of last commit in error

* inject element ref

* move aria-disabled styles to common

* move disabled logic into util

* fix broken async actions stories

* fix broken tests asserting disabled attr

* have test check for string true vlalue

* fix Signal type

* fix form-field story import

* remove injector left in error

* aria-disable icon buttons

* update form component css selector to look for aria-disabled buttons

* use correct types. pass nativeElement directly

* add JSDoc comment for util function

---------

Co-authored-by: Will Martin <contact@willmartian.com>
2025-07-08 16:13:25 -04:00
Oscar Hinton
26fb7effd3 Remove standalone true from platform and UIF (#15032)
Remove standalone: true from every instance since it's the default as of Angular 19.
2025-06-02 20:03:04 +02:00
Bryan Cunningham
5eb8d7b181 [CL-208][CL-339] Enhance Storybook docs pages (#14838)
* rearrange button docs

* Enhance avatar docs

* Enhance badge  docs

* Enhance banner docs

* add util to format args for snippets

* update banner snippets

* WIP

* bind boolean args so they work correctly in Storybook

* simplify button stories

* Update callout docs

* use title component for checkbox docs

* use title and description  component for chip select docs

* update color password story docs

* update disclosure docs

* add import to icon docs

* updated icon-button docs

* update link docs

* Update prgress docs

* updated search field docs

* remove html type definitions

* add import for progress

* updated toast docs

* remove example from docs. format args for snippet

* Update badges docs

* handle array arg values correctly

* Update badges list docs

* fix dupe key error from taost story

* remove unnecessary typeof check

* remove banner usage example

* add breadcrumbs import statement and jsdoc

* add color password import statement

* fixing type mismaches

* fix typos

* Add missing generics to format function

* fix typo

* update callout icon spacing to match Figma

* add back max width container
2025-05-30 12:38:40 -04:00
Vicki League
6d1914f43d [CL-485] Add small delay for async action loading state (#12835) 2025-02-25 09:56:01 -05:00
Oscar Hinton
5a582dfc6f [CL-135] Migrate component library to standalone components (#12389)
* Migrate component library to standalone components

* Fix tests
2024-12-17 17:29:48 -05:00
Matt Gibson
9c1e2ebd67 Typescript-strict-plugin (#12235)
* Use typescript-strict-plugin to iteratively turn on strict

* Add strict testing to pipeline

Can be executed locally through either `npm run test:types` for full type checking including spec files, or `npx tsc-strict` for only tsconfig.json included files.

* turn on strict for scripts directory

* Use plugin for all tsconfigs in monorepo

vscode is capable of executing tsc with plugins, but uses the most relevant tsconfig to do so. If the plugin is not a part of that config, it is skipped and developers get no feedback of strict compile time issues. These updates remedy that at the cost of slightly more complex removal of the plugin when the time comes.

* remove plugin from configs that extend one that already has it

* Update workspace settings to honor strict plugin

* Apply strict-plugin to native message test runner

* Update vscode workspace to use root tsc version

* `./node_modules/.bin/update-strict-comments` 🤖

This is a one-time operation. All future files should adhere to strict type checking.

* Add fixme to `ts-strict-ignore` comments

* `update-strict-comments` 🤖

repeated for new merge files
2024-12-09 20:58:50 +01:00
Victoria League
3b5b2d6bd6 [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>
2024-11-15 09:21:17 -05:00
Victoria League
e8dac0cc12 [CL-500] Add disclosure component and directive (#11865) 2024-11-07 16:54:49 -05:00
Will Martin
e7416384dc [CL-220] item components (#8870) 2024-04-30 10:27:47 -04:00
Victoria League
09169cac71 [CL-254] Rename 500 colors to 600 to prep for UI redesign (#8623)
* [CL-254] Rename 500 colors to 600 to prep for UI redesign

---------

Co-authored-by: Will Martin <contact@willmartian.com>
2024-04-05 10:58:32 -04:00
Will Martin
eeb407b8a4 [SM-43] create product-switcher (#4189)
* 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
2022-12-21 16:50:41 -05:00
Andreas Coroiu
32ec5bdba1 [CL-58] Make icon button compatible with bit suffix directive (#4057)
* [CL-58] feat: add support for modyfing button types from directives

* [CL-58] feat: set button type secondary when used as prefix/suffix

* [CL-58] chore: add example using suffix to async actions story

* [CL-58] feat: update story with examples

* [CL-58] feat: allow buttons to have their style unset

* [CL-58] feat: move all styling into prefix/suffix

* [CL-58] fix: static content prefix/suffix

* [CL-58] fix: add missing bitFormButton to bitAction

* [CL-58] fix: disabled opacity not overriding correctly

* [CL-58] feat: change hover color to muted

* [CL-58] feat: replace undefined with unstyled

* [CL-58] fix: focus borders on input and prefix/suffix

* [CL-58] feat: update production code to use icon button correctly

* [CL-58] refactor: move out button type to common place

* [CL-58] fix: buttons not migrated correctly

* [CL-58] feat: use icon button in password toggle

* [CL-58] fix: remove button icon stories

* [SM-358] Migrate password toggles (#4129)

* [CL-58] fix: missing i18n service in story

* [CL-58] fix: missing bitIconButton directive in export comp

Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>
Co-authored-by: Thomas Rittson <trittson@bitwarden.com>
2022-12-20 08:14:29 +10:00
Oscar Hinton
20eb585d2b [SM-342] Password Toggle directive (#3850) 2022-11-28 14:04:41 +01:00
Andreas Coroiu
bb4f063fe7 [EC-558] Reflecting async progress on buttons and forms (#3548)
* [EC-556] feat: convert button into component

* [EC-556] feat: implement loading state

* [EC-556] feat: remove loading from submit button

* [EC-556] fix: add missing import

* [EC-556] fix: disabling button using regular attribute

* [EC-556] feat: implement bitFormButton

* [EC-556] feat: use bitFormButton in submit button

* [EC-556] fix: missing import

* [EC-558] chore: rename file to match class name

* [EC-558] feat: allow skipping bitButton on form buttons

* [EC-558]: only show spinner on submit button

* [EC-558] feat: add new bit async directive

* [EC-558] feat: add functionToObservable util

* [EC-558] feat: implement bitAction directive

* [EC-558] refactor: simplify bitSubmit using functionToObservable

* [EC-558] feat: connect bit action with form button

* [EC-558] feat: execute function immediately to allow for form validation

* [EC-558] feat: disable form on loading

* [EC-558] chore: remove duplicate types

* [EC-558] feat: move validation service to common

* [EC-558] feat: add error handling using validation service

* [EC-558] feat: add support for icon button

* [EC-558] fix: icon button hover border styles

* [EC-558] chore: refactor icon button story to show all styles

* [EC-558] fix: better align loading spinner to middle

* [EC-558] fix: simplify try catch

* [EC-558] chore: reorganize async actions

* [EC-558] chore: rename stories

* [EC-558] docs: add documentation

* [EC-558] feat: decouple buttons and form buttons

* [EC-558] chore: rename button like abstraction

* [EC-558] chore: remove null check

* [EC-558] docs: add jsdocs to directives

* [EC-558] fix: switch abs imports to relative

* [EC-558] chore: add async actions module to web shared module

* [EC-558] chore: remove unecessary null check

* [EC-558] chore: apply suggestions from code review

Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>

* [EC-558] fix: whitespaces

* [EC-558] feat: dont disable form by default

* [EC-558] fix: bug where form could be submit during a previous submit

* [EC-558] feat: remove ability to disable form

Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>
2022-10-10 16:04:29 +02:00
Andreas Coroiu
b5de573497 fix: icon button style incompats (#3611) 2022-09-27 11:22:31 +02:00
Andreas Coroiu
d666d66886 [EC-457] Component library icon buttons (#3372)
* [EC-457] feat: initial version of icon button

* [EC-457] feat: modify template and start adding inputs

* [EC-457] feat: implement all styles

* [EC-457] chore: cleanup

* [EC-457] feat: fix hover styles after discussions

* [EC-457] feat: add focus ring workaround

* [EC-457] chore: refactor stories a bit

* [EC-457] fix: button style attr name reserved word collision

* [EC-356] feat: match padding with figma

* [EC-457] feat: use icon button in banner

* [EC-457] chore: cleanup css classes

* [EC-457] feat: improve aria

* [EC-457] feat: use icon button in dialog

* [EC-457] fix: make focus and hover styles independent

* [EC-457] fix: remove primary 500 border

* [EC-457] chore: cleanup

* [EC-457] chore: move css class to common list

* [EC-457] fix: use focus-visible

* [EC-457] chore: expand on workaround fix

* [EC-457] fix: default sizing

* [EC-457] fix: align trash icon right

* [EC-457] fix: add missing aria labels

* [EC-457] fix: add i18n service to banner tests

* [EC-457] chore: rename size `default` to `button`

* [EC-457] feat: double padding

* [EC-457] feat: simplify sizes - update default

* [EC-457] fix: revert selector fix - gonna create separate pr

* [EC-457] chore: remove superfluous dependencies

* [EC-457] fix: remove non-working onClose handler

Removing this storybook action because we already test it as part of the dialog service stories.
It requries mocking the dialogRef to capture the close function which makes this story more complex
but adds very little value as we already test it elsewhere.
2022-09-15 07:38:29 +02:00