feat: add notification center #416
Merged
Conversation
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
# [1.31.0-nav-disabled-interactions-poc.2](v1.31.0-nav-disabled-interactions-poc.1...v1.31.0-nav-disabled-interactions-poc.2) (2024-09-12)
# [1.31.0-nav-disabled-interactions-poc.3](v1.31.0-nav-disabled-interactions-poc.2...v1.31.0-nav-disabled-interactions-poc.3) (2024-09-13)
…om/mParticle/aquarium into feat/nav-disabled-interactions-poc
# [1.31.0-nav-disabled-interactions-poc.4](v1.31.0-nav-disabled-interactions-poc.3...v1.31.0-nav-disabled-interactions-poc.4) (2024-09-13) ### Bug Fixes * avoid nested anchor when child is button ([1e179fa](1e179fa))
…om/mParticle/aquarium into feat/nav-disabled-interactions-poc
# [1.31.0-nav-disabled-interactions-poc.5](v1.31.0-nav-disabled-interactions-poc.4...v1.31.0-nav-disabled-interactions-poc.5) (2024-09-13)
…om/mParticle/aquarium into feat/nav-disabled-interactions-poc
# [1.31.0-nav-disabled-interactions-poc.6](v1.31.0-nav-disabled-interactions-poc.5...v1.31.0-nav-disabled-interactions-poc.6) (2024-09-16)
…om/mParticle/aquarium into feat/nav-disabled-interactions-poc
# [1.31.0-nav-disabled-interactions-poc.7](v1.31.0-nav-disabled-interactions-poc.6...v1.31.0-nav-disabled-interactions-poc.7) (2024-09-16)
…om/mParticle/aquarium into feat/nav-disabled-interactions-poc
# [1.31.0-nav-disabled-interactions-poc.8](v1.31.0-nav-disabled-interactions-poc.7...v1.31.0-nav-disabled-interactions-poc.8) (2024-09-16) ### Bug Fixes * add Drawer component back ([4703322](4703322))
Review Forge |
added 3 commits
September 16, 2024 14:51
…om/mParticle/aquarium into feat/nav-disabled-interactions-poc
src/components/navigation/GlobalNavigation/GlobalNavigation.tsx
Outdated
Show resolved
Hide resolved
src/components/navigation/GlobalNavigation/global-navigation.css
Outdated
Show resolved
Hide resolved
src/components/navigation/GlobalNavigation/NotificationCenter.tsx
Outdated
Show resolved
Hide resolved
src/components/navigation/GlobalNavigation/NotificationCenter.tsx
Outdated
Show resolved
Hide resolved
src/components/navigation/GlobalNavigation/NotificationCenter.tsx
Outdated
Show resolved
Hide resolved
src/components/navigation/GlobalNavigation/NotificationCenter.tsx
Outdated
Show resolved
Hide resolved
src/components/navigation/GlobalNavigation/NotificationCenter.tsx
Outdated
Show resolved
Hide resolved
src/components/navigation/GlobalNavigation/GlobalNavigationNotificationCenter.stories.tsx
Outdated
Show resolved
Hide resolved
tibuurcio
reviewed
Sep 17, 2024
There was a problem hiding this comment.
Nice work Leo. Left just a few small suggestions. When merging this with main it's important to double check the commit message in the squash commit. By default it will be the PR title, so feat: add notification center and that message is what's going to end up in the CHANGELOG file.
src/components/navigation/GlobalNavigation/GlobalNavigationNotificationCenter.stories.tsx
Outdated
Show resolved
Hide resolved
src/components/navigation/GlobalNavigation/NotificationCenter.tsx
Outdated
Show resolved
Hide resolved
src/components/navigation/GlobalNavigation/NotificationCenter.tsx
Outdated
Show resolved
Hide resolved
| .notificationCenter__popover { | ||
| left: var(--nav-width) !important; | ||
| height: 100%; | ||
| width: 300px; |
There was a problem hiding this comment.
@nastyastavitskaya @jared-dickman Should we have a variable for this? 🤔
There was a problem hiding this comment.
yeah, that'd be nice
danielsiemens
approved these changes
Sep 17, 2024
|
Leeeeets goo! 🚀 |
mparticle-automation
added a commit
that referenced
this pull request
Sep 17, 2024
# [1.31.0](v1.30.3...v1.31.0) (2024-09-17) ### Bug Fixes * add more icon ([#403](#403)) ([3abc3b7](3abc3b7)) ### Features * add mp colors to storybook and remove token to css from pre com… ([#405](#405)) ([40dffbf](40dffbf)) * add notification center ([#416](#416)) ([4c44206](4c44206)) * add prettifier ([#404](#404)) ([a99793f](a99793f))
|
🎉 This PR is included in version 1.31.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
mparticle-automation
added a commit
that referenced
this pull request
Oct 28, 2024
# 1.0.0-fix-semantic-release.1 (2024-10-28) ### Bug Fixes * Design tokens update + icons alignment fix ([#460](#460)) ([9c93165](9c93165)) * a useEffect Hook has been added to detect if the value received … ([#339](#339)) ([0e1ab5d](0e1ab5d)) * active workspace style ([#148](#148)) ([a276806](a276806)) * add current color fill to icon ([#374](#374)) ([12c698c](12c698c)) * add horizontal gap in suite selector ([#391](#391)) ([74a43d0](74a43d0)) * add icons ([#399](#399)) ([3343c26](3343c26)) * add icons for overview map ([#275](#275)) ([a4bb97d](a4bb97d)) * Add Icons in Aquarium ([#395](#395)) ([d554ed5](d554ed5)) * add info icon ([#381](#381)) ([d3aa957](d3aa957)) * add more icon ([#403](#403)) ([3abc3b7](3abc3b7)) * add new icons ([#380](#380)) ([db88c4e](db88c4e)) * add width auto to be able to manage the wdith from the component ([#368](#368)) ([b47c45f](b47c45f)) * button-alligned center ([#287](#287)) ([d8c056d](d8c056d)) * **cascader:** makes cascader use the aquarium configprovider and theme ([21800e2](21800e2)) * correct QueryItem Cascader and Action cosmetic bugs/flaws ([f5e6032](f5e6032)) * correct usage of Typography in Watermark.stories.tsx ([f8b32cb](f8b32cb)) * ensure PostCSS handles CSS unnesting in Vite config ([#457](#457)) ([1978e65](1978e65)) * export notification center props ([#418](#418)) ([2ea78c2](2ea78c2)) * exported types ([#448](#448)) ([a978175](a978175)) * fix broken stories due to typography update ([d64be86](d64be86)) * fix issue on prettifier ([#446](#446)) ([03668b6](03668b6)) * fix QueryItem.ValueSelector.Cascader's selectedDisplayValue type ([e74053d](e74053d)) * fixes path to be / on UPS cookie creation options ([#240](#240)) ([0cebf44](0cebf44)) * hide expand icon in global navigation lists ([#178](#178)) ([edd21db](edd21db)) * hide minimap after user clicks on a button ([#264](#264)) ([21a399c](21a399c)) * icon color not changing on button hover ([#363](#363)) ([aa07067](aa07067)) * Icon component build issue ([d7e2faf](d7e2faf)) * improve workspace selector performace ([#370](#370)) ([590e231](590e231)) * Input now support refs ([#169](#169)) ([20a7e47](20a7e47)) * **input:** wraps Input.Search in Aquarium ConfigProvider ([0fbba18](0fbba18)) * lazy load ValueSelector to fix Storybook test runner ([#298](#298)) ([4cd501b](4cd501b)) * **lint:** fix linting problems ([c343136](c343136)) * make onChange prop of QueryItem InputText optional ([7a1532f](7a1532f)) * make QueryItem Cascader options reactive ([50f11bc](50f11bc)) * make the workspace-selector label smaller ([#359](#359)) ([05c4338](05c4338)) * minor compatibility changes to QueryItem Qualifier and Cascader ([5065bdd](5065bdd)) * minor tweaks to TextInput to make it fully compatible ([be5deab](be5deab)) * nav link target ([#166](#166)) ([092a3aa](092a3aa)) * **NavigationSearch:** swaps Ctrl for Cmd on Macs ([a0b7d63](a0b7d63)) * notification center export z-index ([#422](#422)) ([ce01227](ce01227)) * PR review suggestions ([f1ed504](f1ed504)) * **queryitem:** change Input.Search to Input in Cascader's popover to prevent preact type error ([80b1469](80b1469)) * remove -t patch from sem release ([fa41baa](fa41baa)) * remove \dist files accidentally committed ([ef5a16b](ef5a16b)) * remove circle-dashed.svg, it's a duplicate ([aac4829](aac4829)) * remove hover effect on active state ([#278](#278)) ([9f89fa1](9f89fa1)) * remove LESS syntax from query-item.css ([643402c](643402c)) * rename icons ([#364](#364)) ([223c47d](223c47d)) * Revert design tokens update ([#361](#361)) ([cd9dbc9](cd9dbc9)) * rollback variables/style ([#310](#310)) ([efcaf5c](efcaf5c)) * signout onclick being triggered on render when there are no orgs ([#337](#337)) ([77f2b1a](77f2b1a)) * style build missing custom rules ([#147](#147)) ([3a66b26](3a66b26)) * sub menu links should open the correct herf ([#167](#167)) ([6b52fea](6b52fea)) * **typography:** fix exporting/structure of Typography and its subtypes ([cd097f8](cd097f8)) * unnest css ([#390](#390)) ([03d3ccb](03d3ccb)) * unnesting minimap styles ([#253](#253)) ([067f24d](067f24d)) * update design tokens ([#375](#375)) ([e818591](e818591)) * update empty component ([#371](#371)) ([655e252](655e252)) * update icons that did not obey the color prop ([#445](#445)) ([68006e3](68006e3)) * update more typography stories ([cd3344c](cd3344c)) * update nav link active background color ([#376](#376)) ([3965e60](3965e60)) * update release.config.cjs ([859b3bb](859b3bb)) * update release.config.cjs tag format version ([93ee2ec](93ee2ec)) * update release.yml to test semantic release ([5dcf0a7](5dcf0a7)) * use semantic release token ([7af705c](7af705c)) * use unique tags ([61d7886](61d7886)) * workspace selector positioning ([#338](#338)) ([9561a49](9561a49)) * **workspaceselector:** fix key duplication in the WorkspaceSelector ([2967c68](2967c68)) * **workspaceselector:** fix performance problems by swapping Antd Menu component with native ul ([8a0257b](8a0257b)) * yet more typography corrections ([81fce66](81fce66)) ### Features * add Action QueryItem ([f76ea2b](f76ea2b)) * add datepicker example ([#408](#408)) ([0b4b46b](0b4b46b)) * Add directory icon ([#319](#319)) ([a2b4132](a2b4132)) * add Help Icon ([6bae0ed](6bae0ed)) * Add links to the minimap ([#246](#246)) ([80bd00c](80bd00c)) * add loadData functionality to QueryItem Cascader ([ced4994](ced4994)) * add lock/unlock icons; rename previous lock to paywall ([#340](#340)) ([eaf6998](eaf6998)) * add mp colors to storybook and remove token to css from pre com… ([#405](#405)) ([40dffbf](40dffbf)) * add notification center ([#416](#416)) ([4c44206](4c44206)) * Add notification icon ([#345](#345)) ([2c9d13e](2c9d13e)) * add overview dt icon ([#362](#362)) ([78d7854](78d7854)) * add placeholder to QueryItem's TextInput ([30bde49](30bde49)) * add premiumDt icon ([#346](#346)) ([b3e2817](b3e2817)) * add prettifier ([#404](#404)) ([a99793f](a99793f)) * add QueryItem-related icons ([89fb3b8](89fb3b8)) * add QueryItem.Text component ([8f0b7bd](8f0b7bd)) * Add size prop to `Typography.Text` component ([#262](#262)) ([0c14f00](0c14f00)) * add value props to Qualifier and Cascader ([16042d7](16042d7)) * add variants to icons ([#355](#355)) ([1112674](1112674)) * add workspace label to Workspace Selector ([#323](#323)) ([bdb3c70](bdb3c70)) * Adds stylelint with recommended configs and rules from Indicative ([#82](#82)) ([4dd5380](4dd5380)) * Adds SuitesReminder hook to get a consistent look across platforms for the reminder notification ([#221](#221)) ([533428e](533428e)) * Allow importing types ([#65](#65)) ([7fe8981](7fe8981)) * Allow override theme for ConfigProvider ([#354](#354)) ([29cc614](29cc614)) * Allows publishing npm versions from feature branches ([#186](#186)) ([044c117](044c117)) * Allows publishing on dev branch/distribution channel ([#162](#162)) ([39530fa](39530fa)) * allows UPS to receive cookie config options ([#261](#261)) ([8ab9ce9](8ab9ce9)) * ant design system ([#9](#9)) ([7c0f090](7c0f090)) * ant upgrade to 5.20 ([#421](#421)) ([49b4bf8](49b4bf8)) * components ([#33](#33)) ([78dfb17](78dfb17)) * Exports bundle without libs (React, Antd) and TS types ([#76](#76)) ([5dbb9df](5dbb9df)) * first story with a simple component and directory structure with readmes ([a60b9b8](a60b9b8)) * focus workspace on icon click ([#163](#163)) ([cea91cd](cea91cd)) * global navigation and styling ([#124](#124)) ([7863d9a](7863d9a)) * icons placeholder ([#385](#385)) ([2503af1](2503af1)) * **icons:** export icons from the Aquarium ([dde4db2](dde4db2)) * install vitest unit test runner ([#143](#143)) ([2ad4075](2ad4075)) * intial add of QueryItem.ValueSelector.Cascader ([c022aa2](c022aa2)) * minimap active state ([#263](#263)) ([ae9a2b0](ae9a2b0)) * move minimap to suite logo ([#369](#369)) ([f2d2437](f2d2437)) * new icons ([#239](#239)) ([a1bfb88](a1bfb88)) * New storybook documentation structure ([#419](#419)) ([1a870bc](1a870bc)) * Organize component directories by type ([#16](#16)) ([6ad046d](6ad046d)) * query select number ([#268](#268)) ([13dc864](13dc864)) * **queryitem:** adding onchange and converting error danger zone text ([91e945f](91e945f)) * **queryitem:** adding QueryItem.Qualifier component ([1fe60d8](1fe60d8)) * **queryitem:** updating styles and adding error message to qualifier ([fa8a8da](fa8a8da)) * replace minimap with suiteSelector component ([#383](#383)) ([2ab27ca](2ab27ca)) * rework Cascader OnChange ([a77c44f](a77c44f)) * Storybook Testing ([#42](#42)) ([876c231](876c231)) * Tag component stories ([#68](#68)) ([4831b25](4831b25)) * update design tokens ([#273](#273)) ([ac2b442](ac2b442)) * update SuiteLogo in GlobalNav to render nav switcher Tour ([#367](#367)) ([a3920af](a3920af)) * UPS code ported from Nancy ([#207](#207)) ([cc153af](cc153af)) * wrap radio group and button components ([#282](#282)) ([6e67439](6e67439))
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Summary
This PR will add Notification Center panel to Global Navigation Bar. Implementation rely on
Popoverwith some styles to make it looks similar toDrawerpanel. With this change left navigation bar will contain a new icon (bell) if projects decide to include it. Once you click on the icon the Notification Center shows up. To close it you can click anyplace outside it, and if click on any item in the left nav it'll close it and follow through the intended action.Note: Real content for the notification center (along with any logic) must be provided by the project where it's going to be integrated.
Testing Plan
v1.31.0-nav-disabled-interactions-poc.8.Reference Issue (For mParticle employees only. Ignore if you are an outside contributor)