[terra-application] Add theme density support to Terra Application an…

…d Dev Site

packages/terra-application/CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Changed
+  * Added support for theme data density.
+
 ## 1.56.0 - (September 19, 2023)
 
 * Changed

packages/terra-application/src/application-base/ApplicationBase.jsx

@@ -65,6 +65,10 @@ const propTypes = {
    * The name of the theme to apply to the application using terra-theme-provider.
    */
   themeName: PropTypes.string,
+  /**
+   * The name of the theme to apply to the application using terra-theme-provider.
+   */
+  themeDensity: PropTypes.string,
   /**
    * By default, the elements rendered by ApplicationBase are fit to the Application's parent using 100% height.
    * If `fitToParentIsDisabled` is provided, the Application will render at its intrinsic content height and
@@ -86,7 +90,7 @@ const propTypes = {
 };
 
 const ApplicationBase = ({
-  locale, customTranslatedMessages, translationsLoadingPlaceholder, themeName, fitToParentIsDisabled, children, unloadPromptIsDisabled, noScroll,
+  locale, customTranslatedMessages, translationsLoadingPlaceholder, themeName, themeDensity, fitToParentIsDisabled, children, unloadPromptIsDisabled, noScroll,
 }) => {
   const registeredPromptsRef = useRef();
 
@@ -122,11 +126,12 @@ const ApplicationBase = ({
     // If the theme class name is undefined or an empty string, that indicates we have the root theme and should apply the root theme name.
     name: themeOverride || themeName || rootThemeName,
     className: themeOverride || themeName,
-  }), [themeOverride, themeName]);
+    density: themeDensity || themeConfig?.density,
+  }), [themeOverride, themeName, themeDensity]);
 
   return (
     <div data-terra-application-base className={cx('application-base', { fill: !fitToParentIsDisabled })}>
-      <ThemeProvider themeName={themeName}>
+      <ThemeProvider themeName={theme.className} density={theme.density}>
         <ThemeContextProvider theme={theme}>
           <Base
             customMessages={customTranslatedMessages}

packages/terra-application/tests/jest/application-base/ApplicationBase.test.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-
 import ApplicationBase from '../../../src/application-base/ApplicationBase';
 
 describe('ApplicationBase', () => {
@@ -44,4 +43,34 @@ describe('ApplicationBase', () => {
     ));
     expect(wrapper).toMatchSnapshot();
   });
+
+  it('should render with theme and density', () => {
+    const wrapper = shallow((
+      <ApplicationBase themeName="test-theme" themeDensity="compact">
+        <div>content</div>
+      </ApplicationBase>
+    ));
+
+    const themeProvider = wrapper.find('ThemeProvider');
+    expect(themeProvider.props().themeName).toBe('test-theme');
+    expect(themeProvider.props().density).toBe('compact');
+
+    const themeContext = wrapper.find('ThemeContextProvider');
+    expect(themeContext.props().theme).toStrictEqual({ name: 'test-theme', className: 'test-theme', density: 'compact' });
+  });
+
+  it('should render with density', () => {
+    const wrapper = shallow((
+      <ApplicationBase themeDensity="compact">
+        <div>content</div>
+      </ApplicationBase>
+    ));
+
+    const themeProvider = wrapper.find('ThemeProvider');
+    expect(themeProvider.props().themeName).toBeUndefined();
+    expect(themeProvider.props().density).toBe('compact');
+
+    const themeContext = wrapper.find('ThemeContextProvider');
+    expect(themeContext.props().theme).toStrictEqual({ name: 'terra-default-theme', className: undefined, density: 'compact' });
+  });
 });

packages/terra-application/tests/jest/application-base/__snapshots__/ApplicationBase.test.jsx.snap

@@ -12,6 +12,7 @@ exports[`ApplicationBase should render with all props 1`] = `
       theme={
         Object {
           "className": "test-theme",
+          "density": undefined,
           "name": "test-theme",
         }
       }
@@ -63,6 +64,61 @@ exports[`ApplicationBase should render with all props 1`] = `
 </div>
 `;
 
+exports[`ApplicationBase should render with density 1`] = `
+<div
+  className="application-base fill"
+  data-terra-application-base={true}
+>
+  <ThemeProvider
+    density="compact"
+  >
+    <ThemeContextProvider
+      theme={
+        Object {
+          "className": undefined,
+          "density": "compact",
+          "name": "terra-default-theme",
+        }
+      }
+    >
+      <Base
+        customMessages={Object {}}
+        locale="en"
+        strictMode={false}
+        throwOnI18nLoadError={true}
+      >
+        <InjectIntl(ApplicationErrorBoundary)>
+          <InjectIntl(Component)>
+            <ActiveBreakpointProvider>
+              <withPromptRegistration(NavigationPromptCheckpoint)
+                onPromptChange={[Function]}
+              >
+                <ApplicationLoadingOverlayProvider>
+                  <ApplicationStatusOverlayProvider>
+                    <Suspense
+                      fallback={
+                        <ApplicationLoadingOverlay
+                          backgroundStyle="clear"
+                          isOpen={true}
+                        />
+                      }
+                    >
+                      <div>
+                        content
+                      </div>
+                    </Suspense>
+                  </ApplicationStatusOverlayProvider>
+                </ApplicationLoadingOverlayProvider>
+              </withPromptRegistration(NavigationPromptCheckpoint)>
+            </ActiveBreakpointProvider>
+          </InjectIntl(Component)>
+        </InjectIntl(ApplicationErrorBoundary)>
+      </Base>
+    </ThemeContextProvider>
+  </ThemeProvider>
+</div>
+`;
+
 exports[`ApplicationBase should render with minimal props 1`] = `
 <div
   className="application-base fill"
@@ -73,6 +129,7 @@ exports[`ApplicationBase should render with minimal props 1`] = `
       theme={
         Object {
           "className": undefined,
+          "density": undefined,
           "name": "terra-default-theme",
         }
       }
@@ -125,6 +182,7 @@ exports[`ApplicationBase should render with the preferred browser local 1`] = `
       theme={
         Object {
           "className": undefined,
+          "density": undefined,
           "name": "terra-default-theme",
         }
       }
@@ -177,6 +235,7 @@ exports[`ApplicationBase should render without scroll 1`] = `
       theme={
         Object {
           "className": undefined,
+          "density": undefined,
           "name": "terra-default-theme",
         }
       }

packages/terra-dev-site/CHANGELOG.md

@@ -1,5 +1,8 @@
 # Changelog
 
+* Changed
+  * Added support for theme data density.
+
 ## Unreleased
 
 ## 7.11.0 - (September 19, 2023)

packages/terra-dev-site/src/modals/_SettingsModal.jsx

@@ -15,9 +15,11 @@ const cx = classNamesBind.bind(styles);
 
 const SettingsModal = () => {
   const appSettings = React.useContext(AppSettingsContext);
-  const [state, setState] = useState({ locale: appSettings.currentLocale, theme: appSettings.currentTheme, direction: appSettings.currentDirection });
+  const [state, setState] = useState({
+    locale: appSettings.currentLocale, theme: appSettings.currentTheme, density: appSettings.currentDensity, direction: appSettings.currentDirection,
+  });
   const {
-    locale, theme, direction,
+    locale, theme, density, direction,
   } = state;
   const { locales, themes, directions } = appSettings;
   const disclosureManager = React.useContext(DisclosureManagerContext);
@@ -41,6 +43,7 @@ const SettingsModal = () => {
                   appSettings.onUpdate({
                     locale,
                     theme,
+                    density,
                     direction,
                   });
                   disclosureManager.dismiss();
@@ -74,6 +77,7 @@ const SettingsModal = () => {
                 setState({
                   locale: event.currentTarget.value,
                   theme,
+                  density,
                   direction,
                 });
               }}
@@ -95,13 +99,34 @@ const SettingsModal = () => {
                 setState({
                   locale,
                   theme: event.currentTarget.value,
+                  density,
                   direction,
                 });
               }}
               options={themes.map(value => ({ value, display: value }))}
             />
           </Field>
         ) : undefined}
+        <Field
+          label="Density"
+          htmlFor="terra-dev-site-density-select"
+        >
+          <NativeSelect
+            isFilterStyle
+            ariaLabel="Density"
+            id="terra-dev-site-density-select"
+            value={density}
+            onChange={event => {
+              setState({
+                locale,
+                theme,
+                density: event.currentTarget.value,
+                direction,
+              });
+            }}
+            options={[{ value: 'compact', display: 'compact' }, { value: 'comfortable', display: 'comfortable' }, { value: 'spacious', display: 'spacious' }]}
+          />
+        </Field>
         {directions.length > 1 ? (
           <Field
             label="Direction"

packages/terra-dev-site/src/site/_AppSettingsProvider.jsx

@@ -47,12 +47,14 @@ const AppSettingsProvider = ({ settingsConfig, children }) => {
   const {
     defaultLocale = 'en',
     defaultTheme = defaultThemeName,
+    defaultDensity = themesConfig.density,
     defaultDirection = 'ltr',
   } = settingsConfig;
 
   const [currentLocale, setCurrentLocale] = useState(defaultLocale);
   const [currentDirection, setCurrentDirection] = useState(defaultDirection);
   const [currentTheme, setCurrentTheme] = useState(defaultTheme);
+  const [currentDensity, setCurrentDensity] = useState(defaultDensity);
 
   /**
    * Place settings on dom
@@ -74,7 +76,7 @@ const AppSettingsProvider = ({ settingsConfig, children }) => {
      * Handle setting update and store new settings in state.
      * @param {*} newSettings
      */
-    const onUpdate = ({ locale, theme, direction }) => {
+    const onUpdate = ({ locale, theme, density, direction }) => {
       if (locale) {
         setCurrentLocale(locale);
       }
@@ -83,6 +85,10 @@ const AppSettingsProvider = ({ settingsConfig, children }) => {
         setCurrentTheme(theme);
       }
 
+      if (density) {
+        setCurrentDensity(density);
+      }
+
       if (direction) {
         setCurrentDirection(direction);
       }
@@ -92,13 +98,14 @@ const AppSettingsProvider = ({ settingsConfig, children }) => {
       locales,
       currentLocale,
       currentTheme,
+      currentDensity,
       currentDirection,
       directions: ['ltr', 'rtl'],
       themes,
       currentThemeClassName: themesMap[currentTheme],
       onUpdate,
     });
-  }, [currentLocale, currentTheme, currentDirection]);
+  }, [currentLocale, currentTheme, currentDensity, currentDirection]);
 
   return (
     <AppSettingsContext.Provider value={appSettings}>

packages/terra-dev-site/src/site/_DevSiteApplicationBase.jsx

@@ -18,12 +18,13 @@ const propTypes = {
 
 const DevSiteApplicationContainer = ({ children, ApplicationBase }) => {
   const isRaw = useRouteMatch('/raw');
-  const { currentLocale, currentThemeClassName } = React.useContext(AppSettingsContext);
+  const { currentLocale, currentThemeClassName, currentDensity } = React.useContext(AppSettingsContext);
   const AppBase = ApplicationBase || TerraApplicationBase;
   return (
     <AppBase
       locale={currentLocale}
       themeName={currentThemeClassName}
+      themeDensity={currentDensity}
       themeIsGlobal
       unloadPromptIsDisabled={!!isRaw}
     >

packages/terra-dev-site/tests/jest/site/AppSettingsProvider.test.jsx

@@ -18,6 +18,7 @@ describe('ThemeContextProvider', () => {
       const config = {
         defaultLocale: 'es',
         defaultTheme: 'my theme',
+        defaultDensity: 'compact',
         defaultDirection: 'rtl',
       };
       const wrapper = shallow((

packages/terra-dev-site/tests/jest/site/__snapshots__/AppSettingsProvider.test.jsx.snap

@@ -4,6 +4,7 @@ exports[`ThemeContextProvider Snapshots should render with default config specif
 <ContextProvider
   value={
     Object {
+      "currentDensity": "compact",
       "currentDirection": "rtl",
       "currentLocale": "es",
       "currentTheme": "my theme",
@@ -30,6 +31,7 @@ exports[`ThemeContextProvider Snapshots should render with no config 1`] = `
 <ContextProvider
   value={
     Object {
+      "currentDensity": undefined,
       "currentDirection": "ltr",
       "currentLocale": "en",
       "currentTheme": "terra-default-theme",