Merge pull request #478 from AnnMarieW/add-missing-props2

Add missing props

CHANGELOG.md

@@ -6,6 +6,13 @@
 - Added `disabled` prop for individual options on a `SegmentedControl`  #451  by @petefine 
 - Added `type` prop for `SimpleGrid` #472 by @namakshenas
 - Added `type` prop and `breakpoints` prop for `Grid` #473 by @namakshenas
+- Added props:
+    - `inline` prop to `Center`, 
+    - `allowedInitialsColors` to `Avatar`
+    - `defaultExpanded` to `CodeHightlightTabs`
+    - `autoComplete` to `PasswordInput`
+  #478 by @AnnMarieW
+
 - Added `Tree` component #460 by @Godisemo
 - Added `InlineCodeHighlight` component #483 by @Godisemo
 

src/ts/components/core/Center.tsx

@@ -7,9 +7,11 @@ import React from "react";
 interface Props extends BoxProps, StylesApiProps, DashBaseProps {
     /* Content */
     children?: React.ReactNode;
+    /** Determines whether `inline-flex` should be used instead of `flex`, `false` by default */
+    inline?: boolean;
 }
 
-/** Center */
+/** Centers content vertically and horizontally */
 const Center = (props: Props) => {
     const { children, setProps, loading_state, ...others } = props;
 

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

@@ -31,6 +31,8 @@ interface Props extends BoxProps, StylesApiProps, DashBaseProps {
     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;
+    /** An array of colors that can be used for autogenerated initials. By default, all default Mantine colors can be used except gray and dark. */
+    allowedInitialsColors?: MantineColor[];
 }
 
 /** Use the Avatar component to display user profile image, initials or fallback icon */

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

@@ -19,6 +19,8 @@ interface Props
     visible?: boolean;
     /** Input value for controlled component */
     value?: string;
+    /** (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;
 }
 
 /** PasswordInput */
@@ -83,6 +85,7 @@ const PasswordInput = (props: Props) => {
 PasswordInput.defaultProps = {
     debounce: false,
     value: "",
+    autoComplete: "off",
     persisted_props: ["value"],
     persistence_type: "local",
     n_submit: 0,

src/ts/components/extensions/codehighlight/CodeHighlightTabs.tsx

@@ -22,8 +22,8 @@ interface Props extends BoxProps, StylesApiProps, DashBaseProps {
     copiedLabel?: string;
     /** `max-height` of code in collapsed state */
     maxCollapsedHeight?: React.CSSProperties["maxHeight"];
-    /** Controlled expanded state */
-    expanded?: boolean;
+    /** Uncontrolled expanded state initial value */
+    defaultExpanded?: boolean;
     /** Expand button label and tooltip, `'Expand code'` by default */
     expandCodeLabel?: string;
     /** Collapse button label and tooltip, `'Collapse code'` by default */
@@ -45,6 +45,7 @@ const CodeHighlightTabs = (props: Props) => {
     } else {
         renderedCode.push(renderDashComponents(code, ["icon"]));
     }
+    console.log(renderedCode)
 
     return (
         <MantineCodeHighlightTabs