Add isFilled prop to Set; Make SelectMenu more form friendly

jxom · Feb 14, 2019 · 027708e · 027708e
1 parent 914754d
commit 027708e
Show file tree

Hide file tree

Showing 15 changed files with 211 additions and 77 deletions.
diff --git a/src/Checkbox/Checkbox.tsx b/src/Checkbox/Checkbox.tsx
@@ -25,7 +25,7 @@ export type LocalCheckboxProps = {
   /** State of the checkbox. Can be any color in the palette. */
   state?: string;
   /** Initial value of the checkbox */
-  value?: string;
+  value?: boolean | string;
   /** Function to invoke when focus is lost */
   onBlur?: React.FocusEventHandler<HTMLInputElement>;
   /** Function to invoke when checkbox has changed */
@@ -73,6 +73,7 @@ export const Checkbox: React.FunctionComponent<LocalCheckboxProps> = ({
       name={name}
       state={state}
       type="checkbox"
+      // @ts-ignore
       value={value}
     />
     <CheckboxIcon state={state} />
@@ -96,7 +97,7 @@ export const checkboxPropTypes = {
   label: PropTypes.string,
   name: PropTypes.string,
   state: PropTypes.string,
-  value: PropTypes.string,
+  value: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
   onBlur: PropTypes.func,
   onChange: PropTypes.func,
   onFocus: PropTypes.func
@@ -122,5 +123,6 @@ export const checkboxDefaultProps = {
 };
 Checkbox.defaultProps = checkboxDefaultProps;
 
+// @ts-ignore
 const C: React.FunctionComponent<CheckboxProps> = Checkbox;
 export default C;
diff --git a/src/FieldSet/__tests__/__snapshots__/FieldSet.test.tsx.snap b/src/FieldSet/__tests__/__snapshots__/FieldSet.test.tsx.snap
@@ -65,16 +65,13 @@ exports[`renders correctly for a basic field 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
   -webkit-align-items: flex-start;
   -webkit-box-align: flex-start;
   -ms-flex-align: flex-start;
   align-items: flex-start;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
 }
 
 .c1 > *:not(:last-child) {

diff --git a/src/LayoutSet/__tests__/__snapshots__/LayoutSet.test.tsx.snap b/src/LayoutSet/__tests__/__snapshots__/LayoutSet.test.tsx.snap
@@ -23,16 +23,13 @@ exports[`renders correctly for a basic field 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
   -webkit-align-items: flex-start;
   -webkit-box-align: flex-start;
   -ms-flex-align: flex-start;
   align-items: flex-start;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
 }
 
 .c1 > *:not(:last-child) {
@@ -44,16 +41,13 @@ exports[`renders correctly for a basic field 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
   -webkit-align-items: flex-start;
   -webkit-box-align: flex-start;
   -ms-flex-align: flex-start;
   align-items: flex-start;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
 }
 
 .c8 > *:not(:last-child) {

diff --git a/src/Menu/MenuButton.tsx b/src/Menu/MenuButton.tsx
@@ -48,6 +48,7 @@ export class MenuButton extends React.Component<LocalMenuButtonProps> {
         onKeyDown={this.handleKeyDown}
         {...context}
         {...props}
+        type="button"
       />
     );
   };

diff --git a/src/Menu/MenuItem.tsx b/src/Menu/MenuItem.tsx
@@ -48,7 +48,7 @@ export class MenuItem extends React.Component<LocalMenuItemProps> {
   render = () => {
     const { children, icon, isDisabled, ...props } = this.props;
     return (
-      <_MenuItem role="menuitem" disabled={isDisabled} {...props} onClick={this.handleClick}>
+      <_MenuItem role="menuitem" disabled={isDisabled} {...props} onClick={this.handleClick} type="button">
         {icon && (
           // @ts-ignore
           <MenuIcon a11yHidden icon={icon} />

diff --git a/src/Menu/__tests__/__snapshots__/Menu.test.tsx.snap b/src/Menu/__tests__/__snapshots__/Menu.test.tsx.snap
@@ -111,12 +111,14 @@ a.c3:hover {
     <button
       class="c3 c4"
       role="menuitem"
+      type="button"
     >
       Edit...
     </button>
     <button
       class="c3 c4"
       role="menuitem"
+      type="button"
     >
       Share...
     </button>
@@ -287,6 +289,7 @@ a.c5:hover {
     <button
       class="c4 c5 c6"
       role="menuitem"
+      type="button"
     >
       <svg
         aria-hidden="true"
@@ -307,6 +310,7 @@ a.c5:hover {
     <button
       class="c4 c5 c6"
       role="menuitem"
+      type="button"
     >
       <svg
         aria-hidden="true"
@@ -335,6 +339,7 @@ a.c5:hover {
     <button
       class="c4 c5 c6"
       role="menuitem"
+      type="button"
     >
       Go to google
     </button>
@@ -707,25 +712,29 @@ a.c15:hover {
         <button
           class="c14 c15 c16"
           role="menuitem"
+          type="button"
         >
           Edit...
         </button>
         <button
           class="c14 c15 c16"
           role="menuitem"
+          type="button"
         >
           Share...
         </button>
         <button
           class="c14 c15 c16"
           role="menuitem"
+          type="button"
         >
           Rename...
         </button>
         <button
           class="c14 c15 c17"
           color="danger"
           role="menuitem"
+          type="button"
         >
           Delete...
         </button>
@@ -746,6 +755,7 @@ a.c15:hover {
           class="c14 c15 c16 c21 "
           href="https://google.com"
           role="menuitem"
+          type="button"
         >
           Go to Google
         </a>
@@ -883,6 +893,7 @@ a.c3:hover {
       class="c3 c4"
       disabled=""
       role="menuitem"
+      type="button"
     >
       <svg
         aria-hidden="true"
@@ -903,6 +914,7 @@ a.c3:hover {
     <button
       class="c3 c4"
       role="menuitem"
+      type="button"
     >
       <svg
         aria-hidden="true"
@@ -1070,6 +1082,7 @@ a.c3:hover {
     <button
       class="c3 c4"
       role="menuitem"
+      type="button"
     >
       <svg
         aria-hidden="true"
@@ -1090,6 +1103,7 @@ a.c3:hover {
     <button
       class="c3 c4"
       role="menuitem"
+      type="button"
     >
       <svg
         aria-hidden="true"
@@ -1118,6 +1132,7 @@ a.c3:hover {
     <button
       class="c3 c4"
       role="menuitem"
+      type="button"
     >
       Go to google
     </button>
@@ -1299,6 +1314,7 @@ a.c3:hover {
     <button
       class="c3 c4"
       role="menuitem"
+      type="button"
     >
       <svg
         aria-hidden="true"
@@ -1319,6 +1335,7 @@ a.c3:hover {
     <button
       class="c8 c4"
       role="menuitem"
+      type="button"
     >
       <svg
         aria-hidden="true"
@@ -1463,6 +1480,7 @@ a.c3:hover {
     <button
       class="c3 c4"
       role="menuitem"
+      type="button"
     >
       <svg
         aria-hidden="true"
@@ -1483,6 +1501,7 @@ a.c3:hover {
     <button
       class="c3 c4"
       role="menuitem"
+      type="button"
     >
       <svg
         aria-hidden="true"
@@ -1631,6 +1650,7 @@ a.c3:hover {
     <button
       class="c3 c4"
       role="menuitem"
+      type="button"
     >
       <svg
         aria-hidden="true"
@@ -1651,6 +1671,7 @@ a.c3:hover {
     <button
       class="c3 c4"
       role="menuitem"
+      type="button"
     >
       <svg
         aria-hidden="true"
@@ -1675,6 +1696,7 @@ a.c3:hover {
     <button
       class="c3 c4"
       role="menuitem"
+      type="button"
     >
       Go to google
     </button>