new icons, bug fix, shadows, export components

.storybook/preview-head.html

@@ -36,6 +36,6 @@
       background-color: var(--primary-background-color);
   }
   .black-app-theme {
-      background-color: #000000;
+      background-color: var(--primary-background-color);
   }
 </style>

.storybook/preview.js

@@ -11,7 +11,7 @@ addParameters({
   themes: [
     { name: "Light", class: "light-app-them", color: "#ffffff", default: true },
     { name: "Dark", class: "dark-app-theme", color: "#1C1F3B" },
-    { name: "Black", class: "black-app-theme", color: "#000000" }
+    { name: "Black", class: "black-app-theme", color: "#111111" }
   ]
 });
 

package.json

@@ -53,7 +53,7 @@
     "autosize": "4.0.2",
     "classnames": "^2.2.6",
     "lodash": "^4.17.21",
-    "monday-ui-style": "0.1.14",
+    "monday-ui-style": "0.1.17",
     "prop-types": "^15.7.2",
     "react-inlinesvg": "^2.1.1",
     "react-popper": "^2.2.3",

src/components/DialogContentContainer/DialogContentContainer.scss

@@ -20,14 +20,14 @@
   }
 
   &--popover {
-    @include box-shadow-medium();
+    @include theme-prop(box-shadow, box-shadow-mediun);
     border-radius: $border-radius-medium;
-    @include theme-prop(background-color, dialog-background-color);
+    @include theme-prop(background-color, secondary-background-color);
   }
 
   &--modal {
-    @include box-shadow-large();
+    @include theme-prop(box-shadow, box-shadow-large);
     border-radius: $border-radius-big;
-    @include theme-prop(background-color, modal-background-color);
+    @include theme-prop(background-color, primary-background-color);
   }
 }

src/components/Dropdown/Dropdown.styles.js

@@ -83,7 +83,7 @@ const getOptionStyle = (provided, { isDisabled, isSelected, isFocused }) => {
     return {
       ...provided,
       ...general,
-      color: getCSSVar("primary-color"),
+      color: getCSSVar("primary-text-color"),
       backgroundColor: getCSSVar("primary-selected-color"),
       cursor: "pointer"
     };
@@ -174,7 +174,8 @@ const dropdownIndicator = ({ size }) => (provided, { selectProps }) => {
     },
     color: getCSSVar("icon-color"),
     ":hover, :active": {
-      backgroundColor: getCSSVar("primary-background-hover-color")
+      backgroundColor: getCSSVar("primary-background-hover-color"),
+      color: getCSSVar("icon-color"),
     }
   };
 };

src/components/Icon/Icons/components/Globe.js

@@ -0,0 +1,19 @@
+/* eslint-disable */
+/* tslint:disable */
+import PropTypes from 'prop-types';
+import React from 'react';
+const Globe = ({size, ...props}) => (
+  <svg viewBox="0 0 20 20" fill="currentColor" width={ size || "20" } height={ size || "20" } {...props}>
+    <path d="M3 10C3 11.8565 3.7375 13.637 5.05025 14.9497C6.36301 16.2625 8.14348 17 10 17C11.8565 17 13.637 16.2625 14.9497 14.9497C16.2625 13.637 17 11.8565 17 10C17 8.14348 16.2625 6.36301 14.9497 5.05025C13.637 3.7375 11.8565 3 10 3C8.14348 3 6.36301 3.7375 5.05025 5.05025C3.7375 6.36301 3 8.14348 3 10V10Z"
+      stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M7.04211 12.2603C7.1877 12.2603 7.33136 12.232 7.4622 12.1777 7.59303 12.1234 7.70759 12.0444 7.79717 11.9467 7.88676 11.8491 7.949 11.7354 7.97919 11.6142 8.00937 11.493 8.00669 11.3676 7.97137 11.2474L7.49237 9.61728C7.44053 9.44097 7.32093 9.28446 7.15256 9.17262 6.98419 9.06078 6.77672 9.00002 6.56311 9H3.14435C2.88018 10.1041 2.97993 11.2488 3.43257 12.3077 3.88521 13.3665 4.67312 14.2983 5.70922 15L6.35299 12.2603H7.04211zM15.6796 6H13.3112C13.1163 6.00002 12.9269 6.06523 12.7733 6.18527 12.6197 6.3053 12.5105 6.47328 12.4632 6.6625L12.0261 8.41206C11.9939 8.54103 11.9915 8.67565 12.019 8.80571 12.0465 8.93576 12.1033 9.05782 12.1851 9.16261 12.2668 9.2674 12.3714 9.35218 12.4908 9.41049 12.6101 9.4688 12.7412 9.49911 12.8741 9.49913H13.7943L14.2553 12.2693C14.2894 12.4735 14.3948 12.6591 14.5527 12.7929 14.7106 12.9267 14.9109 13.0001 15.1178 13H16.2397C16.8218 11.9012 17.0784 10.6589 16.9792 9.41917 16.88 8.17946 16.4291 6.99386 15.6796 6.00175V6z"
+      stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+);
+Globe.displayName = 'Globe';
+Globe.propTypes = {
+  size: PropTypes.string
+}
+export default Globe;
+/* tslint:enable */
+/* eslint-enable */

src/components/Icon/Icons/components/LongText.js

@@ -0,0 +1,16 @@
+/* eslint-disable */
+/* tslint:disable */
+import PropTypes from 'prop-types';
+import React from 'react';
+const LongText = ({size, ...props}) => (
+  <svg viewBox="0 0 16 16" fill="currentColor" width={ size || "16" } height={ size || "16" } {...props}>
+    <path d="M1 6H15M1 10H15M1 2H15M1 14H6.38462" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+);
+LongText.displayName = 'LongText';
+LongText.propTypes = {
+  size: PropTypes.string
+}
+export default LongText;
+/* tslint:enable */
+/* eslint-enable */

src/components/Icon/Icons/components/Radio.js

@@ -0,0 +1,17 @@
+/* eslint-disable */
+/* tslint:disable */
+import PropTypes from 'prop-types';
+import React from 'react';
+const Radio = ({size, ...props}) => (
+  <svg viewBox="0 0 16 16" fill="currentColor" width={ size || "16" } height={ size || "16" } {...props}>
+    <rect x=".75" y=".75" width="14.5" height="14.5" rx="7.25" stroke="currentColor" strokeWidth="1.5" />
+    <circle cx="8" cy="8" r="3" fill="currentColor" />
+  </svg>
+);
+Radio.displayName = 'Radio';
+Radio.propTypes = {
+  size: PropTypes.string
+}
+export default Radio;
+/* tslint:enable */
+/* eslint-enable */

src/components/Icon/Icons/components/ShortText.js

@@ -0,0 +1,16 @@
+/* eslint-disable */
+/* tslint:disable */
+import PropTypes from 'prop-types';
+import React from 'react';
+const ShortText = ({size, ...props}) => (
+  <svg viewBox="0 0 16 16" fill="currentColor" width={ size || "16" } height={ size || "16" } {...props}>
+    <path d="M1 6H15M1 9.69238H6.38462" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+);
+ShortText.displayName = 'ShortText';
+ShortText.propTypes = {
+  size: PropTypes.string
+}
+export default ShortText;
+/* tslint:enable */
+/* eslint-enable */

src/components/Icon/Icons/index.js

@@ -62,6 +62,7 @@ export {default as Filter} from './components/Filter';
 export {default as Fullscreen} from './components/Fullscreen';
 export {default as FullscreenClose} from './components/FullscreenClose';
 export {default as Gif} from './components/Gif';
+export {default as Globe} from './components/Globe';
 export {default as Graph} from './components/Graph';
 export {default as Group} from './components/Group';
 export {default as Guest} from './components/Guest';
@@ -84,6 +85,7 @@ export {default as Labs} from './components/Labs';
 export {default as Link} from './components/Link';
 export {default as Location} from './components/Location';
 export {default as Locked} from './components/Locked';
+export {default as LongText} from './components/LongText';
 export {default as Mention} from './components/Mention';
 export {default as Menu} from './components/Menu';
 export {default as Microphone} from './components/Microphone';
@@ -113,6 +115,7 @@ export {default as Pin} from './components/Pin';
 export {default as Print} from './components/Print';
 export {default as PushNotification} from './components/PushNotification';
 export {default as Quote} from './components/Quote';
+export {default as Radio} from './components/Radio';
 export {default as Redo} from './components/Redo';
 export {default as Remove} from './components/Remove';
 export {default as Replay} from './components/Replay';
@@ -124,6 +127,7 @@ export {default as Send} from './components/Send';
 export {default as Settings} from './components/Settings';
 export {default as SettingsKnobs} from './components/SettingsKnobs';
 export {default as Share} from './components/Share';
+export {default as ShortText} from './components/ShortText';
 export {default as Show} from './components/Show';
 export {default as Shredder} from './components/Shredder';
 export {default as Sort} from './components/Sort';

src/components/Search/Search.scss

@@ -1,9 +1,12 @@
 .search_component_wrapper {
+  input[type="search"] {
+    -webkit-appearance: textfield;
+  }
   input[type="search"]::-webkit-search-decoration,
   input[type="search"]::-webkit-search-cancel-button,
   input[type="search"]::-webkit-search-results-button,
   input[type="search"]::-webkit-search-results-decoration {
-    -webkit-appearance:none;
+    -webkit-appearance: none;
   }
   &:focus-within {
     .search-focus-element-first {
@@ -20,7 +23,6 @@
   &.search_component--round {
     border-radius: 50px !important;
   }
-
 }
 @keyframes dash-forward {
   to {

src/components/Search/__stories__/search.stories.js

@@ -20,8 +20,8 @@ export const Sandbox = () => {
           debounceRate={number("debounceRate", 0)}
           onChange={action("onChange", value => console.log(value))}
           value={text("value", "")}
-          iconName={text("Font Awesome icon name", "fa-search")}
-          secondaryIconName="fa-close"
+          iconName={SearchIcon}
+          secondaryIconName={CloseSmall}
           validation={select("validation", {
             None: null,
             Error: { status: "error" },

src/components/Tooltip/Tooltip.scss

@@ -9,7 +9,6 @@ $white-theme-border: 1px solid #f1f1f1;
 
 $surface-theme-bg-color: #5b607a;
 $surface-theme-font-color: #fff;
-$surface-theme-box-shadow: $box-shadow-small;
 
 $arrow-size: 12px;
 $arrow-size-md: 16px;
@@ -19,7 +18,7 @@ $arrow-size-md: 16px;
   display: inline-block;
   border-radius: $border-radius-small;
   padding: $spacing-small $spacing-medium;
-  @include box-shadow-medium();
+  @include theme-prop(box-shadow, box-shadow-medium);
   @include font-input();
   max-width: 50vw;
   word-break: break-word;
@@ -45,7 +44,7 @@ $arrow-size-md: 16px;
 .monday-style-arrow-white {
   background-color: $white-theme-bg-color;
   color: $white-theme-font-color;
-  box-shadow: $box-shadow-medium;
+  @include theme-prop(box-shadow, box-shadow-medium);
   border: $white-theme-border;
 }
 

src/styles/global-css-settings.scss

@@ -1,3 +1,5 @@
+@import "./themes";
+
 $box-shadow-small: 0 4px 8px -1px rgba(0, 0, 0, 0.2);
 $box-shadow-medium: 0px 6px 20px -2px rgba(0, 0, 0, 0.2);
 $box-shadow-large: 0px 15px 50px -10px rgba(0, 0, 0, 0.3);
@@ -30,16 +32,13 @@ $expand-animation-timing: cubic-bezier(0, 0, 0.35, 1);
 }
 
 @mixin box-shadow-small() {
-  box-shadow: $box-shadow-small;
-  box-shadow: 0 4px 8px -1px rgba(var(--theme-box-shadow), 0.2);
+  @include theme-prop(box-shadow, box-shadow-small);
 }
 
 @mixin box-shadow-medium() {
-  box-shadow: $box-shadow-medium;
-  box-shadow: 0px 6px 20px -2px rgba(var(--theme-box-shadow), 0.2);
+  @include theme-prop(box-shadow, box-shadow-medium);
 }
 
 @mixin box-shadow-large() {
-  box-shadow: $box-shadow-large;
-  box-shadow: 0px 15px 50px -10px rgba(var(--theme-box-shadow), 0.3);
+  @include theme-prop(box-shadow, box-shadow-large);
 }

src/styles/states.scss

@@ -50,3 +50,18 @@
   z-index: 11;
   border-radius: 4px;
 }
+
+
+@mixin _scrollerThumb($color) {
+  &::-webkit-scrollbar-thumb {
+    background-color: $color;
+    border-radius: 4px;
+  }
+}
+@mixin scroller($width: 4px, $color: var(--ui-border-color)) {
+  &::-webkit-scrollbar {
+    width: $width;
+  }
+
+  @include _scrollerThumb($color);
+}

src/styles/themes.scss

@@ -26,6 +26,7 @@ $theme: (
   "icon-color-hover": $wolf_gray,
   "main-nav-background-color": $surface,
   "primary-background-color": $snow_white,
+  "secondary-background-color": $snow_white,
   "primary-background-hover-color": $wolf_gray,
   "dark-color": $mud_black,
   "dark-background-color": $riverstone_gray,
@@ -35,7 +36,10 @@ $theme: (
   "text-color-on-inverted": $snow_white,
   "dark-background-on-secondary-color": $riverstone_gray,
   "dialog-background-color": $snow_white,
-  "modal-background-color": $snow_white
+  "modal-background-color": $snow_white,
+  "box-shadow-small": 0px 4px 8px rgba(0, 0, 0, 0.2),
+  "box-shadow-mediun": 0px 6px 20px rgba(0, 0, 0, 0.2),
+  "box-shadow-large": 0px 15px 50px rgba(0, 0, 0, 0.3)
 );
 
 $theme-var: (
@@ -61,6 +65,7 @@ $theme-var: (
   "primary-text-color": var(--primary-text-color),
   "icon-color-hover": var(--color-wolf_gray),
   "primary-background-color": var(--primary-background-color),
+  "secondary-background-color": var(--secondary-background-color),
   "primary-background-hover-color": var(--primary-background-hover-color),
   "dark-color": var(--color-mud_black),
   "dark-background-color": var(--dark-background-color),
@@ -70,7 +75,10 @@ $theme-var: (
   "text-color-on-inverted": var(--text-color-on-inverted),
   "dark-background-on-secondary-color": var(--dark-background-on-secondary-color),
   "dialog-background-color": var(--dialog-background-color),
-  "modal-background-color": var(--modal-background-color)
+  "modal-background-color": var(--modal-background-color),
+  "box-shadow-small": var(--box-shadow-small),
+  "box-shadow-medium": var(--box-shadow-mediun),
+  "box-shadow-large": var(--box-shadow-large)
 );
 
 @mixin theme-prop($property: color, $color-variable: primary-text-color, $important: false) {