docs: fix callout heading markup (#5850)

palantir · Jan 17, 2023 · 2ba88b8 · 2ba88b8 · adidahiya · Jan 17, 2023
1 parent 05ea49f
commit 2ba88b8
Show file tree

Hide file tree

Showing 55 changed files with 108 additions and 108 deletions.
diff --git a/packages/core/src/components/breadcrumbs/breadcrumbs.md b/packages/core/src/components/breadcrumbs/breadcrumbs.md
@@ -1,11 +1,11 @@
 @# Breadcrumbs
 
 <div class="@ns-callout @ns-intent-danger @ns-icon-error">
-    <h4 class="@ns-heading">
+    <h5 class="@ns-heading">
 
 Deprecated: use [Breadcrumbs2](#popover2-package/breadcrumbs2)
 
-</h4>
+</h5>
 
 This component is **deprecated since @blueprintjs/core v4.7.0** in favor of the new
 Breadcrumbs2 component, which uses Popover2 instead of Popover under the hood.

diff --git a/packages/core/src/components/button/button.md b/packages/core/src/components/button/button.md
@@ -21,10 +21,10 @@ Buttons trigger actions when clicked. You may render a button as either a `<butt
 ```
 
 <div class="@ns-callout @ns-intent-danger @ns-icon-error">
-    <h4 class="@ns-heading">
+    <h5 class="@ns-heading">
 
 Disabled `Button` prevents all interaction
-</h4>
+</h5>
 
 Use `AnchorButton` if you need mouse interaction events (such as hovering) on a disabled button.
 

diff --git a/packages/core/src/components/collapsible-list/collapsible-list.md b/packages/core/src/components/collapsible-list/collapsible-list.md
@@ -7,10 +7,10 @@ customizing the appearance of visible items, using the props from the `MenuItem`
 children.
 
 <div class="@ns-callout @ns-intent-danger @ns-icon-error">
-    <h4 class="@ns-heading">
+    <h5 class="@ns-heading">
 
 Deprecated: use [Overflow list](#core/components/overflow-list)
-</h4>
+</h5>
 
 This component is **deprecated since 3.0.0** with the introduction of
 [`OverflowList`](#core/components/overflow-list) which provides a similar

diff --git a/packages/core/src/components/context-menu/context-menu.md b/packages/core/src/components/context-menu/context-menu.md
@@ -1,11 +1,11 @@
 @# Context menu
 
 <div class="@ns-callout @ns-intent-danger @ns-icon-error">
-    <h4 class="@ns-heading">
+    <h5 class="@ns-heading">
 
 Deprecated: use [ContextMenu2](#popover2-package/context-menu2)
 
-</h4>
+</h5>
 
 This API is **deprecated since @blueprintjs/core v3.39.0** in favor of the new
 ContextMenu2 component available in the `@blueprintjs/popover2` package. You should migrate

diff --git a/packages/core/src/components/dialog/dialog.md b/packages/core/src/components/dialog/dialog.md
@@ -3,7 +3,7 @@
 Dialogs present content overlaid over other parts of the UI.
 
 <div class="@ns-callout @ns-intent-primary @ns-icon-info-sign">
-    <h4 class="@ns-heading">Terminology note</h4>
+    <h5 class="@ns-heading">Terminology note</h5>
 
 The term "modal" is sometimes used to mean "dialog," but this is a misnomer.
 _Modal_ is an adjective that describes parts of a UI.

diff --git a/packages/core/src/components/editable-text/editable-text.md b/packages/core/src/components/editable-text/editable-text.md
@@ -14,7 +14,7 @@ You should not use `EditableText` when a static always-editable `<input>` or
 @reactExample EditableTextExample
 
 <div class="@ns-callout @ns-intent-danger @ns-icon-error">
-    <h4 class="@ns-heading">Centering the component</h4>
+    <h5 class="@ns-heading">Centering the component</h5>
 
 **Do not center this component** using `text-align: center`, as it will cause an infinite loop
 in the browser ([more details](https://github.com/JedWatson/react-select/issues/540)). Instead,

diff --git a/packages/core/src/components/forms/control-group.md b/packages/core/src/components/forms/control-group.md
@@ -5,7 +5,7 @@ between elements. It supports any number of buttons, text inputs, input groups,
 inputs, and HTML selects as direct children.
 
 <div class="@ns-callout @ns-intent-success @ns-icon-comparison">
-    <h4 class="@ns-heading">Control group vs. input group</h4>
+    <h5 class="@ns-heading">Control group vs. input group</h5>
 
 Both components group multiple elements into a single unit, but their usage patterns are
 quite different.

diff --git a/packages/core/src/components/forms/file-input.md b/packages/core/src/components/forms/file-input.md
@@ -10,7 +10,7 @@ which contain an `<input type="file">`. It supports the full range of HTML `<lab
 Use `inputProps` to apply props to the `<input>` element.
 
 <div class="@ns-callout @ns-intent-warning @ns-icon-warning-sign">
-    <h4 class="@ns-heading">Static file name</h4>
+    <h5 class="@ns-heading">Static file name</h5>
 
 File name does not update on file selection. To get this behavior,
 you must implement it separately in JS.

diff --git a/packages/core/src/components/forms/label.md b/packages/core/src/components/forms/label.md
@@ -7,7 +7,7 @@ where the user can click to activate the control. Notice how in the examples
 below, clicking a label focuses its `<input>`.
 
 <div class="@ns-callout @ns-intent-warning @ns-icon-warning-sign">
-    <h4 class="@ns-heading">Prefer form groups over labels</h4>
+    <h5 class="@ns-heading">Prefer form groups over labels</h5>
 
 The [React `FormGroup` component](#core/components/form-group) provides
 additional functionality such as helper text and modifier props as well as

diff --git a/packages/core/src/components/forms/text-inputs.md b/packages/core/src/components/forms/text-inputs.md
@@ -46,7 +46,7 @@ vice versa. You do not need to apply sizing classes to the children&mdash;they i
 the parent input.
 
 <div class="@ns-callout @ns-intent-warning @ns-icon-warning-sign">
-    <h4 class="@ns-heading">Icons only</h4>
+    <h5 class="@ns-heading">Icons only</h5>
 
 You cannot use buttons with text in the CSS API for input groups. The padding for text inputs
 in CSS cannot accommodate buttons whose width varies due to text content. You should use icons on

diff --git a/packages/core/src/components/hotkeys/hotkeys-target2.md b/packages/core/src/components/hotkeys/hotkeys-target2.md
@@ -5,11 +5,11 @@ tag: new
 @# HotkeysTarget2
 
 <div class="@ns-callout @ns-intent-primary @ns-icon-info-sign">
-    <h4 class="@ns-heading">
+    <h5 class="@ns-heading">
 
 Migrating from [HotkeysTarget](#core/components/hotkeys)?
 
-</h4>
+</h5>
 
 HotkeysTarget2 is a replacement for HotkeysTarget. You are encouraged to use this new API, or
 the `useHotkeys` hook directly in your function components, as they will become the standard

diff --git a/packages/core/src/components/hotkeys/hotkeys.md b/packages/core/src/components/hotkeys/hotkeys.md
@@ -1,11 +1,11 @@
 @# Hotkeys
 
 <div class="@ns-callout @ns-intent-danger @ns-icon-error">
-    <h4 class="@ns-heading">
+    <h5 class="@ns-heading">
 
 Deprecated: use [useHotkeys](#core/hooks/use-hotkeys)
 
-</h4>
+</h5>
 
 This API is **deprecated since @blueprintjs/core v3.39.0** in favor of the new
 [`useHotkeys` hook](#core/hooks/use-hotkeys) and

diff --git a/packages/core/src/components/html-table/html-table.md b/packages/core/src/components/html-table/html-table.md
@@ -3,7 +3,7 @@
 This component provides Blueprint styling to native HTML tables.
 
 <div class="@ns-callout @ns-intent-primary @ns-icon-info-sign">
-    <h4 class="@ns-heading">This is not @blueprintjs/table</h4>
+    <h5 class="@ns-heading">This is not @blueprintjs/table</h5>
 
 This table component is a simple CSS-only skin for HTML `<table>` elements.
 It is ideal for basic static tables. If you're looking for more complex

diff --git a/packages/core/src/components/icon/icon.md b/packages/core/src/components/icon/icon.md
@@ -88,7 +88,7 @@ Icon classes also support the four `.@ns-intent-*` modifiers to color the image.
 ```
 
 <div class="@ns-callout @ns-intent-primary @ns-icon-info-sign">
-    <h4 class="@ns-heading">Non-standard sizes</h4>
+    <h5 class="@ns-heading">Non-standard sizes</h5>
 
 Generally, font icons should only be used at either 16px or 20px. However, if a non-standard size is
 necessary, set a `font-size` that is whole multiple of 16 or 20 with the relevant size class.

diff --git a/packages/core/src/components/menu/menu.md b/packages/core/src/components/menu/menu.md
@@ -91,11 +91,11 @@ there is not enough room to the right.
 ```
 
 <div class="@ns-callout @ns-intent-danger @ns-icon-error">
-    <h4 class="@ns-heading">
+    <h5 class="@ns-heading">
 
 Deprecated prop `popoverProps`: use [MenuItem2](#popover2-package/menu-item2)
 
-</h4>
+</h5>
 
 Usage of `<MenuItem popoverProps={...}>` is **deprecated since @blueprintjs/core v4.7.0**
 in favor of the new MenuItem2 component, which uses Popover2 instead of Popover under the hood.

diff --git a/packages/core/src/components/navbar/navbar.md b/packages/core/src/components/navbar/navbar.md
@@ -13,7 +13,7 @@ stays at the top of the screen as the user scrolls through the document.
 This modifier is not illustrated here because it breaks the document flow.
 
 <div class="@ns-callout @ns-intent-danger @ns-icon-error">
-    <h4 class="@ns-heading">Body padding required</h4>
+    <h5 class="@ns-heading">Body padding required</h5>
 
 The fixed navbar will lie on top of your other content unless you add padding to the top of the
 `<body>` element equal to the height of the navbar. Use the `$pt-navbar-height` Sass variable.

diff --git a/packages/core/src/components/non-ideal-state/non-ideal-state.md b/packages/core/src/components/non-ideal-state/non-ideal-state.md
@@ -43,7 +43,7 @@ for text, which is enclosed in a `.@ns-non-ideal-state-text` wrapper element). T
 constraint ensures proper spacing between each child.
 
 <div class="@ns-callout @ns-intent-warning @ns-icon-warning-sign">
-    <h4 class="@ns-heading">Limited CSS API support</h4>
+    <h5 class="@ns-heading">Limited CSS API support</h5>
 
 Note that you are required to set the `font-size` and `line-height` styles for
 the icon element to render it properly.

diff --git a/packages/core/src/components/overlay/overlay.md b/packages/core/src/components/overlay/overlay.md
@@ -43,7 +43,7 @@ to close, but your application is responsible for updating the state that
 actually closes the overlay.
 
 <div class="@ns-callout @ns-intent-primary @ns-icon-info-sign">
-    <h4 class="@ns-heading">A note about overlay content positioning</h4>
+    <h5 class="@ns-heading">A note about overlay content positioning</h5>
 
 When rendered inline, content will automatically be set to `position: absolute` to respect
 document flow. Otherwise, content will be set to `position: fixed` to cover the entire viewport.

diff --git a/packages/core/src/components/panel-stack/panel-stack.md b/packages/core/src/components/panel-stack/panel-stack.md
@@ -1,11 +1,11 @@
 @# Panel stack
 
 <div class="@ns-callout @ns-intent-danger @ns-icon-error">
-    <h4 class="@ns-heading">
+    <h5 class="@ns-heading">
 
 Deprecated: use [PanelStack2](#core/components/panel-stack2)
 
-</h4>
+</h5>
 
 This API is **deprecated since @blueprintjs/core v3.40.0** in favor of the new
 PanelStack2 component. You should migrate to the new API which will become the

diff --git a/packages/core/src/components/panel-stack2/panel-stack2.md b/packages/core/src/components/panel-stack2/panel-stack2.md
@@ -5,11 +5,11 @@ tag: new
 @# Panel stack (v2)
 
 <div class="@ns-callout @ns-intent-primary @ns-icon-info-sign">
-    <h4 class="@ns-heading">
+    <h5 class="@ns-heading">
 
 Migrating from [PanelStack](#core/components/panel-stack)?
 
-</h4>
+</h5>
 
 PanelStack2 is a replacement for PanelStack. It will become the standard
 API in a future major version of Blueprint. You are encouraged to use this

diff --git a/packages/core/src/components/popover/popover.md b/packages/core/src/components/popover/popover.md
@@ -1,11 +1,11 @@
 @# Popover
 
 <div class="@ns-callout @ns-intent-danger @ns-icon-error">
-    <h4 class="@ns-heading">
+    <h5 class="@ns-heading">
 
 Deprecated: use [Popover2](#popover2-package/popover2)
 
-</h4>
+</h5>
 
 This component is **deprecated since @blueprintjs/core v3.38.0** in favor of the new
 Popover2 component available in the `@blueprintjs/popover2` package. You should migrate
@@ -89,7 +89,7 @@ wrapped in a single element when rendering
 ```
 
 <div class="@ns-callout @ns-intent-warning @ns-icon-warning-sign">
-    <h4 class="@ns-heading">Button targets</h4>
+    <h5 class="@ns-heading">Button targets</h5>
 
 Buttons make great popover targets, but the `disabled` attribute on a `<button>` blocks all
 events, which interferes with the popover functioning. If you need to disable a button that
@@ -211,7 +211,7 @@ in your application logic whether you should care about a particular invocation
 if the `nextOpenState` is not the same as the `Popover`'s current state).
 
 <div class="@ns-callout @ns-intent-warning @ns-icon-warning-sign">
-    <h4 class="@ns-heading">Disabling controlled popovers</h4>
+    <h5 class="@ns-heading">Disabling controlled popovers</h5>
 
 If `disabled={true}`, a controlled popover will remain closed even if `isOpen={true}`.
 The popover will re-open when `disabled` is set to `false`.
@@ -278,7 +278,7 @@ The following example demonstrates the various interaction kinds (note: these Po
 @reactExample PopoverInteractionKindExample
 
 <div class="@ns-callout @ns-intent-primary @ns-icon-info-sign">
-    <h4 class="@ns-heading">Conditionally styling popover targets</h4>
+    <h5 class="@ns-heading">Conditionally styling popover targets</h5>
 
 When a popover is open, `Classes.POPOVER_OPEN` is applied to the target.
 You can use this to style the target differently when the popover is open.
@@ -358,7 +358,7 @@ a translucent background color, like the backdrop for the [`Dialog`](#core/compo
 The backdrop element has the same opacity-fade transition as the `Dialog` backdrop.
 
 <div class="@ns-callout @ns-intent-danger @ns-icon-error">
-    <h4 class="@ns-heading">Dangerous edge case</h4>
+    <h5 class="@ns-heading">Dangerous edge case</h5>
 
 Rendering a `<Popover isOpen={true} hasBackdrop={true}>` outside the viewport bounds can easily break
 your application by covering the UI with an invisible non-interactive backdrop. This edge case

diff --git a/packages/core/src/components/portal/portal.md b/packages/core/src/components/portal/portal.md
@@ -10,11 +10,11 @@ For the most part, Portal is a thin wrapper around [`ReactDOM.createPortal`](htt
 @## React context (legacy)
 
 <div class="@ns-callout @ns-intent-warning @ns-icon-warning-sign">
-    <h4 class="@ns-heading">
+    <h5 class="@ns-heading">
 
 React legacy API
 
-</h4>
+</h5>
 
 This feature uses React's legacy context API. Support for the
 [newer React context API](https://reactjs.org/docs/context.html) will be coming soon
@@ -46,7 +46,7 @@ Portal is used inside [Overlay](#core/components/overlay) to actually overlay th
 application.
 
 <div class="@ns-callout @ns-intent-warning @ns-icon-move">
-    <h4 class="@ns-heading">A note about responsive layouts</h4>
+    <h5 class="@ns-heading">A note about responsive layouts</h5>
 
 For a single-page app, if the `<body>` is styled with `width: 100%` and `height: 100%`, a `Portal`
 may take up extra whitespace and cause the window to undesirably scroll. To fix this, instead

diff --git a/packages/core/src/components/resize-sensor/resize-sensor.md b/packages/core/src/components/resize-sensor/resize-sensor.md
@@ -21,7 +21,7 @@ function handleResize(entries: IResizeEntry[]) {
 @## Props
 
 <div class="@ns-callout @ns-intent-warning @ns-icon-warning-sign">
-    <h4 class="@ns-heading">Asynchronous behavior</h4>
+    <h5 class="@ns-heading">Asynchronous behavior</h5>
 
 The `onResize` callback is invoked asynchronously after a resize is detected
 and typically happens at the end of a frame (after layout, before paint).

diff --git a/packages/core/src/components/skeleton/skeleton.md b/packages/core/src/components/skeleton/skeleton.md
@@ -15,7 +15,7 @@ Apply the class `.@ns-skeleton` to elements that you would like to cover up with
 a loading animation.
 
 <div class="@ns-callout @ns-intent-warning @ns-icon-warning-sign">
-    <h4 class="@ns-heading">Manually disable focusable elements</h4>
+    <h5 class="@ns-heading">Manually disable focusable elements</h5>
 
 When using the `.@ns-skeleton` class on focusable elements such as inputs
 and buttons, be sure to disable the element, via either the `disabled` or

diff --git a/packages/core/src/components/spinner/spinner.md b/packages/core/src/components/spinner/spinner.md
@@ -22,7 +22,7 @@ by including `Classes.SMALL` or `Classes.LARGE` in `className` instead of the
 `size` prop (this prevents an API break when upgrading to 3.x).
 
 <div class="@ns-callout @ns-intent-warning @ns-icon-warning-sign">
-    <h4 class="@ns-heading">IE11 compatibility note</h4>
+    <h5 class="@ns-heading">IE11 compatibility note</h5>
 
 IE11 [does not support CSS transitions on SVG elements][msdn-css-svg] so spinners with known
 `value` will not smoothly transition as `value` changes. Indeterminate spinners still animate

diff --git a/packages/core/src/components/tag-input/tag-input.md b/packages/core/src/components/tag-input/tag-input.md
@@ -8,7 +8,7 @@ on the container will focus the text input for seamless interaction.
 @reactExample TagInputExample
 
 <div class="@ns-callout @ns-intent-success @ns-icon-info-sign">
-    <h4 class="@ns-heading">Looking for a dropdown menu?</h4>
+    <h5 class="@ns-heading">Looking for a dropdown menu?</h5>
 
 [`MultiSelect` in the **@blueprintjs/select** package](#select/multi-select)
 composes this component with a dropdown menu of suggestions.
@@ -46,7 +46,7 @@ The `<input>` element can be controlled directly via the `inputValue` and
 be applied to the input via `inputProps`.
 
 <div class="@ns-callout @ns-intent-primary @ns-icon-info-sign">
-    <h4 class="@ns-heading">Handling long words</h4>
+    <h5 class="@ns-heading">Handling long words</h5>
 
 Set an explicit `width` on the container element to cause long tags to wrap onto multiple lines.
 Either supply a specific pixel value, or use `<TagInput className={Classes.FILL}>`
@@ -55,7 +55,7 @@ to fill its container's width (try this in the example above).
 </div>
 
 <div class="@ns-callout @ns-intent-primary @ns-icon-info-sign">
-    <h4 class="@ns-heading">Disabling a tag input</h4>
+    <h5 class="@ns-heading">Disabling a tag input</h5>
 
 Disabling this component requires setting the `disabled` prop to `true`
 and separately disabling the component's `rightElement` as appropriate

diff --git a/packages/core/src/components/toast/toast.md b/packages/core/src/components/toast/toast.md
@@ -35,15 +35,15 @@ There are three ways to use the `Toaster` component:
 1. `<Toaster ref={ref => ref.show({ ...toast })} />`: Render a `<Toaster>` element and use the `ref` prop to access its instance methods.
 
 <div class="@ns-callout @ns-intent-primary @ns-icon-info-sign">
-    <h4 class="@ns-heading">Working with multiple toasters</h4>
+    <h5 class="@ns-heading">Working with multiple toasters</h5>
 
 You can have multiple toasters in a single application, but you must ensure that each has a unique
 `position` to prevent overlap.
 
 </div>
 
 <div class="@ns-callout @ns-intent-primary @ns-icon-info-sign">
-    <h4 class="@ns-heading">Toaster focus</h4>
+    <h5 class="@ns-heading">Toaster focus</h5>
 
 `Toaster` always disables `Overlay`'s `enforceFocus` behavior (meaning that you're not blocked
 from accessing other parts of the application while a toast is active), and by default also
@@ -73,7 +73,7 @@ methods detailed below. It can be thought of as `Toaster` minus the `React.Compo
 because the `Toaster` should not be treated as a normal React component.
 
 <div class="@ns-callout @ns-intent-warning @ns-icon-warning-sign">
-    <h4 class="@ns-heading">React 16 usage</h4>
+    <h5 class="@ns-heading">React 16 usage</h5>
 
 `Toaster.create()` will throw an error if invoked inside a component lifecycle method in React 16, as `ReactDOM.render()` will return
 `null` resulting in an inaccessible toaster instance. See the second bullet point on the [React 16 release notes](https://reactjs.org/blog/2017/09/26/react-v16.0.html#breaking-changes) for more information.

diff --git a/packages/core/src/components/tooltip/tooltip.md b/packages/core/src/components/tooltip/tooltip.md
@@ -1,11 +1,11 @@
 @# Tooltip
 
 <div class="@ns-callout @ns-intent-danger @ns-icon-error">
-    <h4 class="@ns-heading">
+    <h5 class="@ns-heading">
 
 Deprecated: use [Tooltip2](#popover2-package/tooltip2)
 
-</h4>
+</h5>
 
 This component is **deprecated since @blueprintjs/core v3.38.0** in favor of the new
 Tooltip2 component available in the `@blueprintjs/popover2` package. You should migrate
@@ -56,7 +56,7 @@ When creating a tooltip, you must specify both:
 The content will appear in a contrasting popover when the target is hovered.
 
 <div class="@ns-callout @ns-intent-warning @ns-icon-warning-sign">
-    <h4 class="@ns-heading">Button targets</h4>
+    <h5 class="@ns-heading">Button targets</h5>
 
 Buttons make great tooltip targets, but the `disabled` attribute will prevent all
 events so the enclosing `Tooltip` will not know when to respond.