@atlaskit/modal-dialog 12.11.0 → 12.12.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/modal-dialog
 
+## 12.12.0
+
+### Minor Changes
+
+- [#89943](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/89943) [`9e8e7fd1a601`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9e8e7fd1a601) - [ux] Internal changes to typography, small visual change to modal title.
+
+## 12.11.1
+
+### Patch Changes
+
+- [#94316](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/94316) [`35fd5ed8e1d7`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/35fd5ed8e1d7) - Upgrading internal dependency `bind-event-listener` to `@^3.0.0`
+
 ## 12.11.0
 
 ### Minor Changes

package/dist/cjs/internal/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.width = exports.verticalOffset = exports.titleIconMargin = exports.textColor = exports.padding = exports.keylineHeight = exports.keylineColor = exports.iconColor = exports.gutter = exports.borderRadius = void 0;
+exports.width = exports.verticalOffset = exports.textColor = exports.padding = exports.keylineHeight = exports.keylineColor = exports.iconColor = exports.gutter = exports.borderRadius = void 0;
 var _colors = require("@atlaskit/theme/colors");
 var _constants = require("@atlaskit/theme/constants");
 var width = exports.width = {
@@ -21,7 +21,6 @@ var gridSize = (0, _constants.gridSize)();
 var borderRadius = exports.borderRadius = (0, _constants.borderRadius)();
 var verticalOffset = exports.verticalOffset = gridSize * 2;
 var padding = exports.padding = gridSize * 3;
-var titleIconMargin = exports.titleIconMargin = gridSize;
 var keylineHeight = exports.keylineHeight = 2;
 var keylineColor = exports.keylineColor = "var(--ds-border, ".concat(_colors.N30, ")");
 var textColor = exports.textColor = "var(--ds-text, ".concat(_colors.N900, ")");

package/dist/cjs/modal-title.js

@@ -12,19 +12,12 @@ var _hooks = require("./hooks");
 var _constants = require("./internal/constants");
 /** @jsx jsx */
 
-var fontSize = 20;
-var lineHeight = 1;
-var adjustedLineHeight = 1.2;
 var titleStyles = (0, _react.css)({
   display: 'flex',
   minWidth: 0,
   margin: "var(--ds-space-0, 0px)",
-  alignItems: 'center',
-  fontSize: "var(--ds-font-size-300, 20px)",
-  fontStyle: 'inherit',
-  fontWeight: "var(--ds-font-weight-medium, 500)",
-  letterSpacing: "-0.008em",
-  lineHeight: lineHeight
+  gap: "var(--ds-space-100, 8px)",
+  font: "var(--ds-font-heading-medium, normal 500 20px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
 });
 var textStyles = (0, _react.css)({
   minWidth: 0,
@@ -37,35 +30,18 @@ var textStyles = (0, _react.css)({
   wordWrap: 'break-word'
 });
 var iconStyles = (0, _react.css)({
-  flex: '0 0 auto',
-  alignSelf: 'start',
-  marginInlineEnd: "".concat(_constants.titleIconMargin, "px")
+  flex: '0 0 auto'
 });
-
-/**
- * When the title is truncated (not multi-line), we adjust the
- * line height to avoid cropping the descenders. This removes
- * the extra spacing that we get from that adjustment.
- */
-var lineHeightOffset = fontSize - fontSize * adjustedLineHeight;
 var truncatedTextStyles = (0, _react.css)({
-  lineHeight: adjustedLineHeight,
-  marginBlockEnd: "".concat(lineHeightOffset / 2, "px"),
-  marginBlockStart: "".concat(lineHeightOffset / 2, "px"),
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap'
 });
-var truncatedTextIconStyles = (0, _react.css)({
-  lineHeight: 1.2,
-  marginBlockEnd: "".concat(lineHeightOffset / 2, "px")
-});
 var TitleIcon = function TitleIcon(_ref) {
-  var appearance = _ref.appearance,
-    isMultiline = _ref.isMultiline;
+  var appearance = _ref.appearance;
   var Icon = appearance === 'danger' ? _error.default : _warning.default;
   return (0, _react.jsx)("span", {
-    css: [iconStyles, !isMultiline && truncatedTextIconStyles]
+    css: iconStyles
   }, (0, _react.jsx)(Icon, {
     label: appearance,
     primaryColor: _constants.iconColor[appearance]
@@ -94,8 +70,7 @@ var ModalTitle = function ModalTitle(props) {
     css: titleStyles,
     "data-testid": testId
   }, appearance && (0, _react.jsx)(TitleIcon, {
-    appearance: appearance,
-    isMultiline: isMultiline
+    appearance: appearance
   }), (0, _react.jsx)("span", {
     id: titleId,
     css: [textStyles, !isMultiline && truncatedTextStyles],

package/dist/cjs/modal-wrapper.js

@@ -95,7 +95,7 @@ var ModalWrapper = function ModalWrapper(props) {
     action: 'closed',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "12.11.0"
+    packageVersion: "12.12.0"
   });
   var onBlanketClicked = (0, _react.useCallback)(function (e) {
     if (shouldCloseOnOverlayClick) {

package/dist/es2019/internal/constants.js

@@ -17,7 +17,6 @@ const gridSize = getGridSize();
 export const borderRadius = getBorderRadius();
 export const verticalOffset = gridSize * 2;
 export const padding = gridSize * 3;
-export const titleIconMargin = gridSize;
 export const keylineHeight = 2;
 export const keylineColor = `var(--ds-border, ${N30})`;
 export const textColor = `var(--ds-text, ${N900})`;

package/dist/es2019/modal-title.js

@@ -4,20 +4,13 @@ import { css, jsx } from '@emotion/react';
 import ErrorIcon from '@atlaskit/icon/glyph/error';
 import WarningIcon from '@atlaskit/icon/glyph/warning';
 import { useModal } from './hooks';
-import { iconColor, titleIconMargin } from './internal/constants';
-const fontSize = 20;
-const lineHeight = 1;
-const adjustedLineHeight = 1.2;
+import { iconColor } from './internal/constants';
 const titleStyles = css({
   display: 'flex',
   minWidth: 0,
   margin: "var(--ds-space-0, 0px)",
-  alignItems: 'center',
-  fontSize: "var(--ds-font-size-300, 20px)",
-  fontStyle: 'inherit',
-  fontWeight: "var(--ds-font-weight-medium, 500)",
-  letterSpacing: `-0.008em`,
-  lineHeight: lineHeight
+  gap: "var(--ds-space-100, 8px)",
+  font: "var(--ds-font-heading-medium, normal 500 20px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
 });
 const textStyles = css({
   minWidth: 0,
@@ -30,36 +23,19 @@ const textStyles = css({
   wordWrap: 'break-word'
 });
 const iconStyles = css({
-  flex: '0 0 auto',
-  alignSelf: 'start',
-  marginInlineEnd: `${titleIconMargin}px`
+  flex: '0 0 auto'
 });
-
-/**
- * When the title is truncated (not multi-line), we adjust the
- * line height to avoid cropping the descenders. This removes
- * the extra spacing that we get from that adjustment.
- */
-const lineHeightOffset = fontSize - fontSize * adjustedLineHeight;
 const truncatedTextStyles = css({
-  lineHeight: adjustedLineHeight,
-  marginBlockEnd: `${lineHeightOffset / 2}px`,
-  marginBlockStart: `${lineHeightOffset / 2}px`,
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap'
 });
-const truncatedTextIconStyles = css({
-  lineHeight: 1.2,
-  marginBlockEnd: `${lineHeightOffset / 2}px`
-});
 const TitleIcon = ({
-  appearance,
-  isMultiline
+  appearance
 }) => {
   const Icon = appearance === 'danger' ? ErrorIcon : WarningIcon;
   return jsx("span", {
-    css: [iconStyles, !isMultiline && truncatedTextIconStyles]
+    css: iconStyles
   }, jsx(Icon, {
     label: appearance,
     primaryColor: iconColor[appearance]
@@ -90,8 +66,7 @@ const ModalTitle = props => {
     css: titleStyles,
     "data-testid": testId
   }, appearance && jsx(TitleIcon, {
-    appearance: appearance,
-    isMultiline: isMultiline
+    appearance: appearance
   }), jsx("span", {
     id: titleId,
     css: [textStyles, !isMultiline && truncatedTextStyles],

package/dist/es2019/modal-wrapper.js

@@ -80,7 +80,7 @@ const ModalWrapper = props => {
     action: 'closed',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "12.11.0"
+    packageVersion: "12.12.0"
   });
   const onBlanketClicked = useCallback(e => {
     if (shouldCloseOnOverlayClick) {

package/dist/esm/internal/constants.js

@@ -17,7 +17,6 @@ var gridSize = getGridSize();
 export var borderRadius = getBorderRadius();
 export var verticalOffset = gridSize * 2;
 export var padding = gridSize * 3;
-export var titleIconMargin = gridSize;
 export var keylineHeight = 2;
 export var keylineColor = "var(--ds-border, ".concat(N30, ")");
 export var textColor = "var(--ds-text, ".concat(N900, ")");

package/dist/esm/modal-title.js

@@ -4,20 +4,13 @@ import { css, jsx } from '@emotion/react';
 import ErrorIcon from '@atlaskit/icon/glyph/error';
 import WarningIcon from '@atlaskit/icon/glyph/warning';
 import { useModal } from './hooks';
-import { iconColor, titleIconMargin } from './internal/constants';
-var fontSize = 20;
-var lineHeight = 1;
-var adjustedLineHeight = 1.2;
+import { iconColor } from './internal/constants';
 var titleStyles = css({
   display: 'flex',
   minWidth: 0,
   margin: "var(--ds-space-0, 0px)",
-  alignItems: 'center',
-  fontSize: "var(--ds-font-size-300, 20px)",
-  fontStyle: 'inherit',
-  fontWeight: "var(--ds-font-weight-medium, 500)",
-  letterSpacing: "-0.008em",
-  lineHeight: lineHeight
+  gap: "var(--ds-space-100, 8px)",
+  font: "var(--ds-font-heading-medium, normal 500 20px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
 });
 var textStyles = css({
   minWidth: 0,
@@ -30,35 +23,18 @@ var textStyles = css({
   wordWrap: 'break-word'
 });
 var iconStyles = css({
-  flex: '0 0 auto',
-  alignSelf: 'start',
-  marginInlineEnd: "".concat(titleIconMargin, "px")
+  flex: '0 0 auto'
 });
-
-/**
- * When the title is truncated (not multi-line), we adjust the
- * line height to avoid cropping the descenders. This removes
- * the extra spacing that we get from that adjustment.
- */
-var lineHeightOffset = fontSize - fontSize * adjustedLineHeight;
 var truncatedTextStyles = css({
-  lineHeight: adjustedLineHeight,
-  marginBlockEnd: "".concat(lineHeightOffset / 2, "px"),
-  marginBlockStart: "".concat(lineHeightOffset / 2, "px"),
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap'
 });
-var truncatedTextIconStyles = css({
-  lineHeight: 1.2,
-  marginBlockEnd: "".concat(lineHeightOffset / 2, "px")
-});
 var TitleIcon = function TitleIcon(_ref) {
-  var appearance = _ref.appearance,
-    isMultiline = _ref.isMultiline;
+  var appearance = _ref.appearance;
   var Icon = appearance === 'danger' ? ErrorIcon : WarningIcon;
   return jsx("span", {
-    css: [iconStyles, !isMultiline && truncatedTextIconStyles]
+    css: iconStyles
   }, jsx(Icon, {
     label: appearance,
     primaryColor: iconColor[appearance]
@@ -87,8 +63,7 @@ var ModalTitle = function ModalTitle(props) {
     css: titleStyles,
     "data-testid": testId
   }, appearance && jsx(TitleIcon, {
-    appearance: appearance,
-    isMultiline: isMultiline
+    appearance: appearance
   }), jsx("span", {
     id: titleId,
     css: [textStyles, !isMultiline && truncatedTextStyles],

package/dist/esm/modal-wrapper.js

@@ -85,7 +85,7 @@ var ModalWrapper = function ModalWrapper(props) {
     action: 'closed',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "12.11.0"
+    packageVersion: "12.12.0"
   });
   var onBlanketClicked = useCallback(function (e) {
     if (shouldCloseOnOverlayClick) {

package/dist/types/internal/constants.d.ts

@@ -12,7 +12,6 @@ export declare const gutter = 60;
 export declare const borderRadius: number;
 export declare const verticalOffset: number;
 export declare const padding: number;
-export declare const titleIconMargin: number;
 export declare const keylineHeight = 2;
 export declare const keylineColor: "var(--ds-border)";
 export declare const textColor: "var(--ds-text)";

package/dist/types-ts4.5/internal/constants.d.ts

@@ -12,7 +12,6 @@ export declare const gutter = 60;
 export declare const borderRadius: number;
 export declare const verticalOffset: number;
 export declare const padding: number;
-export declare const titleIconMargin: number;
 export declare const keylineHeight = 2;
 export declare const keylineColor: "var(--ds-border)";
 export declare const textColor: "var(--ds-text)";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/modal-dialog",
-  "version": "12.11.0",
+  "version": "12.12.0",
   "description": "A modal dialog displays content that requires user interaction, in a layer above the page.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -29,7 +29,7 @@
     "watch": "tsc --watch --noEmit --project './tsconfig.json'"
   },
   "dependencies": {
-    "@atlaskit/analytics-next": "^9.2.0",
+    "@atlaskit/analytics-next": "^9.3.0",
     "@atlaskit/blanket": "^13.1.0",
     "@atlaskit/codemod-utils": "^4.2.0",
     "@atlaskit/ds-lib": "^2.3.0",
@@ -39,12 +39,12 @@
     "@atlaskit/motion": "^1.5.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
     "@atlaskit/portal": "^4.4.0",
-    "@atlaskit/primitives": "^5.5.0",
+    "@atlaskit/primitives": "^5.6.0",
     "@atlaskit/theme": "^12.7.0",
-    "@atlaskit/tokens": "^1.43.0",
+    "@atlaskit/tokens": "^1.44.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
-    "bind-event-listener": "^2.1.1",
+    "bind-event-listener": "^3.0.0",
     "raf-schd": "^4.0.3",
     "react-focus-lock": "^2.9.5",
     "react-scrolllock": "^5.0.1",
@@ -58,13 +58,13 @@
     "@af/integration-testing": "*",
     "@af/visual-regression": "*",
     "@atlaskit/button": "*",
-    "@atlaskit/checkbox": "*",
+    "@atlaskit/checkbox": "^13.1.0",
     "@atlaskit/dropdown-menu": "^12.9.0",
     "@atlaskit/popup": "^1.14.0",
-    "@atlaskit/radio": "*",
-    "@atlaskit/select": "^17.6.0",
+    "@atlaskit/radio": "^6.1.3",
+    "@atlaskit/select": "^17.7.0",
     "@atlaskit/ssr": "*",
-    "@atlaskit/tooltip": "*",
+    "@atlaskit/tooltip": "^18.2.1",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@atlassian/feature-flags-test-utils": "*",