Merge pull request #3405 from XRPLF/component/divider

Add Divider component and documentation

about/divider-showcase.page.tsx

@@ -38,7 +38,7 @@ export default function DividerShowcase() {
                     <h6 className="mb-0">Gray</h6>
                   </div>
                   <div style={{ flex: '1 1 0', minWidth: 0 }}>
-                    <h6 className="mb-0">Black</h6>
+                    <h6 className="mb-0">Base</h6>
                   </div>
                   <div style={{ flex: '1 1 0', minWidth: 0 }}>
                     <h6 className="mb-0">Green</h6>
@@ -56,7 +56,7 @@ export default function DividerShowcase() {
                     <Divider weight="thin" color="gray" />
                   </div>
                   <div style={{ flex: '1 1 0', minWidth: 0 }}>
-                    <Divider weight="thin" color="black" />
+                    <Divider weight="thin" color="base" />
                   </div>
                   <div style={{ flex: '1 1 0', minWidth: 0 }}>
                     <Divider weight="thin" color="green" />
@@ -74,7 +74,7 @@ export default function DividerShowcase() {
                     <Divider weight="regular" color="gray" />
                   </div>
                   <div style={{ flex: '1 1 0', minWidth: 0 }}>
-                    <Divider weight="regular" color="black" />
+                    <Divider weight="regular" color="base" />
                   </div>
                   <div style={{ flex: '1 1 0', minWidth: 0 }}>
                     <Divider weight="regular" color="green" />
@@ -92,7 +92,7 @@ export default function DividerShowcase() {
                     <Divider weight="strong" color="gray" />
                   </div>
                   <div style={{ flex: '1 1 0', minWidth: 0 }}>
-                    <Divider weight="strong" color="black" />
+                    <Divider weight="strong" color="base" />
                   </div>
                   <div style={{ flex: '1 1 0', minWidth: 0 }}>
                     <Divider weight="strong" color="green" />
@@ -118,7 +118,7 @@ export default function DividerShowcase() {
                     <h6 className="mb-0">Gray</h6>
                   </div>
                   <div style={{ flex: '1 1 0', minWidth: 0 }}>
-                    <h6 className="mb-0">Black</h6>
+                    <h6 className="mb-0">Base</h6>
                   </div>
                   <div style={{ flex: '1 1 0', minWidth: 0 }}>
                     <h6 className="mb-0">Green</h6>
@@ -138,7 +138,7 @@ export default function DividerShowcase() {
                     <Divider orientation="vertical" weight="thin" color="gray" />
                   </div>
                   <div style={{ flex: '1 1 0', minWidth: 0 }} className="d-flex justify-content-center">
-                    <Divider orientation="vertical" weight="thin" color="black" />
+                    <Divider orientation="vertical" weight="thin" color="base" />
                   </div>
                   <div style={{ flex: '1 1 0', minWidth: 0 }} className="d-flex justify-content-center">
                     <Divider orientation="vertical" weight="thin" color="green" />
@@ -158,7 +158,7 @@ export default function DividerShowcase() {
                     <Divider orientation="vertical" weight="regular" color="gray" />
                   </div>
                   <div style={{ flex: '1 1 0', minWidth: 0 }} className="d-flex justify-content-center">
-                    <Divider orientation="vertical" weight="regular" color="black" />
+                    <Divider orientation="vertical" weight="regular" color="base" />
                   </div>
                   <div style={{ flex: '1 1 0', minWidth: 0 }} className="d-flex justify-content-center">
                     <Divider orientation="vertical" weight="regular" color="green" />
@@ -178,7 +178,7 @@ export default function DividerShowcase() {
                     <Divider orientation="vertical" weight="strong" color="gray" />
                   </div>
                   <div style={{ flex: '1 1 0', minWidth: 0 }} className="d-flex justify-content-center">
-                    <Divider orientation="vertical" weight="strong" color="black" />
+                    <Divider orientation="vertical" weight="strong" color="base" />
                   </div>
                   <div style={{ flex: '1 1 0', minWidth: 0 }} className="d-flex justify-content-center">
                     <Divider orientation="vertical" weight="strong" color="green" />
@@ -236,7 +236,7 @@ export default function DividerShowcase() {
                     <div className="d-flex flex-row align-items-center gap-3">
                       <div style={{ width: '40px', height: '40px', backgroundColor: '#FFFFFF', borderRadius: '4px', flexShrink: 0, border: '1px solid var(--bs-border-color, #dee2e6)' }}></div>
                       <div>
-                        <strong>Black:</strong> <code>$white</code>
+                        <strong>Base:</strong> <code>$white</code>
                         <br />
                         <small className="text-muted">#FFFFFF</small>
                       </div>
@@ -267,7 +267,7 @@ export default function DividerShowcase() {
                     <div className="d-flex flex-row align-items-center gap-3">
                       <div style={{ width: '40px', height: '40px', backgroundColor: '#111112', borderRadius: '4px', flexShrink: 0, border: '1px solid var(--bs-border-color, #dee2e6)' }}></div>
                       <div>
-                        <strong>Black:</strong> <code>$gray-900</code>
+                        <strong>Base:</strong> <code>$gray-900</code>
                         <br />
                         <small className="text-muted">#111112</small>
                       </div>
@@ -290,8 +290,8 @@ export default function DividerShowcase() {
                   <Divider color="gray" weight="regular" />
                 </div>
                 <div>
-                  <h6 className="mb-3">Black - High contrast separation</h6>
+                  <h6 className="mb-3">Base - High contrast separation (adapts to theme)</h6>
-                  <Divider color="black" weight="regular" />
+                  <Divider color="base" weight="regular" />
                 </div>
                 <div>
                   <h6 className="mb-3">Green - Brand accent separation</h6>
@@ -433,7 +433,7 @@ export default function DividerShowcase() {
                 {/* color */}
                 <div className="d-flex flex-row py-3" style={{ gap: '1rem' }}>
                   <div style={{ width: '120px', flexShrink: 0 }}><code>color</code></div>
-                  <div style={{ flex: '1 1 0', minWidth: 0 }}><code>'gray' | 'black' | 'green'</code></div>
+                  <div style={{ flex: '1 1 0', minWidth: 0 }}><code>'gray' | 'base' | 'green'</code></div>
                   <div style={{ width: '120px', flexShrink: 0 }}><code>'gray'</code></div>
                   <div style={{ flex: '1 1 0', minWidth: 0 }}>Sets the divider color</div>
                 </div>

shared/components/Divider/Divider.md

@@ -8,7 +8,7 @@ The Divider component is a visual separator that creates clear boundaries betwee
 
 - **Two Orientations**: Horizontal (default) and Vertical
 - **Three Stroke Weights**: Thin (0.5px), Regular (1px), Strong (2px)
-- **Three Color Variants**: Gray (default), Black, Green
+- **Three Color Variants**: Gray (default), Base (adapts to theme), Green
 - **Theme Support**: Automatic light/dark mode adaptation
 - **Accessibility**: Configurable for decorative or semantic use
 - **Flexible Sizing**: Inherits width/height from parent container
@@ -21,8 +21,8 @@ interface DividerProps {
   orientation?: 'horizontal' | 'vertical';
   /** Stroke weight - controls visual thickness */
   weight?: 'thin' | 'regular' | 'strong';
-  /** Color variant - gray (default), black for stronger contrast, green for brand emphasis */
+  /** Color variant - gray (default), base for high contrast (adapts to theme), green for brand emphasis */
-  color?: 'gray' | 'black' | 'green';
+  color?: 'gray' | 'base' | 'green';
   /** Additional CSS classes */
   className?: string;
   /** Whether the divider is purely decorative (hides from screen readers) */
@@ -136,18 +136,18 @@ Neutral, subtle separation that works in most contexts without drawing attention
 <Divider />
 ```
 
-### Black
+### Base
 
-High-contrast separation for maximum visibility. In dark mode, this renders as white for proper contrast.
+High-contrast separation that adapts to the theme - renders as white in dark mode and black in light mode.
 
 **Best For:**
-- When stronger contrast is needed
+- When maximum contrast is needed
-- Light backgrounds where gray may be too subtle
 - Important structural boundaries
+- Universal high-visibility dividers
 
 **Usage:**
 ```tsx
-<Divider color="black" />
+<Divider color="base" />
 ```
 
 ### Green
@@ -297,7 +297,7 @@ Dividers are non-interactive elements and do not receive focus.
 ### Color Contrast
 
 - **Gray variant**: Meets contrast requirements on dark backgrounds; may need weight adjustment on light backgrounds
-- **Black variant**: High contrast in both themes (renders as white in dark mode)
+- **Base variant**: High contrast in both themes (adapts to theme - white in dark, black in light)
 - **Green variant**: Brand color provides good contrast in both themes
 
 ## Best Practices
@@ -312,7 +312,7 @@ Dividers are non-interactive elements and do not receive focus.
 
 5. **Maintain alignment** - Dividers should align with content; avoid full-width dividers in padded containers
 
-6. **Use color purposefully** - Reserve green for branded emphasis; gray for most cases; black for high contrast needs
+6. **Use color purposefully** - Reserve green for branded emphasis; gray for most cases; base for high contrast needs
 
 7. **Test in both themes** - Verify dividers are visible and appropriate in both light and dark modes
 
@@ -325,7 +325,7 @@ The component automatically adapts colors for light and dark modes:
 | Color | Dark Mode (Default) | Light Mode |
 |-------|---------------------|------------|
 | Gray | `$gray-600` (#454549) | `$gray-300` (#C1C1C2) |
-| Black | `$white` (#FFFFFF) | `$gray-900` (#111112) |
+| Base | `$white` (#FFFFFF) | `$gray-900` (#111112) |
 | Green | `$green-300` (#21E46B) | `$green-300` (#21E46B) |
 
 ## Related Components

shared/components/Divider/Divider.scss

@@ -9,7 +9,7 @@
 // .bds-divider--regular     - Regular stroke weight (1px, default)
 // .bds-divider--strong      - Strong stroke weight (2px)
 // .bds-divider--gray        - Gray color variant (default)
-// .bds-divider--black       - Black color variant
+// .bds-divider--base        - Base color variant (high contrast, adapts to theme)
 // .bds-divider--green       - Green color variant
 //
 // Note: This file is imported within xrpl.scss after Bootstrap and project
@@ -27,7 +27,7 @@ $bds-divider-strong: 2px;
 // Colors - Dark Mode (default, mapped from _colors.scss)
 // Site defaults to dark mode, uses html.light for light mode
 $bds-divider-gray-dark: $gray-600;    // #454549 - visible on dark backgrounds
-$bds-divider-black-dark: $white;      // #FFFFFF - inverted for dark mode
+$bds-divider-base-dark: $white;       // #FFFFFF - high contrast for dark mode
 $bds-divider-green-dark: $green-300;  // #21E46B - brand color stays same
 
 // Colors - Light Mode (mapped from _colors.scss)
@@ -35,7 +35,7 @@ $bds-divider-green-dark: $green-300;  // #21E46B - brand color stays same
 // Figma Black (#141414) → closest match: $gray-900
 // Figma Green 300 (#21E46B) → exact match: $green-300
 $bds-divider-gray-light: $gray-300;   // #C1C1C2
-$bds-divider-black-light: $gray-900;  // #111112
+$bds-divider-base-light: $gray-900;   // #111112 - high contrast for light mode
 $bds-divider-green-light: $green-300; // #21E46B
 
 // =============================================================================
@@ -77,10 +77,11 @@ hr.bds-divider,
 
 // Vertical divider - spans full height, uses width for stroke
 .bds-divider--vertical {
-  display: inline-block;
+  display: block;
-  height: 100%;
+  height: auto;
-  min-height: 100%;
+  min-height: 1px; // Fallback minimum
-  vertical-align: middle;
+  align-self: stretch; // Stretch to fill flex container height
+  flex-shrink: 0; // Prevent collapsing in flex layouts
   
   // Width set by weight modifier
 }
@@ -126,18 +127,22 @@ hr.bds-divider,
 // Color Modifiers - Dark Mode (Default)
 // =============================================================================
 // Site defaults to dark mode, so base styles are for dark backgrounds
+// Use hr.bds-divider--* for higher specificity to override base hr.bds-divider
 
 // Gray variant (default) - subtle, neutral separation
+hr.bds-divider--gray,
 .bds-divider--gray {
   background-color: $bds-divider-gray-dark;
 }
 
-// Black variant - uses white for contrast on dark backgrounds
+// Base variant - high contrast, adapts to theme (white in dark mode, black in light mode)
-.bds-divider--black {
+hr.bds-divider--base,
-  background-color: $bds-divider-black-dark;
+.bds-divider--base {
+  background-color: $bds-divider-base-dark;
 }
 
 // Green variant - branded, accent separation
+hr.bds-divider--green,
 .bds-divider--green {
   background-color: $bds-divider-green-dark;
 }
@@ -149,16 +154,19 @@ hr.bds-divider,
 
 html.light {
   // Gray variant in light mode
+  hr.bds-divider--gray,
   .bds-divider--gray {
     background-color: $bds-divider-gray-light;
   }
   
-  // Black variant in light mode - use dark color for contrast
+  // Base variant in light mode - use dark color for contrast
-  .bds-divider--black {
+  hr.bds-divider--base,
-    background-color: $bds-divider-black-light;
+  .bds-divider--base {
+    background-color: $bds-divider-base-light;
   }
   
   // Green variant stays the same in light mode (brand color)
+  hr.bds-divider--green,
   .bds-divider--green {
     background-color: $bds-divider-green-light;
   }

shared/components/Divider/Divider.tsx

@@ -5,8 +5,8 @@ export interface DividerProps {
   orientation?: 'horizontal' | 'vertical';
   /** Stroke weight - controls visual thickness */
   weight?: 'thin' | 'regular' | 'strong';
-  /** Color variant - gray (default), black for stronger contrast, green for brand emphasis */
+  /** Color variant - gray (default), base for high contrast (adapts to theme), green for brand emphasis */
-  color?: 'gray' | 'black' | 'green';
+  color?: 'gray' | 'base' | 'green';
   /** Additional CSS classes */
   className?: string;
   /** Whether the divider is purely decorative (hides from screen readers) */
@@ -29,8 +29,8 @@ export interface DividerProps {
  * // Strong green divider for emphasis
  * <Divider weight="strong" color="green" />
  * 
- * // Thin black divider
+ * // Thin base divider (high contrast - adapts to theme)
- * <Divider weight="thin" color="black" />
+ * <Divider weight="thin" color="base" />
  */
 export const Divider: React.FC<DividerProps> = ({
   orientation = 'horizontal',

static/css/devportal2024-v1.css

@@ -15147,10 +15147,11 @@ hr.bds-divider,
 }
 
 .bds-divider--vertical {
-  display: inline-block;
+  display: block;
-  height: 100%;
+  height: auto;
-  min-height: 100%;
+  min-height: 1px;
-  vertical-align: middle;
+  align-self: stretch;
+  flex-shrink: 0;
 }
 
 .bds-divider--thin.bds-divider--horizontal {
@@ -15174,24 +15175,30 @@ hr.bds-divider,
   width: 2px;
 }
 
+hr.bds-divider--gray,
 .bds-divider--gray {
   background-color: #454549;
 }
 
-.bds-divider--black {
+hr.bds-divider--base,
+.bds-divider--base {
   background-color: #FFFFFF;
 }
 
+hr.bds-divider--green,
 .bds-divider--green {
   background-color: #21E46B;
 }
 
+html.light hr.bds-divider--gray,
 html.light .bds-divider--gray {
   background-color: #C1C1C2;
 }
-html.light .bds-divider--black {
+html.light hr.bds-divider--base,
+html.light .bds-divider--base {
   background-color: #111112;
 }
+html.light hr.bds-divider--green,
 html.light .bds-divider--green {
   background-color: #21E46B;
 }