@atlaskit/app-provider 1.5.0 → 1.6.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/app-provider
 
+## 1.6.0
+
+### Minor Changes
+
+- [#98648](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/98648)
+  [`940af9dafa883`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/940af9dafa883) -
+  [ux] Default typography theme changed to modernized behind feature flag
+  `platform-default-typography-modernized`. If testing is successful the change will be available in
+  a later release.
+
 ## 1.5.0
 
 ### Minor Changes

package/dist/cjs/theme-provider.js

@@ -24,10 +24,13 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var defaultThemeSettings = {
-  dark: 'dark',
-  light: 'light',
-  spacing: 'spacing'
+var defaultThemeSettings = function defaultThemeSettings() {
+  return {
+    dark: 'dark',
+    light: 'light',
+    spacing: 'spacing',
+    typography: (0, _platformFeatureFlags.fg)('platform-default-typography-modernized') ? 'typography-modernized' : undefined
+  };
 };
 var ColorModeContext = /*#__PURE__*/(0, _react.createContext)(undefined);
 var SetColorModeContext = /*#__PURE__*/(0, _react.createContext)(undefined);
@@ -118,16 +121,7 @@ function getReconciledColorMode(colorMode) {
 function ThemeProvider(_ref) {
   var children = _ref.children,
     defaultColorMode = _ref.defaultColorMode,
-    _ref$defaultTheme = _ref.defaultTheme,
-    _ref$defaultTheme2 = _ref$defaultTheme === void 0 ? defaultThemeSettings : _ref$defaultTheme,
-    _ref$defaultTheme2$da = _ref$defaultTheme2.dark,
-    dark = _ref$defaultTheme2$da === void 0 ? 'dark' : _ref$defaultTheme2$da,
-    _ref$defaultTheme2$li = _ref$defaultTheme2.light,
-    light = _ref$defaultTheme2$li === void 0 ? 'light' : _ref$defaultTheme2$li,
-    _ref$defaultTheme2$sp = _ref$defaultTheme2.spacing,
-    spacing = _ref$defaultTheme2$sp === void 0 ? 'spacing' : _ref$defaultTheme2$sp,
-    typography = _ref$defaultTheme2.typography,
-    shape = _ref$defaultTheme2.shape;
+    defaultTheme = _ref.defaultTheme;
   var _useState = (0, _react.useState)(defaultColorMode),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     chosenColorMode = _useState2[0],
@@ -136,12 +130,8 @@ function ThemeProvider(_ref) {
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     reconciledColorMode = _useState4[0],
     setReconciledColorMode = _useState4[1];
-  var _useState5 = (0, _react.useState)({
-      dark: dark,
-      light: light,
-      spacing: spacing,
-      typography: typography,
-      shape: shape
+  var _useState5 = (0, _react.useState)(function () {
+      return _objectSpread(_objectSpread({}, defaultThemeSettings()), defaultTheme);
     }),
     _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
     theme = _useState6[0],

package/dist/es2019/theme-provider.js

@@ -2,11 +2,12 @@ import React, { createContext, useCallback, useContext, useEffect, useRef, useSt
 import { bind } from 'bind-event-listener';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { setGlobalTheme } from '@atlaskit/tokens';
-const defaultThemeSettings = {
+const defaultThemeSettings = () => ({
   dark: 'dark',
   light: 'light',
-  spacing: 'spacing'
-};
+  spacing: 'spacing',
+  typography: fg('platform-default-typography-modernized') ? 'typography-modernized' : undefined
+});
 const ColorModeContext = /*#__PURE__*/createContext(undefined);
 const SetColorModeContext = /*#__PURE__*/createContext(undefined);
 const ThemeContext = /*#__PURE__*/createContext(undefined);
@@ -96,23 +97,14 @@ function getReconciledColorMode(colorMode) {
 export function ThemeProvider({
   children,
   defaultColorMode,
-  defaultTheme: {
-    dark = 'dark',
-    light = 'light',
-    spacing = 'spacing',
-    typography,
-    shape
-  } = defaultThemeSettings
+  defaultTheme
 }) {
   const [chosenColorMode, setChosenColorMode] = useState(defaultColorMode);
   const [reconciledColorMode, setReconciledColorMode] = useState(getReconciledColorMode(defaultColorMode));
-  const [theme, setTheme] = useState({
-    dark,
-    light,
-    spacing,
-    typography,
-    shape
-  });
+  const [theme, setTheme] = useState(() => ({
+    ...defaultThemeSettings(),
+    ...defaultTheme
+  }));
   const setColorMode = useCallback(colorMode => {
     setChosenColorMode(colorMode);
     setReconciledColorMode(getReconciledColorMode(colorMode));

package/dist/esm/theme-provider.js

@@ -8,10 +8,13 @@ import React, { createContext, useCallback, useContext, useEffect, useRef, useSt
 import { bind } from 'bind-event-listener';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { setGlobalTheme } from '@atlaskit/tokens';
-var defaultThemeSettings = {
-  dark: 'dark',
-  light: 'light',
-  spacing: 'spacing'
+var defaultThemeSettings = function defaultThemeSettings() {
+  return {
+    dark: 'dark',
+    light: 'light',
+    spacing: 'spacing',
+    typography: fg('platform-default-typography-modernized') ? 'typography-modernized' : undefined
+  };
 };
 var ColorModeContext = /*#__PURE__*/createContext(undefined);
 var SetColorModeContext = /*#__PURE__*/createContext(undefined);
@@ -102,16 +105,7 @@ function getReconciledColorMode(colorMode) {
 export function ThemeProvider(_ref) {
   var children = _ref.children,
     defaultColorMode = _ref.defaultColorMode,
-    _ref$defaultTheme = _ref.defaultTheme,
-    _ref$defaultTheme2 = _ref$defaultTheme === void 0 ? defaultThemeSettings : _ref$defaultTheme,
-    _ref$defaultTheme2$da = _ref$defaultTheme2.dark,
-    dark = _ref$defaultTheme2$da === void 0 ? 'dark' : _ref$defaultTheme2$da,
-    _ref$defaultTheme2$li = _ref$defaultTheme2.light,
-    light = _ref$defaultTheme2$li === void 0 ? 'light' : _ref$defaultTheme2$li,
-    _ref$defaultTheme2$sp = _ref$defaultTheme2.spacing,
-    spacing = _ref$defaultTheme2$sp === void 0 ? 'spacing' : _ref$defaultTheme2$sp,
-    typography = _ref$defaultTheme2.typography,
-    shape = _ref$defaultTheme2.shape;
+    defaultTheme = _ref.defaultTheme;
   var _useState = useState(defaultColorMode),
     _useState2 = _slicedToArray(_useState, 2),
     chosenColorMode = _useState2[0],
@@ -120,12 +114,8 @@ export function ThemeProvider(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     reconciledColorMode = _useState4[0],
     setReconciledColorMode = _useState4[1];
-  var _useState5 = useState({
-      dark: dark,
-      light: light,
-      spacing: spacing,
-      typography: typography,
-      shape: shape
+  var _useState5 = useState(function () {
+      return _objectSpread(_objectSpread({}, defaultThemeSettings()), defaultTheme);
     }),
     _useState6 = _slicedToArray(_useState5, 2),
     theme = _useState6[0],

package/dist/types/theme-provider.d.ts

@@ -47,5 +47,5 @@ interface ThemeProviderProps {
  *
  * @internal
  */
-export declare function ThemeProvider({ children, defaultColorMode, defaultTheme: { dark, light, spacing, typography, shape, }, }: ThemeProviderProps): JSX.Element;
+export declare function ThemeProvider({ children, defaultColorMode, defaultTheme }: ThemeProviderProps): JSX.Element;
 export default ThemeProvider;

package/dist/types-ts4.5/theme-provider.d.ts

@@ -47,5 +47,5 @@ interface ThemeProviderProps {
  *
  * @internal
  */
-export declare function ThemeProvider({ children, defaultColorMode, defaultTheme: { dark, light, spacing, typography, shape, }, }: ThemeProviderProps): JSX.Element;
+export declare function ThemeProvider({ children, defaultColorMode, defaultTheme }: ThemeProviderProps): JSX.Element;
 export default ThemeProvider;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/app-provider",
-	"version": "1.5.0",
+	"version": "1.6.0",
 	"description": "A top level provider for the Design System.",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -95,6 +95,9 @@
 	"platform-feature-flags": {
 		"platform_dst_fix_set_theme_race": {
 			"type": "boolean"
+		},
+		"platform-default-typography-modernized": {
+			"type": "boolean"
 		}
 	}
 }