[docs] Rewrite Divider docs (#7124)

packages/core/src/components/divider/divider.md

@@ -1,11 +1,30 @@
 @# Divider
 
-__Divider__ visually separate contents with a thin line and margin on all sides.
+**Divider** visually separate contents with a thin line and margin on all sides.
+It works best in flex layouts where they will adapt to orientation without
+additional styles. Otherwise, a **Divider** will appear as a full-width 1px-high block element.
 
-Dividers work best in flex layouts where they will adapt to orientation without additional styles. Otherwise, a
-divider will appear as a full-width 1px-high block element.
+@## Import
 
-@reactExample DividerExample
+```tsx
+import { Divider } from "@blueprintjs/core";
+```
+
+@## Usage
+
+Use **Divider** to separate blocks of content within a page or container. By default, it spans the full width of its container.
+
+@reactCodeExample DividerBasicExample
+
+@## Vertical
+
+When used inside a flex container, **Divider** adapts to the layout's direction. It becomes a vertical divider when placed between flex items.
+
+@reactCodeExample DividerVerticalExample
+
+@## Interactive Playground
+
+@reactExample DividerPlaygroundExample
 
 @## Props interface
 

packages/docs-app/src/examples/core-examples/dividerExamples.tsx

@@ -0,0 +1,47 @@
+/* !
+ * (c) Copyright 2024 Palantir Technologies Inc. All rights reserved.
+ */
+
+import dedent from "dedent";
+import * as React from "react";
+
+import { Divider } from "@blueprintjs/core";
+import { CodeExample, type ExampleProps } from "@blueprintjs/docs-theme";
+
+export const DividerBasicExample: React.FC<ExampleProps> = props => {
+    const code = dedent`
+        Content above
+        <Divider />
+        Content below`;
+    return (
+        <CodeExample code={code} {...props}>
+            <div>
+                Content above
+                <Divider />
+                Content below
+            </div>
+        </CodeExample>
+    );
+};
+
+export const DividerVerticalExample: React.FC<ExampleProps> = props => {
+    const code = dedent`
+        <div style={{ display: "flex" }}>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin quis aliquam elit. Quisque ultricies
+            dolor non sapien dictum semper.
+            <Divider />
+            Praesent auctor eros vitae lacus porttitor elementum. Curabitur dolor dolor, sodales eget mi eget,
+            convallis scelerisque eros.
+        </div>`;
+    return (
+        <CodeExample code={code} {...props}>
+            <div style={{ display: "flex" }}>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin quis aliquam elit. Quisque ultricies
+                dolor non sapien dictum semper.
+                <Divider />
+                Praesent auctor eros vitae lacus porttitor elementum. Curabitur dolor dolor, sodales eget mi eget,
+                convallis scelerisque eros.
+            </div>
+        </CodeExample>
+    );
+};

packages/docs-app/src/examples/core-examples/dividerPlaygroundExample.tsx

@@ -0,0 +1,46 @@
+/*
+ * Copyright 2024 Palantir Technologies, Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as React from "react";
+
+import { Button, ButtonGroup, Divider, H5, Switch } from "@blueprintjs/core";
+import { Example, type ExampleProps, handleBooleanChange } from "@blueprintjs/docs-theme";
+
+export const DividerPlaygroundExample: React.FC<ExampleProps> = props => {
+    const [vertical, setVertical] = React.useState(false);
+
+    const options = (
+        <>
+            <H5>Example props</H5>
+            <Switch checked={vertical} label="Vertical" onChange={handleBooleanChange(setVertical)} />
+        </>
+    );
+
+    return (
+        <Example options={options} {...props}>
+            <ButtonGroup minimal={true} vertical={vertical}>
+                <Button text="File" />
+                <Button text="Edit" />
+                <Divider />
+                <Button text="Create" />
+                <Button text="Delete" />
+                <Divider />
+                <Button icon="add" />
+                <Button icon="remove" />
+            </ButtonGroup>
+        </Example>
+    );
+};

packages/docs-app/src/examples/core-examples/index.ts

@@ -38,8 +38,8 @@ export { ContextMenuPopoverExample } from "./contextMenuPopoverExample";
 export { ControlCardListExample } from "./controlCardListExample";
 export * from "./controlGroupExample";
 export * from "./dialogExample";
-export * from "./multistepDialogExample";
-export * from "./dividerExample";
+export * from "./dividerExamples";
+export * from "./dividerPlaygroundExample";
 export * from "./drawerExample";
 export * from "./dropdownMenuExample";
 export * from "./editableTextExample";
@@ -56,6 +56,7 @@ export { IconGeneratedComponentExample } from "./iconGeneratedComponentExample";
 export * from "./menuExample";
 export { MenuItemExample } from "./menuItemExample";
 export * from "./multiSliderExample";
+export * from "./multistepDialogExample";
 export * from "./navbarExample";
 export * from "./numericInputBasicExample";
 export * from "./numericInputExtendedExample";

packages/docs-app/src/styles/_examples.scss

@@ -318,6 +318,19 @@
   min-height: 150px;
 }
 
+#{example("DividerBasic")} .docs-code-example > :first-child {
+  max-width: 300px;
+  text-align: center;
+  width: 100%;
+}
+
+#{example("DividerVertical")} .docs-code-example > :first-child {
+  gap: 10px;
+  max-width: 500px;
+  text-align: center;
+  width: 100%;
+}
+
 #{example("Tag")},
 #{example("CompoundTag")} {
   .docs-example {