@atlaskit/section-message 8.12.14 → 8.13.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/section-message
 
+## 8.13.0
+
+### Minor Changes
+
+- [`36317b7bc1752`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/36317b7bc1752) -
+  Add `headingLevel` prop to customize heading element and ensure makers can use proper and
+  accessible heading structures.
+
+## 8.12.15
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 8.12.14
 
 ### Patch Changes

package/dist/cjs/section-message.js

@@ -51,6 +51,8 @@ var SectionMessage = /*#__PURE__*/(0, _react.forwardRef)(function SectionMessage
     appearance = _ref$appearance === void 0 ? 'information' : _ref$appearance,
     actions = _ref.actions,
     title = _ref.title,
+    _ref$headingLevel = _ref.headingLevel,
+    headingLevel = _ref$headingLevel === void 0 ? 'h2' : _ref$headingLevel,
     icon = _ref.icon,
     isDismissible = _ref.isDismissible,
     onDismiss = _ref.onDismiss,
@@ -91,7 +93,7 @@ var SectionMessage = /*#__PURE__*/(0, _react.forwardRef)(function SectionMessage
     testId: testId && "".concat(testId, "--content"),
     xcss: sectionMessageStyles.contentContainer
   }, !!title && /*#__PURE__*/React.createElement(_heading.default, {
-    as: "h2",
+    as: headingLevel,
     size: "small"
   }, title), /*#__PURE__*/React.createElement("div", {
     className: (0, _runtime.ax)([sectionMessageStyles.content])

package/dist/es2019/section-message.js

@@ -40,6 +40,7 @@ const SectionMessage = /*#__PURE__*/forwardRef(function SectionMessage({
   appearance = 'information',
   actions,
   title,
+  headingLevel = 'h2',
   icon,
   isDismissible,
   onDismiss,
@@ -79,7 +80,7 @@ const SectionMessage = /*#__PURE__*/forwardRef(function SectionMessage({
     testId: testId && `${testId}--content`,
     xcss: sectionMessageStyles.contentContainer
   }, !!title && /*#__PURE__*/React.createElement(Heading, {
-    as: "h2",
+    as: headingLevel,
     size: "small"
   }, title), /*#__PURE__*/React.createElement("div", {
     className: ax([sectionMessageStyles.content])

package/dist/esm/section-message.js

@@ -42,6 +42,8 @@ var SectionMessage = /*#__PURE__*/forwardRef(function SectionMessage(_ref, ref)
     appearance = _ref$appearance === void 0 ? 'information' : _ref$appearance,
     actions = _ref.actions,
     title = _ref.title,
+    _ref$headingLevel = _ref.headingLevel,
+    headingLevel = _ref$headingLevel === void 0 ? 'h2' : _ref$headingLevel,
     icon = _ref.icon,
     isDismissible = _ref.isDismissible,
     onDismiss = _ref.onDismiss,
@@ -82,7 +84,7 @@ var SectionMessage = /*#__PURE__*/forwardRef(function SectionMessage(_ref, ref)
     testId: testId && "".concat(testId, "--content"),
     xcss: sectionMessageStyles.contentContainer
   }, !!title && /*#__PURE__*/React.createElement(Heading, {
-    as: "h2",
+    as: headingLevel,
     size: "small"
   }, title), /*#__PURE__*/React.createElement("div", {
     className: ax([sectionMessageStyles.content])

package/dist/types/types.d.ts

@@ -4,7 +4,8 @@ import type { UIAnalyticsEvent } from '@atlaskit/analytics-next';
  * Appearance determines the icon and background color pairing indicating the message type
  */
 export type Appearance = 'information' | 'warning' | 'error' | 'success' | 'discovery';
-export interface SectionMessageProps {
+type HeadingElements = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+interface BaseSectionMessageProps {
     /**
      * The appearance styling to use for the section message.
      */
@@ -14,6 +15,11 @@ export interface SectionMessageProps {
      * we recommend that this should be a paragraph.
      */
     children: React.ReactNode;
+    /**
+     * Allows the section message's `title` to be rendered as the specified HTML
+     * heading element. The default heading element is `h2`.
+     */
+    headingLevel?: HeadingElements;
     /**
      * The heading of the section message.
      */
@@ -49,6 +55,14 @@ export interface SectionMessageProps {
      */
     testId?: string;
 }
+type ConditionalSectionMessageProps = {
+    headingLevel?: HeadingElements;
+    title: string;
+} | {
+    headingLevel?: never;
+    title?: never;
+};
+export type SectionMessageProps = BaseSectionMessageProps & ConditionalSectionMessageProps;
 export interface SectionMessageActionProps {
     /**
      * The text that needs to be displayed for section message action.
@@ -82,3 +96,4 @@ export interface SectionMessageActionProps {
      */
     testId?: string;
 }
+export {};

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

@@ -4,7 +4,8 @@ import type { UIAnalyticsEvent } from '@atlaskit/analytics-next';
  * Appearance determines the icon and background color pairing indicating the message type
  */
 export type Appearance = 'information' | 'warning' | 'error' | 'success' | 'discovery';
-export interface SectionMessageProps {
+type HeadingElements = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+interface BaseSectionMessageProps {
     /**
      * The appearance styling to use for the section message.
      */
@@ -14,6 +15,11 @@ export interface SectionMessageProps {
      * we recommend that this should be a paragraph.
      */
     children: React.ReactNode;
+    /**
+     * Allows the section message's `title` to be rendered as the specified HTML
+     * heading element. The default heading element is `h2`.
+     */
+    headingLevel?: HeadingElements;
     /**
      * The heading of the section message.
      */
@@ -49,6 +55,14 @@ export interface SectionMessageProps {
      */
     testId?: string;
 }
+type ConditionalSectionMessageProps = {
+    headingLevel?: HeadingElements;
+    title: string;
+} | {
+    headingLevel?: never;
+    title?: never;
+};
+export type SectionMessageProps = BaseSectionMessageProps & ConditionalSectionMessageProps;
 export interface SectionMessageActionProps {
     /**
      * The text that needs to be displayed for section message action.
@@ -82,3 +96,4 @@ export interface SectionMessageActionProps {
      */
     testId?: string;
 }
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/section-message",
-	"version": "8.12.14",
+	"version": "8.13.0",
 	"description": "A section message is used to alert users to a particular section of the screen.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -42,7 +42,7 @@
 		"@atlaskit/button": "^23.11.0",
 		"@atlaskit/css": "^0.19.0",
 		"@atlaskit/heading": "^5.4.0",
-		"@atlaskit/icon": "^34.0.0",
+		"@atlaskit/icon": "^35.0.0",
 		"@atlaskit/link": "^3.4.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^19.0.0",
@@ -57,11 +57,11 @@
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
 		"@atlaskit/analytics-next": "^11.2.0",
-		"@atlaskit/code": "^17.4.0",
-		"@atlaskit/docs": "^11.7.0",
+		"@atlaskit/code": "^17.5.0",
+		"@atlaskit/docs": "^11.8.0",
 		"@atlaskit/ds-lib": "^7.0.0",
 		"@atlaskit/form": "^15.5.0",
-		"@atlaskit/range": "^10.0.0",
+		"@atlaskit/range": "^10.1.0",
 		"@atlassian/react-compiler-gating": "workspace:^",
 		"@atlassian/ssr-tests": "workspace:^",
 		"@atlassian/structured-docs-types": "workspace:^",

package/offerings.json

@@ -1,35 +0,0 @@
-[
-	{
-		"name": "SectionMessage",
-		"package": "@atlaskit/section-message",
-		"import": {
-			"name": "SectionMessage",
-			"package": "@atlaskit/section-message",
-			"type": "default"
-		},
-		"keywords": ["section", "message", "alert", "notification", "contextual", "information"],
-		"categories": ["feedback"],
-		"shortDescription": "A component for section-level messages.",
-		"status": "general-availability",
-		"accessibilityGuidelines": [
-			"Ensure section message content is announced by screen readers",
-			"Use appropriate color contrast for text readability",
-			"Provide clear, actionable messaging",
-			"Consider keyboard navigation for interactive section messages"
-		],
-		"usageGuidelines": [
-			"Use for contextual information within sections",
-			"Choose appropriate appearance variants for message type",
-			"Keep messaging concise and actionable",
-			"Position section messages near relevant content",
-			"Consider dismissibility for non-critical messages"
-		],
-		"contentGuidelines": [
-			"Write clear, concise messages",
-			"Use action-oriented language when appropriate",
-			"Ensure messages are relevant to the current context",
-			"Provide clear next steps when needed"
-		],
-		"examples": ["./examples/ai/section-message.tsx"]
-	}
-]