@atlaskit/flag 15.6.4 → 15.7.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/flag
 
+## 15.7.0
+
+### Minor Changes
+
+- [#118560](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/118560)
+  [`cca5dee6530a8`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/cca5dee6530a8) -
+  Accessibility improvements. Add `headingLevel` prop.
+
+## 15.6.5
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 15.6.4
 
 ### Patch Changes

package/dist/cjs/auto-dismiss-flag.js

@@ -15,7 +15,7 @@ var _flagGroup = require("./flag-group");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 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 && Object.prototype.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; }
 var packageName = "@atlaskit/flag";
-var packageVersion = "15.6.4";
+var packageVersion = "15.7.0";
 var AUTO_DISMISS_SECONDS = exports.AUTO_DISMISS_SECONDS = 8;
 
 /**

package/dist/cjs/flag.js

@@ -11,6 +11,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _primitives = require("@atlaskit/primitives");
+var _heading = _interopRequireDefault(require("@atlaskit/heading"));
 var _usePlatformLeafEventHandler = require("@atlaskit/analytics-next/usePlatformLeafEventHandler");
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 var _constants = require("./constants");
@@ -55,7 +56,7 @@ var flagWrapperStyles = (0, _react2.css)({
 var analyticsAttributes = {
   componentName: 'flag',
   packageName: "@atlaskit/flag",
-  packageVersion: "15.6.4"
+  packageVersion: "15.7.0"
 };
 var transitionStyles = (0, _react2.css)({
   flexGrow: 1,
@@ -92,7 +93,9 @@ var Flag = function Flag(props) {
     testId = props.testId,
     id = props.id,
     analyticsContext = props.analyticsContext,
-    delayAnnouncement = props.delayAnnouncement;
+    delayAnnouncement = props.delayAnnouncement,
+    _props$headingLevel = props.headingLevel,
+    headingLevel = _props$headingLevel === void 0 ? 2 : _props$headingLevel;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isDelayToAnnounce = _useState2[0],
@@ -187,11 +190,13 @@ var Flag = function Flag(props) {
     space: "space.100",
     spread: "space-between"
   }, (0, _react2.jsx)(_primitives.Box, {
-    paddingBlockStart: "space.025",
+    paddingBlockStart: "space.050",
+    paddingBlockEnd: "space.025",
     xcss: overflowWrapStyles
-  }, (0, _react2.jsx)(_primitives.Text, {
-    color: textColor,
-    weight: "semibold"
+  }, (0, _react2.jsx)(_heading.default, {
+    as: "h".concat(headingLevel),
+    size: "xsmall",
+    color: textColor
   }, title)), isDismissable ? !(isBold && !description && !actions.length) && (0, _react2.jsx)(_internal.DismissButton, {
     testId: testId,
     appearance: appearance,

package/dist/cjs/theme.js

@@ -26,14 +26,14 @@ var flagIconColor = exports.flagIconColor = {
 var flagTextColor = exports.flagTextColor = {
   error: 'color.text.inverse',
   info: 'color.text.inverse',
-  normal: 'color.text.subtle',
+  normal: 'color.text',
   success: 'color.text.inverse',
   warning: 'color.text.warning.inverse'
 };
 var flagTextColorToken = exports.flagTextColorToken = {
   error: "var(--ds-text-inverse, ".concat(_colors.N0, ")"),
   info: "var(--ds-text-inverse, ".concat(_colors.N0, ")"),
-  normal: "var(--ds-text-subtle, ".concat(_colors.N500, ")"),
+  normal: "var(--ds-text, ".concat(_colors.N800, ")"),
   success: "var(--ds-text-inverse, ".concat(_colors.N0, ")"),
   warning: "var(--ds-text-warning-inverse, ".concat(_colors.N700, ")")
 };

package/dist/es2019/auto-dismiss-flag.js

@@ -5,7 +5,7 @@ import noop from '@atlaskit/ds-lib/noop';
 import Flag from './flag';
 import { useFlagGroup } from './flag-group';
 const packageName = "@atlaskit/flag";
-const packageVersion = "15.6.4";
+const packageVersion = "15.7.0";
 export const AUTO_DISMISS_SECONDS = 8;
 
 /**

package/dist/es2019/flag.js

@@ -7,7 +7,8 @@ import { useCallback, useEffect, useState } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx, css } from '@emotion/react';
-import { Inline, Stack, Box, xcss, Text } from '@atlaskit/primitives';
+import { Inline, Stack, Box, xcss } from '@atlaskit/primitives';
+import Heading from '@atlaskit/heading';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
 import noop from '@atlaskit/ds-lib/noop';
 import { DEFAULT_APPEARANCE } from './constants';
@@ -48,7 +49,7 @@ const flagWrapperStyles = css({
 const analyticsAttributes = {
   componentName: 'flag',
   packageName: "@atlaskit/flag",
-  packageVersion: "15.6.4"
+  packageVersion: "15.7.0"
 };
 const transitionStyles = css({
   flexGrow: 1,
@@ -81,7 +82,8 @@ const Flag = props => {
     testId,
     id,
     analyticsContext,
-    delayAnnouncement
+    delayAnnouncement,
+    headingLevel = 2
   } = props;
   const [isDelayToAnnounce, setIsDelayToAnnounce] = useState(false);
   const {
@@ -175,11 +177,13 @@ const Flag = props => {
     space: "space.100",
     spread: "space-between"
   }, jsx(Box, {
-    paddingBlockStart: "space.025",
+    paddingBlockStart: "space.050",
+    paddingBlockEnd: "space.025",
     xcss: overflowWrapStyles
-  }, jsx(Text, {
-    color: textColor,
-    weight: "semibold"
+  }, jsx(Heading, {
+    as: `h${headingLevel}`,
+    size: "xsmall",
+    color: textColor
   }, title)), isDismissable ? !(isBold && !description && !actions.length) && jsx(DismissButton, {
     testId: testId,
     appearance: appearance,

package/dist/es2019/theme.js

@@ -1,6 +1,6 @@
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 
-import { B400, N0, N30A, N500, N700 } from '@atlaskit/theme/colors';
+import { B400, N0, N30A, N500, N700, N800 } from '@atlaskit/theme/colors';
 export const flagBackgroundColor = {
   error: 'color.background.danger.bold',
   info: 'color.background.neutral.bold',
@@ -20,14 +20,14 @@ export const flagIconColor = {
 export const flagTextColor = {
   error: 'color.text.inverse',
   info: 'color.text.inverse',
-  normal: 'color.text.subtle',
+  normal: 'color.text',
   success: 'color.text.inverse',
   warning: 'color.text.warning.inverse'
 };
 export const flagTextColorToken = {
   error: `var(--ds-text-inverse, ${N0})`,
   info: `var(--ds-text-inverse, ${N0})`,
-  normal: `var(--ds-text-subtle, ${N500})`,
+  normal: `var(--ds-text, ${N800})`,
   success: `var(--ds-text-inverse, ${N0})`,
   warning: `var(--ds-text-warning-inverse, ${N700})`
 };

package/dist/esm/auto-dismiss-flag.js

@@ -5,7 +5,7 @@ import noop from '@atlaskit/ds-lib/noop';
 import Flag from './flag';
 import { useFlagGroup } from './flag-group';
 var packageName = "@atlaskit/flag";
-var packageVersion = "15.6.4";
+var packageVersion = "15.7.0";
 export var AUTO_DISMISS_SECONDS = 8;
 
 /**

package/dist/esm/flag.js

@@ -11,7 +11,8 @@ import { useCallback, useEffect, useState } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx, css } from '@emotion/react';
-import { Inline, Stack, Box, xcss, Text } from '@atlaskit/primitives';
+import { Inline, Stack, Box, xcss } from '@atlaskit/primitives';
+import Heading from '@atlaskit/heading';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
 import noop from '@atlaskit/ds-lib/noop';
 import { DEFAULT_APPEARANCE } from './constants';
@@ -52,7 +53,7 @@ var flagWrapperStyles = css({
 var analyticsAttributes = {
   componentName: 'flag',
   packageName: "@atlaskit/flag",
-  packageVersion: "15.6.4"
+  packageVersion: "15.7.0"
 };
 var transitionStyles = css({
   flexGrow: 1,
@@ -89,7 +90,9 @@ var Flag = function Flag(props) {
     testId = props.testId,
     id = props.id,
     analyticsContext = props.analyticsContext,
-    delayAnnouncement = props.delayAnnouncement;
+    delayAnnouncement = props.delayAnnouncement,
+    _props$headingLevel = props.headingLevel,
+    headingLevel = _props$headingLevel === void 0 ? 2 : _props$headingLevel;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isDelayToAnnounce = _useState2[0],
@@ -184,11 +187,13 @@ var Flag = function Flag(props) {
     space: "space.100",
     spread: "space-between"
   }, jsx(Box, {
-    paddingBlockStart: "space.025",
+    paddingBlockStart: "space.050",
+    paddingBlockEnd: "space.025",
     xcss: overflowWrapStyles
-  }, jsx(Text, {
-    color: textColor,
-    weight: "semibold"
+  }, jsx(Heading, {
+    as: "h".concat(headingLevel),
+    size: "xsmall",
+    color: textColor
   }, title)), isDismissable ? !(isBold && !description && !actions.length) && jsx(DismissButton, {
     testId: testId,
     appearance: appearance,

package/dist/esm/theme.js

@@ -1,6 +1,6 @@
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 
-import { B400, N0, N30A, N500, N700 } from '@atlaskit/theme/colors';
+import { B400, N0, N30A, N500, N700, N800 } from '@atlaskit/theme/colors';
 export var flagBackgroundColor = {
   error: 'color.background.danger.bold',
   info: 'color.background.neutral.bold',
@@ -20,14 +20,14 @@ export var flagIconColor = {
 export var flagTextColor = {
   error: 'color.text.inverse',
   info: 'color.text.inverse',
-  normal: 'color.text.subtle',
+  normal: 'color.text',
   success: 'color.text.inverse',
   warning: 'color.text.warning.inverse'
 };
 export var flagTextColorToken = {
   error: "var(--ds-text-inverse, ".concat(N0, ")"),
   info: "var(--ds-text-inverse, ".concat(N0, ")"),
-  normal: "var(--ds-text-subtle, ".concat(N500, ")"),
+  normal: "var(--ds-text, ".concat(N800, ")"),
   success: "var(--ds-text-inverse, ".concat(N0, ")"),
   warning: "var(--ds-text-warning-inverse, ".concat(N700, ")")
 };

package/dist/types/theme.d.ts

@@ -1,12 +1,12 @@
-import { type BackgroundColor, type TextProps } from '@atlaskit/primitives';
-import { type AppearanceTypes } from './types';
+import { type BackgroundColor } from '@atlaskit/primitives';
+import { type AppearanceTypes, type HeadingColor } from './types';
 export declare const flagBackgroundColor: Record<AppearanceTypes, BackgroundColor>;
 export declare const flagIconColor: Record<AppearanceTypes, string>;
-export declare const flagTextColor: Record<AppearanceTypes, TextProps['color']>;
+export declare const flagTextColor: Record<AppearanceTypes, HeadingColor>;
 export declare const flagTextColorToken: {
     error: "var(--ds-text-inverse)";
     info: "var(--ds-text-inverse)";
-    normal: "var(--ds-text-subtle)";
+    normal: "var(--ds-text)";
     success: "var(--ds-text-inverse)";
     warning: "var(--ds-text-warning-inverse)";
 };

package/dist/types/types.d.ts

@@ -10,6 +10,7 @@ export type ActionType = {
 };
 export type ActionsType = Array<ActionType>;
 export type AppearanceTypes = 'error' | 'info' | 'success' | 'warning' | 'normal';
+export type HeadingColor = 'color.text' | 'color.text.inverse' | 'color.text.warning.inverse';
 export declare const AppearanceArray: AppearanceTypes[];
 type FlagPropsId = {
     /**
@@ -75,6 +76,11 @@ type AutoDismissFlagPropsWithoutId = {
      * Additional information to be included in the `context` of analytics events that come from flag.
      */
     analyticsContext?: Record<string, any>;
+    /**
+     * Specifies the heading level in the document structure.
+     * If not specified, the default is `2`.
+     */
+    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
 };
 export interface AutoDismissFlagProps extends AutoDismissFlagPropsWithoutId, FlagPropsId {
 }

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

@@ -1,12 +1,12 @@
-import { type BackgroundColor, type TextProps } from '@atlaskit/primitives';
-import { type AppearanceTypes } from './types';
+import { type BackgroundColor } from '@atlaskit/primitives';
+import { type AppearanceTypes, type HeadingColor } from './types';
 export declare const flagBackgroundColor: Record<AppearanceTypes, BackgroundColor>;
 export declare const flagIconColor: Record<AppearanceTypes, string>;
-export declare const flagTextColor: Record<AppearanceTypes, TextProps['color']>;
+export declare const flagTextColor: Record<AppearanceTypes, HeadingColor>;
 export declare const flagTextColorToken: {
     error: "var(--ds-text-inverse)";
     info: "var(--ds-text-inverse)";
-    normal: "var(--ds-text-subtle)";
+    normal: "var(--ds-text)";
     success: "var(--ds-text-inverse)";
     warning: "var(--ds-text-warning-inverse)";
 };

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

@@ -10,6 +10,7 @@ export type ActionType = {
 };
 export type ActionsType = Array<ActionType>;
 export type AppearanceTypes = 'error' | 'info' | 'success' | 'warning' | 'normal';
+export type HeadingColor = 'color.text' | 'color.text.inverse' | 'color.text.warning.inverse';
 export declare const AppearanceArray: AppearanceTypes[];
 type FlagPropsId = {
     /**
@@ -75,6 +76,11 @@ type AutoDismissFlagPropsWithoutId = {
      * Additional information to be included in the `context` of analytics events that come from flag.
      */
     analyticsContext?: Record<string, any>;
+    /**
+     * Specifies the heading level in the document structure.
+     * If not specified, the default is `2`.
+     */
+    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
 };
 export interface AutoDismissFlagProps extends AutoDismissFlagPropsWithoutId, FlagPropsId {
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/flag",
-	"version": "15.6.4",
+	"version": "15.7.0",
 	"description": "A flag is used for confirmations, alerts, and acknowledgments that require minimal user interaction, often displayed using a flag group.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -47,12 +47,13 @@
 	},
 	"dependencies": {
 		"@atlaskit/analytics-next": "^9.3.0",
-		"@atlaskit/button": "^18.0.0",
+		"@atlaskit/button": "^18.3.0",
 		"@atlaskit/ds-lib": "^2.3.0",
-		"@atlaskit/icon": "^22.5.0",
+		"@atlaskit/heading": "^2.4.0",
+		"@atlaskit/icon": "^22.6.0",
 		"@atlaskit/motion": "^1.7.0",
 		"@atlaskit/portal": "^4.6.0",
-		"@atlaskit/primitives": "^9.0.0",
+		"@atlaskit/primitives": "^10.1.0",
 		"@atlaskit/theme": "^12.11.0",
 		"@atlaskit/tokens": "^1.53.0",
 		"@atlaskit/visually-hidden": "^1.4.0",