Merge pull request #217 from tabler/responsive-fixes

Responsive fixes

Author: AaronCoplan

example/src/HomePage.react.js

@@ -327,23 +327,23 @@ function Home() {
                   </Card.Body>
                 </Card>
               </Grid.Col>
-              <Grid.Col sm={4}>
+              <Grid.Col sm={6}>
                 <ProgressCard
                   header="New feedback"
                   content="62"
                   progressColor="red"
                   progressWidth={28}
                 />
               </Grid.Col>
-              <Grid.Col sm={4}>
+              <Grid.Col sm={6}>
                 <ProgressCard
                   header="Today profit"
                   content="$652"
                   progressColor="green"
                   progressWidth={84}
                 />
               </Grid.Col>
-              <Grid.Col sm={4}>
+              <Grid.Col sm={6}>
                 <ProgressCard
                   header="Users online"
                   content="76"
@@ -359,8 +359,7 @@ function Home() {
               icon="dollar-sign"
               header={
                 <a>
-                  132
-                  <small>Sales</small>
+                  132 <small>Sales</small>
                 </a>
               }
               footer={"12 waiting payments"}
@@ -372,8 +371,7 @@ function Home() {
               icon="shopping-cart"
               header={
                 <a>
-                  78
-                  <small>Orders</small>
+                  78 <small>Orders</small>
                 </a>
               }
               footer={"32 shipped"}
@@ -385,8 +383,7 @@ function Home() {
               icon="users"
               header={
                 <a>
-                  1,352
-                  <small>Members</small>
+                  1,352 <small>Members</small>
                 </a>
               }
               footer={"163 registered today"}
@@ -398,8 +395,7 @@ function Home() {
               icon="message-square"
               header={
                 <a>
-                  132
-                  <small>Comments</small>
+                  132 <small>Comments</small>
                 </a>
               }
               footer={"16 waiting"}

src/components/Dropdown/Dropdown.react.js

@@ -28,6 +28,10 @@ type DefaultProps = {|
    * Is this Dropdown a Card option?
    */
   +isOption?: boolean,
+  /**
+   * Add flex classes to the Dropdown
+   */
+  +flex?: boolean | "xs" | "sm" | "md" | "lg" | "xl",
 |};
 
 type WithAnyTriggerProps = {|
@@ -159,13 +163,22 @@ class Dropdown extends React.Component<Props, State> {
   };
 
   render(): React.Node {
-    const { className, children, desktopOnly, isOption, ...props } = this.props;
+    const {
+      className,
+      children,
+      desktopOnly,
+      isOption,
+      flex = false,
+      ...props
+    } = this.props;
 
     const classes = cn(
       {
         dropdown: true,
         "d-none": desktopOnly,
-        "d-md-flex": desktopOnly,
+        "d-md-flex": desktopOnly || flex === "md",
+        [`d-{flex}-flex`]: ["xs", "sm", "lg", "xl"].includes(flex),
+        "d-flex": flex === true,
         "card-options-dropdown": isOption,
         show: this.state.isOpen,
       },

src/components/Header/H1.react.js

@@ -9,6 +9,9 @@ type Props = {|
   +className?: string,
 |};
 
+/**
+ * A Header component rendered as a h1 HTML element with a margin below
+ */
 function H1({ className, children }: Props): React.Node {
   const classes: string = cn("mt-0 mb-4", className);
   return (

src/components/Header/H2.react.js

@@ -9,6 +9,9 @@ type Props = {|
   +className?: string,
 |};
 
+/**
+ * A Header component rendered as a h2 HTML element with a margin below
+ */
 function H2({ className, children }: Props): React.Node {
   const classes: string = cn("mt-0 mb-4", className);
   return (

src/components/Header/H3.react.js

@@ -9,6 +9,9 @@ type Props = {|
   +className?: string,
 |};
 
+/**
+ * A Header component rendered as a h3 HTML element with a margin below
+ */
 function H3({ className, children }: Props): React.Node {
   const classes: string = cn("mt-0 mb-4", className);
   return (

src/components/Header/H4.react.js

@@ -9,6 +9,9 @@ type Props = {|
   +className?: string,
 |};
 
+/**
+ * A Header component rendered as a h4 HTML element with a margin below
+ */
 function H4({ className, children }: Props): React.Node {
   const classes: string = cn("mt-0 mb-4", className);
   return (

src/components/Header/H5.react.js

@@ -9,6 +9,9 @@ type Props = {|
   +className?: string,
 |};
 
+/**
+ * A Header component rendered as a h5 HTML element with a margin below
+ */
 function H5({ className, children }: Props): React.Node {
   const classes: string = cn("mt-0 mb-4", className);
   return (

src/components/Header/H6.react.js

@@ -9,6 +9,9 @@ type Props = {|
   +className?: string,
 |};
 
+/**
+ * A Header component rendered as a h6 HTML element with a margin below
+ */
 function H6({ className, children }: Props): React.Node {
   const classes: string = cn("mt-0 mb-4", className);
   return (

src/components/Header/Header.react.js

@@ -25,6 +25,7 @@ type Props = {|
 
 /**
  * A header
+ * By default renders a div not a <hX> tag and has no additional spacing classes applied
  */
 function Header({
   RootComponent,

src/components/Notification/NotificationTray.react.js

@@ -33,6 +33,7 @@ function NotificationTray(props: Props): React.Node {
       position="bottom-end"
       arrow={true}
       arrowPosition="right"
+      flex
       items={
         <React.Fragment>
           {(notifications &&

src/components/StampCard/StampCard.react.js

@@ -27,7 +27,11 @@ function StampCard({
       <div className="d-flex align-items-center">
         <Stamp color={color} icon={icon} className="mr-3" />
         <div>
-          {header && <Header.H4 className="m-0">{header}</Header.H4>}
+          {header && (
+            <Header size={4} className="m-0">
+              {header}
+            </Header>
+          )}
           {children}
           {footer && <Text.Small muted>{footer}</Text.Small>}
         </div>

src/components/Table/Table.css

@@ -1,3 +1,3 @@
-.Table.table-responsive {
+.table-responsive {
   overflow-x: inherit !important;
 }

src/components/Table/Table.react.js

@@ -96,11 +96,7 @@ function Table({
     </table>
   );
 
-  return !responsive ? (
-    table
-  ) : (
-    <div className="Table.table-responsive">{table}</div>
-  );
+  return !responsive ? table : <div className="table-responsive">{table}</div>;
 }
 
 Table.defaultProps = {