minor fixes

components/system/components/DatePicker.js

@@ -328,7 +328,7 @@ export class DatePicker extends React.Component {
         <Boundary
           enabled={this.state.cal}
           onOutsideRectEvent={this._handleCalendar}
-          style={{ maxWidth: this.props.full ? "auto" : "480px" }}
+          style={{ maxWidth: this.props.full ? "none" : "480px" }}
         >
           <div css={STYLES_DATE_INPUT}>
             <input

components/system/components/Input.js

@@ -181,7 +181,6 @@ export class Input extends React.Component {
             disabled={this.props.disabled}
             readOnly={this.props.readOnly}
             style={{
-              ...this.props.style,
               boxShadow: this.props.validation
                 ? `0 1px 4px rgba(0, 0, 0, 0.07), inset 0 0 0 2px ${
                     INPUT_COLOR_MAP[this.props.validation]
@@ -189,6 +188,7 @@ export class Input extends React.Component {
                 : null,
               paddingRight:
                 this.props.copyable || this.props.icon ? "32px" : "24px",
+              ...this.props.style,
             }}
           />
           <div

components/system/components/fragments/DescriptionGroup.js

@@ -32,14 +32,16 @@ const STYLES_DESCRIPTION_GROUP_DESCRIPTION = css`
 
 export const DescriptionGroup = (props) => {
   return (
-    <div style={{ maxWidth: props.full ? "auto" : "480px", ...props.style }}>
+    <div style={{ maxWidth: props.full ? "none" : "480px", ...props.style }}>
       {!Strings.isEmpty(props.label) ? (
         <div css={STYLES_DESCRIPTION_GROUP_LABEL}>
           {props.label} {props.tooltip ? null : null}
         </div>
       ) : null}
       {!Strings.isEmpty(props.description) ? (
-        <div css={STYLES_DESCRIPTION_GROUP_DESCRIPTION}>{props.description}</div>
+        <div css={STYLES_DESCRIPTION_GROUP_DESCRIPTION}>
+          {props.description}
+        </div>
       ) : null}
     </div>
   );

pages/_/experiences/filecoin-settings.js

@@ -81,6 +81,10 @@ class Example extends React.Component {
 `;
 
 export default class SystemPageFilecoinSettings extends React.Component {
+  _handleSave = async (storageConfig) => {
+    alert("Saved");
+  };
+
   render() {
     return (
       <SystemPage

pages/_/system/buttons.js

@@ -4,6 +4,7 @@ import * as System from "~/components/system";
 import SystemPage from "~/components/system/SystemPage";
 import ViewSourceLink from "~/components/system/ViewSourceLink";
 import CodeBlock from "~/components/system/CodeBlock";
+import Group from "~/components/system/Group";
 
 export default class SystemPageButtons extends React.Component {
   render() {
@@ -155,6 +156,41 @@ class ExampleDisabledLabel extends React.Component {
   }
 }`}
         </CodeBlock>
+        <br />
+        <br />
+        <br />
+        <System.H2>Accepted React Properties</System.H2>
+        <hr />
+        <br />
+        <Group title="Buttons">
+          <System.Table
+            data={{
+              columns: [
+                { key: "a", name: "Name", width: "128px" },
+                { key: "b", name: "Type", width: "88px", type: "OBJECT_TYPE" },
+                { key: "c", name: "Default", width: "88px" },
+                { key: "d", name: "Description", width: "100%" },
+              ],
+              rows: [
+                {
+                  id: 1,
+                  a: "type",
+                  b: "string",
+                  c: "null",
+                  d: "If set to 'label', button will be a label.",
+                },
+                {
+                  id: 2,
+                  a: "full",
+                  b: "boolean",
+                  c: "false",
+                  d:
+                    "If true, width is set to 100%. Otherwise, width is according to the content of the button.",
+                },
+              ],
+            }}
+          />
+        </Group>
       </SystemPage>
     );
   }