From babb68a1e2f8f71f51becbdf245a11b9dceac2d6 Mon Sep 17 00:00:00 2001 From: Orr Gottlieb Date: Wed, 16 Jun 2021 12:49:34 +0300 Subject: [PATCH] new icons, bug fix, shadows, export components --- .storybook/preview-head.html | 2 +- .storybook/preview.js | 2 +- package-lock.json | 6 +++--- package.json | 2 +- .../DialogContentContainer.scss | 8 ++++---- src/components/Dropdown/Dropdown.styles.js | 5 +++-- src/components/Icon/Icons/components/Globe.js | 19 +++++++++++++++++++ .../Icon/Icons/components/LongText.js | 16 ++++++++++++++++ src/components/Icon/Icons/components/Radio.js | 17 +++++++++++++++++ .../Icon/Icons/components/ShortText.js | 16 ++++++++++++++++ src/components/Icon/Icons/index.js | 4 ++++ src/components/Search/Search.scss | 6 ++++-- .../Search/__stories__/search.stories.js | 4 ++-- src/components/Tooltip/Tooltip.scss | 5 ++--- src/styles/global-css-settings.scss | 11 +++++------ src/styles/states.scss | 15 +++++++++++++++ src/styles/themes.scss | 12 ++++++++++-- 17 files changed, 123 insertions(+), 27 deletions(-) create mode 100644 src/components/Icon/Icons/components/Globe.js create mode 100644 src/components/Icon/Icons/components/LongText.js create mode 100644 src/components/Icon/Icons/components/Radio.js create mode 100644 src/components/Icon/Icons/components/ShortText.js diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html index 51861b31d3..ce879bc732 100644 --- a/.storybook/preview-head.html +++ b/.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); } diff --git a/.storybook/preview.js b/.storybook/preview.js index e03fbd8f88..a589fec421 100644 --- a/.storybook/preview.js +++ b/.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" } ] }); diff --git a/package-lock.json b/package-lock.json index 3614997ba2..ccb93db2f7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -24773,9 +24773,9 @@ "dev": true }, "monday-ui-style": { - "version": "0.1.14", - "resolved": "https://registry.npmjs.org/monday-ui-style/-/monday-ui-style-0.1.14.tgz", - "integrity": "sha512-Ucmbvh5AjUFtWsCrNLkmZZd9CJ+D93UVkca45nBu2Gl1URYyl3/Tr/Ma2pIAJowAfbaH26gycOh+4ZphyX/D2Q==" + "version": "0.1.17", + "resolved": "https://registry.npmjs.org/monday-ui-style/-/monday-ui-style-0.1.17.tgz", + "integrity": "sha512-Gl72ZGpY4MDpuisho+KURheq0DVLdk4Hz3PV4H7/3CFayAwuAxfsw1JCUpAa0rVPwUqbAhYIVK/d2WE6RaGdJA==" }, "mout": { "version": "1.1.0", diff --git a/package.json b/package.json index bd2b331c11..2bd0e6a469 100644 --- a/package.json +++ b/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", diff --git a/src/components/DialogContentContainer/DialogContentContainer.scss b/src/components/DialogContentContainer/DialogContentContainer.scss index 3d97a9b073..25ad96384f 100644 --- a/src/components/DialogContentContainer/DialogContentContainer.scss +++ b/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); } } diff --git a/src/components/Dropdown/Dropdown.styles.js b/src/components/Dropdown/Dropdown.styles.js index 98cea97716..43351cec58 100644 --- a/src/components/Dropdown/Dropdown.styles.js +++ b/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"), } }; }; diff --git a/src/components/Icon/Icons/components/Globe.js b/src/components/Icon/Icons/components/Globe.js new file mode 100644 index 0000000000..630ac079b9 --- /dev/null +++ b/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}) => ( + + + + +); +Globe.displayName = 'Globe'; +Globe.propTypes = { + size: PropTypes.string +} +export default Globe; +/* tslint:enable */ +/* eslint-enable */ diff --git a/src/components/Icon/Icons/components/LongText.js b/src/components/Icon/Icons/components/LongText.js new file mode 100644 index 0000000000..331e83da79 --- /dev/null +++ b/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}) => ( + + + +); +LongText.displayName = 'LongText'; +LongText.propTypes = { + size: PropTypes.string +} +export default LongText; +/* tslint:enable */ +/* eslint-enable */ diff --git a/src/components/Icon/Icons/components/Radio.js b/src/components/Icon/Icons/components/Radio.js new file mode 100644 index 0000000000..e076c01d39 --- /dev/null +++ b/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}) => ( + + + + +); +Radio.displayName = 'Radio'; +Radio.propTypes = { + size: PropTypes.string +} +export default Radio; +/* tslint:enable */ +/* eslint-enable */ diff --git a/src/components/Icon/Icons/components/ShortText.js b/src/components/Icon/Icons/components/ShortText.js new file mode 100644 index 0000000000..6ef8c421d2 --- /dev/null +++ b/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}) => ( + + + +); +ShortText.displayName = 'ShortText'; +ShortText.propTypes = { + size: PropTypes.string +} +export default ShortText; +/* tslint:enable */ +/* eslint-enable */ diff --git a/src/components/Icon/Icons/index.js b/src/components/Icon/Icons/index.js index de0192e9b1..d6acc335f9 100644 --- a/src/components/Icon/Icons/index.js +++ b/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'; diff --git a/src/components/Search/Search.scss b/src/components/Search/Search.scss index 4a1835ddc6..b34bdd85ad 100644 --- a/src/components/Search/Search.scss +++ b/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 { diff --git a/src/components/Search/__stories__/search.stories.js b/src/components/Search/__stories__/search.stories.js index fe5a32f297..be725e11e4 100644 --- a/src/components/Search/__stories__/search.stories.js +++ b/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" }, diff --git a/src/components/Tooltip/Tooltip.scss b/src/components/Tooltip/Tooltip.scss index 80f16a4de8..30b793612d 100644 --- a/src/components/Tooltip/Tooltip.scss +++ b/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; } diff --git a/src/styles/global-css-settings.scss b/src/styles/global-css-settings.scss index ca182de944..a53dcba03f 100644 --- a/src/styles/global-css-settings.scss +++ b/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); } diff --git a/src/styles/states.scss b/src/styles/states.scss index e67272f841..36fed0feb8 100644 --- a/src/styles/states.scss +++ b/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); +} diff --git a/src/styles/themes.scss b/src/styles/themes.scss index 95b8d840d0..542a55cc4a 100644 --- a/src/styles/themes.scss +++ b/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) {