Feature/divider compact prop (#7501)

Co-authored-by: Brandon Liu <[email protected]>
Co-authored-by: Claude <[email protected]>
Co-authored-by: svc-changelog <[email protected]>
Co-authored-by: Greg Douglas <[email protected]>

Author: 5 people

packages/core/src/components/divider/_divider.scss

@@ -15,4 +15,8 @@ $divider-margin: $pt-grid-size * 0.5 !default;
   .#{$ns}-dark & {
     border-color: $pt-dark-divider-white;
   }
+
+  .#{$ns}-compact {
+    margin: 0;
+  }
 }

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

@@ -16,6 +16,14 @@ Use **Divider** to separate blocks of content within a page or container. By def
 
 @reactCodeExample DividerBasicExample
 
+@## Compact
+
+The `compact` prop removes the margin from the divider, making it flush with adjacent content.
+
+```tsx
+<Divider compact />
+```
+
 @## Vertical
 
 When used inside a flex container, **Divider** adapts to the layout's direction. It becomes a vertical divider when placed between flex items.

packages/core/src/components/divider/divider.tsx

@@ -17,10 +17,17 @@
 import classNames from "classnames";
 import * as React from "react";
 
-import { DIVIDER } from "../../common/classes";
+import { Classes } from "../../common";
 import { DISPLAYNAME_PREFIX, type Props } from "../../common/props";
 
 export interface DividerProps extends Props, React.HTMLAttributes<HTMLElement> {
+    /**
+     * If true, makes the Divider flush with adjacent content.
+     *
+     * @default false
+     */
+    compact?: boolean;
+
     /**
      * HTML tag to use for element.
      *
@@ -37,8 +44,8 @@ export interface DividerProps extends Props, React.HTMLAttributes<HTMLElement> {
  *
  * @see https://blueprintjs.com/docs/#core/components/divider
  */
-export const Divider: React.FC<DividerProps> = ({ className, tagName = "div", ...htmlProps }) => {
-    const classes = classNames(DIVIDER, className);
+export const Divider: React.FC<DividerProps> = ({ className, compact = false, tagName = "div", ...htmlProps }) => {
+    const classes = classNames(Classes.DIVIDER, { [Classes.COMPACT]: compact }, className);
     return React.createElement(tagName, {
         ...htmlProps,
         className: classes,

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

@@ -21,11 +21,13 @@ import { Example, type ExampleProps, handleBooleanChange } from "@blueprintjs/do
 
 export const DividerPlaygroundExample: React.FC<ExampleProps> = props => {
     const [vertical, setVertical] = React.useState(false);
+    const [compact, setCompact] = React.useState(false);
 
     const options = (
         <>
             <H5>Example props</H5>
             <Switch checked={vertical} label="Vertical" onChange={handleBooleanChange(setVertical)} />
+            <Switch checked={compact} label="Compact" onChange={handleBooleanChange(setCompact)} />
         </>
     );
 
@@ -34,10 +36,10 @@ export const DividerPlaygroundExample: React.FC<ExampleProps> = props => {
             <ButtonGroup vertical={vertical} variant="minimal">
                 <Button text="File" />
                 <Button text="Edit" />
-                <Divider />
+                <Divider compact={compact} />
                 <Button text="Create" />
                 <Button text="Delete" />
-                <Divider />
+                <Divider compact={compact} />
                 <Button icon="add" />
                 <Button icon="remove" />
             </ButtonGroup>

packages/table/changelog/@unreleased/pr-7501.v2.yml

@@ -0,0 +1,6 @@
+type: feature
+feature:
+  description: Adds a `compact` prop to Divider which removes its margin, making it
+    flush with adjacent content.
+  links:
+  - https://github.com/palantir/blueprint/pull/7501