diff --git a/docs/components_page/components/list_group.md b/docs/components_page/components/list_group.md index 11b9f7016..4199a2bce 100644 --- a/docs/components_page/components/list_group.md +++ b/docs/components_page/components/list_group.md @@ -29,7 +29,7 @@ Pass one of Bootstrap's contextual colors to the `color` argument of `ListGroupI ## Custom content -You can pass any Dash components to the children of `ListGroupItem`. The components `ListGroupItemHeading` and `ListGroupItemText` automatically apply the relevant CSS classes for styling text content in list groups. +You can pass any Dash components to the children of `ListGroupItem`. {{example:components/list_group/content.py:list_group}} @@ -44,7 +44,3 @@ In the below example, the first list group is always horizontal, the second is h {{apidoc:src/components/listgroup/ListGroup.js}} {{apidoc:src/components/listgroup/ListGroupItem.js}} - -{{apidoc:src/components/listgroup/ListGroupItemHeading.js}} - -{{apidoc:src/components/listgroup/ListGroupItemText.js}} diff --git a/docs/components_page/components/list_group/colors.py b/docs/components_page/components/list_group/colors.py index 5fb479750..5acee6b23 100644 --- a/docs/components_page/components/list_group/colors.py +++ b/docs/components_page/components/list_group/colors.py @@ -2,11 +2,14 @@ list_group = dbc.ListGroup( [ + dbc.ListGroupItem("No color applied"), dbc.ListGroupItem("The primary item", color="primary"), dbc.ListGroupItem("A secondary item", color="secondary"), dbc.ListGroupItem("A successful item", color="success"), dbc.ListGroupItem("A warning item", color="warning"), dbc.ListGroupItem("A dangerous item", color="danger"), dbc.ListGroupItem("An informative item", color="info"), + dbc.ListGroupItem("A light item", color="light"), + dbc.ListGroupItem("A dark item", color="dark"), ] ) diff --git a/docs/components_page/components/list_group/content.R b/docs/components_page/components/list_group/content.R index 9d5970e01..d536d2343 100644 --- a/docs/components_page/components/list_group/content.R +++ b/docs/components_page/components/list_group/content.R @@ -4,14 +4,32 @@ list_group <- dbcListGroup( list( dbcListGroupItem( list( - dbcListGroupItemHeading("This item has a heading"), - dbcListGroupItemText("And some text underneath") + htmlDiv( + list( + htmlH5("This item has a heading", class_name="mb-1"), + htmlSmall("Yay!", class_name="text-success"), + ), + class_name="d-flex w-100 justify-content-between", + ), + htmlP("And some text underneath", class_name="mb-1"), + htmlSmall("Plus some small print.", class_name="text-muted"), ) ), dbcListGroupItem( list( - dbcListGroupItemHeading("This item also has a heading"), - dbcListGroupItemText("And some more text underneath too") + htmlDiv( + list( + htmlH5( + "This item also has a heading", class_name="mb-1" + ), + htmlSmall("Ok!", class_name="text-warning"), + ), + class_name="d-flex w-100 justify-content-between", + ), + htmlP("And some more text underneath too", class_name="mb-1"), + htmlSmall( + "Plus even more small print.", class_name="text-muted" + ), ) ) ) diff --git a/docs/components_page/components/list_group/content.jl b/docs/components_page/components/list_group/content.jl index d1cfbf774..07a587cd3 100644 --- a/docs/components_page/components/list_group/content.jl +++ b/docs/components_page/components/list_group/content.jl @@ -1,12 +1,30 @@ -using DashBootstrapComponents +using DashBootstrapComponents, DashHtmlComponents list_group = dbc_listgroup([ dbc_listgroupitem([ - dbc_listgroupitemheading("This item has a heading"), - dbc_listgroupitemtext("And some text underneath"), + html_div( + [ + html_h5("This item has a heading", class_name="mb-1"), + html_small("Yay!", class_name="text-success"), + ], + class_name="d-flex w-100 justify-content-between", + ), + html_p("And some text underneath", class_name="mb-1"), + html_small("Plus some small print.", class_name="text-muted"), ]), dbc_listgroupitem([ - dbc_listgroupitemheading("This item also has a heading"), - dbc_listgroupitemtext("And some more text underneath too"), + html_div( + [ + html_h5( + "This item also has a heading", class_name="mb-1" + ), + html_small("Ok!", class_name="text-warning"), + ], + class_name="d-flex w-100 justify-content-between", + ), + html_p("And some more text underneath too", class_name="mb-1"), + html_small( + "Plus even more small print.", class_name="text-muted" + ), ]), ]); diff --git a/docs/components_page/components/list_group/content.py b/docs/components_page/components/list_group/content.py index df70cb627..8df895153 100644 --- a/docs/components_page/components/list_group/content.py +++ b/docs/components_page/components/list_group/content.py @@ -1,17 +1,36 @@ import dash_bootstrap_components as dbc +import dash_html_components as html list_group = dbc.ListGroup( [ dbc.ListGroupItem( [ - dbc.ListGroupItemHeading("This item has a heading"), - dbc.ListGroupItemText("And some text underneath"), + html.Div( + [ + html.H5("This item has a heading", class_name="mb-1"), + html.Small("Yay!", class_name="text-success"), + ], + class_name="d-flex w-100 justify-content-between", + ), + html.P("And some text underneath", class_name="mb-1"), + html.Small("Plus some small print.", class_name="text-muted"), ] ), dbc.ListGroupItem( [ - dbc.ListGroupItemHeading("This item also has a heading"), - dbc.ListGroupItemText("And some more text underneath too"), + html.Div( + [ + html.H5( + "This item also has a heading", class_name="mb-1" + ), + html.Small("Ok!", class_name="text-warning"), + ], + class_name="d-flex w-100 justify-content-between", + ), + html.P("And some more text underneath too", class_name="mb-1"), + html.Small( + "Plus even more small print.", class_name="text-muted" + ), ] ), ] diff --git a/docs/demos/theme_explorer/list_group.py b/docs/demos/theme_explorer/list_group.py index 2fab84b99..863d7e2fa 100644 --- a/docs/demos/theme_explorer/list_group.py +++ b/docs/demos/theme_explorer/list_group.py @@ -13,8 +13,8 @@ dbc.ListGroupItem("Item 3"), dbc.ListGroupItem( [ - dbc.ListGroupItemHeading("Item 4 heading"), - dbc.ListGroupItemText("Item 4 text"), + html.H5("Item 4 heading"), + html.P("Item 4 text"), ] ), ] diff --git a/src/components/listgroup/ListGroup.js b/src/components/listgroup/ListGroup.js index cd23c8732..2a57ff6b9 100644 --- a/src/components/listgroup/ListGroup.js +++ b/src/components/listgroup/ListGroup.js @@ -1,25 +1,35 @@ import React from 'react'; import PropTypes from 'prop-types'; import {omit} from 'ramda'; -import {ListGroup as RSListGroup} from 'reactstrap'; +import {default as RBListGroup} from 'react-bootstrap/ListGroup'; /** * Bootstrap list groups are a flexible way to display a series of content. Use * in conjunction with `ListGroupItem`, `ListGroupItemHeading` and * `ListGroupItemText`. */ -const ListGroup = (props) => { - const {children, loading_state, className, class_name, ...otherProps} = props; +const ListGroup = props => { + const { + children, + loading_state, + className, + class_name, + flush, + tag, + ...otherProps + } = props; return ( - {children} - + ); }; @@ -87,7 +97,7 @@ ListGroup.propTypes = { /** * Holds the name of the component that is loading */ - component_name: PropTypes.string, + component_name: PropTypes.string }), /** @@ -97,7 +107,7 @@ ListGroup.propTypes = { * Note that horizontal ListGroups cannot be combined with flush ListGroups, * so if flush is True then horizontal has no effect. */ - horizontal: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]), + horizontal: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]) }; export default ListGroup; diff --git a/src/components/listgroup/ListGroupItem.js b/src/components/listgroup/ListGroupItem.js index b026c7af1..719724ac8 100644 --- a/src/components/listgroup/ListGroupItem.js +++ b/src/components/listgroup/ListGroupItem.js @@ -1,14 +1,14 @@ import React from 'react'; import PropTypes from 'prop-types'; import {omit} from 'ramda'; -import {ListGroupItem as RSListGroupItem} from 'reactstrap'; +import {default as RBListGroup} from 'react-bootstrap/ListGroup'; import Link from '../../private/Link'; import {bootstrapColors} from '../../private/BootstrapColors'; /** * Create a single item in a `ListGroup`. */ -const ListGroupItem = (props) => { +const ListGroupItem = props => { let { children, disabled, @@ -27,7 +27,7 @@ const ListGroupItem = (props) => { if (!disabled && setProps) { setProps({ n_clicks: n_clicks + 1, - n_clicks_timestamp: Date.now(), + n_clicks_timestamp: Date.now() }); } }; @@ -36,11 +36,11 @@ const ListGroupItem = (props) => { otherProps[useLink ? 'preOnClick' : 'onClick'] = incrementClicks; return ( - { } > {children} - + ); }; ListGroupItem.defaultProps = { n_clicks: 0, - n_clicks_timestamp: -1, + n_clicks_timestamp: -1 }; ListGroupItem.propTypes = { @@ -166,13 +166,13 @@ ListGroupItem.propTypes = { /** * Holds the name of the component that is loading */ - component_name: PropTypes.string, + component_name: PropTypes.string }), /** * Target attribute to pass on to the link. Only applies to external links. */ - target: PropTypes.string, + target: PropTypes.string }; export default ListGroupItem; diff --git a/src/components/listgroup/ListGroupItemHeading.js b/src/components/listgroup/ListGroupItemHeading.js deleted file mode 100644 index 281f0fa85..000000000 --- a/src/components/listgroup/ListGroupItemHeading.js +++ /dev/null @@ -1,85 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import {omit} from 'ramda'; -import {ListGroupItemHeading as RSListGroupItemHeading} from 'reactstrap'; - -/** - * Add a heading to any `ListGroupItem`. - */ -const ListGroupItemHeading = (props) => { - const {children, loading_state, className, class_name, ...otherProps} = props; - return ( - - {children} - - ); -}; - -ListGroupItemHeading.propTypes = { - /** - * The ID of this component, used to identify dash components - * in callbacks. The ID needs to be unique across all of the - * components in an app. - */ - id: PropTypes.string, - - /** - * The children of this component - */ - children: PropTypes.node, - - /** - * Defines CSS styles which will override styles previously set. - */ - style: PropTypes.object, - - /** - * Often used with CSS to style elements with common properties. - */ - class_name: PropTypes.string, - - /** - * **DEPRECATED** Use `class_name` instead. - * - * Often used with CSS to style elements with common properties. - */ - className: PropTypes.string, - - /** - * A unique identifier for the component, used to improve - * performance by React.js while rendering components - * See https://reactjs.org/docs/lists-and-keys.html for more info - */ - key: PropTypes.string, - - /** - * HTML tag to use for the heading, default: h5 - */ - tag: PropTypes.string, - - /** - * Object that holds the loading state object coming from dash-renderer - */ - loading_state: PropTypes.shape({ - /** - * Determines if the component is loading or not - */ - is_loading: PropTypes.bool, - /** - * Holds which property is loading - */ - prop_name: PropTypes.string, - /** - * Holds the name of the component that is loading - */ - component_name: PropTypes.string, - }), -}; - -export default ListGroupItemHeading; diff --git a/src/components/listgroup/ListGroupItemText.js b/src/components/listgroup/ListGroupItemText.js deleted file mode 100644 index 27e706e7c..000000000 --- a/src/components/listgroup/ListGroupItemText.js +++ /dev/null @@ -1,107 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import {omit} from 'ramda'; -import {ListGroupItemText as RSListGroupItemText} from 'reactstrap'; -import classNames from 'classnames'; -import {bootstrapTextColors} from '../../private/BootstrapColors'; - -/** - * Apply consistent styling to text within a list group. - */ -const ListGroupItemText = (props) => { - const { - children, - className, - class_name, - color, - style, - loading_state, - ...otherProps - } = props; - const isBootstrapColor = bootstrapTextColors.has(color); - const classes = classNames( - class_name || className, - color && isBootstrapColor && `text-${color}` - ); - return ( - - {children} - - ); -}; - -ListGroupItemText.propTypes = { - /** - * The ID of this component, used to identify dash components - * in callbacks. The ID needs to be unique across all of the - * components in an app. - */ - id: PropTypes.string, - - /** - * The children of this component - */ - children: PropTypes.node, - - /** - * Defines CSS styles which will override styles previously set. - */ - style: PropTypes.object, - - /** - * Often used with CSS to style elements with common properties. - */ - class_name: PropTypes.string, - - /** - * **DEPRECATED** Use `class_name` instead. - * - * Often used with CSS to style elements with common properties. - */ - className: PropTypes.string, - - /** - * A unique identifier for the component, used to improve - * performance by React.js while rendering components - * See https://reactjs.org/docs/lists-and-keys.html for more info - */ - key: PropTypes.string, - - /** - * HTML tag to use for the text, default: p - */ - tag: PropTypes.string, - - /** - * Text color, options: primary, secondary, success, warning, danger, info, - * muted, light, dark, body, white, black-50, white-50. - */ - color: PropTypes.string, - - /** - * Object that holds the loading state object coming from dash-renderer - */ - loading_state: PropTypes.shape({ - /** - * Determines if the component is loading or not - */ - is_loading: PropTypes.bool, - /** - * Holds which property is loading - */ - prop_name: PropTypes.string, - /** - * Holds the name of the component that is loading - */ - component_name: PropTypes.string, - }), -}; - -export default ListGroupItemText; diff --git a/src/components/listgroup/__tests__/ListGroupItemHeading.test.js b/src/components/listgroup/__tests__/ListGroupItemHeading.test.js deleted file mode 100644 index 52cf61150..000000000 --- a/src/components/listgroup/__tests__/ListGroupItemHeading.test.js +++ /dev/null @@ -1,45 +0,0 @@ -import React from 'react'; -import {render} from '@testing-library/react'; -import ListGroupItemHeading from '../ListGroupItemHeading'; - -describe('ListGroupItemHeading', () => { - test('renders a level 5 heading with class "list-group-item-heading"', () => { - const listGroupItemHeading = render(); - - expect( - listGroupItemHeading.container.querySelector('h5.list-group-item-heading') - ).not.toBe(null); - }); - - test('HTML element can be chosen with "tag" prop', () => { - const listGroupItemHeading3 = render(); - - expect( - listGroupItemHeading3.container.querySelector( - 'h3.list-group-item-heading' - ) - ).not.toBe(null); - - const listGroupItemHeadingSpan = render( - - ); - - expect( - listGroupItemHeadingSpan.container.querySelector( - 'span.list-group-item-heading' - ) - ).not.toBe(null); - }); - - test('renders its content', () => { - const listGroupItemHeading = render( - - Some list group item heading content - - ); - - expect(listGroupItemHeading.container).toHaveTextContent( - 'Some list group item heading content' - ); - }); -}); diff --git a/src/components/listgroup/__tests__/ListGroupItemText.test.js b/src/components/listgroup/__tests__/ListGroupItemText.test.js deleted file mode 100644 index 12c3a7a69..000000000 --- a/src/components/listgroup/__tests__/ListGroupItemText.test.js +++ /dev/null @@ -1,37 +0,0 @@ -import React from 'react'; -import {render} from '@testing-library/react'; -import ListGroupItemText from '../ListGroupItemText'; - -describe('ListGroupItemText', () => { - test('renders a paragraph with class "list-group-item-text"', () => { - const listGroupItemText = render(); - - expect( - listGroupItemText.container.querySelector('p.list-group-item-text') - ).not.toBe(null); - }); - - test('HTML element can be chosen with "tag" prop', () => { - const listGroupItemTextDiv = render(); - - expect( - listGroupItemTextDiv.container.querySelector('div.list-group-item-text') - ).not.toBe(null); - - const listGroupItemTextSpan = render(); - - expect( - listGroupItemTextSpan.container.querySelector('span.list-group-item-text') - ).not.toBe(null); - }); - - test('renders its content', () => { - const listGroupItemText = render( - Some list group item text content - ); - - expect(listGroupItemText.container).toHaveTextContent( - 'Some list group item text content' - ); - }); -}); diff --git a/src/index.js b/src/index.js index a84989f0a..6c2f2beb9 100644 --- a/src/index.js +++ b/src/index.js @@ -34,8 +34,6 @@ export {default as InputGroupText} from './components/input/InputGroupText'; export {default as Label} from './components/Label'; export {default as ListGroup} from './components/listgroup/ListGroup'; export {default as ListGroupItem} from './components/listgroup/ListGroupItem'; -export {default as ListGroupItemHeading} from './components/listgroup/ListGroupItemHeading'; -export {default as ListGroupItemText} from './components/listgroup/ListGroupItemText'; export {default as Modal} from './components/modal/Modal'; export {default as ModalBody} from './components/modal/ModalBody'; export {default as ModalFooter} from './components/modal/ModalFooter';