From edd18a644608cf07cfafcd7edbff73d7133835be Mon Sep 17 00:00:00 2001
From: Greg Douglas <gdouglas@palantir.com>
Date: Thu, 12 Dec 2024 10:59:49 -0500
Subject: [PATCH] [docs] Rewrite Divider docs (#7124)

---
 .../core/src/components/divider/divider.md    | 27 ++++++++--
 .../examples/core-examples/dividerExample.tsx | 54 -------------------
 .../core-examples/dividerExamples.tsx         | 47 ++++++++++++++++
 .../dividerPlaygroundExample.tsx              | 46 ++++++++++++++++
 .../src/examples/core-examples/index.ts       |  5 +-
 packages/docs-app/src/styles/_examples.scss   | 13 +++++
 6 files changed, 132 insertions(+), 60 deletions(-)
 delete mode 100644 packages/docs-app/src/examples/core-examples/dividerExample.tsx
 create mode 100644 packages/docs-app/src/examples/core-examples/dividerExamples.tsx
 create mode 100644 packages/docs-app/src/examples/core-examples/dividerPlaygroundExample.tsx

diff --git a/packages/core/src/components/divider/divider.md b/packages/core/src/components/divider/divider.md
index deb62a6a33..85742db094 100644
--- a/packages/core/src/components/divider/divider.md
+++ b/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
 
diff --git a/packages/docs-app/src/examples/core-examples/dividerExample.tsx b/packages/docs-app/src/examples/core-examples/dividerExample.tsx
deleted file mode 100644
index 1dbdc3e4ee..0000000000
--- a/packages/docs-app/src/examples/core-examples/dividerExample.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-/*
- * Copyright 2015 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 interface DividerExampleState {
-    vertical: boolean;
-}
-
-export class DividerExample extends React.PureComponent<ExampleProps, DividerExampleState> {
-    public state: DividerExampleState = { vertical: false };
-
-    private handleVerticalChange = handleBooleanChange(vertical => this.setState({ vertical }));
-
-    public render() {
-        const { vertical } = this.state;
-        const options = (
-            <>
-                <H5>Example props</H5>
-                <Switch checked={vertical} label="Vertical" onChange={this.handleVerticalChange} />
-            </>
-        );
-        return (
-            <Example options={options} {...this.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>
-        );
-    }
-}
diff --git a/packages/docs-app/src/examples/core-examples/dividerExamples.tsx b/packages/docs-app/src/examples/core-examples/dividerExamples.tsx
new file mode 100644
index 0000000000..3b055985e7
--- /dev/null
+++ b/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>
+    );
+};
diff --git a/packages/docs-app/src/examples/core-examples/dividerPlaygroundExample.tsx b/packages/docs-app/src/examples/core-examples/dividerPlaygroundExample.tsx
new file mode 100644
index 0000000000..7f5b963618
--- /dev/null
+++ b/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>
+    );
+};
diff --git a/packages/docs-app/src/examples/core-examples/index.ts b/packages/docs-app/src/examples/core-examples/index.ts
index d85c9e6a38..4c5d86b45d 100644
--- a/packages/docs-app/src/examples/core-examples/index.ts
+++ b/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";
diff --git a/packages/docs-app/src/styles/_examples.scss b/packages/docs-app/src/styles/_examples.scss
index 9097394f34..eed9430555 100644
--- a/packages/docs-app/src/styles/_examples.scss
+++ b/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 {