@react-md/divider

Dividers group and separate content within lists and page layouts. The divider is a thin rule, lightweight yet sufficient to distinguish content visually and spatially.

Installation

npm install --save @react-md/divider

This package is not super helpful on its own, so it is recommended to also install the following packages:

npm install --save @react-md/theme \
  @react-md/typography \
  @react-md/list \
  @react-md/icon

Documentation

You should check out the full documentation for live examples and more customization information, but an example usage is shown below.

Usage

One of the main use-cases will probably be to display a list with specific dividers or to add dividers between page elements:

import { render } from "react-dom";
import { Divider } from "@react-md/divider";
import { List, ListItem } from "@react-md/list";
import { Typography } from "@react-m/typography";

const App = () => (
  <main>
    <div className="section-1">
      <Typography>Here is some text.</Typography>
    </div>
    <Divider />
    <div className="section-2">
      <Typography>Here is some more text.</Typography>
    </div>
    <List>
      <ListItem id="item-1">Item 1</ListItem>
      <ListItem id="item-2">Item 2</ListItem>
      <ListItem id="item-3">Item 3</ListItem>
      <ListItem id="item-4">Item 4</ListItem>
      <Divider />
      <ListItem id="item-5">Item 5</ListItem>
    </List>
  </main>
);

render(<App />, document.getElementById("root"));

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

5.1.6 (2023-12-11)

Note: Version bump only for package @react-md/divider

5.1.3 (2022-05-07)

Note: Version bump only for package @react-md/divider

5.1.2 (2022-04-02)

Note: Version bump only for package @react-md/divider

5.1.0 (2022-03-18)

Other Internal Changes

• run lint-scripts --fix for consistent-type-imports (42d839d)

5.0.0 (2022-01-31)

Features

• @react-md/divider: Update useVerticalDividerHeight to support any HTMLElement (edd9287)
• @react-md/divider: Update divider styles for non-hr elements (7ccd0a6)

4.0.3 (2021-12-31)

Other Internal Changes

• Updated all packages' peerDependenciesMeta (60fcd71), closes #1319

4.0.1 (2021-11-27)

Note: Version bump only for package @react-md/divider

4.0.0 (2021-11-24)

Features

• Update to use new JSX Transform and latest eslint (8111cd3)
• @react-md/typography: Renamed Text to Typography (30cf056)

Other Internal Changes

• always skip lib check (229cef1)
• react-md: Remove prop-types package and usage (2637a6f)

Breaking Changes

• Minimum React version is now 16.14 instead of 16.8
• @react-md/typography: The Text component has been renamed to Typography to help with auto-imports conflicting with the Text element that exists in lib.d.ts
• react-md: There will no longer be run-time prop validation with the prop-types package.

3.1.0 (2021-09-10)

Other Internal Changes

• ran yarn format to include new files (48d3d7f)

3.0.0 (2021-08-13)

Note: Version bump only for package @react-md/divider

2.9.1 (2021-07-27)

Other Internal Changes

• install: slighly reduce install size by excluding tests in publish (9d01a44)

2.9.0 (2021-07-18)

Note: Version bump only for package @react-md/divider

2.8.4 (2021-06-10)

Note: Version bump only for package @react-md/divider

2.8.3 (2021-05-18)

Documentation

• react-md.dev: updated tsdoc to work with typedoc (cf54c35)

2.8.2 (2021-04-23)

Note: Version bump only for package @react-md/divider

2.8.0 (2021-04-22)

Other Internal Changes

• tsconfig: separate tsconfig by package instead of a single root (b278230)

2.7.1 (2021-03-23)

Note: Version bump only for package @react-md/divider

2.7.0 (2021-02-28)

Documentation

• tsdoc: fixed remaining tsdoc syntax warnings (946f4dd)
• tsdoc: fixed some tsdoc annotations and styling (0449b86)

Other Internal Changes

• updated test coverage to not include conditional component PropTypes (24e5df1)

2.6.0 (2021-02-13)

Other Internal Changes

• @react-md/divider: updated test to use the correct act (a621625)

2.5.5 (2021-01-30)

Note: Version bump only for package @react-md/divider

2.5.4 (2021-01-27)

Note: Version bump only for package @react-md/divider

2.5.0 (2020-12-15)

Note: Version bump only for package @react-md/divider

2.4.2 (2020-10-23)

Note: Version bump only for package @react-md/divider

2.4.1 (2020-10-17)

Note: Version bump only for package @react-md/divider

2.4.0 (2020-10-17)

Features

• @react-md/theme: Better Contrast Colors by Default and dev-utils refactor (#955) (519b128)

2.3.1 (2020-09-15)

Note: Version bump only for package @react-md/divider

2.3.0 (2020-09-10)

Note: Version bump only for package @react-md/divider

2.2.2 (2020-09-02)

Note: Version bump only for package @react-md/divider

2.2.1 (2020-09-02)

Note: Version bump only for package @react-md/divider

2.1.2 (2020-08-01)

Note: Version bump only for package @react-md/divider

2.1.1 (2020-07-21)

Note: Version bump only for package @react-md/divider

2.1.0 (2020-07-12)

Note: Version bump only for package @react-md/divider

2.0.2 (2020-06-30)

Bug Fixes

• LICENSE: Removed the time range from license since it was incorrect (50c9021)
• Added sideEffects field to package.json (31820b9)
• sideEffects formatting (78a7b6b)

v2.0.1

No changes.

v2.0.0

The Divider component was completely re-written for this release, but it should not be a breaking change. This package now also has better support for rendering dividers vertically with the VerticalDivider component.

New Behavior and Features

• the ref is now correctly passed to the DOM element
• the role has been specifically set to "separator" by default
• the vertical divider behavior now has "better" support with a new VerticalDivider component
• the dividers can now be configured using CSS variables for the background-color, size, inset, spacing, vertical-spacing, and max-size

Breaking Changes

• only styling behavior

New SCSS Variables, Functions, and Mixins

• $rmd-divider-max-size: 100% !default - The max size for a divider that can be used to make all dividers centered if desired
• $rmd-divider-spacing: 0.25rem auto !default - the amount of margin to apply to a horizontal divider
• $rmd-divider-vertical-spacing: auto 0.25rem !default - the amount of margin to apply to a vertical divider
• $rmd-divider-inset: 4rem !default - The amount of spacing to use as margin-left for an inset divider. This will automatically be swapped to margin-right for right-to-left languages
• $rmd-divider-background-color-on-light: rgba($rmd-black-base, 0.12) !default - The background color for a divider in light themes
• $rmd-divider-background-color-on-dark: rgba($rmd-white-base, 0.12) !default - The background color for a divider in dark themes
• $rmd-divider-background-color: if(rmd-theme-tone($rmd-theme-background) == light, $rmd-divider-background-color-on-light, $rmd-divider-background-color-on-dark) !default - the default background color for dividers
• @function rmd-divider-theme - gets one of the theme values and validates that the theme name is valid
• @function rmd-divider-theme-var - gets one of the theme values as a css variable with a fallback value and validates that the theme name is valid
• @mixin rmd-divider-theme - applies one of the theme values to a css property as a css variable
• @mixin rmd-divider-theme-update-var - updates one of the theme values as a css variable
• @mixin rmd-divider-border - creates a divider for an element using border styles
• @mixin rmd-divider - a mixin to generate all the divider styles for a class name selector

Renamed SCSS Variables, Functions, and Mixins

• renamed $md-divider-height to $rmd-divider-size

Removed SCSS Variables Placeholders, and Mixins

• removed $md-divider-include-borders since the border class names are no longer included and the new rmd-divider-border mixin should be used instead
• removed react-md-divider-borders since the border class names are no longer provided by default
• removed react-md-theme-dividers and react-md-theme-divider-borders since this is now handled automatically or with the new rmd-divider-theme-update-var mixin