(feat) O3-2533: Add a snackbar notification (#809)

* Add snack bar to the style guide * Add documentation * more clean ups * update the documentation * update the documentation * renaming snackbar * update docs * Fix failing tests * add snackbar animation * update docs * update docs with timeoutInMs * Improve peerDependencies * Fixup * More fixups --------- Co-authored-by: Ian <[email protected]>
openmrs · Nov 15, 2023 · 6766209 · 6766209
1 parent 3aaf41e
commit 6766209
Show file tree

Hide file tree

Showing 20 changed files with 737 additions and 5 deletions.
diff --git a/packages/framework/esm-framework/docs/API.md b/packages/framework/esm-framework/docs/API.md
@@ -176,9 +176,11 @@
 - [showActionableNotification](API.md#showactionablenotification)
 - [showModal](API.md#showmodal)
 - [showNotification](API.md#shownotification)
+- [showSnackbar](API.md#showsnackbar)
 - [showToast](API.md#showtoast)
 - [subscribeActionableNotificationShown](API.md#subscribeactionablenotificationshown)
 - [subscribeNotificationShown](API.md#subscribenotificationshown)
+- [subscribeSnackbarShown](API.md#subscribesnackbarshown)
 - [subscribeToastShown](API.md#subscribetoastshown)
 - [unsetLeftNav](API.md#unsetleftnav)
 - [useBodyScrollLock](API.md#usebodyscrolllock)
@@ -663,6 +665,16 @@ ___
 
 ___
 
+### SnackbarType
+
+Ƭ **SnackbarType**: ``"error"`` \| ``"info"`` \| ``"info-square"`` \| ``"success"`` \| ``"warning"`` \| ``"warning-alt"``
+
+#### Defined in
+
+[packages/framework/esm-styleguide/src/snackbars/snackbar.component.tsx:28](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/snackbars/snackbar.component.tsx#L28)
+
+___
+
 ### ToastType
 
 Ƭ **ToastType**: ``"error"`` \| ``"info"`` \| ``"info-square"`` \| ``"success"`` \| ``"warning"`` \| ``"warning-alt"``
@@ -4337,6 +4349,28 @@ Displays an inline notification in the UI.
 
 ___
 
+### showSnackbar
+
+▸ **showSnackbar**(`snackbar`): `void`
+
+Displays a snack bar notification in the UI.
+
+#### Parameters
+
+| Name | Type | Description |
+| :------ | :------ | :------ |
+| `snackbar` | [`SnackbarDescriptor`](interfaces/SnackbarDescriptor.md) | The description of the snack bar to display. |
+
+#### Returns
+
+`void`
+
+#### Defined in
+
+[packages/framework/esm-styleguide/src/snackbars/index.tsx:32](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/snackbars/index.tsx#L32)
+
+___
+
 ### showToast
 
 ▸ **showToast**(`toast`): `void`
@@ -4381,7 +4415,7 @@ ___
 
 #### Defined in
 
-[packages/framework/esm-globals/src/events.ts:126](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-globals/src/events.ts#L126)
+[packages/framework/esm-globals/src/events.ts:149](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-globals/src/events.ts#L149)
 
 ___
 
@@ -4407,7 +4441,33 @@ ___
 
 #### Defined in
 
-[packages/framework/esm-globals/src/events.ts:117](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-globals/src/events.ts#L117)
+[packages/framework/esm-globals/src/events.ts:140](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-globals/src/events.ts#L140)
+
+___
+
+### subscribeSnackbarShown
+
+▸ **subscribeSnackbarShown**(`cb`): () => `void`
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `cb` | (`data`: [`ShowSnackbarEvent`](interfaces/ShowSnackbarEvent.md)) => `void` |
+
+#### Returns
+
+`fn`
+
+▸ (): `void`
+
+##### Returns
+
+`void`
+
+#### Defined in
+
+[packages/framework/esm-globals/src/events.ts:166](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-globals/src/events.ts#L166)
 
 ___
 
@@ -4433,7 +4493,7 @@ ___
 
 #### Defined in
 
-[packages/framework/esm-globals/src/events.ts:136](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-globals/src/events.ts#L136)
+[packages/framework/esm-globals/src/events.ts:159](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-globals/src/events.ts#L159)
 
 ___
 

diff --git a/packages/framework/esm-framework/docs/interfaces/ShowSnackBarEvent.md b/packages/framework/esm-framework/docs/interfaces/ShowSnackBarEvent.md
@@ -0,0 +1,103 @@
+[@openmrs/esm-framework](../API.md) / ShowSnackbarEvent
+
+# Interface: ShowSnackbarEvent
+
+## Table of contents
+
+### Properties
+
+- [actionButtonLabel](ShowSnackbarEvent.md#actionbuttonlabel)
+- [isLowContrast](ShowSnackbarEvent.md#islowcontrast)
+- [kind](ShowSnackbarEvent.md#kind)
+- [progressActionLabel](ShowSnackbarEvent.md#progressactionlabel)
+- [subtitle](ShowSnackbarEvent.md#subtitle)
+- [timeoutInMs](ShowSnackbarEvent.md#timeoutinms)
+- [title](ShowSnackbarEvent.md#title)
+
+### Methods
+
+- [onActionButtonClick](ShowSnackbarEvent.md#onactionbuttonclick)
+
+## Properties
+
+### actionButtonLabel
+
+• `Optional` **actionButtonLabel**: `any`
+
+#### Defined in
+
+[packages/framework/esm-globals/src/events.ts:109](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-globals/src/events.ts#L109)
+
+___
+
+### isLowContrast
+
+• `Optional` **isLowContrast**: `boolean`
+
+#### Defined in
+
+[packages/framework/esm-globals/src/events.ts:112](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-globals/src/events.ts#L112)
+
+___
+
+### kind
+
+• `Optional` **kind**: ``"error"`` \| ``"info"`` \| ``"info-square"`` \| ``"success"`` \| ``"warning"`` \| ``"warning-alt"``
+
+#### Defined in
+
+[packages/framework/esm-globals/src/events.ts:101](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-globals/src/events.ts#L101)
+
+___
+
+### progressActionLabel
+
+• `Optional` **progressActionLabel**: `string`
+
+#### Defined in
+
+[packages/framework/esm-globals/src/events.ts:111](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-globals/src/events.ts#L111)
+
+___
+
+### subtitle
+
+• `Optional` **subtitle**: `any`
+
+#### Defined in
+
+[packages/framework/esm-globals/src/events.ts:100](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-globals/src/events.ts#L100)
+
+___
+
+### timeoutInMs
+
+• `Optional` **timeoutInMs**: `number`
+
+#### Defined in
+
+[packages/framework/esm-globals/src/events.ts:113](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-globals/src/events.ts#L113)
+
+___
+
+### title
+
+• **title**: `string`
+
+#### Defined in
+
+[packages/framework/esm-globals/src/events.ts:108](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-globals/src/events.ts#L108)
+
+## Methods
+
+### onActionButtonClick
+
+▸ `Optional` **onActionButtonClick**(): `void`
+
+#### Returns
+
+`void`
+
+#### Defined in
+
+[packages/framework/esm-globals/src/events.ts:110](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-globals/src/events.ts#L110)
diff --git a/packages/framework/esm-framework/docs/interfaces/SnackBarDescriptor.md b/packages/framework/esm-framework/docs/interfaces/SnackBarDescriptor.md
@@ -0,0 +1,109 @@
+[@openmrs/esm-framework](../API.md) / SnackbarDescriptor
+
+# Interface: SnackbarDescriptor
+
+## Hierarchy
+
+- **`SnackbarDescriptor`**
+
+  ↳ [`SnackbarMeta`](SnackbarMeta.md)
+
+## Table of contents
+
+### UI Properties
+
+- [actionButtonLabel](SnackbarDescriptor.md#actionbuttonlabel)
+- [isLowContrast](SnackbarDescriptor.md#islowcontrast)
+- [kind](SnackbarDescriptor.md#kind)
+- [progressActionLabel](SnackbarDescriptor.md#progressactionlabel)
+- [subtitle](SnackbarDescriptor.md#subtitle)
+- [timeoutInMs](SnackbarDescriptor.md#timeoutinms)
+- [title](SnackbarDescriptor.md#title)
+
+### UI Methods
+
+- [onActionButtonClick](SnackbarDescriptor.md#onactionbuttonclick)
+
+## UI Properties
+
+### actionButtonLabel
+
+• `Optional` **actionButtonLabel**: `string`
+
+#### Defined in
+
+[packages/framework/esm-styleguide/src/snackbars/snackbar.component.tsx:14](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/snackbars/snackbar.component.tsx#L14)
+
+___
+
+### isLowContrast
+
+• `Optional` **isLowContrast**: `boolean`
+
+#### Defined in
+
+[packages/framework/esm-styleguide/src/snackbars/snackbar.component.tsx:15](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/snackbars/snackbar.component.tsx#L15)
+
+___
+
+### kind
+
+• `Optional` **kind**: `string`
+
+#### Defined in
+
+[packages/framework/esm-styleguide/src/snackbars/snackbar.component.tsx:16](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/snackbars/snackbar.component.tsx#L16)
+
+___
+
+### progressActionLabel
+
+• `Optional` **progressActionLabel**: `string`
+
+#### Defined in
+
+[packages/framework/esm-styleguide/src/snackbars/snackbar.component.tsx:18](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/snackbars/snackbar.component.tsx#L18)
+
+___
+
+### subtitle
+
+• `Optional` **subtitle**: `string`
+
+#### Defined in
+
+[packages/framework/esm-styleguide/src/snackbars/snackbar.component.tsx:19](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/snackbars/snackbar.component.tsx#L19)
+
+___
+
+### timeoutInMs
+
+• `Optional` **timeoutInMs**: `number`
+
+#### Defined in
+
+[packages/framework/esm-styleguide/src/snackbars/snackbar.component.tsx:20](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/snackbars/snackbar.component.tsx#L20)
+
+___
+
+### title
+
+• **title**: `string`
+
+#### Defined in
+
+[packages/framework/esm-styleguide/src/snackbars/snackbar.component.tsx:21](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/snackbars/snackbar.component.tsx#L21)
+
+## UI Methods
+
+### onActionButtonClick
+
+▸ `Optional` **onActionButtonClick**(): `void`
+
+#### Returns
+
+`void`
+
+#### Defined in
+
+[packages/framework/esm-styleguide/src/snackbars/snackbar.component.tsx:17](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/snackbars/snackbar.component.tsx#L17)