pebble-web 2.7.1 → 2.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pebble-web",
-  "version": "2.7.1",
+  "version": "2.8.0",
   "author": "ritz078 <rkritesh078@gmail.com>",
   "license": "MIT",
   "main": "dist/pebble-web.js",
@@ -44,12 +44,12 @@
     "utility-types": "^3.10.0"
   },
   "devDependencies": {
-    "pebble-shared": "^2.7.0"
+    "pebble-shared": "^2.8.0"
   },
   "greenkeeper": {
     "ignore": [
       "rheostat"
     ]
   },
-  "gitHead": "d569cdeb12f659905b61f0642b91a5b3c1371784"
+  "gitHead": "e72252d18d05ea6d917fcfa1d042e12fead90019"
 }

package/src/components/Button.tsx

@@ -21,14 +21,16 @@ const Button: React.FunctionComponent<ButtonProps> = ({
   className,
   showRipple = true,
   loading,
+  filled,
   size = "small",
   buttonProps
 }: ButtonProps) => {
   const disableAction = disabled || loading;
 
-  const filled = size !== "x-small";
+  const _filled = size !== "x-small" && filled !== false;
+
   const _className = cx(
-    getButtonStyle(size, type, !!showShadow, filled),
+    getButtonStyle(size, type, !!showShadow, _filled),
     className
   );
 

package/src/components/DateInput.tsx

@@ -38,9 +38,12 @@ const modifiers = {
 };
 
 export default class DateInput extends React.PureComponent<
-  DateInputProps,
+  DateInputProps & typeof DateInput.defaultProps,
   DateInputState
 > {
+  static defaultProps = {
+    placement: "bottom-start"
+  };
   state: Readonly<DateInputState> = {
     stringInput: ""
   };
@@ -85,12 +88,21 @@ export default class DateInput extends React.PureComponent<
       placeholder,
       value: propsValue,
       disabled,
-      errorMessage
+      errorMessage,
+      placement,
+      wrapperClassName,
+      initiallyOpen
     } = this.props;
 
+    const _wrapperClassName = cx(wrapperStyle, wrapperClassName);
+
+    const _dropDownClassName = cx(
+      dropDownClassName,
+      this.props.dropDownClassName
+    );
     return (
       <DropDown
-        dropDownClassName={dropDownClassName}
+        dropDownClassName={_dropDownClassName}
         labelComponent={({ toggleDropdown }) => (
           <Rifm
             value={this.state.stringInput}
@@ -102,7 +114,7 @@ export default class DateInput extends React.PureComponent<
                 onChange={noop}
                 type={"tel"}
                 value={value}
-                placeholder={placeholder}
+                placeholder={`${placeholder} DD/MM/YYYY`}
                 onClick={() => {
                   if (disabled) return;
                   toggleDropdown();
@@ -120,9 +132,10 @@ export default class DateInput extends React.PureComponent<
             )}
           </Rifm>
         )}
-        className={wrapperStyle}
-        placement="bottom-start"
+        className={_wrapperClassName}
+        placement={placement}
         modifiers={modifiers}
+        initiallyOpen={initiallyOpen}
       >
         {({ toggle }) => (
           <>

package/src/components/Sidebar.tsx

@@ -80,7 +80,7 @@ class SideBar extends React.PureComponent<SidebarProps> {
                 <Ink />
               </div>
 
-              <div style={{ overflowY: "scroll", height: "100vh" }}>
+              <div style={{ overflowY: "scroll", height: "100%" }}>
                 {children}
               </div>
             </animated.div>

package/src/components/styles/Date.styles.ts

@@ -25,5 +25,5 @@ export const errorStyle = css({
   backgroundColor: colors.red.lightest,
   color: colors.red.darker,
   textAlign: "left",
-  padding: "11px 30px",
-})
+  padding: "11px 30px"
+});

package/src/components/typings/DateInput.ts

@@ -1,6 +1,7 @@
 import { SimpleInputProps } from "./Input";
 import { Omit } from "utility-types";
 import { DateSingle } from "./Calendar";
+import { Placement } from "popper.js";
 
 export interface DateInputProps {
   onChange: (date?: number) => void;
@@ -10,6 +11,10 @@ export interface DateInputProps {
   calendarProps?: DateSingle;
   disabled?: boolean;
   errorMessage?: string;
+  placement?: Placement;
+  wrapperClassName?: string;
+  dropDownClassName?: string;
+  initiallyOpen?: boolean;
 }
 
 export interface DateInputState {