Merge pull request #327 from AnnMarieW/chip

Add Chip and ChipGroup

Author: AnnMarieW

.github/workflows/host-test.yml

@@ -77,7 +77,7 @@ jobs:
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           GITHUB_REPOSITORY: ${{ github.repository }}
-          PR_NUMBER: ${{ github.event.inputs.pr_number }}
+          PR_NUMBER: ${{ github.event.inputs.pr_number }}      
           ARTIFACT_URL: ${{ env.artifact_url }}
           ARTIFACT_ID: ${{ env.artifact_id }}
           GITHUB_OWNER: snehilvj

CHANGELOG.md

@@ -4,9 +4,13 @@
 
 ### Added
 
-- Added `autoplay` prop to the `Carousel` component #316 by @mmarfat
+
+- Added `autoplay` prop to the `Carousel` component #316 by @mmarfat 
+- Added the `ChipGroup` component and updated `Chip` to work with it. #327 by @AnnMarieW and @BSd3v
+Note: `Chip` was available before but not documented. If you used `Chip` in dmc>=0.14.0 to dmc<=0.14.5, you’ll now need to add `controlled=True` for it to work properly on its own.
 - Added GitHub actions workflow for automated tests on PRs by @BSd3v
 
+
 ### Fixed
 
 - Excluded the `loading_state` prop from being passed to the DOM.   Added `data-dash-is-loading` attribute to

src/ts/components/core/chip/Chip.tsx

@@ -38,33 +38,61 @@ interface Props
     disabled?: boolean;
     /** To be used with chip group */
     value?: string;
+    /** Set to True when using as a single chip (not in a chip group).  Default is False */
+    controlled?: boolean;
 }
 
-/** Chip */
+/**
+Chip for use with the ChipGroup.
+Must not set the `checked` prop because it conflicts with setting the value on the ChipGroup
+ **/
 const Chip = (props: Props) => {
     const {
         children,
         setProps,
         persistence,
         persisted_props,
         persistence_type,
+        checked,
+        controlled,
+        loading_state,
         ...others
     } = props;
 
     const onChange = (checked: boolean) => {
         setProps({ checked });
     };
-
-    return (
-        <MantineChip onChange={onChange} {...others}>
-            {children}
-        </MantineChip>
-    );
+    if (controlled) {
+        return (
+            <MantineChip
+                checked={checked}
+                onChange={onChange}
+                data-dash-is-loading={
+                    (loading_state && loading_state.is_loading) || undefined
+                }
+                {...others}
+            >
+                {children}
+            </MantineChip>
+        );
+    } else {
+        return (
+            <MantineChip
+                data-dash-is-loading={
+                    (loading_state && loading_state.is_loading) || undefined
+                }
+                {...others}
+            >
+                {children}
+            </MantineChip>
+        );
+    }
 };
 
 Chip.defaultProps = {
     persisted_props: ["checked"],
     persistence_type: "local",
+    controlled: false,
 };
 
-export default Chip;
+export default Chip;

src/ts/components/core/chip/ChipGroup.tsx

@@ -1,10 +1,13 @@
 import { Chip } from "@mantine/core";
+import { useDidUpdate } from "@mantine/hooks";
 import { DashBaseProps, PersistenceProps } from "props/dash";
 import React, { useState } from "react";
 
 interface Props extends DashBaseProps, PersistenceProps {
-    /** Controlled component value */
-    value?: string[];
+    /** Determines whether it is allowed to select multiple values, `false` by default */
+    multiple?: boolean;
+    /** When using multiple=true, value must be a list */
+    value?: string[] | string | null;
     /** `Chip` components and any other elements */
     children?: React.ReactNode;
 }
@@ -18,22 +21,28 @@ const ChipGroup = (props: Props) => {
         persistence,
         persisted_props,
         persistence_type,
+        loading_state,
         ...others
     } = props;
-
     const [val, setVal] = useState(value);
 
-    // const onChange = (value: string[]) => {
-    //     setVal(value);
-    //     setProps({ value });
-    // };
+    useDidUpdate(() => {
+        setVal(value);
+    }, [value]);
 
-    // useEffect(() => {
-    //     setVal(value);
-    // }, [value]);
+    useDidUpdate(() => {
+        setProps({ value: val });
+    }, [val]);
 
     return (
-        <Chip.Group multiple value={val} onChange={setVal} {...others}>
+        <Chip.Group
+            value={val}
+            onChange={setVal}
+            data-dash-is-loading={
+                (loading_state && loading_state.is_loading) || undefined
+            }
+            {...others}
+        >
             {children}
         </Chip.Group>
     );
@@ -42,7 +51,6 @@ const ChipGroup = (props: Props) => {
 ChipGroup.defaultProps = {
     persisted_props: ["value"],
     persistence_type: "local",
-    value: [],
 };
 
-export default ChipGroup;
+export default ChipGroup;

src/ts/index.ts

@@ -146,7 +146,7 @@ import NotificationProvider from "./components/extensions/notifications/Notifica
 import NavigationProgress from "./components/extensions/nprogress/NavigationProgress";
 import NavigationProgressProvider from "./components/extensions/nprogress/NavigationProgressProvider";
 import MantineProvider from "./components/styles/MantineProvider";
-// import ChipGroup from "./components/core/chip/ChipGroup";
+import ChipGroup from "./components/core/chip/ChipGroup";
 
 export {
     Accordion,
@@ -187,6 +187,7 @@ export {
     Checkbox,
     CheckboxGroup,
     Chip,
+    ChipGroup,
     Code,
     CodeHighlight,
     CodeHighlightTabs,

usage-chip.py

@@ -0,0 +1,64 @@
+
+import dash_mantine_components as dmc
+from dash import Dash, _dash_renderer, Input, Output
+from dash_iconify import DashIconify
+_dash_renderer._set_react_version("18.2.0")
+
+
+app = Dash(external_stylesheets=dmc.styles.ALL)
+
+with_callback =  dmc.Box([
+        dmc.Text("Set chip with toggle button or clicking on chip", m="sm"),
+        dmc.Button("toggle", id="btn-chip", n_clicks=0, mb="sm"),
+        dmc.Chip("awesome chip", checked=True, id="chip", controlled=True),
+        dmc.Text(id="chip-container"),
+    ], p=20)
+
+icon = dmc.Chip("Forbidden", icon=DashIconify(icon="bi-x-circle"), color="red", checked=True, m="sm", controlled=True)
+
+
+tooltip = dmc.Tooltip(
+    label="chip tooltip",
+  #  refProp="rootRef",  Need to update Tootlip to add this prop but still works ok
+    children=dmc.Chip("chip with tooltip", controlled=True)
+)
+
+add_props_to_root = dmc.Chip(
+    "Chip with props added to root" ,
+    wrapperProps={'data-testid': 'wrapper'},
+    checked=True,
+    controlled=True
+)
+
+
+
+app.layout = dmc.MantineProvider([
+    with_callback,
+    dmc.Divider(my="lg"),
+    icon,
+    dmc.Divider(my="lg"),
+    tooltip,
+    dmc.Divider(my="lg"),
+    add_props_to_root
+])
+
+
+@app.callback(
+    Output("chip", "checked"),
+    Input("btn-chip", "n_clicks")
+)
+def update(n):
+    if n %2 == 0:
+        return True
+    return False
+
+
+@app.callback(
+    Output("chip-container", "children"),
+    Input("chip", "checked")
+)
+def update(checked):
+    return f"You selected: {checked}"
+
+if __name__ == "__main__":
+    app.run(debug=True)

usage-chipgroup-multiple.py

@@ -0,0 +1,50 @@
+
+import dash_mantine_components as dmc
+from dash import Dash, _dash_renderer, Input, Output
+_dash_renderer._set_react_version("18.2.0")
+
+
+app = Dash(external_stylesheets=dmc.styles.ALL)
+
+chip_group = dmc.ChipGroup(
+    children=dmc.Group([
+        dmc.Chip("Chip a", value="a"),
+        dmc.Chip("Chip b", value="b")
+    ]),
+    #value=["a", "b"],
+    id ="chip-group",
+    multiple=True
+)
+
+with_callback = dmc.Box([
+        dmc.Text("Multiple chips can be set at one time"),
+        dmc.Text("Set chip with toggle button or clicking on chip"),
+        dmc.Button("toggle group", id="btn-chip-group", n_clicks=0 ,m="sm"),
+        chip_group,
+        dmc.Text(id="chip-group-container"),
+    ], p=20)
+
+app.layout = dmc.MantineProvider(
+    with_callback
+)
+
+@app.callback(
+    Output("chip-group", "value"),
+    Input("btn-chip-group", "n_clicks")
+)
+def update(n):
+    if n % 2 == 0:
+        return ["a", "b"]
+    return []
+
+
+@app.callback(
+    Output("chip-group-container", "children"),
+    Input("chip-group", "value")
+)
+def update(checked):
+    return f"You selected: {checked}"
+
+
+if __name__ == "__main__":
+    app.run(debug=True)

usage-chipgroup.py

@@ -0,0 +1,51 @@
+
+import dash_mantine_components as dmc
+from dash import Dash, _dash_renderer, Input, Output
+_dash_renderer._set_react_version("18.2.0")
+
+
+app = Dash(external_stylesheets=dmc.styles.ALL)
+
+chip_group = dmc.ChipGroup(
+    children=dmc.Group([
+        dmc.Chip("Chip a", value="a"),
+        dmc.Chip("Chip b", value="b")
+    ]),
+    value="a",
+    id ="chip-group",
+    multiple=True
+)
+
+
+with_callback = dmc.Box([
+        dmc.Text("Single Chip can be set at a time"),
+        dmc.Text("Set chip with toggle button or clicking on chip"),
+        dmc.Button("toggle", id="btn-chip-group", n_clicks=0 , m="sm"),
+        chip_group,
+        dmc.Text(id="chip-group-container"),
+    ], p=20)
+
+app.layout = dmc.MantineProvider([
+    with_callback,
+])
+
+@app.callback(
+    Output("chip-group", "value"),
+    Input("btn-chip-group", "n_clicks")
+)
+def update(n):
+    if n % 2 == 0:
+        return "a"
+    return "b"
+
+
+@app.callback(
+    Output("chip-group-container", "children"),
+    Input("chip-group", "value")
+)
+def update(checked):
+    return f"You selected: {checked}"
+
+
+if __name__ == "__main__":
+    app.run(debug=True)