Merge pull request #440 from AnnMarieW/add-missing-props-428

add missing props from issue 428

Author: AnnMarieW

CHANGELOG.md

@@ -4,6 +4,7 @@
 ### Added
 
 - Added `disabled` prop to `Radio`  #425  by @namakshenas
+- Added various props: `acceptValueOnBlur` to `TagsInput`, `gradient` to `LineChart`, `hideWithOnePage` to `Pagination`, `name` to `Avatar`, and `disabled` to `NumberInput`. #440 by @AnnMarieW
 - Added `SemiCircleProgress` component #434 by @AnnMarieW
 
 ### Fixed

src/ts/components/charts/LineChart.tsx

@@ -2,6 +2,8 @@ import { LineChart as MantineLineChart } from "@mantine/charts";
 import {
     LineChartCurveType,
     LineChartSeries,
+    LineChartGradientStop,
+    LineChartType,
 } from "@mantine/charts/lib/LineChart/LineChart";
 import { BoxProps } from "props/box";
 import { GridChartBaseProps } from "props/charts";
@@ -52,10 +54,13 @@ interface Props
     highlightHover?: boolean
     /** Determines whether each point should have associated label, False by default  */
     withPointLabels?: boolean;
-    
+     /** Data used to generate gradient stops, [{ offset: 0, color: 'red' }, { offset: 100, color: 'blue' }] by default */
+    gradientStops?: LineChartGradientStop[];
+    /** Controls styles of the line 'default' | 'gradient'.   'default' by default */
+    type?: LineChartType;
 }
 
-/** LineChart */
+/** Mantine-themed line chart built on top of the Recharts library, */
 const LineChart = (props: Props) => {
     const { setProps, loading_state, clickData, hoverData, clickSeriesName, hoverSeriesName, series, highlightHover, lineChartProps, activeDotProps, lineProps, ...others } = props;
 

src/ts/components/core/Pagination.tsx

@@ -38,9 +38,11 @@ interface Props
     radius?: MantineRadius;
     /** Determines whether active item text color should depend on `background-color` of the indicator. If luminosity of the `color` prop is less than `theme.luminosityThreshold`, then `theme.white` will be used for text color, otherwise `theme.black`. Overrides `theme.autoContrast`. */
     autoContrast?: boolean;
+    /** Determines whether the pagination should be hidden when only one page is available (total=1), False by default */
+    hideWithOnePage?: boolean;
 }
 
-/** Pagination */
+/** Use the Pagination component to display active page and navigate between multiple pages */
 const Pagination = (props: Props) => {
     const {
         setProps,

src/ts/components/core/avatar/Avatar.tsx

@@ -15,8 +15,8 @@ interface Props extends BoxProps, StylesApiProps, DashBaseProps {
     size?: MantineSize | (string & {}) | number;
     /** Key of `theme.radius` or any valid CSS value to set border-radius, `'100%'` by default */
     radius?: MantineRadius;
-    /** Key of `theme.colors` or any valid CSS color, default value is `theme.primaryColor`  */
-    color?: MantineColor;
+    /** Key of `theme.colors` or any valid CSS color, default value is `theme.primaryColor`.  Set to "initials" to auto generate color based on `name`  */
+    color?: MantineColor  | "initials";
     /** Gradient configuration used when `variant="gradient"`, default value is `theme.defaultGradient` */
     gradient?: MantineGradient;
     /** Image url, if the image cannot be loaded or `src={null}`, then placeholder is displayed instead */
@@ -29,9 +29,11 @@ interface Props extends BoxProps, StylesApiProps, DashBaseProps {
     children?: React.ReactNode;
     /** Determines whether text color with filled variant should depend on `background-color`. If luminosity of the `color` prop is less than `theme.luminosityThreshold`, then `theme.white` will be used for text color, otherwise `theme.black`. Overrides `theme.autoContrast`. */
     autoContrast?: boolean;
+    /** Name of the user. When src is not set, used to display initials and to generate color when color="initials" is set.  */
+    name?: string;
 }
 
-/** Avatar */
+/** Use the Avatar component to display user profile image, initials or fallback icon */
 const Avatar = (props: Props) => {
     const { children, setProps, loading_state, ...others } = props;
 

src/ts/components/core/combobox/TagsInput.tsx

@@ -42,9 +42,11 @@ interface Props
     hiddenInputValuesDivider?: string;
     /** Props passed down to the underlying `ScrollArea` component in the dropdown */
     scrollAreaProps?: ScrollAreaProps;
+    /** Determines whether the value typed in by the user but not submitted should be accepted when the input is blurred, true by default */
+    acceptValueOnBlur?: boolean;
 }
 
-/** TagsInput */
+/** TagsInput captures a list of values from user with free input and suggestions */
 const TagsInput = (props: Props) => {
     const { setProps, loading_state, data, searchValue, value, ...others } =
         props;
@@ -80,7 +82,6 @@ const TagsInput = (props: Props) => {
             data-dash-is-loading={
                 (loading_state && loading_state.is_loading) || undefined
             }
-            wrapperProps={{ autoComplete: "off" }}
             data={options}
             onChange={setSelected}
             value={selected}

src/ts/components/core/input/NumberInput.tsx

@@ -59,9 +59,12 @@ interface Props
     stepHoldDelay?: number;
     /** (string; default "off") Enables the browser to attempt autocompletion based on user history.  For more information, see: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete  */
     autoComplete?: string;
+    /** Sets disabled attribute on the input element */
+    disabled?: boolean;
+
 }
 
-/** NumberInput */
+/** The NumberInput component allows users to input numeric values  */
 const NumberInput = (props: Props) => {
     const {
         setProps,