diff --git a/packages/terra-application/src/application-navigation/private/utility-menu/_UtilityMenu.jsx b/packages/terra-application/src/application-navigation/private/utility-menu/_UtilityMenu.jsx
index f3cd0e0f5..00ec93a23 100644
--- a/packages/terra-application/src/application-navigation/private/utility-menu/_UtilityMenu.jsx
+++ b/packages/terra-application/src/application-navigation/private/utility-menu/_UtilityMenu.jsx
@@ -61,13 +61,6 @@ const propTypes = {
* A configuration object to render an action button for user Config.
*/
userActionConfig: userActionConfigPropType,
- /**
- * @private
- * Given a callback function, menuClosingCallback will return a new function
- * that will ensure that the various menu states are reset before the callback function
- * is executed.
- */
- menuClosingCallback: PropTypes.func,
};
const defaultProps = {
@@ -78,7 +71,7 @@ const utilityMenuSettingsKey = 'terra-application-navigation.utility-menu.settin
const utilityMenuHelpKey = 'terra-application-navigation.utility-menu.help';
const UtilityMenu = ({
- userConfig, hero, onSelectSettings, onSelectHelp, menuClosingCallback, onSelectLogout, utilityItems, id, onSelectUtilityItem, isHeightBounded, intl, userActionConfig,
+ userConfig, hero, onSelectSettings, onSelectHelp, onSelectLogout, utilityItems, id, onSelectUtilityItem, isHeightBounded, intl, userActionConfig,
}) => {
let menuItems = [];
menuItems = utilityItems.map(item => ({
@@ -116,7 +109,6 @@ const UtilityMenu = ({
title={intl.formatMessage({ id: 'terraApplication.navigation.utilityMenu.headerTitle' })}
footerText={intl.formatMessage({ id: 'terraApplication.navigation.utilityMenu.logout' })}
onSelectFooterItem={onSelectLogout}
- menuClosingCallback={menuClosingCallback}
userConfig={userConfig}
userActionConfig={userActionConfig}
customContent={hero}
diff --git a/packages/terra-application/src/application-navigation/private/workspace-layout/WorkspaceLayout.jsx b/packages/terra-application/src/application-navigation/private/workspace-layout/WorkspaceLayout.jsx
index 478dfba08..c25417d43 100644
--- a/packages/terra-application/src/application-navigation/private/workspace-layout/WorkspaceLayout.jsx
+++ b/packages/terra-application/src/application-navigation/private/workspace-layout/WorkspaceLayout.jsx
@@ -6,9 +6,9 @@ import IconPanelRight from 'terra-icon/lib/icon/IconPanelRight';
import IconPanelLeft from 'terra-icon/lib/icon/IconPanelLeft';
import ThemeContext from 'terra-theme-context';
+import { useIntl } from 'react-intl';
import { ActiveBreakpointContext } from '../../../breakpoints';
import ResizeHandle from './ResizeHandle';
-import { ApplicationIntlContext } from '../../../application-intl';
import ApplicationNavigationActionsContext from '../../ApplicationNavigationActionsContext';
import styles from './WorkspaceLayout.module.scss';
@@ -111,7 +111,7 @@ const WorkspaceLayout = ({
skipToCallback,
}) => {
const activeBreakpoint = React.useContext(ActiveBreakpointContext);
- const applicationIntl = React.useContext(ApplicationIntlContext);
+ const applicationIntl = useIntl();
const theme = React.useContext(ThemeContext);
const layoutContainerRef = React.useRef();
diff --git a/packages/terra-application/src/workspace/Workspace.jsx b/packages/terra-application/src/workspace/Workspace.jsx
index 2e26f571d..d1ec5a643 100644
--- a/packages/terra-application/src/workspace/Workspace.jsx
+++ b/packages/terra-application/src/workspace/Workspace.jsx
@@ -7,13 +7,13 @@ import IconSettings from 'terra-icon/lib/icon/IconSettings';
import IconPanelRight from 'terra-icon/lib/icon/IconPanelRight';
import Popup from 'terra-popup';
+import { useIntl } from 'react-intl';
import ActionMenu, {
ActionMenuDivider,
ActionMenuItem,
ActionMenuGroup,
ActionMenuRadio,
} from '../action-menu';
-import { ApplicationIntlContext } from '../application-intl';
import usePortalManager, { getPortalElement } from './shared/usePortalManager';
import WorkspaceButton from './subcomponents/_WorkspaceButton';
@@ -118,7 +118,7 @@ const Workspace = ({
}) => {
const [isMenuOpen, setIsMenuOpen] = useState(false);
const theme = React.useContext(ThemeContext);
- const intl = React.useContext(ApplicationIntlContext);
+ const intl = useIntl();
const sizeMenuRef = useRef();
const [workspaceContainerRef, workspacePortalsRef] = usePortalManager(activeItemKey);
From 14db96a6fa1602a0cbea4de29e595dd7f3a9a84b Mon Sep 17 00:00:00 2001
From: Saad <38024451+sdadn@users.noreply.github.com>
Date: Thu, 25 Apr 2024 09:33:19 -0500
Subject: [PATCH 03/34] updated examples
---
.../terra-dev-site/app/Application.1.app.mdx | 4 +-
.../app/components.2/ApplicationBase.app.mdx | 8 +--
.../ApplicationNavigation.app.mdx | 2 +-
.../app/components.2/ModalManager.app.mdx | 58 +++++++++++++++++++
.../NavigationPromptCheckpoint.app.mdx | 4 +-
.../example/ApplicationBaseExample.jsx | 6 +-
.../DisclosureManagerContext.app.mdx | 4 ++
.../src/terra-dev-site/app/demo/AppPage.jsx | 4 +-
.../app/demo/ModalPresenter.jsx | 4 +-
.../how-to.3/use-translated-strings.app.mdx | 9 +--
.../ApplicationBaseTest.test.jsx | 4 +-
.../private/testOverridesTest.test.jsx | 4 +-
...tionNavigationDisabledPromptsTest.test.jsx | 6 +-
.../ApplicationNavigationTest.test.jsx | 6 +-
.../ApplicationNavigation.test.jsx | 12 ++--
15 files changed, 97 insertions(+), 38 deletions(-)
diff --git a/packages/terra-application/src/terra-dev-site/app/Application.1.app.mdx b/packages/terra-application/src/terra-dev-site/app/Application.1.app.mdx
index 625aa8aac..fbc5bf1fe 100644
--- a/packages/terra-application/src/terra-dev-site/app/Application.1.app.mdx
+++ b/packages/terra-application/src/terra-dev-site/app/Application.1.app.mdx
@@ -98,9 +98,9 @@ Many applications respond to the current active breakpoint to adjust for screen
### Internationalization
-Terra applications must work for many locales, The Application Intl Context provides access to the frameworks i18n APIs.
+Terra applications must work for many locales, `react-intl` should be utilized for i18n api's.
-- [Application Intl Context API](/application/terra-application/contexts/application-intl-context)
+- [react-intl](https://formatjs.io/)
### Theming
diff --git a/packages/terra-application/src/terra-dev-site/app/components.2/ApplicationBase.app.mdx b/packages/terra-application/src/terra-dev-site/app/components.2/ApplicationBase.app.mdx
index 6bf2b01f1..66755eef3 100644
--- a/packages/terra-application/src/terra-dev-site/app/components.2/ApplicationBase.app.mdx
+++ b/packages/terra-application/src/terra-dev-site/app/components.2/ApplicationBase.app.mdx
@@ -20,9 +20,7 @@ import ApplicationBase from 'terra-application/lib/application-base';
### I18n
-ApplicationBase exposes a prop to define the application's locale and dynamically retrieve the translated strings for that locale. Children of ApplicationBase can access translated strings by using [react-intl's](https://github.com/formatjs/formatjs/blob/master/website/docs/react-intl/components.md) provided components or by using the [ApplicationIntlContext](/application/terra-application/contexts/application-intl-context).
-
-Consumers of ApplicationBase should review Terra's [translation aggregation](https://engineering.cerner.com/terra-ui/guides/terra-ui/internationalization/aggregate-translations) instructions to ensure ApplicationBase can retrieve the application's translations successfully.
+ApplicationBase exposes a prop to define the application's locale and dynamically retrieve the translated strings for that locale. Children of ApplicationBase can access translated strings by using react-intl's provided [components](https://formatjs.io/docs/react-intl/components), react-intl's [imperitive API](https://formatjs.io/docs/react-intl/api) or by using the [ApplicationIntlContext](/application/cerner-terra-application/contexts/application-intl-context).
### Theming
@@ -30,6 +28,8 @@ ApplicationBase exposes props to define the application's theme.
ApplicationBase renders a theme context provider around its children. Children can access the current theme by using the [ThemeContext](/application/terra-application/contexts/theme-context).
+
+
### Breakpoints
ApplicationBase renders an [ActiveBreakpointContext.Provider](/application/terra-application/contexts/active-breakpoint-context) around its children. Children can access the current active breakpoint value by using the [ActiveBreakpointContext](/application/terra-application/contexts/active-breakpoint-context).
@@ -59,4 +59,4 @@ ApplicationNavigation renders a [Suspense](https://reactjs.org/docs/code-splitti
### Modal Presentation
-ApplicationBase renders a [ModalManager](/application/terra-application/components/modal-manager) around its children. Children can access modal disclosure APIs by using the [DisclosureManagerContext](/application/terra-application/contexts/disclosure-manager-context).
+ApplicationBase renders a [ModalManager](/application/terra-application/components/modal-manager) around its children. Children can access modal disclosure APIs by using the [DisclosureManagerContext](/application/terra-application/contexts/disclosure-manager-context).
\ No newline at end of file
diff --git a/packages/terra-application/src/terra-dev-site/app/components.2/ApplicationNavigation.app.mdx b/packages/terra-application/src/terra-dev-site/app/components.2/ApplicationNavigation.app.mdx
index 29427ee5d..aae19b9a8 100644
--- a/packages/terra-application/src/terra-dev-site/app/components.2/ApplicationNavigation.app.mdx
+++ b/packages/terra-application/src/terra-dev-site/app/components.2/ApplicationNavigation.app.mdx
@@ -20,7 +20,7 @@ import ApplicationNavigation from 'terra-application/lib/application-navigation'
ApplicationNavigation requires values from the following Contexts:
-* [ApplicationIntlContext](/application/terra-application/contexts/application-intl-context)
+* [react-intl](https://formatjs.io/docs/react-intl/api)
## Props
diff --git a/packages/terra-application/src/terra-dev-site/app/components.2/ModalManager.app.mdx b/packages/terra-application/src/terra-dev-site/app/components.2/ModalManager.app.mdx
index 403baa569..3363210c7 100644
--- a/packages/terra-application/src/terra-dev-site/app/components.2/ModalManager.app.mdx
+++ b/packages/terra-application/src/terra-dev-site/app/components.2/ModalManager.app.mdx
@@ -82,6 +82,64 @@ The provided component will be rendered below the standard ActionHeader and abov
provide additional context to every disclosed component. This component is provided once to the ModalManager instance, not on a per-disclosure basis,
and each component in the disclosure stack will be decorated with the same accessory component.
+### Static Height vs. Dynamic Height
+
+ModalManager was intentionally designed to have static preset heights in order to work in conjunction with Terra content that can adjust responsively using the [terra-responsive-element](https://engineering.cerner.com/terra-ui/components/cerner-terra-core-docs/responsive-element/about), as well as any conditionally positioned UI elements like a [popup](https://engineering.cerner.com/terra-ui/components/cerner-terra-framework-docs/popup/popup), [multi-select dropdown](https://engineering.cerner.com/terra-ui/components/cerner-terra-core-docs/form-select/multi-select), or [date picker](https://engineering.cerner.com/terra-ui/components/cerner-terra-framework-docs/date-picker/date-picker). Having static preset heights allows for Terra to quickly present modal content without requiring extensive browser multiple-render drawing calculations that results in poor application performance.
+
+Some may be used to other libraries that commonly offer simple modals that can adjust the modal's height dynamically based on the content provided, but those situations only work well for when content is designed for a single presentation (i.e. is not responsive), and ones that have no higher z-index layers that require position calculation relative to the base content (i.e. no popups with pointers).
+
+### Creating Modal Content
+
+The ModalManager is intended for content which has regularly composed & designed layouts, including responsive variations. It is very grid-based, so it comes with standard heights and widths to accommodate the highly-structured assembly of content.
+
+When the preset size of the modal's width or height is _larger_ than the available device-screen or viewport (e.g. if you shrink down your window smaller than what the modal size was set to be), at that point the ModalManager will then "stick" near to the edge of the viewport as it's outer size and not flow offscreen. It is recommended to build the inner content with a responsive design, so when the modal is smaller than it’s preset size, the content will then know to adapt and adjust to alternate layouts accordingly to the new maximum available height and/or width as the outer size. If content is not built responsively, or if you intentionally build the content to overflow in one direction, it will then force scrolling inside of the modal. Scrolling is perfectly acceptable, but should be limited to one direction, preferably vertical-only.
+
+The key thing to remember is that the ModalManager, similar to a page layout, works based on the "**outside-in**" layout principal, which allows the _inside_ content to respond when the _outside_ container changes in size. The ModalManager unfortunately cannot simultaneously also follow the "**inside-out**" layout principal, which would mean the _outside_ container height grows or shrinks based on the _inside_ content size. The reason is that the inside content cannot dictate what size it would like to be at the same as as listening for when it no longer has any space remaining, which is required in order to be able to change itself to a new layout, and cannot do both (or at least not without attempting many redraws). Designers are encouraged to create structured and grid based layout designs that work well for the modal layout size options that best utilize space, similar to designing base pages within applications.
+
+### Sizing: Height & Width Options
+
+The ModalManager has two methods of setting the preferred modal height & width. The first method is by choosing from a list of easy shorthand size options that combine a predefined height and width pair, which works standard application screen ratios. The second method is more advanced and provides the ability to choose from a list of grid-based dimensions to set the height and width independently. _(Note: all values used for ModalManager are true pixels and not rem, relative em units.)_
+
+Using the `size` prop within the [disclose argument API](/application/terra-application/contexts/disclosure-manager-context#disclosure-props) allows the consumer to provide a simpler implementation to set the modal preferred dimension, and typically might be used for common application disclosures of similarly sized content. _(Note: `size` should not be provided if `dimensions` are specified.)_
+
+|`size` prop: Shorthand options|pixel dimensions|
+|---|---|
+|`tiny`| w: 320px, h: 240px |
+|`small`| w: 640px, h: 420px |
+|`medium`| w: 960px, h: 600px |
+|**default**| w: 1120px, h: 690px _(modal size if no other details are provided)_ |
+|`large`| w: 1280px, h: 870px |
+|`huge`| w: 1600px, h: 960px |
+|`fullscreen`| w: screen width less ~10px, h: screen height less ~10px |
+
+For application content that needs more specific dimensional control of modal sizes, using the `dimension` prop within the [disclose argument API](/application/terra-application/contexts/disclosure-manager-context#disclose-props) will be the implementation to choose. Consumers supply a simple object that contains both height wand width values: `{ height: '480', width: '600' }`. _(Note: `dimensions` should not be provided if a `size` is specified.)_
+
+|`dimensions` prop: Width options|pixel dimensions|
+|---|---|
+|`width: '320'`| w: 320px, h: -- |
+|`width: '480'`| w: 480px, h: -- |
+|`width: '560'`| w: 560px, h: -- |
+|`width: '640'`| w: 640px, h: -- |
+|`width: '800'`| w: 800px, h: -- |
+|`width: '960'`| w: 960px, h: -- |
+|`width: '1120'`| w: 1120px, h: -- |
+|`width: '1280'`| w: 1280px, h: -- |
+|`width: '1440'`| w: 1440px, h: -- |
+|`width: '1600'`| w: 1600px, h: -- |
+|`width: '1760'`| w: 1760px, h: -- |
+|`width: '1920'`| w: 1920px, h: -- |
+
+|`dimensions` prop: Height options|pixel dimensions|
+|---|---|
+|`height: '240'`| w: --, h: 240px |
+|`height: '420'`| w: --, h: 420px |
+|`height: '600'`| w: --, h: 600px |
+|`height: '690'`| w: --, h: 690px |
+|`height: '780'`| w: --, h: 780px |
+|`height: '870'`| w: --, h: 870px |
+|`height: '960'`| w: --, h: 960px |
+|`height: '1140'`| w: --, h: 1140px |
+
### Example
```jsx
diff --git a/packages/terra-application/src/terra-dev-site/app/components.2/NavigationPromptCheckpoint.app.mdx b/packages/terra-application/src/terra-dev-site/app/components.2/NavigationPromptCheckpoint.app.mdx
index 5d28cae53..45cbcbde6 100644
--- a/packages/terra-application/src/terra-dev-site/app/components.2/NavigationPromptCheckpoint.app.mdx
+++ b/packages/terra-application/src/terra-dev-site/app/components.2/NavigationPromptCheckpoint.app.mdx
@@ -62,12 +62,12 @@ to match the prompt messaging provided by the components within `terra-applicati
```jsx
import React, { useContext, useRef } from 'react';
-import { ApplicationIntlContext } from 'terra-application/lib/application-intl';
+import { useIntl } from 'react-intl';
import { NavigationPromptCheckpoint, getUnsavedChangesPromptOptions } from 'terra-application/lib/navigation-prompt';
const ExampleComponent = () => {
const checkpointRef = useRef();
- const applicationIntl = useContext(ApplicationIntlContext);
+ const applicationIntl = useIntl();
function resolvePrompts() {
checkpointRef.current.resolvePrompts(getUnsavedChangesPromptOptions(applicationIntl)).then(() => { ... });
diff --git a/packages/terra-application/src/terra-dev-site/app/components.2/example/ApplicationBaseExample.jsx b/packages/terra-application/src/terra-dev-site/app/components.2/example/ApplicationBaseExample.jsx
index 1c1131692..7ec14beb6 100644
--- a/packages/terra-application/src/terra-dev-site/app/components.2/example/ApplicationBaseExample.jsx
+++ b/packages/terra-application/src/terra-dev-site/app/components.2/example/ApplicationBaseExample.jsx
@@ -1,5 +1,5 @@
import React, { useState, useContext } from 'react';
-import { ApplicationIntlContext } from 'terra-application/lib/application-intl';
+import { useIntl } from 'react-intl';
import { ThemeContext } from 'terra-application/lib/theme';
import { ActiveBreakpointContext } from 'terra-application/lib/breakpoints';
import ApplicationLoadingOverlay from 'terra-application/lib/application-loading-overlay';
@@ -12,7 +12,7 @@ const ApplicationContentExample = () => {
const [blockUnload, setBlockUnload] = useState(false);
const activeBreakpoint = useContext(ActiveBreakpointContext);
- const applicationIntl = useContext(ApplicationIntlContext);
+ const applicationIntl = useIntl();
if (throwError) {
throw new Error("Testing ApplicationBase's error boundary...");
@@ -82,7 +82,7 @@ const ApplicationContentExample = () => {
};
const ApplicationBaseExample = () => {
- const applicationIntl = useContext(ApplicationIntlContext);
+ const applicationIntl = useIntl();
const theme = React.useContext(ThemeContext);
return (
diff --git a/packages/terra-application/src/terra-dev-site/app/contexts.2/DisclosureManagerContext.app.mdx b/packages/terra-application/src/terra-dev-site/app/contexts.2/DisclosureManagerContext.app.mdx
index 02cc76dd8..5316db8a9 100644
--- a/packages/terra-application/src/terra-dev-site/app/contexts.2/DisclosureManagerContext.app.mdx
+++ b/packages/terra-application/src/terra-dev-site/app/contexts.2/DisclosureManagerContext.app.mdx
@@ -99,6 +99,8 @@ disclosureManager.disclose({
})
```
+### Disclose props
+
`disclose` Argument API:
|Key|Is Required|Value|
@@ -108,6 +110,8 @@ disclosureManager.disclose({
|`dimensions`|optional|An Object containing explicit `height` and `width` values for the disclosure. These values may not be honored due to the disclosure type or the available viewport size. `dimensions` should not be provided if a `size` is specified. Supported `height` values include: `'240'`, `'420'`, `'600'`, `'690'`, `'780'`, `'870'`, `'960'`, `'1140'`. Supported `width` values include: `'320'`, `'480'`, `'560'`, `'640'`, `'800'`, `'960'`, `'1120'`, `'1280'`, `'1440'`, `'1600'`, `'1760'`, `'1920'`.|
|`content`|**required**|An Object containing a key and a component describing the component to be disclosed. See the `content` API below.|
+### Content props
+
`content` Object API:
|Key|Is Required|Value|
diff --git a/packages/terra-application/src/terra-dev-site/app/demo/AppPage.jsx b/packages/terra-application/src/terra-dev-site/app/demo/AppPage.jsx
index 1c53187cb..a6893f4f1 100644
--- a/packages/terra-application/src/terra-dev-site/app/demo/AppPage.jsx
+++ b/packages/terra-application/src/terra-dev-site/app/demo/AppPage.jsx
@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
import classNames from 'classnames/bind';
import { ActiveBreakpointContext } from 'terra-application/lib/breakpoints';
import ApplicationLoadingOverlay from 'terra-application/lib/application-loading-overlay';
-import { ApplicationIntlContext } from 'terra-application/lib/application-intl';
+import { useIntl } from 'react-intl';
import { ThemeContext } from 'terra-application/lib/theme';
import { ApplicationNavigationActionsContext } from 'terra-application/lib/application-navigation';
@@ -23,7 +23,7 @@ const AppPage = ({ pageName }) => {
const [isInitialized, setIsInitialized] = useState(false);
const activeBreakpoint = useContext(ActiveBreakpointContext);
- const applicationIntl = useContext(ApplicationIntlContext);
+ const applicationIntl = useIntl();
const theme = React.useContext(ThemeContext);
const [hasError, setHasError] = useState(false);
diff --git a/packages/terra-application/src/terra-dev-site/app/demo/ModalPresenter.jsx b/packages/terra-application/src/terra-dev-site/app/demo/ModalPresenter.jsx
index 9c56f1866..80152a4d8 100644
--- a/packages/terra-application/src/terra-dev-site/app/demo/ModalPresenter.jsx
+++ b/packages/terra-application/src/terra-dev-site/app/demo/ModalPresenter.jsx
@@ -7,7 +7,7 @@ import classNames from 'classnames/bind';
import Scroll from 'terra-scroll';
import { ActiveBreakpointContext } from 'terra-application/lib/breakpoints';
import ApplicationLoadingOverlay from 'terra-application/lib/application-loading-overlay';
-import { ApplicationIntlContext } from 'terra-application/lib/application-intl';
+import { useIntl } from 'react-intl';
import { DisclosureManagerContext, DisclosureManagerHeaderAdapter } from 'terra-application/lib/disclosure-manager';
import PendingActionToggle from './PendingActionToggle';
@@ -17,7 +17,7 @@ const cx = classNames.bind(styles);
const ModalContent = ({ name, onSubmit }) => {
const activeBreakpoint = useContext(ActiveBreakpointContext);
- const applicationIntl = useContext(ApplicationIntlContext);
+ const applicationIntl = useIntl();
const disclosureManager = useContext(DisclosureManagerContext);
const [hasError, setHasError] = useState(false);
diff --git a/packages/terra-application/src/terra-dev-site/app/how-to.3/use-translated-strings.app.mdx b/packages/terra-application/src/terra-dev-site/app/how-to.3/use-translated-strings.app.mdx
index dd4a1240f..d36195c00 100644
--- a/packages/terra-application/src/terra-dev-site/app/how-to.3/use-translated-strings.app.mdx
+++ b/packages/terra-application/src/terra-dev-site/app/how-to.3/use-translated-strings.app.mdx
@@ -7,15 +7,12 @@ Every child of [ApplicationBase](/application/terra-application/components/appli
application's translated strings. Please review Terra's [recommended consumption guides](https://engineering.cerner.com/terra-ui/guides/terra-ui/internationalization/building-components-which-include-translations)
for more information.
-Additionally, ApplicateBase provides react-intl's APIs through the [ApplicationIntlContext](/application/terra-application/contexts/application-intl-context)
-for consumers seeking a modern Context implementation.
-
```jsx
import React, { useContext } from 'react';
-import { ApplicationIntlContext } from 'terra-application/lib/application-intl';
+import { useIntl } from 'react-intl';
const ExampleComponent = () => {
- const applicationIntl = useContext(ApplicationIntlContext);
+ const applicationIntl = useIntl();
return (
@@ -33,4 +30,4 @@ export default ExampleComponent;
```
> Accessing react-intl's [legacy context value](https://reactjs.org/docs/legacy-context.html) directly is **not recommended**.
-> This API is deprecated and not provided by react-intl v3.x. Terra's recommended usage patterns are supported by versions 2.x and 3.x of react-intl.
+> This API is deprecated and not provided by react-intl v3.x. Terra's recommended usage patterns are supported by versions 5.x of react-intl.
diff --git a/packages/terra-application/src/terra-dev-site/test/application-base/ApplicationBaseTest.test.jsx b/packages/terra-application/src/terra-dev-site/test/application-base/ApplicationBaseTest.test.jsx
index 4365833ce..f675e1564 100644
--- a/packages/terra-application/src/terra-dev-site/test/application-base/ApplicationBaseTest.test.jsx
+++ b/packages/terra-application/src/terra-dev-site/test/application-base/ApplicationBaseTest.test.jsx
@@ -4,7 +4,7 @@ import ApplicationLoadingOverlay from 'terra-application/lib/application-loading
import ApplicationStatusOverlay from 'terra-application/lib/application-status-overlay';
import ApplicationBase from 'terra-application/lib/application-base';
import NavigationPrompt from 'terra-application/lib/navigation-prompt';
-import { ApplicationIntlContext } from 'terra-application/lib/application-intl';
+import { useIntl } from 'react-intl';
import { ThemeContext } from 'terra-application/lib/theme';
const ApplicationContentTest = () => {
@@ -14,7 +14,7 @@ const ApplicationContentTest = () => {
const [showStatusOverlay, setShowStatusOverlay] = useState(false);
const activeBreakpoint = useContext(ActiveBreakpointContext);
- const applicationIntl = useContext(ApplicationIntlContext);
+ const applicationIntl = useIntl();
const theme = useContext(ThemeContext);
if (throwError) {
diff --git a/packages/terra-application/src/terra-dev-site/test/application-base/private/testOverridesTest.test.jsx b/packages/terra-application/src/terra-dev-site/test/application-base/private/testOverridesTest.test.jsx
index e74eec9e1..602ca5457 100644
--- a/packages/terra-application/src/terra-dev-site/test/application-base/private/testOverridesTest.test.jsx
+++ b/packages/terra-application/src/terra-dev-site/test/application-base/private/testOverridesTest.test.jsx
@@ -1,9 +1,9 @@
import React, { useContext } from 'react';
-import { ApplicationIntlContext } from 'terra-application/lib/application-intl';
+import { useIntl } from 'react-intl';
import { ThemeContext } from 'terra-application/lib/theme';
const TestOverrideTest = () => {
- const applicationIntl = useContext(ApplicationIntlContext);
+ const applicationIntl = useIntl();
const theme = useContext(ThemeContext);
return (
+
`;
exports[`ActionMenuHeader should render with minimal props 1`] = `
-
-
- test label
-
-
-
+
`;
diff --git a/packages/terra-application/tests/jest/application-base/__snapshots__/ApplicationBase.test.jsx.snap b/packages/terra-application/tests/jest/application-base/__snapshots__/ApplicationBase.test.jsx.snap
index 6f1611cba..1f5b0718e 100644
--- a/packages/terra-application/tests/jest/application-base/__snapshots__/ApplicationBase.test.jsx.snap
+++ b/packages/terra-application/tests/jest/application-base/__snapshots__/ApplicationBase.test.jsx.snap
@@ -1,228 +1,23 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ApplicationBase should render with all props 1`] = `
-
-
-
-
- placeholder
-
- }
- >
-
-
-
-
-
-
-
- }
- >
-
- content
-
-
-
-
-
-
-
-
-
-
-
-
+
`;
exports[`ApplicationBase should render with minimal props 1`] = `
-
-
-
-
-
-
-
-
-
-
-
- }
- >
-
- content
-
-
-
-
-
-
-
-
-
-
-
-
+
`;
-exports[`ApplicationBase should render with the preferred browser local 1`] = `
-
-
-
-
-
-
-
-
-
-
-
- }
- >
-
- content
-
-
-
-
-
-
-
-
-
-
-
-
-`;
+exports[`ApplicationBase should render with the preferred browser locale 1`] = ``;
exports[`ApplicationBase should render without scroll 1`] = `
-
-
+
+
+
-
+
`;
exports[`ApplicationErrorBoundary Snapshots should render with children 1`] = `
@@ -348,29 +254,41 @@ exports[`ApplicationErrorBoundary Snapshots should render with minimal props 1`]
diff --git a/packages/terra-application/tests/jest/application-intl/__snapshots__/ApplicationIntlProvider.test.jsx.snap b/packages/terra-application/tests/jest/application-intl/__snapshots__/ApplicationIntlProvider.test.jsx.snap
index 6d9e64fa3..b41d61f10 100644
--- a/packages/terra-application/tests/jest/application-intl/__snapshots__/ApplicationIntlProvider.test.jsx.snap
+++ b/packages/terra-application/tests/jest/application-intl/__snapshots__/ApplicationIntlProvider.test.jsx.snap
@@ -1,61 +1,45 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ApplicationIntlProvider Snapshots should render an ApplicationIntlContext.Provider 1`] = `
-
+
@@ -63,5 +47,5 @@ exports[`ApplicationIntlProvider Snapshots should render an ApplicationIntlConte
Test Component
-
+
`;
diff --git a/packages/terra-application/tests/jest/application-navigation/__snapshots__/ApplicationNavigation.test.jsx.snap b/packages/terra-application/tests/jest/application-navigation/__snapshots__/ApplicationNavigation.test.jsx.snap
index 4e0d1b117..fb48bf3af 100644
--- a/packages/terra-application/tests/jest/application-navigation/__snapshots__/ApplicationNavigation.test.jsx.snap
+++ b/packages/terra-application/tests/jest/application-navigation/__snapshots__/ApplicationNavigation.test.jsx.snap
@@ -9,7 +9,7 @@ exports[`ApplicationNavigation should render default element 1`] = `
-
+
}
/>
-
+
@@ -99,7 +99,7 @@ exports[`ApplicationNavigation should render with all props 1`] = `
-
+
-
+
diff --git a/packages/terra-application/tests/jest/application-navigation/private/__snapshots__/ApplicationNavigation.test.jsx.snap b/packages/terra-application/tests/jest/application-navigation/private/__snapshots__/ApplicationNavigation.test.jsx.snap
index e52c97759..276ddcacc 100644
--- a/packages/terra-application/tests/jest/application-navigation/private/__snapshots__/ApplicationNavigation.test.jsx.snap
+++ b/packages/terra-application/tests/jest/application-navigation/private/__snapshots__/ApplicationNavigation.test.jsx.snap
@@ -1,38 +1,17 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ApplicationNavigation correctly applies the theme context className 1`] = `
-
+
-
-
+
-
-
+
@@ -306,7 +307,7 @@ exports[`ApplicationNavigation should render default element 1`] = `
-
-
@@ -380,7 +380,7 @@ exports[`ApplicationNavigation should render with prop data at large breakpoint
-
-
my test hero
}
- menuClosingCallback={[Function]}
onSelectHelp={[Function]}
onSelectLogout={[Function]}
onSelectSettings={[Function]}
@@ -562,14 +561,13 @@ exports[`ApplicationNavigation should render with prop data at medium breakpoint
-
my test hero
}
- menuClosingCallback={[Function]}
navigationItems={
Array [
Object {
@@ -619,7 +617,7 @@ exports[`ApplicationNavigation should render with prop data at medium breakpoint
-
-
my test hero
}
- menuClosingCallback={[Function]}
onSelectHelp={[Function]}
onSelectLogout={[Function]}
onSelectSettings={[Function]}
diff --git a/packages/terra-application/tests/jest/application-navigation/private/common/__snapshots__/PopupMenu.test.jsx.snap b/packages/terra-application/tests/jest/application-navigation/private/common/__snapshots__/PopupMenu.test.jsx.snap
index 325abee4e..baa3c3205 100644
--- a/packages/terra-application/tests/jest/application-navigation/private/common/__snapshots__/PopupMenu.test.jsx.snap
+++ b/packages/terra-application/tests/jest/application-navigation/private/common/__snapshots__/PopupMenu.test.jsx.snap
@@ -6,7 +6,7 @@ exports[`PopupMenu should render default element 1`] = `
fill={false}
footer={}
header={
-
}
@@ -51,7 +51,7 @@ exports[`PopupMenu should render prop data 1`] = `
/>
}
header={
-
@@ -111,7 +111,7 @@ exports[`PopupMenu should render with height bounded 1`] = `
fill={true}
footer={}
header={
-
diff --git a/packages/terra-application/tests/jest/application-navigation/private/common/__snapshots__/PopupMenuUser.test.jsx.snap b/packages/terra-application/tests/jest/application-navigation/private/common/__snapshots__/PopupMenuUser.test.jsx.snap
index d93f869df..94935ea9e 100644
--- a/packages/terra-application/tests/jest/application-navigation/private/common/__snapshots__/PopupMenuUser.test.jsx.snap
+++ b/packages/terra-application/tests/jest/application-navigation/private/common/__snapshots__/PopupMenuUser.test.jsx.snap
@@ -10,7 +10,7 @@ exports[`PopupMenuUser should render default element 1`] = `
-
-
@@ -63,7 +62,7 @@ exports[`DrawerMenuUser should render with large variant 1`] = `
-
@@ -113,7 +111,7 @@ exports[`DrawerMenuUser should render with small variant 1`] = `
-
diff --git a/packages/terra-application/tests/jest/application-navigation/private/header/__snapshots__/CompactHeader.test.jsx.snap b/packages/terra-application/tests/jest/application-navigation/private/header/__snapshots__/CompactHeader.test.jsx.snap
index 7090a8a96..9f2c492b4 100644
--- a/packages/terra-application/tests/jest/application-navigation/private/header/__snapshots__/CompactHeader.test.jsx.snap
+++ b/packages/terra-application/tests/jest/application-navigation/private/header/__snapshots__/CompactHeader.test.jsx.snap
@@ -1,62 +1,46 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`CompactHeader should render default element 1`] = `
-
+
-
+
`;
exports[`CompactHeader should render title element 1`] = `
-
-
+
`;
exports[`CompactHeader should render with function callbacks 1`] = `
-
-
-
+
-
+
`;
exports[`CompactHeader should render with ids for navigation and extension items 1`] = `
-
-
-
+
-
+
`;
exports[`CompactHeader should render with menu callback 1`] = `
-
-
+
`;
exports[`CompactHeader should render with skip callback 1`] = `
-
-
+
`;
diff --git a/packages/terra-application/tests/jest/application-navigation/private/header/__snapshots__/Header.test.jsx.snap b/packages/terra-application/tests/jest/application-navigation/private/header/__snapshots__/Header.test.jsx.snap
index 8744494ad..95edded34 100644
--- a/packages/terra-application/tests/jest/application-navigation/private/header/__snapshots__/Header.test.jsx.snap
+++ b/packages/terra-application/tests/jest/application-navigation/private/header/__snapshots__/Header.test.jsx.snap
@@ -1,61 +1,45 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Header should render default element 1`] = `
-
+
-
+
-
+
-
+
`;
exports[`Header should render title element 1`] = `
-
-
+
-
+