From dacb12a91f91346580050f8140b3510dc05e30e0 Mon Sep 17 00:00:00 2001 From: Yuri Tkachenko Date: Tue, 3 Oct 2017 12:47:32 +0300 Subject: [PATCH 01/81] structure refactoring --- demo/components/number-input.demo.st.css | 2 +- demo/components/toggle-demo.st.css | 4 ++-- demo/components/tree-view-demo.st.css | 2 +- demo/style.st.css | 2 +- src/components/date-picker/date-picker.st.css | 2 +- src/components/number-input/number-input.st.css | 2 +- src/components/radio-group/radio-button.st.css | 2 +- src/components/slider/slider.st.css | 2 +- src/components/stepper/stepper.st.css | 2 +- src/components/stepper/stepper.tsx | 2 +- src/components/time-picker/time-picker.st.css | 2 +- src/components/toggle/toggle.st.css | 2 +- src/components/tree-view/tree-item.st.css | 2 +- src/{style => }/project.st.css | 0 .../default}/controls/button.st.css | 2 +- .../default}/controls/input.st.css | 2 +- .../default-theme => themes/default}/default.st.css | 7 ++++++- .../{wix-theme => wix}/fonts/HelveticaNeue-bold.ttf | Bin .../fonts/HelveticaNeue-light.ttf | Bin .../fonts/HelveticaNeue-medium.ttf | Bin .../fonts/HelveticaNeue-roman.ttf | Bin .../{wix-theme => wix}/fonts/HelveticaNeue-thin.ttf | Bin src/themes/{wix-theme => wix}/theme.st.css | 11 ++++++----- 23 files changed, 28 insertions(+), 22 deletions(-) rename src/{style => }/project.st.css (100%) rename src/{style/default-theme => themes/default}/controls/button.st.css (97%) rename src/{style/default-theme => themes/default}/controls/input.st.css (96%) rename src/{style/default-theme => themes/default}/default.st.css (87%) rename src/themes/{wix-theme => wix}/fonts/HelveticaNeue-bold.ttf (100%) rename src/themes/{wix-theme => wix}/fonts/HelveticaNeue-light.ttf (100%) rename src/themes/{wix-theme => wix}/fonts/HelveticaNeue-medium.ttf (100%) rename src/themes/{wix-theme => wix}/fonts/HelveticaNeue-roman.ttf (100%) rename src/themes/{wix-theme => wix}/fonts/HelveticaNeue-thin.ttf (100%) rename src/themes/{wix-theme => wix}/theme.st.css (99%) diff --git a/demo/components/number-input.demo.st.css b/demo/components/number-input.demo.st.css index 6c061cc21..eb302043c 100644 --- a/demo/components/number-input.demo.st.css +++ b/demo/components/number-input.demo.st.css @@ -4,7 +4,7 @@ } :import { - -st-from: "../../src/style/project.st.css"; + -st-from: "../../src/project.st.css"; -st-named: BK3; } diff --git a/demo/components/toggle-demo.st.css b/demo/components/toggle-demo.st.css index 67b26d379..3acf97cdd 100644 --- a/demo/components/toggle-demo.st.css +++ b/demo/components/toggle-demo.st.css @@ -1,5 +1,5 @@ @namespace "toggleDemo"; :import { -st-theme: true; - -st-from: "../../src/themes/wix-theme/theme.st.css"; -} \ No newline at end of file + -st-from: "../../src/themes/wix/theme.st.css"; +} diff --git a/demo/components/tree-view-demo.st.css b/demo/components/tree-view-demo.st.css index 147ba7d4e..6248be55c 100644 --- a/demo/components/tree-view-demo.st.css +++ b/demo/components/tree-view-demo.st.css @@ -1,5 +1,5 @@ :import{ - -st-from: "../../src/style/project.st.css"; + -st-from: "../../src/project.st.css"; -st-named: color_Keyboard_Focused, color_Active; } diff --git a/demo/style.st.css b/demo/style.st.css index 1a0794f2a..536075976 100644 --- a/demo/style.st.css +++ b/demo/style.st.css @@ -1,7 +1,7 @@ @namespace "demos"; :import { -st-theme: true; - -st-from: "../src/themes/wix-theme/theme.st.css"; + -st-from: "../src/themes/wix/theme.st.css"; } :global(html) { diff --git a/src/components/date-picker/date-picker.st.css b/src/components/date-picker/date-picker.st.css index 3f5b48876..2bc5e91f3 100644 --- a/src/components/date-picker/date-picker.st.css +++ b/src/components/date-picker/date-picker.st.css @@ -1,7 +1,7 @@ @namespace "DatePicker"; :import { - -st-from: "../../style/project.st.css"; + -st-from: "../../project.st.css"; -st-named: color_Default, color_MainText_Background, color_MainText, diff --git a/src/components/number-input/number-input.st.css b/src/components/number-input/number-input.st.css index c3dbd232a..83a90774f 100644 --- a/src/components/number-input/number-input.st.css +++ b/src/components/number-input/number-input.st.css @@ -1,5 +1,5 @@ :import { - -st-from: "../../style/project.st.css"; + -st-from: "../../project.st.css"; -st-named: color_MainText, color_MainPlaceholder, color_MainText_Background, diff --git a/src/components/radio-group/radio-button.st.css b/src/components/radio-group/radio-button.st.css index 83ffb848c..31ba6ac9f 100644 --- a/src/components/radio-group/radio-button.st.css +++ b/src/components/radio-group/radio-button.st.css @@ -1,7 +1,7 @@ @namespace "RadioButton"; :import { - -st-from: '../../style/project.st.css'; + -st-from: '../../project.st.css'; -st-named: B5, B6, B7, M3, PR3; } diff --git a/src/components/slider/slider.st.css b/src/components/slider/slider.st.css index 91b7f57ca..7471d9104 100644 --- a/src/components/slider/slider.st.css +++ b/src/components/slider/slider.st.css @@ -1,7 +1,7 @@ @namespace "Slider"; :import { - -st-from: "../../style/project.st.css"; + -st-from: "../../project.st.css"; -st-named: color_Border, M0, diff --git a/src/components/stepper/stepper.st.css b/src/components/stepper/stepper.st.css index 17a563462..501a2eb50 100644 --- a/src/components/stepper/stepper.st.css +++ b/src/components/stepper/stepper.st.css @@ -1,5 +1,5 @@ :import { - -st-from: "../../style/project.st.css"; + -st-from: "../../project.st.css"; -st-named: color_MainText, color_MainText_Background, color_Disabled, diff --git a/src/components/stepper/stepper.tsx b/src/components/stepper/stepper.tsx index 1f66cb952..2608a153b 100644 --- a/src/components/stepper/stepper.tsx +++ b/src/components/stepper/stepper.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import {properties, stylable} from 'wix-react-tools'; import {ChevronDownIcon, ChevronUpIcon} from '../../icons'; -import buttonStyles from '../../style/default-theme/controls/button.st.css'; +import buttonStyles from '../../themes/default/controls/button.st.css'; import {GlobalEvent} from '../global-event'; import styles from './stepper.st.css'; diff --git a/src/components/time-picker/time-picker.st.css b/src/components/time-picker/time-picker.st.css index cefa5884e..54f7a64e9 100644 --- a/src/components/time-picker/time-picker.st.css +++ b/src/components/time-picker/time-picker.st.css @@ -6,7 +6,7 @@ } :import { - -st-from: "../../style/project.st.css"; + -st-from: "../../project.st.css"; -st-named: ER1, DS1, diff --git a/src/components/toggle/toggle.st.css b/src/components/toggle/toggle.st.css index 93e059674..dd068d6af 100644 --- a/src/components/toggle/toggle.st.css +++ b/src/components/toggle/toggle.st.css @@ -1,5 +1,5 @@ :import { - -st-from: "../../style/project.st.css"; + -st-from: "../../project.st.css"; -st-named: WT1, BK1, diff --git a/src/components/tree-view/tree-item.st.css b/src/components/tree-view/tree-item.st.css index 723ad9650..021f00487 100644 --- a/src/components/tree-view/tree-item.st.css +++ b/src/components/tree-view/tree-item.st.css @@ -1,5 +1,5 @@ :import{ - -st-from: "../../style/project.st.css"; + -st-from: "../../project.st.css"; -st-named: color_Keyboard_Focused, color_Active; } diff --git a/src/style/project.st.css b/src/project.st.css similarity index 100% rename from src/style/project.st.css rename to src/project.st.css diff --git a/src/style/default-theme/controls/button.st.css b/src/themes/default/controls/button.st.css similarity index 97% rename from src/style/default-theme/controls/button.st.css rename to src/themes/default/controls/button.st.css index c55d55b7d..adda09d18 100644 --- a/src/style/default-theme/controls/button.st.css +++ b/src/themes/default/controls/button.st.css @@ -1,5 +1,5 @@ :import { - -st-from: "../../project.st.css"; + -st-from: "../../../project.st.css"; -st-named: fontFamily, fontSize, fontWeight, diff --git a/src/style/default-theme/controls/input.st.css b/src/themes/default/controls/input.st.css similarity index 96% rename from src/style/default-theme/controls/input.st.css rename to src/themes/default/controls/input.st.css index ce3d95cf5..bcbe2f082 100644 --- a/src/style/default-theme/controls/input.st.css +++ b/src/themes/default/controls/input.st.css @@ -1,5 +1,5 @@ :import { - -st-from: "../../project.st.css"; + -st-from: "../../../ project.st.css"; -st-named: fontFamily, fontSize, fontWeight, diff --git a/src/style/default-theme/default.st.css b/src/themes/default/default.st.css similarity index 87% rename from src/style/default-theme/default.st.css rename to src/themes/default/default.st.css index 300244c59..f1062796d 100644 --- a/src/style/default-theme/default.st.css +++ b/src/themes/default/default.st.css @@ -2,7 +2,7 @@ :import { -st-theme: true; - -st-from: "../project.st.css"; + -st-from: "./project.st.css"; -st-named: fontFamily,fontSize,fontWeight,lineHeight, borderRadius,borderWidth,borderStyle, @@ -26,8 +26,13 @@ -st-theme: true; -st-from: "./controls/button.st.css"; } + :import { -st-theme: true; -st-from: "./controls/input.st.css"; } +:import { + -st-theme: true; + -st-from: "./controls/input.st.css"; +} diff --git a/src/themes/wix-theme/fonts/HelveticaNeue-bold.ttf b/src/themes/wix/fonts/HelveticaNeue-bold.ttf similarity index 100% rename from src/themes/wix-theme/fonts/HelveticaNeue-bold.ttf rename to src/themes/wix/fonts/HelveticaNeue-bold.ttf diff --git a/src/themes/wix-theme/fonts/HelveticaNeue-light.ttf b/src/themes/wix/fonts/HelveticaNeue-light.ttf similarity index 100% rename from src/themes/wix-theme/fonts/HelveticaNeue-light.ttf rename to src/themes/wix/fonts/HelveticaNeue-light.ttf diff --git a/src/themes/wix-theme/fonts/HelveticaNeue-medium.ttf b/src/themes/wix/fonts/HelveticaNeue-medium.ttf similarity index 100% rename from src/themes/wix-theme/fonts/HelveticaNeue-medium.ttf rename to src/themes/wix/fonts/HelveticaNeue-medium.ttf diff --git a/src/themes/wix-theme/fonts/HelveticaNeue-roman.ttf b/src/themes/wix/fonts/HelveticaNeue-roman.ttf similarity index 100% rename from src/themes/wix-theme/fonts/HelveticaNeue-roman.ttf rename to src/themes/wix/fonts/HelveticaNeue-roman.ttf diff --git a/src/themes/wix-theme/fonts/HelveticaNeue-thin.ttf b/src/themes/wix/fonts/HelveticaNeue-thin.ttf similarity index 100% rename from src/themes/wix-theme/fonts/HelveticaNeue-thin.ttf rename to src/themes/wix/fonts/HelveticaNeue-thin.ttf diff --git a/src/themes/wix-theme/theme.st.css b/src/themes/wix/theme.st.css similarity index 99% rename from src/themes/wix-theme/theme.st.css rename to src/themes/wix/theme.st.css index ec9d5a1a7..8746dab79 100644 --- a/src/themes/wix-theme/theme.st.css +++ b/src/themes/wix/theme.st.css @@ -1,4 +1,5 @@ @namespace "wixTheme"; + :import { -st-from: "../../components/number-input/number-input.st.css"; -st-default: NumberInput; @@ -284,7 +285,7 @@ CheckBox::label { CheckBox:disabled::boxIcon { background: value(D70); - border: 1px solid #DADADA; + border: 1px solid #DADADA; } CheckBox:disabled:checked::boxIcon { @@ -403,7 +404,7 @@ Slider:hover::slider::track { } Slider:hover::slider::handle { - background: #FFFFFF; + background: #FFFFFF; box-shadow: 0 1px 2px 2px rgba(138,209,250,0.58); background-image: url(data:image/svg+xml;base64,DQo8c3ZnIHdpZHRoPSI4cHgiIGhlaWdodD0iOHB4IiB2aWV3Qm94PSIwIDAgOCA4IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNDYuMiAoNDQ0OTYpIC0gaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoIC0tPg0KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPg0KICAgIDxkZWZzPjwvZGVmcz4NCiAgICA8ZyBpZD0iU3ltYm9scyIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgb3BhY2l0eT0iMC42OTk5OTk5ODgiPg0KICAgICAgICA8ZyBpZD0iMDQtU2VsZWN0aW9ucy0vLVByaW1pdGl2ZXMtLy1TbGlkZXItLy1Lbm9iIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNC4wMDAwMDAsIC00LjAwMDAwMCkiIGZpbGw9IiMyQjgxQ0IiPg0KICAgICAgICAgICAgPGcgaWQ9Iktub2IiPg0KICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwtMiIgY3g9IjgiIGN5PSI4IiByPSI0Ij48L2NpcmNsZT4NCiAgICAgICAgICAgIDwvZz4NCiAgICAgICAgPC9nPg0KICAgIDwvZz4NCjwvc3ZnPg==); background-repeat: no-repeat; @@ -422,7 +423,7 @@ Slider:hover::handle:active { } Slider:active::slider::handle { - background: #FFFFFF; + background: #FFFFFF; box-shadow: 0 1px 2px 2px rgba(138,209,250,0.58); background-image: url(data:image/svg+xml;base64,DQo8c3ZnIHdpZHRoPSI4cHgiIGhlaWdodD0iOHB4IiB2aWV3Qm94PSIwIDAgOCA4IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNDYuMiAoNDQ0OTYpIC0gaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoIC0tPg0KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPg0KICAgIDxkZWZzPjwvZGVmcz4NCiAgICA8ZyBpZD0iU3ltYm9scyIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgb3BhY2l0eT0iMC42OTk5OTk5ODgiPg0KICAgICAgICA8ZyBpZD0iMDQtU2VsZWN0aW9ucy0vLVByaW1pdGl2ZXMtLy1TbGlkZXItLy1Lbm9iIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNC4wMDAwMDAsIC00LjAwMDAwMCkiIGZpbGw9IiMyQjgxQ0IiPg0KICAgICAgICAgICAgPGcgaWQ9Iktub2IiPg0KICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwtMiIgY3g9IjgiIGN5PSI4IiByPSI0Ij48L2NpcmNsZT4NCiAgICAgICAgICAgIDwvZz4NCiAgICAgICAgPC9nPg0KICAgIDwvZz4NCjwvc3ZnPg==); background-repeat: no-repeat; @@ -430,7 +431,7 @@ Slider:active::slider::handle { } Slider:active:hover::slider::handle { - background: #FFFFFF; + background: #FFFFFF; box-shadow: 0 1px 2px 2px rgba(138,209,250,0.58); background-image: url(data:image/svg+xml;base64,DQo8c3ZnIHdpZHRoPSI4cHgiIGhlaWdodD0iOHB4IiB2aWV3Qm94PSIwIDAgOCA4IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNDYuMiAoNDQ0OTYpIC0gaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoIC0tPg0KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPg0KICAgIDxkZWZzPjwvZGVmcz4NCiAgICA8ZyBpZD0iU3ltYm9scyIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgb3BhY2l0eT0iMC42OTk5OTk5ODgiPg0KICAgICAgICA8ZyBpZD0iMDQtU2VsZWN0aW9ucy0vLVByaW1pdGl2ZXMtLy1TbGlkZXItLy1Lbm9iIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNC4wMDAwMDAsIC00LjAwMDAwMCkiIGZpbGw9IiMyQjgxQ0IiPg0KICAgICAgICAgICAgPGcgaWQ9Iktub2IiPg0KICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwtMiIgY3g9IjgiIGN5PSI4IiByPSI0Ij48L2NpcmNsZT4NCiAgICAgICAgICAgIDwvZz4NCiAgICAgICAgPC9nPg0KICAgIDwvZz4NCjwvc3ZnPg==); background-repeat: no-repeat; @@ -456,7 +457,7 @@ Slider:disabled::track { } Slider:disabled::handle { - box-shadow: 0 0 3px 0 rgba(22,45,61,0.12), 0 1px 2px 0 rgba(22,45,61,0.24); + box-shadow: 0 0 3px 0 rgba(22,45,61,0.12), 0 1px 2px 0 rgba(22,45,61,0.24); background-color: white; background-image: url(data:image/svg+xml;base64,DQo8c3ZnIHdpZHRoPSI4cHgiIGhlaWdodD0iOHB4IiB2aWV3Qm94PSIwIDAgOCA4IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNDYuMiAoNDQ0OTYpIC0gaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoIC0tPg0KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPg0KICAgIDxkZWZzPjwvZGVmcz4NCiAgICA8ZyBpZD0iNC4tU2VsZWN0aW9ucyIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgb3BhY2l0eT0iMC42OTk5OTk5ODgiPg0KICAgICAgICA8ZyBpZD0iNC43LVNsaWRlciIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTQ4OS4wMDAwMDAsIC03MjUuMDAwMDAwKSIgZmlsbD0iI0NCRDNEQyI+DQogICAgICAgICAgICA8ZyBpZD0iU2xpZGVyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzMDYuMDAwMDAwLCA3MjEuMDAwMDAwKSI+DQogICAgICAgICAgICAgICAgPGcgaWQ9Iktub2IiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE3OS4wMDAwMDAsIDAuMDAwMDAwKSI+DQogICAgICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwtMiIgY3g9IjgiIGN5PSI4IiByPSI0Ij48L2NpcmNsZT4NCiAgICAgICAgICAgICAgICA8L2c+DQogICAgICAgICAgICA8L2c+DQogICAgICAgIDwvZz4NCiAgICA8L2c+DQo8L3N2Zz4=); background-repeat: no-repeat; From 47859aed703f7cfcd9b796d6cfbbc98d2d38ad14 Mon Sep 17 00:00:00 2001 From: Yuri Tkachenko Date: Tue, 3 Oct 2017 13:28:20 +0300 Subject: [PATCH 02/81] better file naming for themes --- src/themes/default/controls/input.st.css | 2 +- src/themes/default/{default.st.css => theme.st.css} | 7 +------ 2 files changed, 2 insertions(+), 7 deletions(-) rename src/themes/default/{default.st.css => theme.st.css} (87%) diff --git a/src/themes/default/controls/input.st.css b/src/themes/default/controls/input.st.css index bcbe2f082..9134496f2 100644 --- a/src/themes/default/controls/input.st.css +++ b/src/themes/default/controls/input.st.css @@ -1,5 +1,5 @@ :import { - -st-from: "../../../ project.st.css"; + -st-from: "../../../project.st.css"; -st-named: fontFamily, fontSize, fontWeight, diff --git a/src/themes/default/default.st.css b/src/themes/default/theme.st.css similarity index 87% rename from src/themes/default/default.st.css rename to src/themes/default/theme.st.css index f1062796d..72ecdf746 100644 --- a/src/themes/default/default.st.css +++ b/src/themes/default/theme.st.css @@ -2,7 +2,7 @@ :import { -st-theme: true; - -st-from: "./project.st.css"; + -st-from: "../../project.st.css"; -st-named: fontFamily,fontSize,fontWeight,lineHeight, borderRadius,borderWidth,borderStyle, @@ -31,8 +31,3 @@ -st-theme: true; -st-from: "./controls/input.st.css"; } - -:import { - -st-theme: true; - -st-from: "./controls/input.st.css"; -} From db3372aa683e1a90c220909fa577e9043558af73 Mon Sep 17 00:00:00 2001 From: Yuri Tkachenko Date: Tue, 3 Oct 2017 16:08:58 +0300 Subject: [PATCH 03/81] : default theme --- demo/style.st.css | 2 +- .../auto-complete/auto-complete.st.css | 20 ++++++--------- .../auto-complete/auto-complete.tsx | 18 +++++++------ src/components/popup/popup.tsx | 5 +++- .../selection-list/selection-list-view.tsx | 1 - .../selection-list/selection-list.st.css | 5 ++-- .../default/components/auto-complete.st.css | 25 +++++++++++++++++++ src/themes/default/theme.st.css | 5 ++++ 8 files changed, 54 insertions(+), 27 deletions(-) create mode 100644 src/themes/default/components/auto-complete.st.css diff --git a/demo/style.st.css b/demo/style.st.css index 536075976..718742505 100644 --- a/demo/style.st.css +++ b/demo/style.st.css @@ -1,7 +1,7 @@ @namespace "demos"; :import { -st-theme: true; - -st-from: "../src/themes/wix/theme.st.css"; + -st-from: "../src/themes/default/theme.st.css"; } :global(html) { diff --git a/src/components/auto-complete/auto-complete.st.css b/src/components/auto-complete/auto-complete.st.css index 60eb50670..2cbf144f6 100644 --- a/src/components/auto-complete/auto-complete.st.css +++ b/src/components/auto-complete/auto-complete.st.css @@ -1,34 +1,28 @@ @namespace "AutoComplete"; .root { - font-size: 16px; position: relative; display: inline-block; } .autoCompleteInput { - border: 1px solid #adbac5; - font-family: ArialMT; - font-size: 16px; - height: 36px; width: 100%; - padding-left: 5px; } -.autoCompleteList { - -st-extends: root; +.popup { + position: absolute; + z-index: 1; width: 100%; - background: #FFFFFF; } -.autoCompleteInput:hover { - border: 1px solid #5cb4ff; +.autoCompleteList { + width: 100%; } .caret { cursor: pointer; - position:absolute; - top:50%; + position: absolute; + top: 50%; left: calc(100% - 24px); transform:translateY(-50%); -webkit-transform:translateY(-50%); diff --git a/src/components/auto-complete/auto-complete.tsx b/src/components/auto-complete/auto-complete.tsx index 0658564de..e3ef95e09 100644 --- a/src/components/auto-complete/auto-complete.tsx +++ b/src/components/auto-complete/auto-complete.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; import {properties, stylable} from 'wix-react-tools'; -import {Popup} from '../../'; import {ChangeEvent} from '../../types/events'; import {FormInputProps} from '../../types/forms'; import {noop} from '../../utils'; @@ -55,13 +54,16 @@ export class AutoComplete extends React.Component - 0}> - - + { + this.props.open && filteredItems!.length > 0 && +
+ +
+ } ); } diff --git a/src/components/popup/popup.tsx b/src/components/popup/popup.tsx index 6d7c5954b..375c9826f 100644 --- a/src/components/popup/popup.tsx +++ b/src/components/popup/popup.tsx @@ -39,7 +39,10 @@ export class Popup extends React.Component { public render() { if (this.props.anchor && this.props.open) { return ( - this.portal = portal}> + this.portal = portal} + > {this.props.children} ); } diff --git a/src/components/selection-list/selection-list-view.tsx b/src/components/selection-list/selection-list-view.tsx index cbbcb4705..c0b4ca9c5 100644 --- a/src/components/selection-list/selection-list-view.tsx +++ b/src/components/selection-list/selection-list-view.tsx @@ -44,7 +44,6 @@ export class SelectionListView extends React.Component { public render() { return (
Date: Wed, 4 Oct 2017 12:29:55 +0300 Subject: [PATCH 04/81] move popup back --- .../auto-complete/auto-complete.st.css | 7 ++++++ .../auto-complete/auto-complete.tsx | 22 ++++++++++--------- 2 files changed, 19 insertions(+), 10 deletions(-) diff --git a/src/components/auto-complete/auto-complete.st.css b/src/components/auto-complete/auto-complete.st.css index 2cbf144f6..d672fe1c8 100644 --- a/src/components/auto-complete/auto-complete.st.css +++ b/src/components/auto-complete/auto-complete.st.css @@ -17,6 +17,13 @@ .autoCompleteList { width: 100%; + /* + Styling list is here (not at the theme) + because it is rendered in + which isn't able to get theme yet. + */ + border-top: 0; + background: #ffffff; } .caret { diff --git a/src/components/auto-complete/auto-complete.tsx b/src/components/auto-complete/auto-complete.tsx index e3ef95e09..cd93e15d6 100644 --- a/src/components/auto-complete/auto-complete.tsx +++ b/src/components/auto-complete/auto-complete.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import {properties, stylable} from 'wix-react-tools'; +import {Popup} from '../../'; import {ChangeEvent} from '../../types/events'; import {FormInputProps} from '../../types/forms'; import {noop} from '../../utils'; @@ -54,16 +55,17 @@ export class AutoComplete extends React.Component - { - this.props.open && filteredItems!.length > 0 && -
- -
- } + 0} + > + +
); } From dfffbecb2f470f7cac22ecfccc154f45cda3da37 Mon Sep 17 00:00:00 2001 From: Yuri Tkachenko Date: Wed, 4 Oct 2017 12:43:59 +0300 Subject: [PATCH 05/81] removed unused styles --- src/components/auto-complete/auto-complete.st.css | 6 ------ 1 file changed, 6 deletions(-) diff --git a/src/components/auto-complete/auto-complete.st.css b/src/components/auto-complete/auto-complete.st.css index d672fe1c8..e211e7358 100644 --- a/src/components/auto-complete/auto-complete.st.css +++ b/src/components/auto-complete/auto-complete.st.css @@ -9,12 +9,6 @@ width: 100%; } -.popup { - position: absolute; - z-index: 1; - width: 100%; -} - .autoCompleteList { width: 100%; /* From c199fea3cae186f8185f7056a5bd98384a1c471a Mon Sep 17 00:00:00 2001 From: Leonid Levi Date: Wed, 4 Oct 2017 16:42:08 +0300 Subject: [PATCH 06/81] factored out styles from number input to default theme, started refactoring wix theme --- .../number-input/number-input.st.css | 53 ++------- .../default/components/number-input.st.css | 49 ++++++++ src/themes/default/theme.st.css | 5 + src/themes/wix/components/number-input.st.css | 101 ++++++++++++++++ src/themes/wix/theme.st.css | 108 ++---------------- src/themes/wix/variables.st.css | 30 +++++ 6 files changed, 200 insertions(+), 146 deletions(-) create mode 100644 src/themes/default/components/number-input.st.css create mode 100644 src/themes/wix/components/number-input.st.css create mode 100644 src/themes/wix/variables.st.css diff --git a/src/components/number-input/number-input.st.css b/src/components/number-input/number-input.st.css index 83a90774f..eb0e937e5 100644 --- a/src/components/number-input/number-input.st.css +++ b/src/components/number-input/number-input.st.css @@ -1,23 +1,6 @@ -:import { - -st-from: "../../project.st.css"; - -st-named: color_MainText, - color_MainPlaceholder, - color_MainText_Background, - borderRadius, - color_Disabled, - borderDefault, - borderHover, - borderFocus, - inputHeight, - inputWidth, - borderDisabled, - borderError, - DS2; -} - :import { -st-from: "../stepper/stepper.st.css"; - -st-default: stepper; + -st-default: Stepper; } .root { @@ -26,32 +9,6 @@ box-sizing: inherit; position: relative; display: inline-flex; - - border: value(borderDefault); - border-radius: value(borderRadius); - background-color: value(color_MainText_Background); - color: value(color_MainText); - - height: value(inputHeight); - min-width: value(inputWidth); -} - -.root:hover { - border: value(borderHover); -} - -.root:focus { - border: value(borderFocus); -} - -.root:disabled { - background-color: value(DS2); - color: value(color_MainPlaceholder); - border: value(borderDisabled); -} - -.root:error { - border: value(borderError); } .prefix { @@ -75,6 +32,12 @@ background: none; -moz-appearance: textfield; + color: inherit; + font: inherit; +} + +.nativeInput: hover { + border: none; } .nativeInput::-webkit-outer-spin-button, @@ -87,6 +50,6 @@ } .stepper { - -st-extends: stepper; + -st-extends: Stepper; height: auto; } diff --git a/src/themes/default/components/number-input.st.css b/src/themes/default/components/number-input.st.css new file mode 100644 index 000000000..ab76866d9 --- /dev/null +++ b/src/themes/default/components/number-input.st.css @@ -0,0 +1,49 @@ +:import { + -st-from: "../../../components/number-input/number-input.st.css"; + -st-default: NumberInput; +} + +:import { + -st-from: "../../../project.st.css"; + -st-named: color_MainText, + color_MainPlaceholder, + color_MainText_Background, + borderRadius, + color_Disabled, + borderDefault, + borderHover, + borderFocus, + inputHeight, + inputWidth, + borderDisabled, + borderError, + DS2; +} + +NumberInput { + border: value(borderDefault); + border-radius: value(borderRadius); + background-color: value(color_MainText_Background); + color: value(color_MainText); + + height: value(inputHeight); + min-width: value(inputWidth); +} + +NumberInput:hover { + border: value(borderHover); +} + +NumberInput:focus { + border: value(borderFocus); +} + +NumberInput:disabled { + background-color: value(DS2); + color: value(color_MainPlaceholder); + border: value(borderDisabled); +} + +NumberInput:error { + border: value(borderError); +} \ No newline at end of file diff --git a/src/themes/default/theme.st.css b/src/themes/default/theme.st.css index 01784f93e..d45b2ad01 100644 --- a/src/themes/default/theme.st.css +++ b/src/themes/default/theme.st.css @@ -36,3 +36,8 @@ -st-theme: true; -st-from: "./components/auto-complete.st.css"; } + +:import { + -st-theme: true; + -st-from: "./components/number-input.st.css"; +} diff --git a/src/themes/wix/components/number-input.st.css b/src/themes/wix/components/number-input.st.css new file mode 100644 index 000000000..b158f3a18 --- /dev/null +++ b/src/themes/wix/components/number-input.st.css @@ -0,0 +1,101 @@ +:import { + -st-from: "../../../components/number-input/number-input.st.css"; + -st-default: NumberInput; +} + +:import { + -st-from: "../variables.st.css"; + -st-theme: true; + -st-named: B00, + B05, + B10, + B20, + B25, + B27, + B30, + B40, + B50, + B60, + D10, + D20, + D30, + D40, + D50, + D55, + D60, + D70, + D80, + R00, + R05, + R10, + R20, + R30, + primary-color; +} + +:import { + -st-from: "../../../project.st.css"; + -st-named: color_MainText, + color_MainPlaceholder, + color_MainText_Background, + borderRadius, + color_Disabled, + borderDefault, + borderHover, + borderFocus, + inputHeight, + inputWidth, + borderDisabled, + borderError, + DS2; +} + +NumberInput { + min-width: value(inputWidth); + height: value(inputHeight); + border: 1px solid value(primary-color); + border-radius: 6px; + background: value(D80); + + font-family: "HelveticaNeue-Regular", sans-serif; + color: value(D10); + font-size: 16px; + +} + +/*NumberInput input { + background: transparent; +}*/ + +NumberInput::nativeInput::placeholder { + font-family: "HelveticaNeue-Regular", sans-serif; + color: value(D40); +} + +NumberInput:hover { + background: value(B60); + border: 1px solid value(B30); +} + +/* Disabled */ + +NumberInput::nativeInput:disabled::placeholder { + color: value(D50); +} + +NumberInput:disabled { + background-color: value(D80); + border-color: value(D60); + color: value(D50); +} + +NumberInput:disabled::stepper::down::control-icon, NumberInput:disabled::stepper::up::control-icon { + color: value(D50); +} + + +/* Error */ + +NumberInput:error { + border-color: value(R00); +} \ No newline at end of file diff --git a/src/themes/wix/theme.st.css b/src/themes/wix/theme.st.css index 8746dab79..ca0fd56c5 100644 --- a/src/themes/wix/theme.st.css +++ b/src/themes/wix/theme.st.css @@ -1,8 +1,13 @@ @namespace "wixTheme"; :import { - -st-from: "../../components/number-input/number-input.st.css"; - -st-default: NumberInput; + -st-from: "./variables.st.css"; + -st-theme: true; +} + +:import { + -st-from: "./components/number-input.st.css"; + -st-theme: true; } :import { @@ -40,35 +45,6 @@ /* Theme Colors */ -:vars { - /* Primary Colors */ - B00: #2b81cb; - B05: #308ddd; - B10: #3899ec; - B20: #4eb7f5; - B25: #A1D7FB; - B27: #b3e0fb; - B30: #c1e4fe; - B40: #daeffe; - B50: #eaf7ff; - B60: #f4fafe; - D10: #162d3d; - D20: #32536A; - D30: #577083; - D40: #7a92a5; - D50: #b6c1cd; - D55: #cbd3dc; - D60: #dfe5eb; - D70: #f0f4f7; - D80: #ffffff; - R00: #d6453d; - R05: '#d8504c'; - R10: '#ee5951'; - R20: '#ff6666'; - R30: '#ffd7d7'; - /* Disabled */ - primary-color: value(B30); -} /* General */ .root { @@ -80,76 +56,6 @@ /* Number Input */ -NumberInput { - border: 1px solid value(primary-color); - border-radius: 6px; - background: value(D80); -} - -NumberInput input { - font-family: "HelveticaNeue-Regular", sans-serif; - color: value(D10); - font-size: 16px; - background: transparent; -} - -NumberInput input::placeholder { - font-family: "HelveticaNeue-Regular", sans-serif; - color: value(D40); -} - -/* NumberInput::prefix { - background: red; - background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIxMnB4IiBoZWlnaHQ9IjEycHgiIHZpZXdCb3g9IjAgMCAxMiAxMiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgIDx0aXRsZT5pYy1jaGVja2JveC1vZmY8L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGRlZnM+PC9kZWZzPiAgICA8ZyBpZD0iU3ltYm9scyIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+ICAgICAgICA8ZyBpZD0iaWMtY2hlY2tib3gtb2ZmIiBmaWxsPSIjREFFRkZFIj4gICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTI2OSIgeD0iMSIgeT0iNSIgd2lkdGg9IjEwIiBoZWlnaHQ9IjIiPjwvcmVjdD4gICAgICAgIDwvZz4gICAgPC9nPjwvc3ZnPg==); - background-repeat: no-repeat; -} */ - -NumberInput:hover { - background: value(B60); - border: 1px solid value(B30); -} - -/* NumberInput::stepper { - width: 30px; - background: transparent; -} - -NumberInput::stepper::down, NumberInput::stepper::up { - background-color: transparent; -} - -NumberInput::stepper::down::control-icon, NumberInput::stepper::up::control-icon { - border: none; - color: value(B10); -} - -NumberInput::stepper::down::control-icon:hover, NumberInput::stepper::up::control-icon:hover { - color: value(B00); -} */ - - -/* Disabled */ - -NumberInput input:disabled::placeholder { - color: value(D50); -} - -NumberInput:disabled { - background-color: value(D80); - border-color: value(D60); - color: value(D50); -} - -NumberInput:disabled::stepper::down::control-icon, NumberInput:disabled::stepper::up::control-icon { - color: value(D50); -} - - -/* Error */ - -NumberInput:error { - border-color: value(R00); -} /*.button { diff --git a/src/themes/wix/variables.st.css b/src/themes/wix/variables.st.css new file mode 100644 index 000000000..80ac89586 --- /dev/null +++ b/src/themes/wix/variables.st.css @@ -0,0 +1,30 @@ + +:vars { + /* Primary Colors */ + B00: #2b81cb; + B05: #308ddd; + B10: #3899ec; + B20: #4eb7f5; + B25: #A1D7FB; + B27: #b3e0fb; + B30: #c1e4fe; + B40: #daeffe; + B50: #eaf7ff; + B60: #f4fafe; + D10: #162d3d; + D20: #32536A; + D30: #577083; + D40: #7a92a5; + D50: #b6c1cd; + D55: #cbd3dc; + D60: #dfe5eb; + D70: #f0f4f7; + D80: #ffffff; + R00: #d6453d; + R05: '#d8504c'; + R10: '#ee5951'; + R20: '#ff6666'; + R30: '#ffd7d7'; + /* Disabled */ + primary-color: value(B30); +} \ No newline at end of file From 783a94b1209f9e4686b087768e71dfb127c7ec13 Mon Sep 17 00:00:00 2001 From: Yuri Tkachenko Date: Wed, 4 Oct 2017 18:20:52 +0300 Subject: [PATCH 07/81] removed svg from checkbox api --- demo/components/checkbox-demo.st.css | 26 ++-- demo/components/checkbox-demo.tsx | 51 +++---- src/components/checkbox/checkbox.st.css | 53 +++---- src/components/checkbox/checkbox.tsx | 129 +++++++----------- .../default/components/auto-complete.st.css | 2 +- test/components/checkbox.spec.tsx | 80 ++++------- 6 files changed, 131 insertions(+), 210 deletions(-) diff --git a/demo/components/checkbox-demo.st.css b/demo/components/checkbox-demo.st.css index 1ee341c26..08ffb74a6 100644 --- a/demo/components/checkbox-demo.st.css +++ b/demo/components/checkbox-demo.st.css @@ -5,27 +5,27 @@ -st-default: CB; } -.customBoxIcon { - height: 20px; - width: 20px; - fill: none; - stroke: #D1D1D1; +.customInput CB::box { + background: red; + border-color: blue; } -CB:checked .customBoxIcon { - fill: goldenrod; +.customInput CB:checked .customBoxIcon { + background: goldenrod; } -CB:focus .customBoxIcon { +.customInput CB:focus::box { outline: none; } .customTickIcon { - height: 20px; - width: 20px; - position: relative; - margin-left: -20px; - fill: #f1f1f1; + height: 100%; + width: 100%; + position: absolute; +} + +.customTickIcon circle { + fill: #fff; } .label { diff --git a/demo/components/checkbox-demo.tsx b/demo/components/checkbox-demo.tsx index 0f40cf0aa..e707254d3 100644 --- a/demo/components/checkbox-demo.tsx +++ b/demo/components/checkbox-demo.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import {stylable} from 'wix-react-tools'; -import {ChangeEvent, CheckBox, CheckBoxIconProps} from '../../src'; +import {ChangeEvent, CheckBox} from '../../src'; import style from './checkbox-demo.st.css'; export const demoCheckBoxText: string = 'Yes, I\'m over 18 years old'; @@ -34,6 +34,7 @@ export class CheckBoxDemo extends React.Component<{}, {}> { } } +@stylable(style) export class BasicDemo extends React.Component<{}, {value: boolean}> { public state = { value: false @@ -58,6 +59,7 @@ export class BasicDemo extends React.Component<{}, {value: boolean}> { private handleChange = (e: ChangeEvent) => { this.setState({value: e.value}); }; } +@stylable(style) export class DisabledDemo extends React.Component<{}, {value: boolean}> { public state = { @@ -97,6 +99,7 @@ export class DisabledDemo extends React.Component<{}, {value: boolean}> { private handleChange = (e: ChangeEvent) => { this.setState({value: e.value}); }; } +@stylable(style) export class IndeterminateDemo extends React.Component<{}, {value1: boolean, value2: boolean}> { public state = { @@ -142,6 +145,7 @@ export class IndeterminateDemo extends React.Component<{}, {value1: boolean, val private onChangeChild2 = (e: ChangeEvent) => { this.setState({value2: e.value}); }; } +@stylable(style) class CustomIconsDemo extends React.Component<{}, {value: boolean}> { public state = { value: false @@ -149,48 +153,29 @@ class CustomIconsDemo extends React.Component<{}, {value: boolean}> { public render() { return ( -
+
+ + + )} id="myCustomCheckbox" aria-labelledby="customLabel" />
); } private handleChange = (e: ChangeEvent) => { this.setState({value: e.value}); }; } - -const TickMarkSVG: React.SFC = stylable(style)(props => { - return ( - - - - ); -}); - -const CheckBoxSVG: React.SFC = stylable(style)(props => { - return ( - - - - ); -}); diff --git a/src/components/checkbox/checkbox.st.css b/src/components/checkbox/checkbox.st.css index bb3c017eb..7d252f5cd 100644 --- a/src/components/checkbox/checkbox.st.css +++ b/src/components/checkbox/checkbox.st.css @@ -7,48 +7,53 @@ cursor: pointer; } -.boxIcon { +.box { + display: inline-block; + position: relative; height: 1rem; width: 1rem; - fill: none; - stroke: #D1D1D1; + background: #ffffff; + border: 1px solid #D1D1D1; } -.root:checked .boxIcon, .root:indeterminate .boxIcon{ - fill: #4A90E2; +.root:checked .box, +.root:indeterminate .box { + background: #4A90E2; } -.root:disabled .boxIcon { - fill: #f1f1f1; +.root:disabled .box { + background: #f1f1f1; } -.root:focus .boxIcon { +.root:focus .box { outline: 4px solid #add9ff; } -.tickIcon { - height: 1rem; - width: 1rem; - position: relative; - margin-left: -1rem; - stroke: #FFF; - stroke-linecap: square; - stroke-width: 1.5; +.icon { + position: absolute; + height: 100%; + width: 100%; + background: no-repeat 0 0 / 100%; } -.root:disabled .tickIcon, .root:disabled .indeterminateIcon { - stroke: #c8c8c8; +.tickIcon { + background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTExLjggNEw2LjUgOS4yIDQuMiA3IDMgOC4ybDMuNSAzLjZMMTMgNS4yIi8+PC9zdmc+); } .indeterminateIcon { - height: 1em; - width: 1em; - position: relative; - margin-left: -1rem; - stroke: #FFF; - stroke-width: 1.5; + background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZmlsbD0iI2ZmZmZmZiIgZD0iTTQgN2g4djJINHoiLz48L3N2Zz4=); +} + + +.root:disabled .tickIcon { + background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZmlsbD0iI2M4YzhjOCIgZD0iTTExLjggNEw2LjUgOS4yIDQuMiA3IDMgOC4ybDMuNSAzLjZMMTMgNS4yIi8+PC9zdmc+); } +.root:disabled .indeterminateIcon { + background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZmlsbD0iI2M4YzhjOCIgZD0iTTQgN2g4djJINHoiLz48L3N2Zz4=); +} + + .nativeCheckbox { position: absolute; overflow: hidden; diff --git a/src/components/checkbox/checkbox.tsx b/src/components/checkbox/checkbox.tsx index 560512253..4d0c1bb80 100644 --- a/src/components/checkbox/checkbox.tsx +++ b/src/components/checkbox/checkbox.tsx @@ -5,9 +5,8 @@ import {noop} from '../../utils'; import styles from './checkbox.st.css'; export interface CheckBoxProps extends FormInputProps, properties.Props { - boxIcon?: React.ComponentType; - tickIcon?: React.ComponentType; - indeterminateIcon?: React.ComponentType; + tickIcon?: React.ReactNode; + indeterminateIcon?: React.ReactNode; children?: React.ReactNode; disabled?: boolean; readonly?: boolean; @@ -16,59 +15,26 @@ export interface CheckBoxProps extends FormInputProps, properties.Props id?: string; } -export interface CheckBoxIconProps { - value?: boolean; - indeterminate?: boolean; - disabled?: boolean; - className?: string; -} - export interface CheckBoxState { isFocused: boolean; } -const DefaultCheckBoxSVG: React.SFC = properties(props => { - return ( - - - - ); -}); - -const DefaultTickMarkSVG: React.SFC = properties(props => { - return ( - - - - ); -}); - -const DefaultIndeterminateSVG: React.SFC = properties(props => { - return ( - - - - ); -}); - @stylable(styles) @properties export class CheckBox extends React.Component { public static defaultProps: Partial = { - boxIcon: DefaultCheckBoxSVG, - tickIcon: DefaultTickMarkSVG, - indeterminateIcon: DefaultIndeterminateSVG, + tickIcon: ( + + ), + indeterminateIcon: ( + + ), onChange: noop, indeterminate: false, tabIndex: 0 @@ -77,14 +43,17 @@ export class CheckBox extends React.Component { public state: CheckBoxState = {isFocused: false}; public render() { - const BoxIcon = this.props.boxIcon!; - const IndeterminateIcon = this.props.indeterminateIcon!; - const TickIcon = this.props.tickIcon!; + const { + value, disabled, readonly, + indeterminate, id, tabIndex, + indeterminateIcon, tickIcon, children + } = this.props; + const styleState = { - checked: this.props.value!, - disabled: this.props.disabled!, - readonly: this.props.readonly!, - indeterminate: this.props.indeterminate!, + checked: value!, + disabled: disabled!, + readonly: readonly!, + indeterminate: indeterminate!, focus: this.state.isFocused }; @@ -94,44 +63,36 @@ export class CheckBox extends React.Component { onClick={this.handleChange} style-state={styleState} role="checkbox" - aria-checked={this.props.indeterminate ? 'mixed' : this.props.value} + aria-checked={indeterminate ? 'mixed' : value} > - - - - {this.props.indeterminate && - - } - {!this.props.indeterminate && this.props.value && - - } - { - this.props.children ? -
- {this.props.children} -
: null + > + {indeterminate ? indeterminateIcon : (value && tickIcon)} + + + {children ? ( +
+ {children} +
+ ) : null }
); @@ -139,7 +100,9 @@ export class CheckBox extends React.Component { private handleChange = (e: React.SyntheticEvent) => { if (!this.props.disabled && !this.props.readonly) { - this.props.onChange!({value: this.props.indeterminate ? true : !this.props.value}); + this.props.onChange!({ + value: this.props.indeterminate ? true : !this.props.value + }); } } diff --git a/src/themes/default/components/auto-complete.st.css b/src/themes/default/components/auto-complete.st.css index e40de7c42..c4e63f527 100644 --- a/src/themes/default/components/auto-complete.st.css +++ b/src/themes/default/components/auto-complete.st.css @@ -16,7 +16,7 @@ AutoComplete::autoCompleteInput { AutoComplete::autoCompleteList { border-top: 0; - background: #ffffff; + background: #fff; } AutoComplete::autoCompleteInput:hover { diff --git a/test/components/checkbox.spec.tsx b/test/components/checkbox.spec.tsx index 826bc3107..b9f21860d 100644 --- a/test/components/checkbox.spec.tsx +++ b/test/components/checkbox.spec.tsx @@ -1,49 +1,32 @@ import * as React from 'react'; import {ClientRenderer, DriverBase, expect, sinon, waitFor} from 'test-drive-react'; import {CheckBoxDemo, demoCheckBoxText} from '../../demo/components/checkbox-demo'; -import {CheckBox, CheckBoxIconProps} from '../../src'; +import {CheckBox} from '../../src'; import {CheckBoxTestDriver} from '../../test-kit/components/checkbox-driver'; import {sleep} from '../utils/sleep'; -const boxSVG: React.SFC = props => { - return ( - - - - ); -}; - -const tickSVG: React.SFC = props => { - return ( - - - - ); -}; - -const IndeterminateSVG: React.SFC = props => { - return ( - - - - ); -}; +const tickSVG: React.ReactNode = ( + + + + +); + +const IndeterminateSVG: React.ReactNode = ( + + + +); class CheckBoxDemoDriver extends DriverBase { public static ComponentClass = CheckBoxDemo; @@ -159,20 +142,9 @@ describe('', () => { }); }); - it('Displays a box icon', async () => { - const {driver: checkbox, waitForDom} = clientRenderer.render( - - ).withDriver(CheckBoxTestDriver); - - await waitForDom(() => { - expect(checkbox.box).to.be.present(); - expect(checkbox.box).to.have.attribute('data-name', 'custom-box'); - }); - }); - it('Aligns children and box icon', async () => { const {driver: checkbox, waitForDom} = clientRenderer.render( - + yoyo ).withDriver(CheckBoxTestDriver); @@ -186,15 +158,12 @@ describe('', () => { it('Displays custom tick mark when value is true', async () => { const {driver: checkbox, waitForDom} = clientRenderer.render( ).withDriver(CheckBoxTestDriver); await waitForDom(() => { - expect(checkbox.box).to.be.present(); - expect(checkbox.box).to.have.attribute('data-name', 'custom-box'); expect(checkbox.tickMark).to.be.present(); expect(checkbox.tickMark).to.have.attribute('data-name', 'custom-tickmark'); }); @@ -205,7 +174,6 @@ describe('', () => { const {driver: checkbox, waitForDom} = clientRenderer.render( Date: Thu, 5 Oct 2017 11:35:43 +0300 Subject: [PATCH 08/81] fix merge master --- src/themes/default/theme.st.css | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/themes/default/theme.st.css b/src/themes/default/theme.st.css index 9756a5a45..01784f93e 100644 --- a/src/themes/default/theme.st.css +++ b/src/themes/default/theme.st.css @@ -21,7 +21,6 @@ BK3,DS2,PR1,PR2,WT1,DS1,PR3,PR4,ER1,BK2, B1,B2,B3,B4,B5,B6,B7,M1,M2,M3,M4,M5,M6,M7,M0,R1; } -<<<<<<< HEAD:src/themes/default/theme.st.css :import { -st-theme: true; @@ -37,5 +36,3 @@ -st-theme: true; -st-from: "./components/auto-complete.st.css"; } -======= ->>>>>>> 0da89bd78559f0547f669493b3cb705974eae4ef:src/style/default-theme/default.st.css From 4d3ee66918ab65a092d433d369e6572790f83640 Mon Sep 17 00:00:00 2001 From: Yuri Tkachenko Date: Thu, 5 Oct 2017 11:52:44 +0300 Subject: [PATCH 09/81] fix buttons after merge --- src/components/button/button.st.css | 2 +- src/components/input/input.st.css | 2 +- src/themes/default/controls/button.st.css | 60 ----------------------- src/themes/default/controls/input.st.css | 58 ---------------------- src/themes/default/theme.st.css | 10 ---- 5 files changed, 2 insertions(+), 130 deletions(-) delete mode 100644 src/themes/default/controls/button.st.css delete mode 100644 src/themes/default/controls/input.st.css diff --git a/src/components/button/button.st.css b/src/components/button/button.st.css index b1520c200..5835ef3ef 100644 --- a/src/components/button/button.st.css +++ b/src/components/button/button.st.css @@ -1,5 +1,5 @@ :import { - -st-from: "../../style/project.st.css"; + -st-from: "../../project.st.css"; -st-named: fontFamily, fontSize, fontWeight, diff --git a/src/components/input/input.st.css b/src/components/input/input.st.css index 26d37942e..6f29fe142 100644 --- a/src/components/input/input.st.css +++ b/src/components/input/input.st.css @@ -1,5 +1,5 @@ :import { - -st-from: "../../style/project.st.css"; + -st-from: "../../project.st.css"; -st-named: fontFamily, fontSize, fontWeight, diff --git a/src/themes/default/controls/button.st.css b/src/themes/default/controls/button.st.css deleted file mode 100644 index adda09d18..000000000 --- a/src/themes/default/controls/button.st.css +++ /dev/null @@ -1,60 +0,0 @@ -:import { - -st-from: "../../../project.st.css"; - -st-named: fontFamily, - fontSize, - fontWeight, - lineHeight, - color_MainText_Background, - color_Default, - color_Focus, - color_Hover, - color_Active, - borderRadius, - color_Disabled; -} - -button { - box-sizing: inherit; - display: inline-block; - vertical-align: middle; - padding: 9px 30px; - margin: 0; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - border: 1px solid transparent; - border-radius: value(borderRadius); - background: value(color_Default); - color: value(color_MainText_Background); - font-family: value(fontFamily); - font-size: value(fontSize); - font-weight: value(fontWeight); - line-height: value(lineHeight); - text-align: center; - text-decoration: none; - cursor: pointer; - user-select: none; - outline: 0; -} - -button:focus { - background-color: value(color_Focus); - color: value(color_MainText_Background); -} - -button:hover { - background-color: value(color_Hover); - color: value(color_MainText_Background); -} - -button:active { - background-color: value(color_Active); - color: value(color_MainText_Background); -} - -button[disabled], -button.disabled { - background-color: value(color_Disabled); - color: value(color_MainText_Background); - pointer-events: none; -} diff --git a/src/themes/default/controls/input.st.css b/src/themes/default/controls/input.st.css deleted file mode 100644 index 9134496f2..000000000 --- a/src/themes/default/controls/input.st.css +++ /dev/null @@ -1,58 +0,0 @@ -:import { - -st-from: "../../../project.st.css"; - -st-named: fontFamily, - fontSize, - fontWeight, - lineHeight, - color_MainText, - color_MainPlaceholder, - color_MainText_Background, - borderRadius, - color_Disabled, - borderDefault, - borderHover, - borderFocus, - inputHeight, - inputWidth, - borderDisabled, - borderError; -} - -input { - box-sizing: inherit; - border: value(borderDefault); - border-radius: value(borderRadius); - background-color: value(color_MainText_Background); - color: value(color_MainText); - font-family: value(fontFamily); - font-size: value(fontSize); - font-weight: value(fontWeight); - line-height: value(lineHeight); - margin: 0; - padding: 6px 12px; - height: value(inputHeight); - width: value(inputWidth); - outline: 0; -} - -input::placeholder { - color: value(color_MainPlaceholder); -} - -input:hover { - border: value(borderHover); -} - -input:focus { - border: value(borderFocus); -} - -input.disabled, input[disabled] { - background-color: value(color_Disabled); - color: value(color_MainPlaceholder); - border: value(borderDisabled); -} - -input:error { - border: value(borderError); -} diff --git a/src/themes/default/theme.st.css b/src/themes/default/theme.st.css index 01784f93e..0c31e281f 100644 --- a/src/themes/default/theme.st.css +++ b/src/themes/default/theme.st.css @@ -22,16 +22,6 @@ B1,B2,B3,B4,B5,B6,B7,M1,M2,M3,M4,M5,M6,M7,M0,R1; } -:import { - -st-theme: true; - -st-from: "./controls/button.st.css"; -} - -:import { - -st-theme: true; - -st-from: "./controls/input.st.css"; -} - :import { -st-theme: true; -st-from: "./components/auto-complete.st.css"; From 03356eba93fce0beb562a843ff4cce51d6d14bab Mon Sep 17 00:00:00 2001 From: Yuri Tkachenko Date: Thu, 5 Oct 2017 12:13:21 +0300 Subject: [PATCH 10/81] better hiding --- src/components/checkbox/checkbox.st.css | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/src/components/checkbox/checkbox.st.css b/src/components/checkbox/checkbox.st.css index 7d252f5cd..853d0092e 100644 --- a/src/components/checkbox/checkbox.st.css +++ b/src/components/checkbox/checkbox.st.css @@ -55,14 +55,10 @@ .nativeCheckbox { - position: absolute; - overflow: hidden; - height: 1px; - width: 1px; - margin: -1px; - padding: 0; - border: 0; - opacity: 0; + position: fixed; + top: -100%; + visibility: hidden; + pointer-events: none; } .childContainer { From b7bd0f02b8142e813eb488785693ef81e134904e Mon Sep 17 00:00:00 2001 From: Yuri Tkachenko Date: Thu, 5 Oct 2017 12:45:32 +0300 Subject: [PATCH 11/81] fix autocomplete test to render it with theme --- test/components/auto-complete.spec.tsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/test/components/auto-complete.spec.tsx b/test/components/auto-complete.spec.tsx index cb8f66170..af0a3f237 100644 --- a/test/components/auto-complete.spec.tsx +++ b/test/components/auto-complete.spec.tsx @@ -1,6 +1,8 @@ import * as React from 'react'; import {ClientRenderer, expect, selectDom, simulate, sinon, trigger, waitForDom as gWaitForDom} from 'test-drive-react'; +import {stylable} from 'wix-react-tools'; import {AutoCompleteDemo} from '../../demo/components/auto-complete.demo'; +import styles from '../../demo/style.st.css'; import {AutoComplete} from '../../src'; const autoComp = 'AUTO_COMPLETE'; @@ -11,6 +13,8 @@ const items = ['Muffins', 'Pancakes', 'Cupcakes', 'Souffles', 'Pasta', 'Soup', ' const bodySelect = selectDom(document.body); const bodyWaitForDom = gWaitForDom.bind(null, document.body); +const DefaultThemeProvider = stylable(styles)(({children}) =>
{children}
); + describe('', () => { const clientRenderer = new ClientRenderer(); afterEach(() => clientRenderer.cleanup()); @@ -110,7 +114,11 @@ describe('', () => { }); it('places the caret inside the input and centers it', async () => { - const {select, waitForDom} = clientRenderer.render(); + const {select, waitForDom} = clientRenderer.render( + + + + ); await waitForDom(() => { const input = select(autoComp, autoCompInput)!; From de20aae8edf368faa8f96b24fc55060578ad2da8 Mon Sep 17 00:00:00 2001 From: Yuri Tkachenko Date: Thu, 5 Oct 2017 13:03:35 +0300 Subject: [PATCH 12/81] theme HOC --- test/components/auto-complete.spec.tsx | 11 +++-------- test/utils/index.ts | 1 + test/utils/with-theme.tsx | 7 +++++++ 3 files changed, 11 insertions(+), 8 deletions(-) create mode 100644 test/utils/with-theme.tsx diff --git a/test/components/auto-complete.spec.tsx b/test/components/auto-complete.spec.tsx index af0a3f237..4f535e009 100644 --- a/test/components/auto-complete.spec.tsx +++ b/test/components/auto-complete.spec.tsx @@ -2,8 +2,8 @@ import * as React from 'react'; import {ClientRenderer, expect, selectDom, simulate, sinon, trigger, waitForDom as gWaitForDom} from 'test-drive-react'; import {stylable} from 'wix-react-tools'; import {AutoCompleteDemo} from '../../demo/components/auto-complete.demo'; -import styles from '../../demo/style.st.css'; import {AutoComplete} from '../../src'; +import {WithTheme} from '../utils'; const autoComp = 'AUTO_COMPLETE'; const autoCompDemo = autoComp + '_DEMO'; @@ -13,8 +13,6 @@ const items = ['Muffins', 'Pancakes', 'Cupcakes', 'Souffles', 'Pasta', 'Soup', ' const bodySelect = selectDom(document.body); const bodyWaitForDom = gWaitForDom.bind(null, document.body); -const DefaultThemeProvider = stylable(styles)(({children}) =>
{children}
); - describe('', () => { const clientRenderer = new ClientRenderer(); afterEach(() => clientRenderer.cleanup()); @@ -114,11 +112,8 @@ describe('', () => { }); it('places the caret inside the input and centers it', async () => { - const {select, waitForDom} = clientRenderer.render( - - - - ); + const ThemedAutoComplete = WithTheme(); + const {select, waitForDom} = clientRenderer.render(); await waitForDom(() => { const input = select(autoComp, autoCompInput)!; diff --git a/test/utils/index.ts b/test/utils/index.ts index b38d2ea4d..3babad3ca 100644 --- a/test/utils/index.ts +++ b/test/utils/index.ts @@ -5,3 +5,4 @@ export * from './simulate-touch-event'; export * from './skip-describe-if-touch'; export * from './skip-it-if-touch'; export * from './sleep'; +export * from './with-theme'; diff --git a/test/utils/with-theme.tsx b/test/utils/with-theme.tsx new file mode 100644 index 000000000..14385dcc8 --- /dev/null +++ b/test/utils/with-theme.tsx @@ -0,0 +1,7 @@ +import * as React from 'react'; +import {stylable} from 'wix-react-tools'; +import styles from '../../demo/style.st.css'; + +export const WithTheme = (Component: any, theme = styles): React.SFC => { + return stylable(theme)(() =>
{Component}
); +}; From 19ce316aba72f3c5fafbe59e1ce00f128e59b7ee Mon Sep 17 00:00:00 2001 From: Yuri Tkachenko Date: Thu, 5 Oct 2017 18:37:50 +0300 Subject: [PATCH 13/81] theme rules for button --- src/components/button/button.st.css | 49 ----------------- src/themes/default/components/button.st.css | 59 +++++++++++++++++++++ src/themes/default/theme.st.css | 21 +------- 3 files changed, 61 insertions(+), 68 deletions(-) create mode 100644 src/themes/default/components/button.st.css diff --git a/src/components/button/button.st.css b/src/components/button/button.st.css index 5835ef3ef..6647333c1 100644 --- a/src/components/button/button.st.css +++ b/src/components/button/button.st.css @@ -1,59 +1,10 @@ -:import { - -st-from: "../../project.st.css"; - -st-named: fontFamily, - fontSize, - fontWeight, - lineHeight, - color_MainText_Background, - color_Default, - color_Focus, - color_Hover, - color_Active, - borderRadius, - color_Disabled; -} - .root { box-sizing: inherit; display: inline-block; vertical-align: middle; - padding: 9px 30px; margin: 0; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - border: 1px solid transparent; - border-radius: value(borderRadius); - background: value(color_Default); - color: value(color_MainText_Background); - font-family: value(fontFamily); - font-size: value(fontSize); - font-weight: value(fontWeight); - line-height: value(lineHeight); - text-align: center; - text-decoration: none; - cursor: pointer; - user-select: none; - outline: 0; -} - -.root:focus { - background-color: value(color_Focus); - color: value(color_MainText_Background); -} - -.root:hover { - background-color: value(color_Hover); - color: value(color_MainText_Background); -} - -.root:active { - background-color: value(color_Active); - color: value(color_MainText_Background); } .root[disabled] { - background-color: value(color_Disabled); - color: value(color_MainText_Background); pointer-events: none; } diff --git a/src/themes/default/components/button.st.css b/src/themes/default/components/button.st.css new file mode 100644 index 000000000..2d989016c --- /dev/null +++ b/src/themes/default/components/button.st.css @@ -0,0 +1,59 @@ +:import { + -st-from: "../../../components/button/button.st.css"; + -st-default: Button; +} + +:import { + -st-from: "../../../project.st.css"; + -st-named: fontFamily, + fontSize, + fontWeight, + lineHeight, + color_MainText_Background, + color_Default, + color_Focus, + color_Hover, + color_Active, + borderRadius, + color_Disabled; +} + +Button { + padding: 9px 30px; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border: 1px solid transparent; + border-radius: value(borderRadius); + background: value(color_Default); + color: value(color_MainText_Background); + font-family: value(fontFamily); + font-size: value(fontSize); + font-weight: value(fontWeight); + line-height: value(lineHeight); + text-align: center; + text-decoration: none; + cursor: pointer; + user-select: none; + outline: 0; +} + +Button:focus { + background-color: value(color_Focus); + color: value(color_MainText_Background); +} + +Button:hover { + background-color: value(color_Hover); + color: value(color_MainText_Background); +} + +Button:active { + background-color: value(color_Active); + color: value(color_MainText_Background); +} + +Button[disabled] { + background-color: value(color_Disabled); + color: value(color_MainText_Background); +} diff --git a/src/themes/default/theme.st.css b/src/themes/default/theme.st.css index 0c31e281f..8595e80d6 100644 --- a/src/themes/default/theme.st.css +++ b/src/themes/default/theme.st.css @@ -2,27 +2,10 @@ :import { -st-theme: true; - -st-from: "../../project.st.css"; - -st-named: - fontFamily,fontSize,fontWeight,lineHeight, - borderRadius,borderWidth,borderStyle, - inputHeight,inputWidth, - color_MainText, - color_MainPlaceholder, - color_MainError, - color_MainDisabled, - color_MainText_Background, - color_Default, - color_Hover, - color_Active, - color_Focus, - color_Disabled, - color_Keyboard_Focused, - BK3,DS2,PR1,PR2,WT1,DS1,PR3,PR4,ER1,BK2, - B1,B2,B3,B4,B5,B6,B7,M1,M2,M3,M4,M5,M6,M7,M0,R1; + -st-from: "./components/auto-complete.st.css"; } :import { -st-theme: true; - -st-from: "./components/auto-complete.st.css"; + -st-from: "./components/button.st.css"; } From 6531d7dd5c7aed88b54417e6a84ad3db64a5df49 Mon Sep 17 00:00:00 2001 From: Yuri Tkachenko Date: Fri, 6 Oct 2017 13:54:18 +0300 Subject: [PATCH 14/81] datepicker theme and checkbox base --- src/components/date-picker/date-picker.st.css | 23 +++++---------- src/project.st.css | 1 + src/themes/default/components/checkbox.st.css | 8 ++++++ .../default/components/date-picker.st.css | 28 +++++++++++++++++++ src/themes/default/theme.st.css | 5 ++++ 5 files changed, 49 insertions(+), 16 deletions(-) create mode 100644 src/themes/default/components/checkbox.st.css create mode 100644 src/themes/default/components/date-picker.st.css diff --git a/src/components/date-picker/date-picker.st.css b/src/components/date-picker/date-picker.st.css index 2bc5e91f3..cf774efca 100644 --- a/src/components/date-picker/date-picker.st.css +++ b/src/components/date-picker/date-picker.st.css @@ -12,7 +12,6 @@ fontFamily, inputHeight, inputWidth, - borderDefault, borderHover; } @@ -25,9 +24,8 @@ iconWidth: 36px; } -/* The DatePicker Input */ -.input { - width: value(inputWidth); +.root { + display: inline-block; } .icon { @@ -38,15 +36,13 @@ cursor: pointer; width: value(iconWidth); height: value(inputHeight); - fill: #3899EC; - border-left: value(borderDefault); } -.icon:hover { - background-color: rgb(240, 240, 240); - outline: value(borderDefault); - outline-offset: -1px; -} +/* + Styling dropdown is here (not at the theme) + because it is rendered in + which isn't able to get theme yet. +*/ /* The dropdown arrow extends from the input and into the calendar view */ .dropdownArrowWrapper { @@ -213,8 +209,3 @@ color: #d8d8d8; background-color: value(color_MainText_Background); } - -/* root */ -.root { - display: inline-block; -} diff --git a/src/project.st.css b/src/project.st.css index 1ddb4770b..4ce599a97 100644 --- a/src/project.st.css +++ b/src/project.st.css @@ -54,6 +54,7 @@ color_Focus: value(B4); color_Disabled: value(B5); color_Keyboard_Focused: value(M4); + color_Selected: value(DS2); /* Copmponent Sizes */ inputHeight: 36px; diff --git a/src/themes/default/components/checkbox.st.css b/src/themes/default/components/checkbox.st.css new file mode 100644 index 000000000..d1770b495 --- /dev/null +++ b/src/themes/default/components/checkbox.st.css @@ -0,0 +1,8 @@ +:import { + -st-from: "../../../components/checkbox/checkbox.st.css"; + -st-default: CB; +} + +CB::box { + +} diff --git a/src/themes/default/components/date-picker.st.css b/src/themes/default/components/date-picker.st.css new file mode 100644 index 000000000..6d1797c4c --- /dev/null +++ b/src/themes/default/components/date-picker.st.css @@ -0,0 +1,28 @@ +:import { + -st-from: "../../../components/date-picker/date-picker.st.css"; + -st-default: DatePicker; +} + +:import { + -st-from: "../../../project.st.css"; + -st-named: inputWidth, + borderDefault, + color_Border, + color_Selected; +} + + +DatePicker::input { + width: value(inputWidth); +} + +DatePicker::icon { + fill: value(color_Border); + border-left: value(borderDefault); +} + +DatePicker::icon:hover { + background-color: value(color_Selected); + outline: value(borderDefault); + outline-offset: -1px; +} diff --git a/src/themes/default/theme.st.css b/src/themes/default/theme.st.css index 8595e80d6..9315a644e 100644 --- a/src/themes/default/theme.st.css +++ b/src/themes/default/theme.st.css @@ -9,3 +9,8 @@ -st-theme: true; -st-from: "./components/button.st.css"; } + +:import { + -st-theme: true; + -st-from: "./components/date-picker.st.css"; +} From 1b9590122f82cd5a5dc45931a3bd8c0d8b822f1b Mon Sep 17 00:00:00 2001 From: Yuri Tkachenko Date: Fri, 6 Oct 2017 17:12:02 +0300 Subject: [PATCH 15/81] rollback hack with classNames --- src/components/selection-list/selection-list.st.css | 5 +++-- src/components/selection-list/selection-list.tsx | 1 + 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/selection-list/selection-list.st.css b/src/components/selection-list/selection-list.st.css index fbcf8d0d5..d371f079d 100644 --- a/src/components/selection-list/selection-list.st.css +++ b/src/components/selection-list/selection-list.st.css @@ -1,6 +1,7 @@ @namespace "SelectionList"; -.root { +.list { + -st-extends: root; -st-states: focused; width: 276px; border: 1px solid #adbbc6; @@ -8,7 +9,7 @@ display: inline-block; } -.root:focused { +.list:focused { border-color: #4a90e2; } diff --git a/src/components/selection-list/selection-list.tsx b/src/components/selection-list/selection-list.tsx index e5e02e739..ded633778 100644 --- a/src/components/selection-list/selection-list.tsx +++ b/src/components/selection-list/selection-list.tsx @@ -60,6 +60,7 @@ export class SelectionList extends React.Component { public render() { return ( Date: Fri, 6 Oct 2017 17:31:30 +0300 Subject: [PATCH 16/81] checkbox sliced --- src/components/checkbox/checkbox.st.css | 35 +++--------------- src/themes/default/components/checkbox.st.css | 36 +++++++++++++++++++ src/themes/default/theme.st.css | 5 +++ 3 files changed, 45 insertions(+), 31 deletions(-) diff --git a/src/components/checkbox/checkbox.st.css b/src/components/checkbox/checkbox.st.css index 853d0092e..0c7022dc5 100644 --- a/src/components/checkbox/checkbox.st.css +++ b/src/components/checkbox/checkbox.st.css @@ -12,21 +12,6 @@ position: relative; height: 1rem; width: 1rem; - background: #ffffff; - border: 1px solid #D1D1D1; -} - -.root:checked .box, -.root:indeterminate .box { - background: #4A90E2; -} - -.root:disabled .box { - background: #f1f1f1; -} - -.root:focus .box { - outline: 4px solid #add9ff; } .icon { @@ -36,22 +21,10 @@ background: no-repeat 0 0 / 100%; } -.tickIcon { - background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTExLjggNEw2LjUgOS4yIDQuMiA3IDMgOC4ybDMuNSAzLjZMMTMgNS4yIi8+PC9zdmc+); -} - -.indeterminateIcon { - background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZmlsbD0iI2ZmZmZmZiIgZD0iTTQgN2g4djJINHoiLz48L3N2Zz4=); -} - - -.root:disabled .tickIcon { - background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZmlsbD0iI2M4YzhjOCIgZD0iTTExLjggNEw2LjUgOS4yIDQuMiA3IDMgOC4ybDMuNSAzLjZMMTMgNS4yIi8+PC9zdmc+); -} - -.root:disabled .indeterminateIcon { - background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZmlsbD0iI2M4YzhjOCIgZD0iTTQgN2g4djJINHoiLz48L3N2Zz4=); -} +.tickIcon {} +.indeterminateIcon {} +.root:disabled .tickIcon {} +.root:disabled .indeterminateIcon {} .nativeCheckbox { diff --git a/src/themes/default/components/checkbox.st.css b/src/themes/default/components/checkbox.st.css index d1770b495..0bd5f2624 100644 --- a/src/themes/default/components/checkbox.st.css +++ b/src/themes/default/components/checkbox.st.css @@ -3,6 +3,42 @@ -st-default: CB; } +:import { + -st-from: "../../../project.st.css"; + -st-named: color_MainText_Background, + borderDefault; +} + CB::box { + background: value(color_MainText_Background); + border: value(borderDefault); +} + +CB:checked::box, +CB:indeterminate::box { + background: #4A90E2; +} + +CB:disabled::box { + background: #f1f1f1; +} + +CB:focus::box { + outline: 4px solid #add9ff; +} + +CB::tickIcon { + background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTExLjggNEw2LjUgOS4yIDQuMiA3IDMgOC4ybDMuNSAzLjZMMTMgNS4yIi8+PC9zdmc+); +} + +CB::indeterminateIcon { + background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZmlsbD0iI2ZmZmZmZiIgZD0iTTQgN2g4djJINHoiLz48L3N2Zz4=); +} + +CB:disabled:tickIcon { + background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZmlsbD0iI2M4YzhjOCIgZD0iTTExLjggNEw2LjUgOS4yIDQuMiA3IDMgOC4ybDMuNSAzLjZMMTMgNS4yIi8+PC9zdmc+); +} +CB:disabled::indeterminateIcon { + background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZmlsbD0iI2M4YzhjOCIgZD0iTTQgN2g4djJINHoiLz48L3N2Zz4=); } diff --git a/src/themes/default/theme.st.css b/src/themes/default/theme.st.css index 9315a644e..a982f83a1 100644 --- a/src/themes/default/theme.st.css +++ b/src/themes/default/theme.st.css @@ -14,3 +14,8 @@ -st-theme: true; -st-from: "./components/date-picker.st.css"; } + +:import { + -st-theme: true; + -st-from: "./components/checkbox.st.css"; +} From 99956fdd131afba7f90be1eb04c995a0ec948e24 Mon Sep 17 00:00:00 2001 From: Yuri Tkachenko Date: Fri, 6 Oct 2017 17:42:23 +0300 Subject: [PATCH 17/81] checkbox themed --- src/project.st.css | 7 ++++++ src/themes/default/components/checkbox.st.css | 25 ++++++++++++------- 2 files changed, 23 insertions(+), 9 deletions(-) diff --git a/src/project.st.css b/src/project.st.css index 4ce599a97..cdfd6268f 100644 --- a/src/project.st.css +++ b/src/project.st.css @@ -53,8 +53,10 @@ color_Active: value(B3); color_Focus: value(B4); color_Disabled: value(B5); + color_Disabled2: value(DS2); color_Keyboard_Focused: value(M4); color_Selected: value(DS2); + color_Outline: value(PR4); /* Copmponent Sizes */ inputHeight: 36px; @@ -76,6 +78,11 @@ iconChevronDownBK3: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNhZGJiYzYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cG9seWxpbmUgcG9pbnRzPSI2IDkgMTIgMTUgMTggOSI+PC9wb2x5bGluZT48L3N2Zz4=); iconChevronDownDS1: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNjOGM4YzgiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cG9seWxpbmUgcG9pbnRzPSI2IDkgMTIgMTUgMTggOSI+PC9wb2x5bGluZT48L3N2Zz4=); iconChevronDownPR3: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM1Y2I0ZmYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cG9seWxpbmUgcG9pbnRzPSI2IDkgMTIgMTUgMTggOSI+PC9wb2x5bGluZT48L3N2Zz4=); + + iconTick: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTExLjggNEw2LjUgOS4yIDQuMiA3IDMgOC4ybDMuNSAzLjZMMTMgNS4yIi8+PC9zdmc+); + iconTickDisabled: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZmlsbD0iI2M4YzhjOCIgZD0iTTExLjggNEw2LjUgOS4yIDQuMiA3IDMgOC4ybDMuNSAzLjZMMTMgNS4yIi8+PC9zdmc+); + iconIntermediate: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZmlsbD0iI2ZmZmZmZiIgZD0iTTQgN2g4djJINHoiLz48L3N2Zz4=); + iconIntermediateDisabled: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZmlsbD0iI2M4YzhjOCIgZD0iTTQgN2g4djJINHoiLz48L3N2Zz4=); } /* Typography */ diff --git a/src/themes/default/components/checkbox.st.css b/src/themes/default/components/checkbox.st.css index 0bd5f2624..6225e2b72 100644 --- a/src/themes/default/components/checkbox.st.css +++ b/src/themes/default/components/checkbox.st.css @@ -6,7 +6,14 @@ :import { -st-from: "../../../project.st.css"; -st-named: color_MainText_Background, - borderDefault; + color_Default, + color_Disabled2, + color_Outline, + borderDefault, + iconTick, + iconTickDisabled, + iconIntermediate, + iconIntermediateDisabled; } CB::box { @@ -16,29 +23,29 @@ CB::box { CB:checked::box, CB:indeterminate::box { - background: #4A90E2; + background: value(color_Default); } CB:disabled::box { - background: #f1f1f1; + background: value(color_Disabled2); } CB:focus::box { - outline: 4px solid #add9ff; + outline: 4px solid value(color_Outline); } CB::tickIcon { - background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTExLjggNEw2LjUgOS4yIDQuMiA3IDMgOC4ybDMuNSAzLjZMMTMgNS4yIi8+PC9zdmc+); + background-image: value(iconTick); } CB::indeterminateIcon { - background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZmlsbD0iI2ZmZmZmZiIgZD0iTTQgN2g4djJINHoiLz48L3N2Zz4=); + background-image: value(iconIntermediate); } -CB:disabled:tickIcon { - background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZmlsbD0iI2M4YzhjOCIgZD0iTTExLjggNEw2LjUgOS4yIDQuMiA3IDMgOC4ybDMuNSAzLjZMMTMgNS4yIi8+PC9zdmc+); +CB:disabled::tickIcon { + background-image: value(iconTickDisabled); } CB:disabled::indeterminateIcon { - background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZmlsbD0iI2M4YzhjOCIgZD0iTTQgN2g4djJINHoiLz48L3N2Zz4=); + background-image: value(iconIntermediateDisabled); } From 8cd17314f74fb6452e7d49cc0567c5e61604e267 Mon Sep 17 00:00:00 2001 From: Yuri Tkachenko Date: Mon, 9 Oct 2017 12:47:22 +0300 Subject: [PATCH 18/81] dropdown default theme and small related fixes --- demo/components/checkbox-demo.st.css | 4 +-- .../auto-complete/auto-complete.st.css | 8 +++-- src/components/drop-down/drop-down.st.css | 30 ++++++++-------- src/components/drop-down/drop-down.tsx | 15 +++----- src/project.st.css | 4 +++ .../default/components/auto-complete.st.css | 10 ++++-- .../default/components/drop-down.st.css | 35 +++++++++++++++++++ src/themes/default/theme.st.css | 5 +++ 8 files changed, 81 insertions(+), 30 deletions(-) create mode 100644 src/themes/default/components/drop-down.st.css diff --git a/demo/components/checkbox-demo.st.css b/demo/components/checkbox-demo.st.css index 08ffb74a6..1ffa636b2 100644 --- a/demo/components/checkbox-demo.st.css +++ b/demo/components/checkbox-demo.st.css @@ -10,8 +10,8 @@ border-color: blue; } -.customInput CB:checked .customBoxIcon { - background: goldenrod; +.customInput CB:checked::box { + background: green; } .customInput CB:focus::box { diff --git a/src/components/auto-complete/auto-complete.st.css b/src/components/auto-complete/auto-complete.st.css index e211e7358..09c86b329 100644 --- a/src/components/auto-complete/auto-complete.st.css +++ b/src/components/auto-complete/auto-complete.st.css @@ -1,5 +1,10 @@ @namespace "AutoComplete"; +:import { + -st-from: "../../../project.st.css"; + -st-named: caretRightSpacing; +} + .root { position: relative; display: inline-block; @@ -24,7 +29,6 @@ cursor: pointer; position: absolute; top: 50%; - left: calc(100% - 24px); + right: value(caretRightSpacing); transform:translateY(-50%); - -webkit-transform:translateY(-50%); } diff --git a/src/components/drop-down/drop-down.st.css b/src/components/drop-down/drop-down.st.css index 347cc5d5a..cd17df929 100644 --- a/src/components/drop-down/drop-down.st.css +++ b/src/components/drop-down/drop-down.st.css @@ -5,37 +5,39 @@ .root { width: auto; - font-family: Arial, sans-serif; - font-size: 16px; display: inline-block; min-width: 150px; outline: none; } -.dropdownInput { - border: 1px solid #adbac5; - height: 36px; +.input { + position: relative; display: flex; align-items: center; justify-content: space-between; } -.dropdownInput .caret { - margin-right: 5px; - vertical-align: middle; +.caret { + cursor: pointer; + position: absolute; + top: 50%; + right: value(caretRightSpacing); + transform: translateY(-50%); } -.dropdownInput .label { - margin-left: 5px; -} +.label {} -.dropdownInput:hover { +.input:hover { cursor: pointer; - border: 1px solid #5cb4ff; } -.dropdownList { +.list { -st-extends: SelectionList; width: 100%; + /* + Styling list is here (not at the theme) + because it is rendered in + which isn't able to get theme yet. + */ background-color: white; } diff --git a/src/components/drop-down/drop-down.tsx b/src/components/drop-down/drop-down.tsx index 80694764c..88fc53452 100644 --- a/src/components/drop-down/drop-down.tsx +++ b/src/components/drop-down/drop-down.tsx @@ -22,7 +22,7 @@ export interface DropDownProps extends SelectionListOptionList, FormInputProps) => void; } @@ -38,7 +38,7 @@ export class DropDown extends React.PureComponent children: [], onChange: noop, tabIndex: 0, - toggleIcon: CaretDown, + toggleIcon: , disabled: false, onOpenStateChange: noop }; @@ -53,28 +53,23 @@ export class DropDown extends React.PureComponent } public render() { - const ToggleIcon = this.props.toggleIcon!; - return (
this.setState({dropdown})} > -
+
{this.props.value!} -
- -
+ {this.props.toggleIcon}
Date: Mon, 9 Oct 2017 15:32:18 +0300 Subject: [PATCH 19/81] fixed missing variable names in imports in wix/theme.st.css --- src/themes/wix/theme.st.css | 29 +++++++++++++++++++++++++++-- 1 file changed, 27 insertions(+), 2 deletions(-) diff --git a/src/themes/wix/theme.st.css b/src/themes/wix/theme.st.css index 9ecb963b3..159edcace 100644 --- a/src/themes/wix/theme.st.css +++ b/src/themes/wix/theme.st.css @@ -1,8 +1,33 @@ @namespace "wixTheme"; :import { - -st-from: "./variables.st.css"; - -st-theme: true; + -st-from: "./variables.st.css"; + -st-theme: true; + -st-named: B00, + B05, + B10, + B20, + B25, + B27, + B30, + B40, + B50, + B60, + D10, + D20, + D30, + D40, + D50, + D55, + D60, + D70, + D80, + R00, + R05, + R10, + R20, + R30, + primary-color; } :import { From 3558c03808e705397b84f3a88599c03c1322ae26 Mon Sep 17 00:00:00 2001 From: Yuri Tkachenko Date: Mon, 9 Oct 2017 15:49:12 +0300 Subject: [PATCH 20/81] merge number Input theming --- src/components/auto-complete/auto-complete.st.css | 2 +- src/components/drop-down/drop-down.st.css | 6 ++++++ src/components/number-input/number-input.st.css | 3 +-- src/themes/default/components/drop-down.st.css | 6 +----- src/themes/wix/components/number-input.st.css | 2 +- 5 files changed, 10 insertions(+), 9 deletions(-) diff --git a/src/components/auto-complete/auto-complete.st.css b/src/components/auto-complete/auto-complete.st.css index 09c86b329..95e3671ec 100644 --- a/src/components/auto-complete/auto-complete.st.css +++ b/src/components/auto-complete/auto-complete.st.css @@ -1,7 +1,7 @@ @namespace "AutoComplete"; :import { - -st-from: "../../../project.st.css"; + -st-from: "../../project.st.css"; -st-named: caretRightSpacing; } diff --git a/src/components/drop-down/drop-down.st.css b/src/components/drop-down/drop-down.st.css index cd17df929..6bd412e26 100644 --- a/src/components/drop-down/drop-down.st.css +++ b/src/components/drop-down/drop-down.st.css @@ -3,6 +3,12 @@ -st-default: SelectionList; } +:import { + -st-from: "../../project.st.css"; + -st-named: caretRightSpacing; +} + + .root { width: auto; display: inline-block; diff --git a/src/components/number-input/number-input.st.css b/src/components/number-input/number-input.st.css index bcedd6a9d..08320da86 100644 --- a/src/components/number-input/number-input.st.css +++ b/src/components/number-input/number-input.st.css @@ -38,9 +38,8 @@ font: inherit; } -.nativeInput: hover { +.nativeInput:hover { border: none; - } .nativeInput::-webkit-outer-spin-button, diff --git a/src/themes/default/components/drop-down.st.css b/src/themes/default/components/drop-down.st.css index fb2b22543..30d65992a 100644 --- a/src/themes/default/components/drop-down.st.css +++ b/src/themes/default/components/drop-down.st.css @@ -6,11 +6,7 @@ :import { -st-from: "../../../project.st.css"; -st-named: inputLeftSpacing, - inputWidth, - inputFont, - borderDefault, - color_Border, - color_Selected; + inputFont; } DropDown { diff --git a/src/themes/wix/components/number-input.st.css b/src/themes/wix/components/number-input.st.css index b158f3a18..66406a07a 100644 --- a/src/themes/wix/components/number-input.st.css +++ b/src/themes/wix/components/number-input.st.css @@ -98,4 +98,4 @@ NumberInput:disabled::stepper::down::control-icon, NumberInput:disabled::stepper NumberInput:error { border-color: value(R00); -} \ No newline at end of file +} From d7192446c068d941f2e1bafdaf329e212f669b5a Mon Sep 17 00:00:00 2001 From: Leonid Levi Date: Mon, 9 Oct 2017 17:54:24 +0300 Subject: [PATCH 21/81] number input - factored out project.st.css everywhere and fixed wix theme to use proper vars --- .../number-input/number-input.st.css | 1 - .../default/components/number-input.st.css | 2 +- src/themes/default/theme.st.css | 2 +- src/themes/default/variables.st.css | 145 ++++++++++++++++++ src/themes/wix/components/number-input.st.css | 109 +++++-------- src/themes/wix/variables.st.css | 44 ++++-- 6 files changed, 221 insertions(+), 82 deletions(-) create mode 100644 src/themes/default/variables.st.css diff --git a/src/components/number-input/number-input.st.css b/src/components/number-input/number-input.st.css index bcedd6a9d..6c6692991 100644 --- a/src/components/number-input/number-input.st.css +++ b/src/components/number-input/number-input.st.css @@ -30,7 +30,6 @@ outline: none; background: none; - font-size: 16px; -moz-appearance: textfield; padding: 6px 12px; diff --git a/src/themes/default/components/number-input.st.css b/src/themes/default/components/number-input.st.css index ab76866d9..e86633867 100644 --- a/src/themes/default/components/number-input.st.css +++ b/src/themes/default/components/number-input.st.css @@ -4,7 +4,7 @@ } :import { - -st-from: "../../../project.st.css"; + -st-from: "../variables.st.css"; -st-named: color_MainText, color_MainPlaceholder, color_MainText_Background, diff --git a/src/themes/default/theme.st.css b/src/themes/default/theme.st.css index df0ca1f3a..f4e7d93b3 100644 --- a/src/themes/default/theme.st.css +++ b/src/themes/default/theme.st.css @@ -2,7 +2,7 @@ :import { -st-theme: true; - -st-from: "../../project.st.css"; + -st-from: "./variables.st.css"; -st-named: fontFamily,fontSize,fontWeight,lineHeight, borderRadius,borderWidth,borderStyle, diff --git a/src/themes/default/variables.st.css b/src/themes/default/variables.st.css new file mode 100644 index 000000000..457bc9d39 --- /dev/null +++ b/src/themes/default/variables.st.css @@ -0,0 +1,145 @@ +:vars { + fontFamily: Arial; + fontSize: 100%; + fontWeight: normal; + lineHeight: 1.5; + + /* Colors from styleguide */ + BK1: #000000; + BK2: #7d8c98; + BK3: #adbbc6; + DS1: #c8c8c8; + DS2: #f1f1f1; + ER1: #d0011b; + PR1: #257ade; + PR2: #4a90e2; + PR3: #5cb4ff; + PR4: #edf7ff; + WT1: #ffffff; + + /* Other colors - TODO: we should not use any of them */ + B1: #4990e2; + B2: #5cb4ff; + B3: #4990e2; + B4: #257ade; + B5: #d1d1d1; + B6: #f1f1f1; + B7: #adbbc6; + B10: #3899ec; + + M1: #000000; + M2: #577083; + M3: #4A90E2; + M4: #EDF7FF; + M5: #D0021B; + M6: #c8c8c8; + M7: #4a90e2; + M0: #ffffff; + R1: #d0011b; + + /* Basic colors */ + color_MainText: value(M1); /* Base text color */ + color_MainPlaceholder: value(M2); + color_MainError: value(M5); + color_MainDisabled: value(M6); + color_MainText_Background: value(M0); + color_Border: value(B10); + + /* Component state colors */ + color_Default: value(B1); + color_Hover: value(B2); + color_Active: value(B3); + color_Focus: value(B4); + color_Disabled: value(B5); + color_Keyboard_Focused: value(M4); + + /* Copmponent Sizes */ + inputHeight: 36px; + inputWidth: 192px; + + /* Borders */ + borderRadius: 0px; + borderWidth: 1px; + borderStyle: solid; + borderDefault: value(borderStyle) value(borderWidth) value(B5); + borderHover: value(borderStyle) value(borderWidth) value(B2); + borderFocus: value(borderStyle) value(borderWidth) value(B3); + borderDisabled: value(borderStyle) value(borderWidth) value(B5); + borderError: value(borderStyle) value(borderWidth) value(R1); + + iconChevronUpBK3: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNhZGJiYzYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cG9seWxpbmUgcG9pbnRzPSIxOCAxNSAxMiA5IDYgMTUiPjwvcG9seWxpbmU+PC9zdmc+); + iconChevronUpDS1: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNjOGM4YzgiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cG9seWxpbmUgcG9pbnRzPSIxOCAxNSAxMiA5IDYgMTUiPjwvcG9seWxpbmU+PC9zdmc+); + iconChevronUpPR3: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM1Y2I0ZmYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cG9seWxpbmUgcG9pbnRzPSIxOCAxNSAxMiA5IDYgMTUiPjwvcG9seWxpbmU+PC9zdmc+); + iconChevronDownBK3: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNhZGJiYzYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cG9seWxpbmUgcG9pbnRzPSI2IDkgMTIgMTUgMTggOSI+PC9wb2x5bGluZT48L3N2Zz4=); + iconChevronDownDS1: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNjOGM4YzgiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cG9seWxpbmUgcG9pbnRzPSI2IDkgMTIgMTUgMTggOSI+PC9wb2x5bGluZT48L3N2Zz4=); + iconChevronDownPR3: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM1Y2I0ZmYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cG9seWxpbmUgcG9pbnRzPSI2IDkgMTIgMTUgMTggOSI+PC9wb2x5bGluZT48L3N2Zz4=); +} + +/* Typography */ +h1 { + color: value(color_MainText); + font-size: 32px; + line-height: 48px; +} +h2 { + color: value(color_MainText); + font-size: 24px; + line-height: 36px; +} +h3 { + color: value(color_MainText); + font-size: 19px; + line-height: 28px; +} +h4 { + color: value(color_MainText); + font-size: 16px; + line-height: 24px; +} +h5 { + color: value(color_MainText); + font-size: 14px; + line-height: 20px; +} +h6 { + color: value(color_MainText); + font-size: 12px; + line-height: 18px; +} +p { + color: value(color_MainText); + font-size: 16px; + line-height: 24px; +} +label { + color: value(color_MainPlaceholder); + font-size: 16px; + line-height: 24px; +} +img { + display: inline-block; + vertical-align: middle; +} +textarea { + height: auto; + min-height: 50px; + border-radius: value(borderRadius); +} +a { + text-decoration: none; + user-select: none; + color: value(color_Default); + outline: 0; +} +a:focus { + color: value(color_Default); +} +a:visited:not(.button):not([disabled]) { + color: value(color_Focus); +} +a:hover { + color: value(color_Hover); +} +a.disabled, a[disabled] { + color: value(color_Disabled); +} \ No newline at end of file diff --git a/src/themes/wix/components/number-input.st.css b/src/themes/wix/components/number-input.st.css index b158f3a18..9cd24a845 100644 --- a/src/themes/wix/components/number-input.st.css +++ b/src/themes/wix/components/number-input.st.css @@ -6,96 +6,65 @@ :import { -st-from: "../variables.st.css"; -st-theme: true; - -st-named: B00, - B05, - B10, - B20, - B25, - B27, - B30, - B40, - B50, - B60, - D10, - D20, - D30, - D40, - D50, - D55, - D60, - D70, - D80, - R00, - R05, - R10, - R20, - R30, - primary-color; -} + -st-named: + inputWidth, + inputHeight, -:import { - -st-from: "../../../project.st.css"; - -st-named: color_MainText, - color_MainPlaceholder, - color_MainText_Background, - borderRadius, - color_Disabled, - borderDefault, - borderHover, - borderFocus, - inputHeight, - inputWidth, - borderDisabled, - borderError, - DS2; + fontStyle, + textColor, + textColorDisabled, + placeholderColor, + + inputBackgroundColor, + inputBackgroundColorHover, + inputBackgroundColorDisabled, + + borderStyle, + borderRadius, + borderColorHover, + borderColorFocus, + borderColorDisabled, + borderColorError; } NumberInput { min-width: value(inputWidth); height: value(inputHeight); - border: 1px solid value(primary-color); - border-radius: 6px; - background: value(D80); - - font-family: "HelveticaNeue-Regular", sans-serif; - color: value(D10); - font-size: 16px; - + border: value(borderStyle); + border-radius: value(borderRadius); + background: value(inputBackgroundColor); + font: value(fontStyle); + color: value(textColor); } -/*NumberInput input { - background: transparent; -}*/ - NumberInput::nativeInput::placeholder { - font-family: "HelveticaNeue-Regular", sans-serif; - color: value(D40); + font: value(fontStyle); + color: value(placeholderColor); } NumberInput:hover { - background: value(B60); - border: 1px solid value(B30); + background: value(inputBackgroundColorHover); + border-color: value(borderColorHover); } -/* Disabled */ - -NumberInput::nativeInput:disabled::placeholder { - color: value(D50); +NumberInput:focus { + border-color: value(borderColorFocus); } -NumberInput:disabled { - background-color: value(D80); - border-color: value(D60); - color: value(D50); +NumberInput::nativeInput:disabled::placeholder { + color: value(textColorDisabled); } -NumberInput:disabled::stepper::down::control-icon, NumberInput:disabled::stepper::up::control-icon { - color: value(D50); +NumberInput:disabled { + background-color: value(inputBackgroundColorDisabled); + border-color: value(borderColorDisabled); + color: value(textColorDisabled); } - -/* Error */ +/*NumberInput:disabled::stepper::down::control-icon, NumberInput:disabled::stepper::up::control-icon { + color: value(textColorDisabled); +}*/ NumberInput:error { - border-color: value(R00); + border-color: value(borderColorError); } \ No newline at end of file diff --git a/src/themes/wix/variables.st.css b/src/themes/wix/variables.st.css index 80ac89586..d21bb50e7 100644 --- a/src/themes/wix/variables.st.css +++ b/src/themes/wix/variables.st.css @@ -1,30 +1,56 @@ :vars { - /* Primary Colors */ + /* From Wix Styleguide */ B00: #2b81cb; B05: #308ddd; B10: #3899ec; B20: #4eb7f5; B25: #A1D7FB; B27: #b3e0fb; - B30: #c1e4fe; + B30: #c1e4fe; /* main border color */ B40: #daeffe; B50: #eaf7ff; B60: #f4fafe; D10: #162d3d; D20: #32536A; D30: #577083; - D40: #7a92a5; + D40: #7a92a5; /* placeholder color */ D50: #b6c1cd; D55: #cbd3dc; D60: #dfe5eb; D70: #f0f4f7; D80: #ffffff; R00: #d6453d; - R05: '#d8504c'; - R10: '#ee5951'; - R20: '#ff6666'; - R30: '#ffd7d7'; - /* Disabled */ - primary-color: value(B30); + R05: #d8504c; + R10: #ee5951; + R20: #ff6666; + R30: #ffd7d7; + + /* Number Input Vars */ + fontStyle: 16px "HelveticaNeue-Regular", sans-serif; + + textColor: value(D10); + textColorDisabled: value(D50); + placeholderColor: value(D40); + + inputHeight: 36px; + inputWidth: 192px; + + inputBackgroundColor: #fff; + inputBackgroundColorHover: value(B60); + inputBackgroundColorDisabled: value(D80); + + borderStyle: 1px solid value(B30); + borderRadius: 6px; + borderColorHover: value(B30); + borderColorFocus: value(B20); + borderColorDisabled: value(D60); + borderColorError: value(R00); + + iconChevronUpBK3: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNhZGJiYzYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cG9seWxpbmUgcG9pbnRzPSIxOCAxNSAxMiA5IDYgMTUiPjwvcG9seWxpbmU+PC9zdmc+); + iconChevronUpDS1: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNjOGM4YzgiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cG9seWxpbmUgcG9pbnRzPSIxOCAxNSAxMiA5IDYgMTUiPjwvcG9seWxpbmU+PC9zdmc+); + iconChevronUpPR3: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM1Y2I0ZmYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cG9seWxpbmUgcG9pbnRzPSIxOCAxNSAxMiA5IDYgMTUiPjwvcG9seWxpbmU+PC9zdmc+); + iconChevronDownBK3: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNhZGJiYzYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cG9seWxpbmUgcG9pbnRzPSI2IDkgMTIgMTUgMTggOSI+PC9wb2x5bGluZT48L3N2Zz4=); + iconChevronDownDS1: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNjOGM4YzgiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cG9seWxpbmUgcG9pbnRzPSI2IDkgMTIgMTUgMTggOSI+PC9wb2x5bGluZT48L3N2Zz4=); + iconChevronDownPR3: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM1Y2I0ZmYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cG9seWxpbmUgcG9pbnRzPSI2IDkgMTIgMTUgMTggOSI+PC9wb2x5bGluZT48L3N2Zz4=); } \ No newline at end of file From 067c71afcbdfe04d8d5995f2cadc7d031630f0c8 Mon Sep 17 00:00:00 2001 From: Leonid Levi Date: Mon, 9 Oct 2017 18:14:11 +0300 Subject: [PATCH 22/81] fixes to NumberInput CSS to allow shrinking the input without breaking --- demo/components/number-input.demo.st.css | 8 ++++++++ src/components/number-input/number-input.st.css | 15 +++++++++------ 2 files changed, 17 insertions(+), 6 deletions(-) diff --git a/demo/components/number-input.demo.st.css b/demo/components/number-input.demo.st.css index eb302043c..ed4d25500 100644 --- a/demo/components/number-input.demo.st.css +++ b/demo/components/number-input.demo.st.css @@ -13,3 +13,11 @@ NumberInput::suffix { padding: 6px; color: value(BK3); } + +NumberInput::prefix { + padding-right: 0; +} + +NumberInput { + width: 192px; +} diff --git a/src/components/number-input/number-input.st.css b/src/components/number-input/number-input.st.css index 6c6692991..3d0d1b9ae 100644 --- a/src/components/number-input/number-input.st.css +++ b/src/components/number-input/number-input.st.css @@ -22,19 +22,22 @@ } .nativeInput { - flex-grow: 1; + -moz-appearance: textfield; + padding: 6px 12px; + + /* making sure the input shrinks properly */ + flex: 1; + min-width: 1px; + text-overflow: ellipsis; + /* negating global input styles */ height: auto; border: none; box-shadow: none; outline: none; - - background: none; - - -moz-appearance: textfield; - padding: 6px 12px; color: inherit; font: inherit; + background: none; } .nativeInput: hover { From b76efc3a2a890676ec77ad2fcf275cdaf4d9ee12 Mon Sep 17 00:00:00 2001 From: Yuri Tkachenko Date: Mon, 9 Oct 2017 18:30:21 +0300 Subject: [PATCH 23/81] base input default theming files --- src/themes/default/components/input.st.css | 49 ++++++++++++++++++++++ src/themes/default/theme.st.css | 5 +++ 2 files changed, 54 insertions(+) create mode 100644 src/themes/default/components/input.st.css diff --git a/src/themes/default/components/input.st.css b/src/themes/default/components/input.st.css new file mode 100644 index 000000000..8ff9e2c8e --- /dev/null +++ b/src/themes/default/components/input.st.css @@ -0,0 +1,49 @@ +:import { + -st-from: "../../../components/input/input.st.css"; + -st-default: Input; +} + +:import { + -st-from: "../../../project.st.css"; + -st-named: color_MainText, + color_MainPlaceholder, + color_MainText_Background, + borderRadius, + color_Disabled, + borderDefault, + borderHover, + borderFocus, + inputHeight, + inputWidth, + borderDisabled, + borderError, + DS2; +} + +Input { + border: value(borderDefault); + border-radius: value(borderRadius); + background-color: value(color_MainText_Background); + color: value(color_MainText); + + height: value(inputHeight); + min-width: value(inputWidth); +} + +Input:hover { + border: value(borderHover); +} + +Input:focus { + border: value(borderFocus); +} + +Input:disabled { + background-color: value(DS2); + color: value(color_MainPlaceholder); + border: value(borderDisabled); +} + +Input:error { + border: value(borderError); +} diff --git a/src/themes/default/theme.st.css b/src/themes/default/theme.st.css index 84e741342..811c04a66 100644 --- a/src/themes/default/theme.st.css +++ b/src/themes/default/theme.st.css @@ -25,6 +25,11 @@ -st-from: "./components/drop-down.st.css"; } +:import { + -st-theme: true; + -st-from: "./components/input.st.css"; +} + :import { -st-theme: true; -st-from: "./components/number-input.st.css"; From 580d11ed5ae61baed506f64bfe7700fe6677e0f0 Mon Sep 17 00:00:00 2001 From: Yuri Tkachenko Date: Tue, 10 Oct 2017 12:31:39 +0300 Subject: [PATCH 24/81] input theming --- src/project.st.css | 2 +- src/themes/default/components/input.st.css | 36 +++++++++++++++------- 2 files changed, 26 insertions(+), 12 deletions(-) diff --git a/src/project.st.css b/src/project.st.css index 2359480ba..ca3a809f0 100644 --- a/src/project.st.css +++ b/src/project.st.css @@ -64,7 +64,7 @@ inputLeftSpacing: 5px; caretRightSpacing: 1px; - inputFont: 16px value(fontFamily), sans-serif; + inputFont: value(fontSize) value(fontFamily), sans-serif; /* Borders */ borderRadius: 0px; diff --git a/src/themes/default/components/input.st.css b/src/themes/default/components/input.st.css index 8ff9e2c8e..f60adbef8 100644 --- a/src/themes/default/components/input.st.css +++ b/src/themes/default/components/input.st.css @@ -5,7 +5,11 @@ :import { -st-from: "../../../project.st.css"; - -st-named: color_MainText, + -st-named: fontFamily, + fontSize, + fontWeight, + lineHeight, + color_MainText, color_MainPlaceholder, color_MainText_Background, borderRadius, @@ -16,34 +20,44 @@ inputHeight, inputWidth, borderDisabled, - borderError, - DS2; + borderError; } -Input { +.root { + box-sizing: inherit; border: value(borderDefault); border-radius: value(borderRadius); background-color: value(color_MainText_Background); color: value(color_MainText); - + font-family: value(fontFamily); + font-size: value(fontSize); + font-weight: value(fontWeight); + line-height: value(lineHeight); + margin: 0; + padding: 6px 12px; height: value(inputHeight); - min-width: value(inputWidth); + width: value(inputWidth); + outline: 0; +} + +.root::placeholder { + color: value(color_MainPlaceholder); } -Input:hover { +.root:hover { border: value(borderHover); } -Input:focus { +.root:focus { border: value(borderFocus); } -Input:disabled { - background-color: value(DS2); +.root[disabled] { + background-color: value(color_Disabled); color: value(color_MainPlaceholder); border: value(borderDisabled); } -Input:error { +.root:error { border: value(borderError); } From 6fd4ab978246b0ba0b8cfeb22bc4d8491959d571 Mon Sep 17 00:00:00 2001 From: Leonid Levi Date: Tue, 10 Oct 2017 15:05:25 +0300 Subject: [PATCH 25/81] splitting Stepper component and adding its files to themes --- src/components/stepper/stepper.st.css | 26 +++++----------- src/components/stepper/stepper.tsx | 5 ++-- src/themes/default/components/stepper.st.css | 8 +++++ src/themes/default/theme.st.css | 5 ++++ src/themes/wix/components/stepper.st.css | 21 +++++++++++++ src/themes/wix/theme.st.css | 31 ++++---------------- 6 files changed, 49 insertions(+), 47 deletions(-) create mode 100644 src/themes/default/components/stepper.st.css create mode 100644 src/themes/wix/components/stepper.st.css diff --git a/src/components/stepper/stepper.st.css b/src/components/stepper/stepper.st.css index 1046eb666..5d150e6a6 100644 --- a/src/components/stepper/stepper.st.css +++ b/src/components/stepper/stepper.st.css @@ -1,33 +1,20 @@ :import { -st-from: "../../project.st.css"; - -st-named: color_MainText, - color_MainText_Background, - color_Disabled, - borderWidth, - inputHeight, + -st-named: iconChevronDownBK3, iconChevronDownDS1, iconChevronDownPR3, iconChevronUpBK3, iconChevronUpDS1, - iconChevronUpPR3, - DS1, - BK3, - PR3; + iconChevronUpPR3; } .root { - display: inline-flex; - flex-direction: column; - justify-content: space-between; - position: relative; - width: 30px; - height: value(inputHeight); } -.control { +.up, .down { position: absolute; width: 100%; @@ -40,19 +27,21 @@ outline: none; background: center/16px 16px no-repeat transparent; + background-origin:content-box; } -.control:hover { +.up:hover, .down:hover { cursor: pointer; } -.control:disabled { +.up:disabled, .down:disabled { cursor: default; } .up { top: 0; background-image: value(iconChevronUpBK3); + padding-top:1px; } .up:focus, .up:hover { @@ -65,6 +54,7 @@ .down { bottom: 0; background-image: value(iconChevronDownBK3); + padding-bottom:1px; } .down:focus, .down:hover { diff --git a/src/components/stepper/stepper.tsx b/src/components/stepper/stepper.tsx index 6a2ac0fed..2e0180481 100644 --- a/src/components/stepper/stepper.tsx +++ b/src/components/stepper/stepper.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; import {properties, stylable} from 'wix-react-tools'; -import buttonStyles from '../button/button.st.css'; import {GlobalEvent} from '../global-event'; import styles from './stepper.st.css'; @@ -65,7 +64,7 @@ export class Stepper extends React.Component { type="button" tabIndex={-1} data-automation-id="STEPPER_INCREMENT" - className={`${buttonStyles.root} control up`} + className="up" onClick={this.handlerClickUp} disabled={disableUp} /> @@ -73,7 +72,7 @@ export class Stepper extends React.Component { type="button" tabIndex={-1} data-automation-id="STEPPER_DECREMENT" - className={`${buttonStyles.root} control down`} + className="down" onClick={this.handlerClickDown} disabled={disableDown} /> diff --git a/src/themes/default/components/stepper.st.css b/src/themes/default/components/stepper.st.css new file mode 100644 index 000000000..c40802a4e --- /dev/null +++ b/src/themes/default/components/stepper.st.css @@ -0,0 +1,8 @@ +:import { + -st-from: "../../../components/stepper/stepper.st.css"; + -st-default: Stepper; +} + +Stepper { + +} \ No newline at end of file diff --git a/src/themes/default/theme.st.css b/src/themes/default/theme.st.css index 811c04a66..e45838ad5 100644 --- a/src/themes/default/theme.st.css +++ b/src/themes/default/theme.st.css @@ -34,3 +34,8 @@ -st-theme: true; -st-from: "./components/number-input.st.css"; } + +:import { + -st-theme: true; + -st-from: "./components/stepper.st.css"; +} \ No newline at end of file diff --git a/src/themes/wix/components/stepper.st.css b/src/themes/wix/components/stepper.st.css new file mode 100644 index 000000000..3b85266a8 --- /dev/null +++ b/src/themes/wix/components/stepper.st.css @@ -0,0 +1,21 @@ +:import { + -st-from: "../../../components/stepper/stepper.st.css"; + -st-default: Stepper; +} + + +Stepper::up { + color:#3899EC; +} + +Stepper::down { + color:#3899EC; +} + +Stepper::up:hover { + color:#4EB7F5; +} + +Stepper::down:hover { + color:#4EB7F5; +} \ No newline at end of file diff --git a/src/themes/wix/theme.st.css b/src/themes/wix/theme.st.css index 159edcace..9206ebd31 100644 --- a/src/themes/wix/theme.st.css +++ b/src/themes/wix/theme.st.css @@ -35,6 +35,11 @@ -st-theme: true; } +:import { + -st-theme: true; + -st-from: "./components/stepper.st.css"; +} + :import { -st-from: "../../components/toggle/toggle.st.css"; -st-default: Toggle; @@ -54,11 +59,6 @@ -st-default: TimePicker; } -:import { - -st-from: "../../components/stepper/stepper.st.css"; - -st-default: Stepper; -} - :import { -st-from: "../../components/slider/slider.st.css"; -st-default: Slider; @@ -268,27 +268,6 @@ TimePicker::input::selection:hover { background: #DAEFFE; } -/* Stepper */ -Stepper::up { - position: relative; - top:1px; - color:#3899EC; -} - -Stepper::down { - position: relative; - bottom:1px; - color:#3899EC; -} - -Stepper::up:hover { - color:#4EB7F5; -} - -Stepper::down:hover { - color:#4EB7F5; -} - /* Slider */ Slider { width:288px; From d5e2b931cd4e1ac35ea117675f823a8a018b1cca Mon Sep 17 00:00:00 2001 From: Yuri Tkachenko Date: Tue, 10 Oct 2017 15:23:04 +0300 Subject: [PATCH 26/81] modal, start variables moving --- .../auto-complete/auto-complete.st.css | 11 +++------- .../auto-complete/auto-complete.tsx | 4 ++-- src/components/drop-down/drop-down.st.css | 8 +------- src/components/modal/modal.st.css | 7 +++++++ src/project.st.css | 1 - .../default/components/auto-complete.st.css | 20 ++++++++++++------- .../default/components/drop-down.st.css | 11 +++++++--- src/themes/default/components/modal.st.css | 5 +++++ src/themes/default/theme.st.css | 5 +++++ src/themes/default/variables.st.css | 7 ++++++- 10 files changed, 50 insertions(+), 29 deletions(-) create mode 100644 src/themes/default/components/modal.st.css diff --git a/src/components/auto-complete/auto-complete.st.css b/src/components/auto-complete/auto-complete.st.css index 95e3671ec..08844890a 100644 --- a/src/components/auto-complete/auto-complete.st.css +++ b/src/components/auto-complete/auto-complete.st.css @@ -1,20 +1,15 @@ @namespace "AutoComplete"; -:import { - -st-from: "../../project.st.css"; - -st-named: caretRightSpacing; -} - .root { position: relative; display: inline-block; } -.autoCompleteInput { +.input { width: 100%; } -.autoCompleteList { +.list { width: 100%; /* Styling list is here (not at the theme) @@ -29,6 +24,6 @@ cursor: pointer; position: absolute; top: 50%; - right: value(caretRightSpacing); + right: 0; transform:translateY(-50%); } diff --git a/src/components/auto-complete/auto-complete.tsx b/src/components/auto-complete/auto-complete.tsx index 8fb5bb030..3e73ccfb1 100644 --- a/src/components/auto-complete/auto-complete.tsx +++ b/src/components/auto-complete/auto-complete.tsx @@ -53,7 +53,7 @@ export class AutoComplete extends React.Component 0} > diff --git a/src/components/drop-down/drop-down.st.css b/src/components/drop-down/drop-down.st.css index 6bd412e26..d65b8c086 100644 --- a/src/components/drop-down/drop-down.st.css +++ b/src/components/drop-down/drop-down.st.css @@ -3,12 +3,6 @@ -st-default: SelectionList; } -:import { - -st-from: "../../project.st.css"; - -st-named: caretRightSpacing; -} - - .root { width: auto; display: inline-block; @@ -27,7 +21,7 @@ cursor: pointer; position: absolute; top: 50%; - right: value(caretRightSpacing); + right: 0; transform: translateY(-50%); } diff --git a/src/components/modal/modal.st.css b/src/components/modal/modal.st.css index dd16c241e..f88a45056 100644 --- a/src/components/modal/modal.st.css +++ b/src/components/modal/modal.st.css @@ -1,5 +1,12 @@ @namespace "Modal"; + +/* + Styling colors are here (not at the theme) + because it is rendered in + which isn't able to get theme yet. +*/ + .backdrop { width: 100vw; height: 100vh; diff --git a/src/project.st.css b/src/project.st.css index ca3a809f0..c2e871c0f 100644 --- a/src/project.st.css +++ b/src/project.st.css @@ -62,7 +62,6 @@ inputHeight: 36px; inputWidth: 192px; inputLeftSpacing: 5px; - caretRightSpacing: 1px; inputFont: value(fontSize) value(fontFamily), sans-serif; diff --git a/src/themes/default/components/auto-complete.st.css b/src/themes/default/components/auto-complete.st.css index 7948a1b84..6d9719710 100644 --- a/src/themes/default/components/auto-complete.st.css +++ b/src/themes/default/components/auto-complete.st.css @@ -4,28 +4,34 @@ } :import { - -st-from: "../../../project.st.css"; + -st-from: "../variables.st.css"; -st-named: inputLeftSpacing, - inputFont; + inputFont, + caretRightSpacing; } AutoComplete { font-size: 16px; } -AutoComplete::autoCompleteInput { +AutoComplete::input { font: value(inputFont); height: 36px; padding-left: value(inputLeftSpacing); border: 1px solid #adbac5; } -AutoComplete::autoCompleteList { +AutoComplete::input:hover { + border-color: #5cb4ff +} + +AutoComplete::caret { + right: value(caretRightSpacing); +} + +AutoComplete::list { border-top: 0; background: #fff; } -AutoComplete::autoCompleteInput:hover { - border-color: #5cb4ff -} diff --git a/src/themes/default/components/drop-down.st.css b/src/themes/default/components/drop-down.st.css index 30d65992a..21599544e 100644 --- a/src/themes/default/components/drop-down.st.css +++ b/src/themes/default/components/drop-down.st.css @@ -4,9 +4,10 @@ } :import { - -st-from: "../../../project.st.css"; + -st-from: "../variables.st.css"; -st-named: inputLeftSpacing, - inputFont; + inputFont, + caretRightSpacing; } DropDown { @@ -22,7 +23,11 @@ DropDown::label { margin-left: value(inputLeftSpacing); } -DropDown::dropdownInput:hover { +DropDown::caret { + right: value(caretRightSpacing); +} + +DropDown::input:hover { border: 1px solid #5cb4ff; } diff --git a/src/themes/default/components/modal.st.css b/src/themes/default/components/modal.st.css new file mode 100644 index 000000000..669fccaaa --- /dev/null +++ b/src/themes/default/components/modal.st.css @@ -0,0 +1,5 @@ +:import { + -st-from: "../../../components/modal/modal.st.css"; + -st-default: Modal; +} + diff --git a/src/themes/default/theme.st.css b/src/themes/default/theme.st.css index 811c04a66..f9a605166 100644 --- a/src/themes/default/theme.st.css +++ b/src/themes/default/theme.st.css @@ -34,3 +34,8 @@ -st-theme: true; -st-from: "./components/number-input.st.css"; } + +:import { + -st-theme: true; + -st-from: "./components/modal.st.css"; +} diff --git a/src/themes/default/variables.st.css b/src/themes/default/variables.st.css index 457bc9d39..a5975c78e 100644 --- a/src/themes/default/variables.st.css +++ b/src/themes/default/variables.st.css @@ -56,6 +56,11 @@ /* Copmponent Sizes */ inputHeight: 36px; inputWidth: 192px; + inputLeftSpacing: 5px; + caretRightSpacing: 1px; + + inputFont: value(fontSize) value(fontFamily), sans-serif; + /* Borders */ borderRadius: 0px; @@ -142,4 +147,4 @@ a:hover { } a.disabled, a[disabled] { color: value(color_Disabled); -} \ No newline at end of file +} From 3ed4ff42293b643fb1bfab5d7ff059c9ceca2797 Mon Sep 17 00:00:00 2001 From: Yuri Tkachenko Date: Tue, 10 Oct 2017 15:35:05 +0300 Subject: [PATCH 27/81] continue moving vars --- .../number-input/number-input.st.css | 2 +- .../default/components/auto-complete.st.css | 4 +-- .../default/components/drop-down.st.css | 4 +-- src/themes/default/components/input.st.css | 10 ++---- .../default/components/number-input.st.css | 34 +++++++++++-------- src/themes/default/variables.st.css | 9 +++-- src/themes/wix/components/number-input.st.css | 5 +++ 7 files changed, 39 insertions(+), 29 deletions(-) diff --git a/src/components/number-input/number-input.st.css b/src/components/number-input/number-input.st.css index 7120c9351..f6afc9cf5 100644 --- a/src/components/number-input/number-input.st.css +++ b/src/components/number-input/number-input.st.css @@ -23,7 +23,6 @@ .nativeInput { -moz-appearance: textfield; - padding: 6px 12px; /* making sure the input shrinks properly */ flex: 1; @@ -49,6 +48,7 @@ -webkit-appearance: none; margin: 0; } + .nativeInput:disabled { background: inherit; } diff --git a/src/themes/default/components/auto-complete.st.css b/src/themes/default/components/auto-complete.st.css index 6d9719710..243b6910e 100644 --- a/src/themes/default/components/auto-complete.st.css +++ b/src/themes/default/components/auto-complete.st.css @@ -5,7 +5,7 @@ :import { -st-from: "../variables.st.css"; - -st-named: inputLeftSpacing, + -st-named: inputHSpacing, inputFont, caretRightSpacing; } @@ -17,7 +17,7 @@ AutoComplete { AutoComplete::input { font: value(inputFont); height: 36px; - padding-left: value(inputLeftSpacing); + padding-left: value(inputHSpacing); border: 1px solid #adbac5; } diff --git a/src/themes/default/components/drop-down.st.css b/src/themes/default/components/drop-down.st.css index 21599544e..7dd2fb944 100644 --- a/src/themes/default/components/drop-down.st.css +++ b/src/themes/default/components/drop-down.st.css @@ -5,7 +5,7 @@ :import { -st-from: "../variables.st.css"; - -st-named: inputLeftSpacing, + -st-named: inputHSpacing, inputFont, caretRightSpacing; } @@ -20,7 +20,7 @@ DropDown::input { } DropDown::label { - margin-left: value(inputLeftSpacing); + margin-left: value(inputHSpacing); } DropDown::caret { diff --git a/src/themes/default/components/input.st.css b/src/themes/default/components/input.st.css index f60adbef8..7d600f223 100644 --- a/src/themes/default/components/input.st.css +++ b/src/themes/default/components/input.st.css @@ -5,10 +5,8 @@ :import { -st-from: "../../../project.st.css"; - -st-named: fontFamily, - fontSize, - fontWeight, - lineHeight, + -st-named: inputFont, + lineHeight, color_MainText, color_MainPlaceholder, color_MainText_Background, @@ -29,9 +27,7 @@ border-radius: value(borderRadius); background-color: value(color_MainText_Background); color: value(color_MainText); - font-family: value(fontFamily); - font-size: value(fontSize); - font-weight: value(fontWeight); + font: value(inputFont); line-height: value(lineHeight); margin: 0; padding: 6px 12px; diff --git a/src/themes/default/components/number-input.st.css b/src/themes/default/components/number-input.st.css index e86633867..58a319162 100644 --- a/src/themes/default/components/number-input.st.css +++ b/src/themes/default/components/number-input.st.css @@ -5,19 +5,19 @@ :import { -st-from: "../variables.st.css"; - -st-named: color_MainText, - color_MainPlaceholder, - color_MainText_Background, - borderRadius, - color_Disabled, - borderDefault, - borderHover, - borderFocus, - inputHeight, - inputWidth, - borderDisabled, - borderError, - DS2; + -st-named: inputSpacing, + color_MainText, + color_MainPlaceholder, + color_MainText_Background, + borderRadius, + borderDefault, + borderHover, + borderFocus, + inputHeight, + inputWidth, + borderDisabled, + borderError, + color_Disabled2; } NumberInput { @@ -30,6 +30,10 @@ NumberInput { min-width: value(inputWidth); } +NumberInput::nativeInput { + padding: value(inputSpacing); +} + NumberInput:hover { border: value(borderHover); } @@ -39,11 +43,11 @@ NumberInput:focus { } NumberInput:disabled { - background-color: value(DS2); + background-color: value(color_Disabled2); color: value(color_MainPlaceholder); border: value(borderDisabled); } NumberInput:error { border: value(borderError); -} \ No newline at end of file +} diff --git a/src/themes/default/variables.st.css b/src/themes/default/variables.st.css index a5975c78e..46d282497 100644 --- a/src/themes/default/variables.st.css +++ b/src/themes/default/variables.st.css @@ -51,15 +51,20 @@ color_Active: value(B3); color_Focus: value(B4); color_Disabled: value(B5); + color_Disabled2: value(DS2); color_Keyboard_Focused: value(M4); + color_Selected: value(DS2); + color_Outline: value(PR4); /* Copmponent Sizes */ inputHeight: 36px; inputWidth: 192px; - inputLeftSpacing: 5px; + inputHSpacing: 6px; + inputVSpacing: 12px; + inputSpacing: value(inputVSpacing) value(inputHSpacing); caretRightSpacing: 1px; - inputFont: value(fontSize) value(fontFamily), sans-serif; + inputFont: normal value(fontSize) value(fontFamily), sans-serif; /* Borders */ diff --git a/src/themes/wix/components/number-input.st.css b/src/themes/wix/components/number-input.st.css index b02c2eb4e..76fc4399c 100644 --- a/src/themes/wix/components/number-input.st.css +++ b/src/themes/wix/components/number-input.st.css @@ -37,6 +37,11 @@ NumberInput { color: value(textColor); } +NumberInput::nativeInput { + padding: 6px 12px; +} + + NumberInput::nativeInput::placeholder { font: value(fontStyle); color: value(placeholderColor); From e95a2f236639995f75f69ed3ee79b0c2b584c7de Mon Sep 17 00:00:00 2001 From: Yuri Tkachenko Date: Tue, 10 Oct 2017 15:43:56 +0300 Subject: [PATCH 28/81] better syntax --- src/themes/wix/components/number-input.st.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/themes/wix/components/number-input.st.css b/src/themes/wix/components/number-input.st.css index 76fc4399c..6f5a11624 100644 --- a/src/themes/wix/components/number-input.st.css +++ b/src/themes/wix/components/number-input.st.css @@ -5,7 +5,6 @@ :import { -st-from: "../variables.st.css"; - -st-theme: true; -st-named: inputWidth, inputHeight, @@ -66,7 +65,9 @@ NumberInput:disabled { color: value(textColorDisabled); } -/*NumberInput:disabled::stepper::down::control-icon, NumberInput:disabled::stepper::up::control-icon { +/* +NumberInput:disabled::stepper::down::control-icon, +NumberInput:disabled::stepper::up::control-icon { color: value(textColorDisabled); }*/ From 49310c23f9952b3d1071a5f1ea77bf50a2991600 Mon Sep 17 00:00:00 2001 From: Leonid Levi Date: Tue, 10 Oct 2017 17:17:10 +0300 Subject: [PATCH 29/81] fixing number input demo; removing background sizing from stepper component --- demo/components/number-input.demo.tsx | 7 +++---- src/components/stepper/stepper.st.css | 15 +++++++++++---- 2 files changed, 14 insertions(+), 8 deletions(-) diff --git a/demo/components/number-input.demo.tsx b/demo/components/number-input.demo.tsx index 30922604d..08edbac3a 100644 --- a/demo/components/number-input.demo.tsx +++ b/demo/components/number-input.demo.tsx @@ -28,10 +28,9 @@ export class NumberInputDemo extends React.Component<{}, NumberInputDemoState> { max={100} onChange={this.handleBasicValueChange} placeholder="How Many?" - prefix={} - > - USD - + prefix={} + suffix={USD} + />

With min/max/step

diff --git a/src/components/stepper/stepper.st.css b/src/components/stepper/stepper.st.css index 5d150e6a6..81d7f47a0 100644 --- a/src/components/stepper/stepper.st.css +++ b/src/components/stepper/stepper.st.css @@ -14,7 +14,8 @@ width: 30px; } -.up, .down { +.up, +.down { position: absolute; width: 100%; @@ -26,15 +27,17 @@ outline: none; - background: center/16px 16px no-repeat transparent; + background: center no-repeat transparent; background-origin:content-box; } -.up:hover, .down:hover { +.up:hover, +.down:hover { cursor: pointer; } -.up:disabled, .down:disabled { +.up:disabled, +.down:disabled { cursor: default; } @@ -43,10 +46,12 @@ background-image: value(iconChevronUpBK3); padding-top:1px; } + .up:focus, .up:hover { background-image: value(iconChevronUpPR3); } + .up:disabled { background-image: value(iconChevronUpDS1); } @@ -56,10 +61,12 @@ background-image: value(iconChevronDownBK3); padding-bottom:1px; } + .down:focus, .down:hover { background-image: value(iconChevronDownPR3); } + .down:disabled { background-image: value(iconChevronDownDS1); } From 3430b8bdc53abefe0007d67799b1714002cc7a9b Mon Sep 17 00:00:00 2001 From: Leonid Levi Date: Tue, 10 Oct 2017 17:50:50 +0300 Subject: [PATCH 30/81] Stepper theme; fixing padding in theme of number input --- src/themes/default/components/stepper.st.css | 5 +++ src/themes/wix/components/number-input.st.css | 9 +---- src/themes/wix/components/stepper.st.css | 37 ++++++++++++++++--- src/themes/wix/variables.st.css | 17 ++++++--- 4 files changed, 49 insertions(+), 19 deletions(-) diff --git a/src/themes/default/components/stepper.st.css b/src/themes/default/components/stepper.st.css index c40802a4e..c68536bbe 100644 --- a/src/themes/default/components/stepper.st.css +++ b/src/themes/default/components/stepper.st.css @@ -5,4 +5,9 @@ Stepper { +} + +Stepper:up, +Stepper:down { + background-size: 16px 16px; } \ No newline at end of file diff --git a/src/themes/wix/components/number-input.st.css b/src/themes/wix/components/number-input.st.css index 6f5a11624..8378a6bff 100644 --- a/src/themes/wix/components/number-input.st.css +++ b/src/themes/wix/components/number-input.st.css @@ -8,6 +8,7 @@ -st-named: inputWidth, inputHeight, + inputPadding, fontStyle, textColor, @@ -37,7 +38,7 @@ NumberInput { } NumberInput::nativeInput { - padding: 6px 12px; + padding: value(inputPadding); } @@ -65,12 +66,6 @@ NumberInput:disabled { color: value(textColorDisabled); } -/* -NumberInput:disabled::stepper::down::control-icon, -NumberInput:disabled::stepper::up::control-icon { - color: value(textColorDisabled); -}*/ - NumberInput:error { border-color: value(borderColorError); } diff --git a/src/themes/wix/components/stepper.st.css b/src/themes/wix/components/stepper.st.css index 3b85266a8..718b6ad60 100644 --- a/src/themes/wix/components/stepper.st.css +++ b/src/themes/wix/components/stepper.st.css @@ -3,19 +3,44 @@ -st-default: Stepper; } +:import { + -st-from: "../variables.st.css"; + -st-named: + iconChevronUpDefault, + iconChevronUpHover, + iconChevronUpDisabled, + iconChevronDownDefault, + iconChevronDownHover, + iconChevronDownDisabled; -Stepper::up { - color:#3899EC; } -Stepper::down { - color:#3899EC; +Stepper { + width: 28px; +} + +Stepper::up { + background-image: value(iconChevronUpDefault); + padding-top: 2px; } Stepper::up:hover { - color:#4EB7F5; + background-image: value(iconChevronUpHover); +} + +Stepper::up:disabled { + background-image: value(iconChevronUpDisabled); +} + +Stepper::down { + background-image: value(iconChevronDownDefault); + padding-bottom: 3px; } Stepper::down:hover { - color:#4EB7F5; + background-image: value(iconChevronDownHover); +} + +Stepper::down:disabled { + background-image: value(iconChevronDownDisabled); } \ No newline at end of file diff --git a/src/themes/wix/variables.st.css b/src/themes/wix/variables.st.css index d21bb50e7..2517eb623 100644 --- a/src/themes/wix/variables.st.css +++ b/src/themes/wix/variables.st.css @@ -35,6 +35,7 @@ inputHeight: 36px; inputWidth: 192px; + inputPadding: 6px 12px; inputBackgroundColor: #fff; inputBackgroundColorHover: value(B60); @@ -47,10 +48,14 @@ borderColorDisabled: value(D60); borderColorError: value(R00); - iconChevronUpBK3: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNhZGJiYzYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cG9seWxpbmUgcG9pbnRzPSIxOCAxNSAxMiA5IDYgMTUiPjwvcG9seWxpbmU+PC9zdmc+); - iconChevronUpDS1: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNjOGM4YzgiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cG9seWxpbmUgcG9pbnRzPSIxOCAxNSAxMiA5IDYgMTUiPjwvcG9seWxpbmU+PC9zdmc+); - iconChevronUpPR3: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM1Y2I0ZmYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cG9seWxpbmUgcG9pbnRzPSIxOCAxNSAxMiA5IDYgMTUiPjwvcG9seWxpbmU+PC9zdmc+); - iconChevronDownBK3: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNhZGJiYzYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cG9seWxpbmUgcG9pbnRzPSI2IDkgMTIgMTUgMTggOSI+PC9wb2x5bGluZT48L3N2Zz4=); - iconChevronDownDS1: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNjOGM4YzgiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cG9seWxpbmUgcG9pbnRzPSI2IDkgMTIgMTUgMTggOSI+PC9wb2x5bGluZT48L3N2Zz4=); - iconChevronDownPR3: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM1Y2I0ZmYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cG9seWxpbmUgcG9pbnRzPSI2IDkgMTIgMTUgMTggOSI+PC9wb2x5bGluZT48L3N2Zz4=); + /* Stepper Vars */ + /* uses the color B10 */ + iconChevronUpDefault: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSI2IiB2aWV3Qm94PSIwIDAgMTAgNiI+PHBhdGggZmlsbD0iIzM4OTlFQyIgZD0iTTguNjQ2IDUuNzA4TDkuMzU0IDUgNSAuNjQ3LjY0NiA1bC43MDguNzA4TDUgMi4wNiIvPjwvc3ZnPg==); + iconChevronDownDefault: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSI2IiB2aWV3Qm94PSIwIDAgMTAgNiI+PHBhdGggZmlsbD0iIzM4OTlFQyIgZD0iTTEuMzU0LjY0NmwtLjcwOC43MDhMNSA1LjcwN2w0LjM1NC00LjM1My0uNzA4LS43MDhMNSA0LjI5MyIvPjwvc3ZnPg==); + /* uses the color B20 */ + iconChevronUpHover: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSI2IiB2aWV3Qm94PSIwIDAgMTAgNiI+PHBhdGggZmlsbD0iIzRFQjdGNSIgZD0iTTguNjQ2IDUuNzA4TDkuMzU0IDUgNSAuNjQ3LjY0NiA1bC43MDguNzA4TDUgMi4wNiIvPjwvc3ZnPg==); + iconChevronDownHover: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSI2IiB2aWV3Qm94PSIwIDAgMTAgNiI+PHBhdGggZmlsbD0iIzRFQjdGNSIgZD0iTTEuMzU0LjY0NmwtLjcwOC43MDhMNSA1LjcwN2w0LjM1NC00LjM1My0uNzA4LS43MDhMNSA0LjI5MyIvPjwvc3ZnPg==); + /* uses the color D50 */ + iconChevronUpDisabled: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSI2IiB2aWV3Qm94PSIwIDAgMTAgNiI+PHBhdGggZmlsbD0iI2I2YzFjZCIgZD0iTTguNjQ2IDUuNzA4TDkuMzU0IDUgNSAuNjQ3LjY0NiA1bC43MDguNzA4TDUgMi4wNiIvPjwvc3ZnPg==); + iconChevronDownDisabled: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSI2IiB2aWV3Qm94PSIwIDAgMTAgNiI+PHBhdGggZmlsbD0iI2I2YzFjZCIgZD0iTTEuMzU0LjY0NmwtLjcwOC43MDhMNSA1LjcwN2w0LjM1NC00LjM1My0uNzA4LS43MDhMNSA0LjI5MyIvPjwvc3ZnPg==); } \ No newline at end of file From 8867f2a5f50f28d95abfa0d0475728c8406cca49 Mon Sep 17 00:00:00 2001 From: Leonid Levi Date: Tue, 10 Oct 2017 18:10:05 +0300 Subject: [PATCH 31/81] stepper fix in default theme: --- src/themes/default/components/stepper.st.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/themes/default/components/stepper.st.css b/src/themes/default/components/stepper.st.css index c68536bbe..2d9fdda44 100644 --- a/src/themes/default/components/stepper.st.css +++ b/src/themes/default/components/stepper.st.css @@ -7,7 +7,7 @@ Stepper { } -Stepper:up, -Stepper:down { +Stepper::up, +Stepper::down { background-size: 16px 16px; } \ No newline at end of file From f20de1df72215de10f5b9d6a8a730d4486401578 Mon Sep 17 00:00:00 2001 From: Leonid Levi Date: Tue, 10 Oct 2017 18:13:15 +0300 Subject: [PATCH 32/81] changed .root > Input in Input default theme --- src/themes/default/components/input.st.css | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/themes/default/components/input.st.css b/src/themes/default/components/input.st.css index 7d600f223..102f1dc0b 100644 --- a/src/themes/default/components/input.st.css +++ b/src/themes/default/components/input.st.css @@ -21,7 +21,7 @@ borderError; } -.root { +Input { box-sizing: inherit; border: value(borderDefault); border-radius: value(borderRadius); @@ -36,24 +36,24 @@ outline: 0; } -.root::placeholder { +Input::placeholder { color: value(color_MainPlaceholder); } -.root:hover { +Input:hover { border: value(borderHover); } -.root:focus { +Input:focus { border: value(borderFocus); } -.root[disabled] { +Input:disabled { background-color: value(color_Disabled); color: value(color_MainPlaceholder); border: value(borderDisabled); } -.root:error { +Input:error { border: value(borderError); } From 18b7472ca79d59c7fbcdd21172058b7123e946af Mon Sep 17 00:00:00 2001 From: Leonid Levi Date: Tue, 10 Oct 2017 18:55:07 +0300 Subject: [PATCH 33/81] refactored input styles to a mixin, applied them to the regular input as well --- src/themes/wix/components/input.st.css | 34 +++++++++++++++ src/themes/wix/components/number-input.st.css | 30 ++----------- src/themes/wix/theme.st.css | 5 +++ src/themes/wix/variables.st.css | 42 ++++++++++++++++++- 4 files changed, 84 insertions(+), 27 deletions(-) create mode 100644 src/themes/wix/components/input.st.css diff --git a/src/themes/wix/components/input.st.css b/src/themes/wix/components/input.st.css new file mode 100644 index 000000000..d37366f50 --- /dev/null +++ b/src/themes/wix/components/input.st.css @@ -0,0 +1,34 @@ +:import { + -st-from: "../../../components/input/input.st.css"; + -st-default: Input; +} + +:import { + -st-from: "../variables.st.css"; + -st-named: + inputStyle, + inputWidth, + inputHeight, + inputPadding, + + fontStyle, + textColor, + textColorDisabled, + placeholderColor, + + inputBackgroundColor, + inputBackgroundColorHover, + inputBackgroundColorDisabled, + + borderStyle, + borderRadius, + borderColorHover, + borderColorFocus, + borderColorDisabled, + borderColorError; +} + + +Input { + -st-mixin: inputStyle; +} \ No newline at end of file diff --git a/src/themes/wix/components/number-input.st.css b/src/themes/wix/components/number-input.st.css index 8378a6bff..9fc53465b 100644 --- a/src/themes/wix/components/number-input.st.css +++ b/src/themes/wix/components/number-input.st.css @@ -6,6 +6,7 @@ :import { -st-from: "../variables.st.css"; -st-named: + inputStyle, inputWidth, inputHeight, inputPadding, @@ -28,13 +29,8 @@ } NumberInput { - min-width: value(inputWidth); - height: value(inputHeight); - border: value(borderStyle); - border-radius: value(borderRadius); - background: value(inputBackgroundColor); - font: value(fontStyle); - color: value(textColor); + -st-mixin: inputStyle; + padding: 0; } NumberInput::nativeInput { @@ -47,25 +43,7 @@ NumberInput::nativeInput::placeholder { color: value(placeholderColor); } -NumberInput:hover { - background: value(inputBackgroundColorHover); - border-color: value(borderColorHover); -} - -NumberInput:focus { - border-color: value(borderColorFocus); -} NumberInput::nativeInput:disabled::placeholder { color: value(textColorDisabled); -} - -NumberInput:disabled { - background-color: value(inputBackgroundColorDisabled); - border-color: value(borderColorDisabled); - color: value(textColorDisabled); -} - -NumberInput:error { - border-color: value(borderColorError); -} +} \ No newline at end of file diff --git a/src/themes/wix/theme.st.css b/src/themes/wix/theme.st.css index 9206ebd31..b1ea773bb 100644 --- a/src/themes/wix/theme.st.css +++ b/src/themes/wix/theme.st.css @@ -40,6 +40,11 @@ -st-from: "./components/stepper.st.css"; } +:import { + -st-theme: true; + -st-from: "./components/input.st.css"; +} + :import { -st-from: "../../components/toggle/toggle.st.css"; -st-default: Toggle; diff --git a/src/themes/wix/variables.st.css b/src/themes/wix/variables.st.css index 2517eb623..213387b73 100644 --- a/src/themes/wix/variables.st.css +++ b/src/themes/wix/variables.st.css @@ -1,4 +1,3 @@ - :vars { /* From Wix Styleguide */ B00: #2b81cb; @@ -58,4 +57,45 @@ /* uses the color D50 */ iconChevronUpDisabled: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSI2IiB2aWV3Qm94PSIwIDAgMTAgNiI+PHBhdGggZmlsbD0iI2I2YzFjZCIgZD0iTTguNjQ2IDUuNzA4TDkuMzU0IDUgNSAuNjQ3LjY0NiA1bC43MDguNzA4TDUgMi4wNiIvPjwvc3ZnPg==); iconChevronDownDisabled: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSI2IiB2aWV3Qm94PSIwIDAgMTAgNiI+PHBhdGggZmlsbD0iI2I2YzFjZCIgZD0iTTEuMzU0LjY0NmwtLjcwOC43MDhMNSA1LjcwN2w0LjM1NC00LjM1My0uNzA4LS43MDhMNSA0LjI5MyIvPjwvc3ZnPg==); +} + + +/* Shared Styles / mixins */ +.inputStyle { + min-width: value(inputWidth); + height: value(inputHeight); + border: value(borderStyle); + border-radius: value(borderRadius); + background: value(inputBackgroundColor); + font: value(fontStyle); + color: value(textColor); + padding: value(inputPadding); +} + +.inputStyle:hover { + background: value(inputBackgroundColorHover); + border-color: value(borderColorHover); +} + +.inputStyle:focus { + border-color: value(borderColorFocus); +} + +.inputStyle:disabled { + background-color: value(inputBackgroundColorDisabled); + border-color: value(borderColorDisabled); + color: value(textColorDisabled); +} + +.inputStyle:error { + border-color: value(borderColorError); +} + +.inputStyle::placeholder { + font: value(fontStyle); + color: value(placeholderColor); +} + +.inputStyle:disabled::placeholder { + color: value(textColorDisabled); } \ No newline at end of file From b977f849462686e23064c63f077299c321d73f9c Mon Sep 17 00:00:00 2001 From: Leonid Levi Date: Tue, 10 Oct 2017 19:00:49 +0300 Subject: [PATCH 34/81] cleaned out input component's CSS file --- src/components/input/input.st.css | 56 +------------------------------ src/themes/wix/variables.st.css | 1 + 2 files changed, 2 insertions(+), 55 deletions(-) diff --git a/src/components/input/input.st.css b/src/components/input/input.st.css index 6f29fe142..5abef5056 100644 --- a/src/components/input/input.st.css +++ b/src/components/input/input.st.css @@ -1,58 +1,4 @@ -:import { - -st-from: "../../project.st.css"; - -st-named: fontFamily, - fontSize, - fontWeight, - lineHeight, - color_MainText, - color_MainPlaceholder, - color_MainText_Background, - borderRadius, - color_Disabled, - borderDefault, - borderHover, - borderFocus, - inputHeight, - inputWidth, - borderDisabled, - borderError; -} - .root { box-sizing: inherit; - border: value(borderDefault); - border-radius: value(borderRadius); - background-color: value(color_MainText_Background); - color: value(color_MainText); - font-family: value(fontFamily); - font-size: value(fontSize); - font-weight: value(fontWeight); - line-height: value(lineHeight); - margin: 0; - padding: 6px 12px; - height: value(inputHeight); - width: value(inputWidth); outline: 0; -} - -.root::placeholder { - color: value(color_MainPlaceholder); -} - -.root:hover { - border: value(borderHover); -} - -.root:focus { - border: value(borderFocus); -} - -.root[disabled] { - background-color: value(color_Disabled); - color: value(color_MainPlaceholder); - border: value(borderDisabled); -} - -.root:error { - border: value(borderError); -} +} \ No newline at end of file diff --git a/src/themes/wix/variables.st.css b/src/themes/wix/variables.st.css index 213387b73..4d12ce325 100644 --- a/src/themes/wix/variables.st.css +++ b/src/themes/wix/variables.st.css @@ -70,6 +70,7 @@ font: value(fontStyle); color: value(textColor); padding: value(inputPadding); + outline: 0; } .inputStyle:hover { From 3e5d14fa8b3c5ffab131810b473a6ea263c42be0 Mon Sep 17 00:00:00 2001 From: Leonid Levi Date: Tue, 10 Oct 2017 19:06:05 +0300 Subject: [PATCH 35/81] added important comments --- src/themes/wix/components/input.st.css | 2 ++ src/themes/wix/components/number-input.st.css | 2 ++ 2 files changed, 4 insertions(+) diff --git a/src/themes/wix/components/input.st.css b/src/themes/wix/components/input.st.css index d37366f50..2e0ae1e98 100644 --- a/src/themes/wix/components/input.st.css +++ b/src/themes/wix/components/input.st.css @@ -6,6 +6,8 @@ :import { -st-from: "../variables.st.css"; -st-named: + /* import list is long because -st-mixin currently requires + importing all the variables that the mixed in class uses */ inputStyle, inputWidth, inputHeight, diff --git a/src/themes/wix/components/number-input.st.css b/src/themes/wix/components/number-input.st.css index 9fc53465b..26522d413 100644 --- a/src/themes/wix/components/number-input.st.css +++ b/src/themes/wix/components/number-input.st.css @@ -5,6 +5,8 @@ :import { -st-from: "../variables.st.css"; + /* import list is long because -st-mixin currently requires + importing all the variables that the mixed in class uses */ -st-named: inputStyle, inputWidth, From a7bdacbca89d564aad154ff36b6d09d972f41ba2 Mon Sep 17 00:00:00 2001 From: Leonid Levi Date: Tue, 10 Oct 2017 19:09:18 +0300 Subject: [PATCH 36/81] a little order in wix/theme.st.css --- src/themes/wix/theme.st.css | 32 +++++++++++++++++--------------- 1 file changed, 17 insertions(+), 15 deletions(-) diff --git a/src/themes/wix/theme.st.css b/src/themes/wix/theme.st.css index b1ea773bb..6e9a4881b 100644 --- a/src/themes/wix/theme.st.css +++ b/src/themes/wix/theme.st.css @@ -1,5 +1,22 @@ @namespace "wixTheme"; +:import { + -st-from: "./components/number-input.st.css"; + -st-theme: true; +} + +:import { + -st-theme: true; + -st-from: "./components/stepper.st.css"; +} + +:import { + -st-theme: true; + -st-from: "./components/input.st.css"; +} + +/* old content */ + :import { -st-from: "./variables.st.css"; -st-theme: true; @@ -30,21 +47,6 @@ primary-color; } -:import { - -st-from: "./components/number-input.st.css"; - -st-theme: true; -} - -:import { - -st-theme: true; - -st-from: "./components/stepper.st.css"; -} - -:import { - -st-theme: true; - -st-from: "./components/input.st.css"; -} - :import { -st-from: "../../components/toggle/toggle.st.css"; -st-default: Toggle; From 047e8afaa23db7b502aaa3da76b7be9688673692 Mon Sep 17 00:00:00 2001 From: Yuri Tkachenko Date: Wed, 11 Oct 2017 12:08:42 +0300 Subject: [PATCH 37/81] using variables in themes --- .../default/components/auto-complete.st.css | 14 +++++++++----- .../default/components/drop-down.st.css | 14 +++++++++----- src/themes/default/variables.st.css | 19 +++++++++++++------ 3 files changed, 31 insertions(+), 16 deletions(-) diff --git a/src/themes/default/components/auto-complete.st.css b/src/themes/default/components/auto-complete.st.css index 243b6910e..7b9a5fd73 100644 --- a/src/themes/default/components/auto-complete.st.css +++ b/src/themes/default/components/auto-complete.st.css @@ -5,7 +5,11 @@ :import { -st-from: "../variables.st.css"; - -st-named: inputHSpacing, + -st-named: color_MainText_Background, + borderDefault, + borderHoverColor, + inputHeight, + inputHSpacing, inputFont, caretRightSpacing; } @@ -16,13 +20,13 @@ AutoComplete { AutoComplete::input { font: value(inputFont); - height: 36px; + height: value(inputHeight); padding-left: value(inputHSpacing); - border: 1px solid #adbac5; + border: value(borderDefault); } AutoComplete::input:hover { - border-color: #5cb4ff + border-color: value(borderHoverColor); } AutoComplete::caret { @@ -31,7 +35,7 @@ AutoComplete::caret { AutoComplete::list { border-top: 0; - background: #fff; + background-color: value(color_MainText_Background); } diff --git a/src/themes/default/components/drop-down.st.css b/src/themes/default/components/drop-down.st.css index 7dd2fb944..94d012720 100644 --- a/src/themes/default/components/drop-down.st.css +++ b/src/themes/default/components/drop-down.st.css @@ -5,7 +5,11 @@ :import { -st-from: "../variables.st.css"; - -st-named: inputHSpacing, + -st-named: color_MainText_Background, + borderHoverColor, + borderDefault, + inputHeight, + inputHSpacing, inputFont, caretRightSpacing; } @@ -15,8 +19,8 @@ DropDown { } DropDown::input { - border: 1px solid #adbac5; - height: 36px; + border: value(borderDefault); + height: value(inputHeight); } DropDown::label { @@ -28,9 +32,9 @@ DropDown::caret { } DropDown::input:hover { - border: 1px solid #5cb4ff; + border-color: value(borderHoverColor); } DropDown::list { - background-color: white; + background-color: value(color_MainText_Background); } diff --git a/src/themes/default/variables.st.css b/src/themes/default/variables.st.css index 46d282497..15eed2008 100644 --- a/src/themes/default/variables.st.css +++ b/src/themes/default/variables.st.css @@ -42,7 +42,7 @@ color_MainPlaceholder: value(M2); color_MainError: value(M5); color_MainDisabled: value(M6); - color_MainText_Background: value(M0); + color_MainText_Background: value(WT1); color_Border: value(B10); /* Component state colors */ @@ -71,11 +71,18 @@ borderRadius: 0px; borderWidth: 1px; borderStyle: solid; - borderDefault: value(borderStyle) value(borderWidth) value(B5); - borderHover: value(borderStyle) value(borderWidth) value(B2); - borderFocus: value(borderStyle) value(borderWidth) value(B3); - borderDisabled: value(borderStyle) value(borderWidth) value(B5); - borderError: value(borderStyle) value(borderWidth) value(R1); + + borderDefaultColor: value(B5); + borderHoverColor: value(B2); + borderFocusColor: value(B3); + borderDisabledColor: value(B5); + borderErrorColor: value(R1); + + borderDefault: value(borderStyle) value(borderWidth) value(borderDefaultColor); + borderHover: value(borderStyle) value(borderWidth) value(borderHoverColor); + borderFocus: value(borderStyle) value(borderWidth) value(borderFocusColorB3); + borderDisabled: value(borderStyle) value(borderWidth) value(borderDisabledColor); + borderError: value(borderStyle) value(borderWidth) value(borderErrorColor); iconChevronUpBK3: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNhZGJiYzYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cG9seWxpbmUgcG9pbnRzPSIxOCAxNSAxMiA5IDYgMTUiPjwvcG9seWxpbmU+PC9zdmc+); iconChevronUpDS1: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNjOGM4YzgiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cG9seWxpbmUgcG9pbnRzPSIxOCAxNSAxMiA5IDYgMTUiPjwvcG9seWxpbmU+PC9zdmc+); From 43fccbe57276f7b863fb13160875e1d742bde502 Mon Sep 17 00:00:00 2001 From: Leonid Levi Date: Wed, 11 Oct 2017 12:47:08 +0300 Subject: [PATCH 38/81] small changes before merge --- src/components/input/input.st.css | 1 - src/themes/wix/theme.st.css | 4 ---- src/themes/wix/variables.st.css | 2 ++ 3 files changed, 2 insertions(+), 5 deletions(-) diff --git a/src/components/input/input.st.css b/src/components/input/input.st.css index 5abef5056..be04798a9 100644 --- a/src/components/input/input.st.css +++ b/src/components/input/input.st.css @@ -1,4 +1,3 @@ .root { box-sizing: inherit; - outline: 0; } \ No newline at end of file diff --git a/src/themes/wix/theme.st.css b/src/themes/wix/theme.st.css index 6e9a4881b..095baf879 100644 --- a/src/themes/wix/theme.st.css +++ b/src/themes/wix/theme.st.css @@ -74,10 +74,6 @@ -st-from: "../../components/button/button.st.css"; -st-default: Button; } -:import { - -st-from: "../../components/input/input.st.css"; - -st-default: Input; -} /* Fonts */ diff --git a/src/themes/wix/variables.st.css b/src/themes/wix/variables.st.css index 4d12ce325..96c151433 100644 --- a/src/themes/wix/variables.st.css +++ b/src/themes/wix/variables.st.css @@ -61,6 +61,8 @@ /* Shared Styles / mixins */ + +/* TODO: Eliminate as many variables as possible, replacing with hard values */ .inputStyle { min-width: value(inputWidth); height: value(inputHeight); From d9853fa699464c69e2de441da5fb6d5467e96285 Mon Sep 17 00:00:00 2001 From: Leonid Levi Date: Wed, 11 Oct 2017 13:14:48 +0300 Subject: [PATCH 39/81] refactoring autocomplete to match other inputs --- .../auto-complete/auto-complete.st.css | 22 ++++++++++++----- .../auto-complete/auto-complete.tsx | 16 +++++++------ .../default/components/auto-complete.st.css | 24 ++++++++++++------- 3 files changed, 41 insertions(+), 21 deletions(-) diff --git a/src/components/auto-complete/auto-complete.st.css b/src/components/auto-complete/auto-complete.st.css index 08844890a..f7c48e724 100644 --- a/src/components/auto-complete/auto-complete.st.css +++ b/src/components/auto-complete/auto-complete.st.css @@ -1,12 +1,25 @@ @namespace "AutoComplete"; .root { + box-sizing: inherit; position: relative; - display: inline-block; + display: inline-flex; } .input { - width: 100%; + /* making sure the input shrinks properly */ + flex: 1; + min-width: 1px; + text-overflow: ellipsis; + + /* negating global input styles */ + height: auto; + border: none; + box-shadow: none; + outline: none; + color: inherit; + font: inherit; + background: none; } .list { @@ -22,8 +35,5 @@ .caret { cursor: pointer; - position: absolute; - top: 50%; - right: 0; - transform:translateY(-50%); + height: auto; } diff --git a/src/components/auto-complete/auto-complete.tsx b/src/components/auto-complete/auto-complete.tsx index 3e73ccfb1..0180c4c51 100644 --- a/src/components/auto-complete/auto-complete.tsx +++ b/src/components/auto-complete/auto-complete.tsx @@ -24,7 +24,7 @@ export interface AutoCompleteProps extends FormInputProps, } export interface AutoCompleteState { - input: HTMLInputElement | null; + self: HTMLDivElement | null; } const prefixFilter: FilterPredicate = (item: string, prefix: string) => { @@ -42,7 +42,7 @@ export class AutoComplete extends React.Component +
0} > { - this.setState({input: ref}); + private refCallback = (ref: HTMLDivElement) => { + this.setState({self: ref}); } private onChange = (e: React.ChangeEvent) => { diff --git a/src/themes/default/components/auto-complete.st.css b/src/themes/default/components/auto-complete.st.css index 7b9a5fd73..494376c9c 100644 --- a/src/themes/default/components/auto-complete.st.css +++ b/src/themes/default/components/auto-complete.st.css @@ -6,31 +6,39 @@ :import { -st-from: "../variables.st.css"; -st-named: color_MainText_Background, + color_MainText, borderDefault, + borderRadius, borderHoverColor, + inputWidth, inputHeight, - inputHSpacing, + inputSpacing, inputFont, caretRightSpacing; } AutoComplete { - font-size: 16px; + font:value(inputFont); + border: value(borderDefault); + border-radius: value(borderRadius); + background-color: value(color_MainText_Background); + color: value(color_MainText); + + height: value(inputHeight); + min-width: value(inputWidth); + } AutoComplete::input { - font: value(inputFont); - height: value(inputHeight); - padding-left: value(inputHSpacing); - border: value(borderDefault); + padding: value(inputSpacing); } -AutoComplete::input:hover { +AutoComplete:hover { border-color: value(borderHoverColor); } AutoComplete::caret { - right: value(caretRightSpacing); + width: 30px; } AutoComplete::list { From 2f7017246a24d5eb0a8395c45a329ef6c1b1b56a Mon Sep 17 00:00:00 2001 From: Yuri Tkachenko Date: Wed, 11 Oct 2017 13:26:54 +0300 Subject: [PATCH 40/81] radio button default theme --- .../radio-group/radio-button.st.css | 73 +++++++------------ src/components/radio-group/radio-button.tsx | 42 +---------- src/components/radio-group/radio-group.st.css | 1 - .../default/components/auto-complete.st.css | 4 +- .../default/components/drop-down.st.css | 4 +- .../default/components/radio-button.st.css | 71 ++++++++++++++++++ .../default/components/radio-group.st.css | 4 + src/themes/default/theme.st.css | 11 +++ src/themes/default/variables.st.css | 14 ++-- 9 files changed, 123 insertions(+), 101 deletions(-) create mode 100644 src/themes/default/components/radio-button.st.css create mode 100644 src/themes/default/components/radio-group.st.css diff --git a/src/components/radio-group/radio-button.st.css b/src/components/radio-group/radio-button.st.css index 31ba6ac9f..518acb007 100644 --- a/src/components/radio-group/radio-button.st.css +++ b/src/components/radio-group/radio-button.st.css @@ -1,19 +1,4 @@ -@namespace "RadioButton"; - -:import { - -st-from: '../../project.st.css'; - -st-named: B5, B6, B7, M3, PR3; -} - -:vars { - defaultStroke: value(B7); - checkedStroke: value(M3); - checkedFill: value(M3); - disabledStroke: value(B5); - disabledFill: value(B6); - disabledCheckedFill: value(B5); - focusOutline: rgba(92, 180, 255, 0.5); -} +@namespace "buttonButton"; .root { -st-states: disabled, focused, checked; @@ -42,48 +27,44 @@ opacity: 0; } -.iconContainer { - display: flex; - align-items: center; - justify-content: center; -} - -.radioSVG { +.button { cursor: inherit; - align-self: center; - width: 16px; - height: 16px; - fillRule: evenodd; - stroke: value(defaultStroke); - border-radius: 50%; - box-sizing: content-box; - fill: none; + display: inline-block; + position: relative; } -.root:checked:not(:disabled) .radioSVG { - stroke: value(checkedStroke); +.button::after { + content: ""; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); } - -.root:hover:not(:disabled) .radioSVG{ - stroke: value(checkedStroke) +/* +.root:checked:not(:disabled) .button { + border-color: value(checkedStroke); } -.root:disabled .radioSVG { - stroke: value(disabledStroke); +.root:checked:not(:disabled) .button::after { + background-color: value(checkedFill); } -.root:disabled:not(:checked) .radioSVG { - fill: value(disabledFill); +.root:disabled .button::after { + background-color: value(disabledCheckedFill); } -.root:focused .radioSVG { - border: 4px solid value(focusOutline); +.root:hover:not(:disabled) .button{ + border-color: value(checkedStroke) } -.checkMark { - fill: value(checkedFill); +.root:disabled .button { + border-color: value(disabledStroke); } -.root:disabled .checkMark { - fill: value(disabledCheckedFill); +.root:disabled:not(:checked) .button::after { + background-color: value(disabledFill); } + +.root:focused .button { + box-shadow: 0 0 0 2px value(focusOutline); +} */ diff --git a/src/components/radio-group/radio-button.tsx b/src/components/radio-group/radio-button.tsx index f3e51882d..fcd4445c8 100644 --- a/src/components/radio-group/radio-button.tsx +++ b/src/components/radio-group/radio-button.tsx @@ -58,12 +58,7 @@ export class RadioButton extends React.Component
-
- {this.props.checked ? checkedRadioSvg() : emptyRadioSvg()} -
+ {this.props.children}
@@ -84,38 +79,3 @@ export class RadioButton extends React.Component - - - ); -} - -function checkedRadioSvg() { - return ( - - - - - - - - - - ); -} diff --git a/src/components/radio-group/radio-group.st.css b/src/components/radio-group/radio-group.st.css index 15385eb0a..9b5da5da0 100644 --- a/src/components/radio-group/radio-group.st.css +++ b/src/components/radio-group/radio-group.st.css @@ -14,7 +14,6 @@ } .label { - color: black; margin-left: 0.5rem; cursor: pointer; } diff --git a/src/themes/default/components/auto-complete.st.css b/src/themes/default/components/auto-complete.st.css index 7b9a5fd73..d7a96bbe4 100644 --- a/src/themes/default/components/auto-complete.st.css +++ b/src/themes/default/components/auto-complete.st.css @@ -7,7 +7,7 @@ -st-from: "../variables.st.css"; -st-named: color_MainText_Background, borderDefault, - borderHoverColor, + color_Hover, inputHeight, inputHSpacing, inputFont, @@ -26,7 +26,7 @@ AutoComplete::input { } AutoComplete::input:hover { - border-color: value(borderHoverColor); + border-color: value(color_Hover); } AutoComplete::caret { diff --git a/src/themes/default/components/drop-down.st.css b/src/themes/default/components/drop-down.st.css index 94d012720..bcd6df8a1 100644 --- a/src/themes/default/components/drop-down.st.css +++ b/src/themes/default/components/drop-down.st.css @@ -6,7 +6,7 @@ :import { -st-from: "../variables.st.css"; -st-named: color_MainText_Background, - borderHoverColor, + color_Hover, borderDefault, inputHeight, inputHSpacing, @@ -32,7 +32,7 @@ DropDown::caret { } DropDown::input:hover { - border-color: value(borderHoverColor); + color_Hover); } DropDown::list { diff --git a/src/themes/default/components/radio-button.st.css b/src/themes/default/components/radio-button.st.css new file mode 100644 index 000000000..f8f5741e0 --- /dev/null +++ b/src/themes/default/components/radio-button.st.css @@ -0,0 +1,71 @@ +:import { + -st-from: "../../../components/radio-group/radio-button.st.css"; + -st-default: RadioButton; +} + +:import { + -st-from: '../variables.st.css'; + -st-named: borderDefault, + color_MainText_Background, + color_Outline, + color_Active, + color_Disabled2, + color_Disabled; +} + +RadioButton { + -st-states: disabled, focused, checked; + display: inline-block; + position: relative; + cursor: pointer; +} + +RadioButton:disabled { + cursor: default; +} + +RadioButton::button { + width: 16px; + height: 16px; + border-radius: 50%; + box-sizing: border-box; + border: value(borderDefault); + background: value(color_MainText_Background); +} + +RadioButton::button::after { + width: 10px; + height: 10px; + border-radius: 50%; +} + +RadioButton:checked:not(:disabled)::button { + border-color: value(color_Active); +} + +RadioButton:checked:not(:disabled)::button::after { + background-color: value(color_Active); +} + +RadioButton:disabled::button::after { + background-color: value(color_Disabled); +} + +RadioButton:hover:not(:disabled)::button { + border-color: value(color_Active) +} + +RadioButton:disabled::button { + border-color: value(color_Disabled); +} + +RadioButton:disabled:not(:checked)::button::after { + background-color: value(color_Disabled2); + width: 15px; + height: 15px; +} + +RadioButton:focused::button { + box-shadow: 0 0 0 2px value(color_Outline); +} + diff --git a/src/themes/default/components/radio-group.st.css b/src/themes/default/components/radio-group.st.css new file mode 100644 index 000000000..f85c85024 --- /dev/null +++ b/src/themes/default/components/radio-group.st.css @@ -0,0 +1,4 @@ +:import { + -st-from: "../../../components/radio-group/radio-group.st.css"; + -st-default: RadioGroup; +} diff --git a/src/themes/default/theme.st.css b/src/themes/default/theme.st.css index a0d782c29..9c519cbd3 100644 --- a/src/themes/default/theme.st.css +++ b/src/themes/default/theme.st.css @@ -40,7 +40,18 @@ -st-from: "./components/modal.st.css"; } + :import { -st-theme: true; -st-from: "./components/stepper.st.css"; } + +:import { + -st-theme: true; + -st-from: "./components/radio-group.st.css"; +} + +:import { + -st-theme: true; + -st-from: "./components/radio-button.st.css"; +} diff --git a/src/themes/default/variables.st.css b/src/themes/default/variables.st.css index 15eed2008..a9940a426 100644 --- a/src/themes/default/variables.st.css +++ b/src/themes/default/variables.st.css @@ -55,6 +55,7 @@ color_Keyboard_Focused: value(M4); color_Selected: value(DS2); color_Outline: value(PR4); + color_Error: value(R1); /* Copmponent Sizes */ inputHeight: 36px; @@ -73,16 +74,11 @@ borderStyle: solid; borderDefaultColor: value(B5); - borderHoverColor: value(B2); - borderFocusColor: value(B3); - borderDisabledColor: value(B5); - borderErrorColor: value(R1); - borderDefault: value(borderStyle) value(borderWidth) value(borderDefaultColor); - borderHover: value(borderStyle) value(borderWidth) value(borderHoverColor); - borderFocus: value(borderStyle) value(borderWidth) value(borderFocusColorB3); - borderDisabled: value(borderStyle) value(borderWidth) value(borderDisabledColor); - borderError: value(borderStyle) value(borderWidth) value(borderErrorColor); + borderHover: value(borderStyle) value(borderWidth) value(color_Hover); + borderFocus: value(borderStyle) value(borderWidth) value(color_Focus); + borderDisabled: value(borderStyle) value(borderWidth) value(color_Disabled2); + borderError: value(borderStyle) value(borderWidth) value(color_Error); iconChevronUpBK3: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNhZGJiYzYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cG9seWxpbmUgcG9pbnRzPSIxOCAxNSAxMiA5IDYgMTUiPjwvcG9seWxpbmU+PC9zdmc+); iconChevronUpDS1: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNjOGM4YzgiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cG9seWxpbmUgcG9pbnRzPSIxOCAxNSAxMiA5IDYgMTUiPjwvcG9seWxpbmU+PC9zdmc+); From 12348913276d2c4261e91336d344b4b2ffe43f2d Mon Sep 17 00:00:00 2001 From: Leonid Levi Date: Wed, 11 Oct 2017 14:47:20 +0300 Subject: [PATCH 41/81] removing CaretDown from autocomplete, refactoring to use background-images; adding wix theme for autocomplete --- .../auto-complete/auto-complete.st.css | 33 ++++++++++- .../auto-complete/auto-complete.tsx | 4 +- .../default/components/auto-complete.st.css | 1 + .../wix/components/auto-complete.st.css | 58 +++++++++++++++++++ src/themes/wix/components/number-input.st.css | 1 - src/themes/wix/theme.st.css | 5 ++ src/themes/wix/variables.st.css | 14 ++++- 7 files changed, 111 insertions(+), 5 deletions(-) create mode 100644 src/themes/wix/components/auto-complete.st.css diff --git a/src/components/auto-complete/auto-complete.st.css b/src/components/auto-complete/auto-complete.st.css index f7c48e724..baab8bedc 100644 --- a/src/components/auto-complete/auto-complete.st.css +++ b/src/components/auto-complete/auto-complete.st.css @@ -1,5 +1,17 @@ @namespace "AutoComplete"; +:import { + -st-from: "../../project.st.css"; + -st-named: + iconChevronDownBK3, + iconChevronDownDS1, + iconChevronDownPR3; +} + +/* + FOCUS doesn't work. + TODO: Component needs to handle focus (pass it to the root element) in code +*/ .root { box-sizing: inherit; position: relative; @@ -7,7 +19,7 @@ } .input { - /* making sure the input shrinks properly */ + /* making sure the input shrinks properly */ flex: 1; min-width: 1px; text-overflow: ellipsis; @@ -34,6 +46,25 @@ } .caret { + + margin: 0; + padding: 0; + border: 0; + + outline: none; + + background: center no-repeat transparent; + background-origin:content-box; cursor: pointer; height: auto; + background-image: value(iconChevronDownBK3); +} + +.caret:hover, +.caret:focus { + background-image: value(iconChevronDownPR3); +} + +.caret:disabled { + background-image: value(iconChevronDownDS1); } diff --git a/src/components/auto-complete/auto-complete.tsx b/src/components/auto-complete/auto-complete.tsx index 0180c4c51..c61502c0a 100644 --- a/src/components/auto-complete/auto-complete.tsx +++ b/src/components/auto-complete/auto-complete.tsx @@ -4,7 +4,7 @@ import {Popup} from '../../'; import {ChangeEvent} from '../../types/events'; import {FormInputProps} from '../../types/forms'; import {noop} from '../../utils'; -import {CaretDown} from '../drop-down/drop-down-icons'; +//import {CaretDown} from '../drop-down/drop-down-icons'; import { SelectionListItemValue, SelectionListModel, @@ -62,7 +62,7 @@ export class AutoComplete extends React.Component - +
); diff --git a/src/components/time-picker/time-picker.st.css b/src/components/time-picker/time-picker.st.css index a8c8a9fd7..912531f30 100644 --- a/src/components/time-picker/time-picker.st.css +++ b/src/components/time-picker/time-picker.st.css @@ -52,11 +52,6 @@ justify-content: center; } -.root:rtl { - padding-right: 9px; - padding-left: 0; -} - .root:rtl::time { display: inline-flex; flex-direction: row-reverse; @@ -71,6 +66,7 @@ .input { position: relative; border: 0; + outline: 0; padding: 0 3px; margin: 0; width: 1.62em; diff --git a/src/components/toggle/toggle.st.css b/src/components/toggle/toggle.st.css index dc68565a9..3cf2f0d97 100644 --- a/src/components/toggle/toggle.st.css +++ b/src/components/toggle/toggle.st.css @@ -1,6 +1,5 @@ @namespace 'toggle'; - .root { -st-states: checked, disabled, focus, error, rtl; display: inline-block; diff --git a/src/themes/default/components/time-picker.st.css b/src/themes/default/components/time-picker.st.css index 01f553052..cc5d7e1e8 100644 --- a/src/themes/default/components/time-picker.st.css +++ b/src/themes/default/components/time-picker.st.css @@ -90,11 +90,6 @@ TimePicker::input::selection { padding: 2px; } -TimePicker::input:hover, -TimePicker::input:focus { - border: 0; - outline: 0; -} TimePicker::input:disabled { opacity: 1; background-color: inherit; From 3b21f180f9d3d04a3a03bd1b3822efcbedc636c6 Mon Sep 17 00:00:00 2001 From: Yuri Tkachenko Date: Thu, 12 Oct 2017 13:38:19 +0300 Subject: [PATCH 53/81] dropdown list fix --- src/components/drop-down/drop-down.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/drop-down/drop-down.tsx b/src/components/drop-down/drop-down.tsx index 286c0baf5..c015b2a90 100644 --- a/src/components/drop-down/drop-down.tsx +++ b/src/components/drop-down/drop-down.tsx @@ -66,7 +66,7 @@ export class DropDown extends React.PureComponent
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/demo/style.st.css b/demo/style.st.css index 8c6042891..a127087f4 100644 --- a/demo/style.st.css +++ b/demo/style.st.css @@ -5,7 +5,9 @@ -st-named: toggleSmall, btnLarge, btnSmall, btnTiny, btnSecondary, btnWhite, btnWhiteSecondary, - btnError, btnErrorSecondary; + btnError, btnErrorSecondary, + btnPremium, btnPremiumSecondary, + btnTransparent; } :global(html) { @@ -38,34 +40,9 @@ padding-right: 1em; } -.btnSmall { - -} - -.btnSecondary { - -} - -.btnLarge { - -} - -.btnTiny { - -} - -.btnWhite { - -} - -.btnWhiteSecondary { - -} - -.btnError { - -} - -.btnErrorSecondary { +.btnSmall, .btnSecondary, .btnLarge, .btnTiny, +.btnWhite, .btnWhiteSecondary, .btnError, +.btnErrorSecondary, .btnPremium, .btnPremiumSecondary, +.btnTransparent { } \ No newline at end of file diff --git a/src/themes/wix/components/button.st.css b/src/themes/wix/components/button.st.css index 73771337d..8df0c316a 100644 --- a/src/themes/wix/components/button.st.css +++ b/src/themes/wix/components/button.st.css @@ -9,12 +9,23 @@ buttonColorBlue, buttonColorBlueHover, buttonColorBlueActive, + buttonColorWhiteHover, buttonColorWhiteActive, + buttonColorDisabled, + buttonColorError, buttonColorErrorHover, - buttonColorErrorActive; + buttonColorErrorActive, + + buttonColorPremium, + buttonColorPremiumHover, + buttonColorPremiumActive, + + buttonColorTransparent, + buttonColorTransparentHover, + buttonColorTransparentActive; }; Button { @@ -57,7 +68,8 @@ Button:active, Button:disabled, .btnWhite:disabled, -.btnError:disabled { +.btnError:disabled, +.btnPremium:disabled { background-color: value(buttonColorDisabled); color: white; } @@ -93,7 +105,8 @@ Button:disabled, .btnSecondary:disabled, .btnWhiteSecondary:disabled, -.btnErrorSecondary:disabled { +.btnErrorSecondary:disabled, +.btnPremiumSecondary:disabled { color: value(buttonColorDisabled); border-color: value(buttonColorDisabled); } @@ -152,3 +165,50 @@ Button:disabled, background-color: transparent; color: value(buttonColorError); } + +.btnPremium { + -st-extends:Button; + background: value(buttonColorPremium); + color: white; + +} + +.btnPremium:hover, +.btnPremiumSecondary:hover { + background-color: value(buttonColorPremiumHover); + border: transparent; + color: white; +} + +.btnPremium:active, +.btnPremiumSecondary:active { + background-color: value(buttonColorPremiumActive); + border: transparent; + color: white; +} + +.btnPremiumSecondary { + -st-extends: Button; + border: 1px solid value(buttonColorPremium); + background-color: transparent; + color: value(buttonColorPremium); +} + +.btnTransparent { + -st-extends:Button; + background: value(buttonColorTransparent); + color: white; + +} + +.btnTransparent:hover { + background-color: value(buttonColorTransparentHover); + border: transparent; + color: white; +} + +.btnTransparent:active { + background-color: value(buttonColorTransparentActive); + border: transparent; + color: white; +} diff --git a/src/themes/wix/theme.st.css b/src/themes/wix/theme.st.css index d326dde72..256f5eff3 100644 --- a/src/themes/wix/theme.st.css +++ b/src/themes/wix/theme.st.css @@ -41,7 +41,9 @@ -st-from: "./components/button.st.css"; -st-named: btnLarge, btnSmall, btnTiny, btnSecondary, btnWhite, btnWhiteSecondary, - btnError, btnErrorSecondary; + btnError, btnErrorSecondary, + btnPremium, btnPremiumSecondary, + btnTransparent; } :import { diff --git a/src/themes/wix/variables.st.css b/src/themes/wix/variables.st.css index fb1b11393..98828c244 100644 --- a/src/themes/wix/variables.st.css +++ b/src/themes/wix/variables.st.css @@ -11,6 +11,9 @@ B50: #eaf7ff; B60: #f4fafe; D10: #162d3d; + D10A24: rgba(22, 45, 60, 0.24); + D10A30: rgba(22, 45, 60, 0.3); + D10A36: rgba(22, 45, 60, 0.36); D20: #32536A; D30: #577083; D40: #7a92a5; /* placeholder color */ @@ -24,6 +27,9 @@ R10: #ee5951; R20: #ff6666; R30: #ffd7d7; + P00: #cd68ed; + P10: #aa4cd8; + P20: #cd68ed; /* Input Vars */ GR20: #dadada; @@ -68,6 +74,14 @@ buttonColorErrorHover: value(R20); buttonColorErrorActive: value(R10); + buttonColorPremium: value(P10); + buttonColorPremiumHover: value(P20); + buttonColorPremiumActive: value(P10); + + buttonColorTransparent: value(D10A24); + buttonColorTransparentHover: value(D10A30); + buttonColorTransparentActive: value(D10A36); + buttonColorDisabled: value(D55); /* Toggle */ From 4898d82f0c43c41c75406cd0dbcf128e1a8d2e79 Mon Sep 17 00:00:00 2001 From: Leonid Levi Date: Fri, 13 Oct 2017 17:26:56 +0300 Subject: [PATCH 62/81] made button variable names more semantic (replaced Blue with Main) --- src/themes/wix/components/button.st.css | 22 +++++++++++----------- src/themes/wix/variables.st.css | 6 +++--- 2 files changed, 14 insertions(+), 14 deletions(-) diff --git a/src/themes/wix/components/button.st.css b/src/themes/wix/components/button.st.css index 8df0c316a..39dfccf19 100644 --- a/src/themes/wix/components/button.st.css +++ b/src/themes/wix/components/button.st.css @@ -6,9 +6,9 @@ :import { -st-from: "../variables.st.css"; -st-named: labelFontStyle, - buttonColorBlue, - buttonColorBlueHover, - buttonColorBlueActive, + buttonColorMain, + buttonColorMainHover, + buttonColorMainActive, buttonColorWhiteHover, buttonColorWhiteActive, @@ -48,21 +48,21 @@ Button { padding: 0 24px; - background: value(buttonColorBlue); + background: value(buttonColorMain); color: white; } Button:hover, .btnSecondary:hover { color: white; - background: value(buttonColorBlueHover); + background: value(buttonColorMainHover); border-color: transparent; } Button:active, .btnSecondary:active { color: white; - background-color: value(buttonColorBlueActive); + background-color: value(buttonColorMainActive); border-color: transparent; } @@ -98,9 +98,9 @@ Button:disabled, .btnSecondary { -st-extends: Button; - border: 1px solid value(buttonColorBlue); + border: 1px solid value(buttonColorMain); background: transparent; - color: value(buttonColorBlue); + color: value(buttonColorMain); } .btnSecondary:disabled, @@ -114,21 +114,21 @@ Button:disabled, .btnWhite { -st-extends:Button; background-color: white; - color: value(buttonColorBlue); + color: value(buttonColorMain); } .btnWhite:hover, .btnWhiteSecondary:hover { background-color: value(buttonColorWhiteHover); border: transparent; - color: value(buttonColorBlue); + color: value(buttonColorMain); } .btnWhite:active, .btnWhiteSecondary:active { background-color: value(buttonColorWhiteActive); border: transparent; - color: value(buttonColorBlue); + color: value(buttonColorMain); } .btnWhiteSecondary { diff --git a/src/themes/wix/variables.st.css b/src/themes/wix/variables.st.css index 98828c244..ecde73918 100644 --- a/src/themes/wix/variables.st.css +++ b/src/themes/wix/variables.st.css @@ -63,9 +63,9 @@ labelFontStyle: 16px "HelveticaNeueW01-45Light", sans-serif; - buttonColorBlue: value(B10); - buttonColorBlueHover: value(B20); - buttonColorBlueActive: value(B00); + buttonColorMain: value(B10); + buttonColorMainHover: value(B20); + buttonColorMainActive: value(B00); buttonColorWhiteHover: value(B50); buttonColorWhiteActive: value(B40); From 490612b8ff172ce14db757b0dbdca673d0d4be46 Mon Sep 17 00:00:00 2001 From: Yuri Tkachenko Date: Sun, 15 Oct 2017 19:19:02 +0300 Subject: [PATCH 63/81] fixed tests --- demo/style.st.css | 14 ++-- src/components/radio-group/radio-button.tsx | 2 +- src/components/stepper/stepper.st.css | 1 + test-kit/components/radio-group-driver.ts | 5 +- test-kit/components/selection-list-driver.ts | 8 ++- test/components/auto-complete.spec.tsx | 6 +- test/components/drop-down.spec.tsx | 9 ++- test/components/radio-group.spec.tsx | 43 ++++++++---- test/components/selection-list.spec.tsx | 69 ++++++++++++-------- test/utils/with-theme.tsx | 9 ++- 10 files changed, 109 insertions(+), 57 deletions(-) diff --git a/demo/style.st.css b/demo/style.st.css index a127087f4..bb9cb7d56 100644 --- a/demo/style.st.css +++ b/demo/style.st.css @@ -1,10 +1,10 @@ @namespace "demos"; :import { -st-theme: true; - -st-from: "../src/themes/wix/theme.st.css"; - -st-named: toggleSmall, btnLarge, btnSmall, btnTiny, - btnSecondary, - btnWhite, btnWhiteSecondary, + -st-from: "../src/themes/default/theme.st.css"; + -st-named: toggleSmall, btnLarge, btnSmall, btnTiny, + btnSecondary, + btnWhite, btnWhiteSecondary, btnError, btnErrorSecondary, btnPremium, btnPremiumSecondary, btnTransparent; @@ -40,9 +40,9 @@ padding-right: 1em; } -.btnSmall, .btnSecondary, .btnLarge, .btnTiny, -.btnWhite, .btnWhiteSecondary, .btnError, +.btnSmall, .btnSecondary, .btnLarge, .btnTiny, +.btnWhite, .btnWhiteSecondary, .btnError, .btnErrorSecondary, .btnPremium, .btnPremiumSecondary, .btnTransparent { -} \ No newline at end of file +} diff --git a/src/components/radio-group/radio-button.tsx b/src/components/radio-group/radio-button.tsx index fcd4445c8..62bffb268 100644 --- a/src/components/radio-group/radio-button.tsx +++ b/src/components/radio-group/radio-button.tsx @@ -58,7 +58,7 @@ export class RadioButton extends React.Component
- + {this.props.children}
diff --git a/src/components/stepper/stepper.st.css b/src/components/stepper/stepper.st.css index a59e43cbf..c7814f88c 100644 --- a/src/components/stepper/stepper.st.css +++ b/src/components/stepper/stepper.st.css @@ -1,5 +1,6 @@ .root { position: relative; + display: inline-block; width: 30px; } diff --git a/test-kit/components/radio-group-driver.ts b/test-kit/components/radio-group-driver.ts index 6aeed25cf..d93b30a0c 100644 --- a/test-kit/components/radio-group-driver.ts +++ b/test-kit/components/radio-group-driver.ts @@ -1,5 +1,6 @@ import {DriverBase} from 'test-drive-react'; import {RadioButton, RadioGroup} from '../../src'; +import {hasCssState} from '../../test/utils'; export class RadioGroupDriver extends DriverBase { public static ComponentClass = RadioGroup; @@ -21,7 +22,7 @@ export class RadioButtonDriver extends DriverBase { } public isChecked(): boolean { - return !!this.select('CHECKED_RADIO_ICON'); + return this.nativeElement.checked; } public isDisabled(): boolean { @@ -47,7 +48,7 @@ export class RadioButtonDriver extends DriverBase { } public get icon(): SVGElement { - return this.isChecked() ? this.select('CHECKED_RADIO_ICON') : this.select('UNCHECKED_RADIO_ICON'); + return this.select('ICON'); } public click(): void { diff --git a/test-kit/components/selection-list-driver.ts b/test-kit/components/selection-list-driver.ts index fc1eba8f4..a4d6fcbc9 100644 --- a/test-kit/components/selection-list-driver.ts +++ b/test-kit/components/selection-list-driver.ts @@ -1,11 +1,16 @@ import {DriverBase, simulate} from 'test-drive-react'; import {SelectionList} from '../../src'; +import optionBaseStyle from '../../src/components/selection-list/option.st.css'; import listBaseStyle from '../../src/components/selection-list/selection-list.st.css'; import {elementHasStylableClassName, elementHasStylableState} from '../utils'; export class SelectionListTestDriver extends DriverBase { public static ComponentClass = SelectionList; + public get divider(): Element { + return this.select('DIVIDER'); + } + public focus(): void { simulate.focus(this.root); } @@ -27,7 +32,8 @@ export class SelectionListTestDriver extends DriverBase { } public elementHasStylableState(element: Element, stateName: string): boolean { - return elementHasStylableState(element, listBaseStyle, stateName); + return elementHasStylableState(element, listBaseStyle, stateName) || + elementHasStylableState(element, optionBaseStyle, stateName); } public elementHasStylableClassName(element: Element, className: string): boolean { diff --git a/test/components/auto-complete.spec.tsx b/test/components/auto-complete.spec.tsx index 4f535e009..71edde7a8 100644 --- a/test/components/auto-complete.spec.tsx +++ b/test/components/auto-complete.spec.tsx @@ -116,17 +116,19 @@ describe('', () => { const {select, waitForDom} = clientRenderer.render(); await waitForDom(() => { + const autocomplete = select(autoComp)!; const input = select(autoComp, autoCompInput)!; const caret = select(autoComp, autoComp + '_CARET')!; - expect(caret).to.be.insideOf(input); + expect(caret).to.be.insideOf(autocomplete); expect([input, caret]).to.be.verticallyAligned('center'); }); }); it('calls the onOpenStateChange event when clicking on the caret', async () => { const onOpenStateChange = sinon.spy(); - const {select, waitForDom} = clientRenderer.render(); + const ThemedAutoComplete = WithTheme(); + const {select, waitForDom} = clientRenderer.render(); await waitForDom(() => expect(select(autoComp, autoComp + '_CARET')).to.be.present()); simulate.click(select(autoComp, autoComp + '_CARET')); diff --git a/test/components/drop-down.spec.tsx b/test/components/drop-down.spec.tsx index 8fd903cf2..b5fb3ffd4 100644 --- a/test/components/drop-down.spec.tsx +++ b/test/components/drop-down.spec.tsx @@ -4,6 +4,7 @@ import {ClientRenderer, DriverBase, expect, sinon, waitFor} from 'test-drive-rea import {DropDownDemo} from '../../demo/components/drop-down.demo'; import {DropDown} from '../../src'; import {DropDownDriver} from '../../test-kit'; +import {WithTheme, WithThemeDAID} from '../utils'; class DropDownDemoDriver extends DriverBase { public static ComponentClass = DropDownDemo; @@ -43,7 +44,13 @@ describe('', () => { }); it('renders to the screen', async () => { - const {driver: dropdown, waitForDom} = clientRenderer.render().withDriver(DropDownDriver); + const ThemedContainer = WithTheme(); + const {select} = clientRenderer.render(); + const container = select(WithThemeDAID) as HTMLDivElement; + const {driver: dropdown, waitForDom} = clientRenderer.render( + , + container + ).withDriver(DropDownDriver); await waitForDom(() => { expect(dropdown.root).to.be.present(); diff --git a/test/components/radio-group.spec.tsx b/test/components/radio-group.spec.tsx index 3c3523e5d..3646637b3 100644 --- a/test/components/radio-group.spec.tsx +++ b/test/components/radio-group.spec.tsx @@ -3,7 +3,7 @@ import {ClientRenderer, DriverBase, expect, sinon, waitFor} from 'test-drive-rea import {RadioGroupDemo} from '../../demo/components/radio-group-demo'; import {RadioButton, RadioGroup} from '../../src'; import {RadioButtonDriver, RadioGroupDriver} from '../../test-kit/components/radio-group-driver'; -import {sleep} from '../utils'; +import {sleep, WithTheme, WithThemeDAID} from '../utils'; class RadioGroupDemoTestDriver extends DriverBase { public static ComponentClass = RadioGroupDemo; @@ -17,6 +17,14 @@ class RadioGroupDemoTestDriver extends DriverBase { describe('', () => { const clientRenderer = new ClientRenderer(); + let ThemedContainer; + let themedContainer: HTMLDivElement; + + beforeEach(() => { + ThemedContainer = WithTheme(); + const {select} = clientRenderer.render(); + themedContainer = select(WithThemeDAID) as HTMLDivElement; + }); afterEach(() => { clientRenderer.cleanup(); @@ -45,7 +53,8 @@ describe('', () => { - + , + themedContainer ).withDriver(RadioGroupDriver); const button0 = group.getRadioButton(0); @@ -99,15 +108,15 @@ describe('', () => { - + , + themedContainer ).withDriver(RadioGroupDriver); - await waitForDom(() => { expect(group.getRadioButton(1).isChecked(), 'expected radio to be checked').to.equal(true); }); }); - it('"value" prop on the group overrides "checked" on child', async () => { + it('"value" prop on the group overrides "checked" on child', async () => { const {driver: group, waitForDom} = clientRenderer.render( @@ -128,7 +137,8 @@ describe('', () => { - + , + themedContainer ).withDriver(RadioGroupDriver); const button1 = group.getRadioButton(1); @@ -150,7 +160,8 @@ describe('', () => { - + , + themedContainer ).withDriver(RadioGroupDriver); const button0 = group.getRadioButton(0); @@ -173,7 +184,8 @@ describe('', () => { - + , + themedContainer ).withDriver(RadioGroupDriver); const button0 = group.getRadioButton(0); @@ -204,7 +216,8 @@ describe('', () => { - + , + themedContainer ); const group0 = new RadioGroupDriver(() => select('GROUP_0')!); @@ -271,7 +284,8 @@ describe('', () => { + />, + themedContainer ).withDriver(RadioGroupDriver); const button0 = group.getRadioButton(0); @@ -389,7 +403,8 @@ describe('', () => { describe('', () => { it('renders a radio button to the screen', async () => { const {driver: radio, waitForDom} = clientRenderer.render( - + , + themedContainer ).withDriver(RadioButtonDriver); await waitForDom(() => { @@ -403,7 +418,8 @@ describe('', () => { it('renders the label next to the radio button (right by default)', async () => { const distance = 7; const {driver: radio, waitForDom} = clientRenderer.render( - Omega + Omega, + themedContainer ).withDriver(RadioButtonDriver); const child = radio.children[0]; @@ -443,7 +459,8 @@ describe('', () => { it('calls the onClick function when clicked', async () => { const onChange = sinon.spy(); const {driver: radio, waitForDom} = clientRenderer.render( - + , + themedContainer ).withDriver(RadioButtonDriver); await waitForDom(() => { diff --git a/test/components/selection-list.spec.tsx b/test/components/selection-list.spec.tsx index 0b2f6b776..30e1982ea 100644 --- a/test/components/selection-list.spec.tsx +++ b/test/components/selection-list.spec.tsx @@ -8,7 +8,7 @@ import { SelectionListOption as Option } from '../../src'; import {SelectionListTestDriver} from '../../test-kit'; -import {sleep} from '../utils'; +import {sleep, WithTheme, WithThemeDAID} from '../utils'; export class SelectionListDemoDriver extends DriverBase { public static ComponentClass = SelectionListDemo; @@ -31,6 +31,14 @@ export class SelectionListDemoDriver extends DriverBase { describe('', () => { const clientRenderer = new ClientRenderer(); + let ThemedContainer; + let themedContainer: HTMLDivElement; + + beforeEach(() => { + ThemedContainer = WithTheme(); + const {select} = clientRenderer.render(); + themedContainer = select(WithThemeDAID) as HTMLDivElement; + }); afterEach(() => { clientRenderer.cleanup(); @@ -41,7 +49,7 @@ describe('', () => { ).withDriver(SelectionListDemoDriver); - await waitForDom(() => expect(demo.root).to.be.present); + await waitForDom(() => expect(demo.root).to.be.present()); const {list, result} = demo.food; list.click(list.items[1]); await waitForDom(() => expect(result).to.contain.text('Bacon')); @@ -52,7 +60,7 @@ describe('', () => { ).withDriver(SelectionListDemoDriver); - await waitForDom(() => expect(demo.root).to.be.present); + await waitForDom(() => expect(demo.root).to.be.present()); const {list, result} = demo.emoji; expect(list.items[3]).to.contain.text('🐘'); list.click(list.items[3]); @@ -64,7 +72,7 @@ describe('', () => { ).withDriver(SelectionListDemoDriver); - await waitForDom(() => expect(demo.root).to.be.present); + await waitForDom(() => expect(demo.root).to.be.present()); const {list, result} = demo.textStyle; list.click(list.items[5]); await waitForDom(() => expect(result.className).to.match(/text-style-label/)); @@ -75,7 +83,7 @@ describe('', () => { ).withDriver(SelectionListTestDriver); - await waitForDom(() => expect(list.root).to.be.present); + await waitForDom(() => expect(list.root).to.be.present()); expect(list.items).to.be.inVerticalSequence(); expect(list.items).to.be.horizontallyAligned('left'); }); @@ -86,7 +94,7 @@ describe('', () => { ).withDriver(SelectionListTestDriver); - await waitForDom(() => expect(list.root).to.be.present); + await waitForDom(() => expect(list.root).to.be.present()); list.click(list.items[1]); await waitForDom(() => { expect(onChange).to.have.been.calledOnce.calledWithExactly({value: '1'}); @@ -102,7 +110,7 @@ describe('', () => { ).withDriver(SelectionListTestDriver); - await waitForDom(() => expect(list.root).to.be.present); + await waitForDom(() => expect(list.root).to.be.present()); list.click(list.items[1].firstElementChild!); await waitForDom(() => { expect(onChange).to.have.been.calledOnce.calledWithExactly({value: '1'}); @@ -125,7 +133,7 @@ describe('', () => { ).withDriver(SelectionListTestDriver); - await waitForDom(() => expect(list.root).to.be.present); + await waitForDom(() => expect(list.root).to.be.present()); list.click(list.items[0]); list.click(list.items[1]); list.click(list.items[2]); @@ -140,7 +148,7 @@ describe('', () => { ).withDriver(SelectionListTestDriver); - await waitForDom(() => expect(list.root).to.be.present); + await waitForDom(() => expect(list.root).to.be.present()); const [empty, full] = list.items; expect(empty).to.have.width.at.least(full); expect(empty).to.have.width.at.most(full); @@ -150,11 +158,15 @@ describe('', () => { it('Renders a divider', async () => { const {driver: list, waitForDom} = clientRenderer.render( - + , + themedContainer ).withDriver(SelectionListTestDriver); - await waitForDom(() => expect(list.root).to.be.present); - expect(list.elementHasStylableClassName(list.items[0], 'divider')).to.equal(true); + await waitForDom(() => { + expect(list.root).to.be.present(); + expect(list.divider).to.exist; + }); + }); it('Renders children above dataSource when both are provided', async () => { @@ -162,7 +174,7 @@ describe('', () => {
child
 ).withDriver(SelectionListTestDriver); - await waitForDom(() => expect(list.root).to.be.present); + await waitForDom(() => expect(list.root).to.be.present()); expect(list.items[0]).to.contain.text('child'); expect(list.items[1]).to.contain.text('data'); }); @@ -174,7 +186,7 @@ describe('', () => { ).withDriver(SelectionListTestDriver); - await waitForDom(() => expect(list.root).to.be.present); + await waitForDom(() => expect(list.root).to.be.present()); list.focus(); list.keyDown(keycode('down')); list.keyDown(keycode('enter')); @@ -189,7 +201,7 @@ describe('', () => { ).withDriver(SelectionListTestDriver); - await waitForDom(() => expect(list.root).to.be.present); + await waitForDom(() => expect(list.root).to.be.present()); list.focus(); list.keyDown(keycode('up')); list.keyDown(keycode('enter')); @@ -204,7 +216,7 @@ describe('', () => { ).withDriver(SelectionListTestDriver); - await waitForDom(() => expect(list.root).to.be.present); + await waitForDom(() => expect(list.root).to.be.present()); list.focus(); list.keyDown(keycode('home')); list.keyDown(keycode('enter')); @@ -219,7 +231,7 @@ describe('', () => { ).withDriver(SelectionListTestDriver); - await waitForDom(() => expect(list.root).to.be.present); + await waitForDom(() => expect(list.root).to.be.present()); list.focus(); list.keyDown(keycode('end')); list.keyDown(keycode('enter')); @@ -234,7 +246,7 @@ describe('', () => { ).withDriver(SelectionListTestDriver); - await waitForDom(() => expect(list.root).to.be.present); + await waitForDom(() => expect(list.root).to.be.present()); list.focus(); list.keyDown(keycode('down')); list.keyDown(keycode('enter')); @@ -249,7 +261,7 @@ describe('', () => { ).withDriver(SelectionListTestDriver); - await waitForDom(() => expect(list.root).to.be.present); + await waitForDom(() => expect(list.root).to.be.present()); list.focus(); list.keyDown(keycode('up')); list.keyDown(keycode('enter')); @@ -264,7 +276,7 @@ describe('', () => { ).withDriver(SelectionListTestDriver); - await waitForDom(() => expect(list.root).to.be.present); + await waitForDom(() => expect(list.root).to.be.present()); list.focus(); list.keyDown(keycode('down')); list.keyDown(keycode('enter')); @@ -279,7 +291,7 @@ describe('', () => { ).withDriver(SelectionListTestDriver); - await waitForDom(() => expect(list.root).to.be.present); + await waitForDom(() => expect(list.root).to.be.present()); list.focus(); list.keyDown(keycode('down')); list.keyDown(keycode('space')); @@ -292,10 +304,11 @@ describe('', () => { describe(`Styling`, () => { it(`Puts "focused" state on the container when it's focused`, async () => { const {driver: list, waitForDom} = clientRenderer.render( - + , + themedContainer ).withDriver(SelectionListTestDriver); - await waitForDom(() => expect(list.root).to.be.present); + await waitForDom(() => expect(list.root).to.be.present()); expect(list.elementHasStylableState(list.root, 'focused')).to.equal(false); list.focus(); await waitForDom(() => { @@ -305,20 +318,22 @@ describe('', () => { it(`Puts "selected" state on the selected item`, async () => { const {driver: list, waitForDom} = clientRenderer.render( - + , + themedContainer ).withDriver(SelectionListTestDriver); - await waitForDom(() => expect(list.root).to.be.present); + await waitForDom(() => expect(list.root).to.be.present()); expect(list.elementHasStylableState(list.items[0], 'selected')).to.equal(true); expect(list.elementHasStylableState(list.items[1], 'selected')).to.equal(false); }); it(`Puts "focused" state on the item focused via keyboard and removes it on blur`, async () => { const {driver: list, waitForDom} = clientRenderer.render( - + , + themedContainer ).withDriver(SelectionListTestDriver); - await waitForDom(() => expect(list.root).to.be.present); + await waitForDom(() => expect(list.root).to.be.present()); list.focus(); await waitForDom(() => { diff --git a/test/utils/with-theme.tsx b/test/utils/with-theme.tsx index 14385dcc8..fdf77721d 100644 --- a/test/utils/with-theme.tsx +++ b/test/utils/with-theme.tsx @@ -1,7 +1,10 @@ import * as React from 'react'; -import {stylable} from 'wix-react-tools'; +import {properties, stylable} from 'wix-react-tools'; import styles from '../../demo/style.st.css'; -export const WithTheme = (Component: any, theme = styles): React.SFC => { - return stylable(theme)(() =>
{Component}
); +export const WithThemeDAID = 'THEMED_CONTAINER'; +export const WithTheme = (Node?: React.ReactNode, daid?: string, theme = styles): React.SFC => { + return stylable(theme)( + () =>
{Node}
+ ); }; From 4a7a9753241d19ac3b48dc080dd1fd0345bacca1 Mon Sep 17 00:00:00 2001 From: Yuri Tkachenko Date: Sun, 15 Oct 2017 19:52:01 +0300 Subject: [PATCH 64/81] themes entry points for webpack --- demo/components-demo.tsx | 6 --- demo/index-default.tsx | 19 ++++++++ demo/{index.tsx => index-wix.tsx} | 9 +++- demo/{style.st.css => style-default.st.css} | 0 demo/style-wix.st.css | 48 +++++++++++++++++++++ test/utils/with-theme.tsx | 2 +- webpack.config.js | 3 +- 7 files changed, 78 insertions(+), 9 deletions(-) create mode 100644 demo/index-default.tsx rename demo/{index.tsx => index-wix.tsx} (61%) rename demo/{style.st.css => style-default.st.css} (100%) create mode 100644 demo/style-wix.st.css diff --git a/demo/components-demo.tsx b/demo/components-demo.tsx index f23088fb5..6d28c1c95 100644 --- a/demo/components-demo.tsx +++ b/demo/components-demo.tsx @@ -1,7 +1,5 @@ import * as React from 'react'; -import {setGlobalConfig, stylable} from 'wix-react-tools'; - import {AutoCompleteDemo} from './components/auto-complete.demo'; import {CheckBoxDemo} from './components/checkbox-demo'; import {DatePickerDemo} from './components/date-picker-demo'; @@ -16,13 +14,9 @@ import {SliderDemo} from './components/slider-demo'; import {TimePickerDemo} from './components/time-picker-demo'; import {ToggleDemo} from './components/toggle-demo'; import {TreeViewDemo, TreeViewDemoCustom} from './components/tree-view-demo'; -import styles from './style.st.css'; import {Button, Input} from '../src'; -setGlobalConfig({devMode: true}); - -@stylable(styles) export class ComponentsDemo extends React.Component { public render() { return ( diff --git a/demo/index-default.tsx b/demo/index-default.tsx new file mode 100644 index 000000000..da38206ec --- /dev/null +++ b/demo/index-default.tsx @@ -0,0 +1,19 @@ +import * as React from 'react'; +import * as ReactDOM from 'react-dom'; +import {setGlobalConfig, stylable} from 'wix-react-tools'; +import {ComponentsDemo} from './components-demo'; +import styles from './style-default.st.css'; + +setGlobalConfig({devMode: true}); + +@stylable(styles) +class Demo extends ComponentsDemo {} + +const meta = document.createElement('meta'); +meta.name = 'viewport'; +meta.content = 'width=device-width, initial-scale=1'; +document.head.appendChild(meta); + +const rootContainer = document.createElement('div'); +document.body.appendChild(rootContainer); +ReactDOM.render(, rootContainer); diff --git a/demo/index.tsx b/demo/index-wix.tsx similarity index 61% rename from demo/index.tsx rename to demo/index-wix.tsx index ed4c3b5b7..45931a410 100644 --- a/demo/index.tsx +++ b/demo/index-wix.tsx @@ -1,6 +1,13 @@ import * as React from 'react'; import * as ReactDOM from 'react-dom'; +import {setGlobalConfig, stylable} from 'wix-react-tools'; import {ComponentsDemo} from './components-demo'; +import styles from './style-wix.st.css'; + +setGlobalConfig({devMode: true}); + +@stylable(styles) +class Demo extends ComponentsDemo {} const meta = document.createElement('meta'); meta.name = 'viewport'; @@ -9,4 +16,4 @@ document.head.appendChild(meta); const rootContainer = document.createElement('div'); document.body.appendChild(rootContainer); -ReactDOM.render(, rootContainer); +ReactDOM.render(, rootContainer); diff --git a/demo/style.st.css b/demo/style-default.st.css similarity index 100% rename from demo/style.st.css rename to demo/style-default.st.css diff --git a/demo/style-wix.st.css b/demo/style-wix.st.css new file mode 100644 index 000000000..101d0f684 --- /dev/null +++ b/demo/style-wix.st.css @@ -0,0 +1,48 @@ +@namespace "demos"; +:import { + -st-theme: true; + -st-from: "../src/themes/wix/theme.st.css"; + -st-named: toggleSmall, btnLarge, btnSmall, btnTiny, + btnSecondary, + btnWhite, btnWhiteSecondary, + btnError, btnErrorSecondary, + btnPremium, btnPremiumSecondary, + btnTransparent; +} + +:global(html) { + box-sizing: border-box; + font-size: 100%; } + +:global(*), +:global(*::before), +:global(*::after) { + box-sizing: inherit; +} + +:global(body) { + margin-left: 1em; + padding: 0; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.test { + background-color: red; +} + +:global(hr) { + margin: 1em 0; + max-width: none; +} + +:global(th) { + padding-right: 1em; +} + +.btnSmall, .btnSecondary, .btnLarge, .btnTiny, +.btnWhite, .btnWhiteSecondary, .btnError, +.btnErrorSecondary, .btnPremium, .btnPremiumSecondary, +.btnTransparent { + +} diff --git a/test/utils/with-theme.tsx b/test/utils/with-theme.tsx index fdf77721d..f690dd277 100644 --- a/test/utils/with-theme.tsx +++ b/test/utils/with-theme.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import {properties, stylable} from 'wix-react-tools'; -import styles from '../../demo/style.st.css'; +import styles from '../../demo/style-default.st.css'; export const WithThemeDAID = 'THEMED_CONTAINER'; export const WithTheme = (Node?: React.ReactNode, daid?: string, theme = styles): React.SFC => { diff --git a/webpack.config.js b/webpack.config.js index 338195468..15084ba12 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -7,7 +7,8 @@ const stylableOptions = { injectBundleCss: true, nsDelimiter:'--' }; module.exports = { devtool: 'source-map', entry: { - demos: ['core-js/shim', './demo/index.tsx'], + demos: ['core-js/shim', './demo/index-default.tsx'], + 'demos-wix': ['core-js/shim', './demo/index-wix.tsx'], tests: ['core-js/shim', './test/utils/mobx.config.ts', ...testFiles.map(fileName => `mocha-loader!${fileName}`)] }, module: { From b731f9e50c4520839ad20cb3dafaafa3e198828c Mon Sep 17 00:00:00 2001 From: Yuri Tkachenko Date: Tue, 17 Oct 2017 13:12:17 +0300 Subject: [PATCH 65/81] review fixes --- src/components/checkbox/checkbox.st.css | 3 +- .../radio-group/radio-button.st.css | 28 ------------------- test-kit/components/selection-list-driver.ts | 22 ++++++++------- test/components/selection-list.spec.tsx | 26 +++++++++++------ 4 files changed, 30 insertions(+), 49 deletions(-) diff --git a/src/components/checkbox/checkbox.st.css b/src/components/checkbox/checkbox.st.css index 0c118e24b..13a5e48bc 100644 --- a/src/components/checkbox/checkbox.st.css +++ b/src/components/checkbox/checkbox.st.css @@ -30,8 +30,7 @@ .nativeCheckbox { position: fixed; top: -100%; - visibility: hidden; - pointer-events: none; + opacity: 0; } .childContainer { diff --git a/src/components/radio-group/radio-button.st.css b/src/components/radio-group/radio-button.st.css index 518acb007..f9f1c7c27 100644 --- a/src/components/radio-group/radio-button.st.css +++ b/src/components/radio-group/radio-button.st.css @@ -40,31 +40,3 @@ top: 50%; transform: translate(-50%, -50%); } -/* -.root:checked:not(:disabled) .button { - border-color: value(checkedStroke); -} - -.root:checked:not(:disabled) .button::after { - background-color: value(checkedFill); -} - -.root:disabled .button::after { - background-color: value(disabledCheckedFill); -} - -.root:hover:not(:disabled) .button{ - border-color: value(checkedStroke) -} - -.root:disabled .button { - border-color: value(disabledStroke); -} - -.root:disabled:not(:checked) .button::after { - background-color: value(disabledFill); -} - -.root:focused .button { - box-shadow: 0 0 0 2px value(focusOutline); -} */ diff --git a/test-kit/components/selection-list-driver.ts b/test-kit/components/selection-list-driver.ts index a4d6fcbc9..637799c7b 100644 --- a/test-kit/components/selection-list-driver.ts +++ b/test-kit/components/selection-list-driver.ts @@ -1,16 +1,11 @@ import {DriverBase, simulate} from 'test-drive-react'; import {SelectionList} from '../../src'; -import optionBaseStyle from '../../src/components/selection-list/option.st.css'; import listBaseStyle from '../../src/components/selection-list/selection-list.st.css'; import {elementHasStylableClassName, elementHasStylableState} from '../utils'; export class SelectionListTestDriver extends DriverBase { public static ComponentClass = SelectionList; - public get divider(): Element { - return this.select('DIVIDER'); - } - public focus(): void { simulate.focus(this.root); } @@ -31,12 +26,19 @@ export class SelectionListTestDriver extends DriverBase { simulate.click(element); } - public elementHasStylableState(element: Element, stateName: string): boolean { - return elementHasStylableState(element, listBaseStyle, stateName) || - elementHasStylableState(element, optionBaseStyle, stateName); + public elementHasStylableState( + element: Element, + stateName: string, + style = listBaseStyle + ): boolean { + return elementHasStylableState(element, style, stateName); } - public elementHasStylableClassName(element: Element, className: string): boolean { - return elementHasStylableClassName(element, listBaseStyle, className); + public elementHasStylableClassName( + element: Element, + className: string, + style = listBaseStyle + ): boolean { + return elementHasStylableClassName(element, style, className); } } diff --git a/test/components/selection-list.spec.tsx b/test/components/selection-list.spec.tsx index 30e1982ea..85a8c8821 100644 --- a/test/components/selection-list.spec.tsx +++ b/test/components/selection-list.spec.tsx @@ -7,6 +7,8 @@ import { SelectionListDividerSymbol as divider, SelectionListOption as Option } from '../../src'; +import dividerStyle from '../../src/components/selection-list/divider.st.css'; +import optionStyle from '../../src/components/selection-list/option.st.css'; import {SelectionListTestDriver} from '../../test-kit'; import {sleep, WithTheme, WithThemeDAID} from '../utils'; @@ -164,9 +166,15 @@ describe('', () => { await waitForDom(() => { expect(list.root).to.be.present(); - expect(list.divider).to.exist; }); + expect( + list.elementHasStylableClassName( + list.items[0], + 'root', + dividerStyle + ) + ).to.equal(true); }); it('Renders children above dataSource when both are provided', async () => { @@ -323,8 +331,8 @@ describe('', () => { ).withDriver(SelectionListTestDriver); await waitForDom(() => expect(list.root).to.be.present()); - expect(list.elementHasStylableState(list.items[0], 'selected')).to.equal(true); - expect(list.elementHasStylableState(list.items[1], 'selected')).to.equal(false); + expect(list.elementHasStylableState(list.items[0], 'selected', optionStyle)).to.equal(true); + expect(list.elementHasStylableState(list.items[1], 'selected', optionStyle)).to.equal(false); }); it(`Puts "focused" state on the item focused via keyboard and removes it on blur`, async () => { @@ -337,20 +345,20 @@ describe('', () => { list.focus(); await waitForDom(() => { - expect(list.elementHasStylableState(list.items[0], 'focused')).to.equal(true); - expect(list.elementHasStylableState(list.items[1], 'focused')).to.equal(false); + expect(list.elementHasStylableState(list.items[0], 'focused', optionStyle)).to.equal(true); + expect(list.elementHasStylableState(list.items[1], 'focused', optionStyle)).to.equal(false); }); list.keyDown(keycode('down')); await waitForDom(() => { - expect(list.elementHasStylableState(list.items[0], 'focused')).to.equal(false); - expect(list.elementHasStylableState(list.items[1], 'focused')).to.equal(true); + expect(list.elementHasStylableState(list.items[0], 'focused', optionStyle)).to.equal(false); + expect(list.elementHasStylableState(list.items[1], 'focused', optionStyle)).to.equal(true); }); list.blur(); await waitForDom(() => { - expect(list.elementHasStylableState(list.items[0], 'focused')).to.equal(false); - expect(list.elementHasStylableState(list.items[1], 'focused')).to.equal(false); + expect(list.elementHasStylableState(list.items[0], 'focused', optionStyle)).to.equal(false); + expect(list.elementHasStylableState(list.items[1], 'focused', optionStyle)).to.equal(false); }); }); }); From 77b9e47bc02ca3aa6d4e695a2e074dcc06f2153d Mon Sep 17 00:00:00 2001 From: Lior Zisman Date: Tue, 17 Oct 2017 16:07:03 +0300 Subject: [PATCH 66/81] dialog --- src/components/dialog/index.ts | 1 + src/components/{modal => dialog}/modal.st.css | 0 src/components/{modal => dialog}/modal.tsx | 0 src/components/modal/dialog.st.css | 8 ++++ src/components/modal/dialog.tsx | 47 +++++++++++++++++++ 5 files changed, 56 insertions(+) create mode 100644 src/components/dialog/index.ts rename src/components/{modal => dialog}/modal.st.css (100%) rename src/components/{modal => dialog}/modal.tsx (100%) create mode 100644 src/components/modal/dialog.st.css create mode 100644 src/components/modal/dialog.tsx diff --git a/src/components/dialog/index.ts b/src/components/dialog/index.ts new file mode 100644 index 000000000..20da8e550 --- /dev/null +++ b/src/components/dialog/index.ts @@ -0,0 +1 @@ +export * from './dialog'; diff --git a/src/components/modal/modal.st.css b/src/components/dialog/modal.st.css similarity index 100% rename from src/components/modal/modal.st.css rename to src/components/dialog/modal.st.css diff --git a/src/components/modal/modal.tsx b/src/components/dialog/modal.tsx similarity index 100% rename from src/components/modal/modal.tsx rename to src/components/dialog/modal.tsx diff --git a/src/components/modal/dialog.st.css b/src/components/modal/dialog.st.css new file mode 100644 index 000000000..5cac48140 --- /dev/null +++ b/src/components/modal/dialog.st.css @@ -0,0 +1,8 @@ +@namespace "Dialog"; + + +/* + Styling colors are here (not at the theme) + because it is rendered in + which isn't able to get theme yet. +*/ diff --git a/src/components/modal/dialog.tsx b/src/components/modal/dialog.tsx new file mode 100644 index 000000000..0ab262f00 --- /dev/null +++ b/src/components/modal/dialog.tsx @@ -0,0 +1,47 @@ +import * as React from 'react'; +import {properties, stylable} from 'wix-react-tools'; +import {noop} from '../../utils'; +import {isElement} from '../../utils/is-element'; +import styles from './dialog.st.css'; + +export interface DialogProps extends React.HTMLAttributes { + isOpen: boolean; + onButtonClick: (buttonId) => void; +} + +@stylable(styles) +@properties +export class Dialog extends React.PureComponent { + public static defaultProps: DialogProps = { + isOpen: false, + onButtonClick: noop + }; + + public componentDidMount() { + this.shouldEnableScrolling(!this.props.isOpen); + } + + public componentDidUpdate() { + this.shouldEnableScrolling(!this.props.isOpen); + } + + public render() { + return ( + this.props.onButtonClick('cancel')} + > + {this.props.children} + + ); + } + + private onClick: React.EventHandler> = event => { + const {target} = event; + if (isElement(target)) { + const closeEvent: RequestCloseEvent = {...event, source: this.getDataFromNearestNode(target)}; + this.props.onRequestClose!(closeEvent); + } + } +} From 86397fea1022919650940dddb456bb3a4146a6f5 Mon Sep 17 00:00:00 2001 From: Lior Zisman Date: Wed, 18 Oct 2017 17:32:25 +0300 Subject: [PATCH 67/81] re-think the css for the dialog --- demo/components/dialog-demo.st.css | 7 +++++ demo/components/dialog-demo.tsx | 2 +- src/components/dialog/dialog.st.css | 43 +++++++++++++++++++++++++---- src/components/dialog/dialog.tsx | 24 ++++++++-------- 4 files changed, 58 insertions(+), 18 deletions(-) diff --git a/demo/components/dialog-demo.st.css b/demo/components/dialog-demo.st.css index e69de29bb..c83bfa87d 100644 --- a/demo/components/dialog-demo.st.css +++ b/demo/components/dialog-demo.st.css @@ -0,0 +1,7 @@ +.content { + width: 300px; + height: 300px; + font-size: 250px; + text-align: center; + vertical-align: middle; +} diff --git a/demo/components/dialog-demo.tsx b/demo/components/dialog-demo.tsx index 80f5a9426..dd5583841 100644 --- a/demo/components/dialog-demo.tsx +++ b/demo/components/dialog-demo.tsx @@ -17,7 +17,7 @@ export class DialogDemo extends React.Component<{}, DialogDemoState> { return (
- +
🌌
diff --git a/src/components/dialog/dialog.st.css b/src/components/dialog/dialog.st.css index 5cac48140..a707da932 100644 --- a/src/components/dialog/dialog.st.css +++ b/src/components/dialog/dialog.st.css @@ -1,8 +1,41 @@ @namespace "Dialog"; +:import{ + -st-from: "../modal/modal.st.css"; + -st-default: Modal; +} + +.root { + -st-extends: Modal; +} + +.root::children { + border: 1px solid black; + border-radius: 5px; + background-color: lightgray; + padding: 5px; +} + +.header { + border-bottom: 1px solid black; + width: calc(100% + 10px); + margin-left: -5px; + padding-bottom: 5px; +} + +.header .title { + margin-left: 5px; +} + +.header button { + float: right; + margin-right: 5px; +} + +.footer { + display: flex; + justify-content: space-around; + padding-bottom: 5%; +} + -/* - Styling colors are here (not at the theme) - because it is rendered in - which isn't able to get theme yet. -*/ diff --git a/src/components/dialog/dialog.tsx b/src/components/dialog/dialog.tsx index a6e1017f2..f265dc77b 100644 --- a/src/components/dialog/dialog.tsx +++ b/src/components/dialog/dialog.tsx @@ -1,15 +1,15 @@ import * as React from 'react'; import {properties, stylable} from 'wix-react-tools'; import {noop} from '../../utils'; -import {Modal, RequestCloseEvent} from '../modal'; import {Button} from '../button'; +import {Modal} from '../modal'; import styles from './dialog.st.css'; export interface DialogProps extends React.HTMLAttributes { isOpen: boolean; - onCancelButton: () => void; - onOkButton: () => void; - title: string; + onCancel: () => void; + onOk: () => void; + title?: string; } @stylable(styles) @@ -17,8 +17,8 @@ export interface DialogProps extends React.HTMLAttributes { export class Dialog extends React.PureComponent { public static defaultProps: DialogProps = { isOpen: false, - onCancelButton: noop, - onOkButton: noop, + onCancel: noop, + onOk: noop, title: 'Dialog' }; @@ -27,18 +27,18 @@ export class Dialog extends React.PureComponent { -
- {this.props.title} +
+ {this.props.title}
-
+
{this.props.children}
-
- +
+
); From fc0f904f386a2cd8d25081b0a63aeda90be6100e Mon Sep 17 00:00:00 2001 From: Lior Zisman Date: Wed, 18 Oct 2017 17:41:25 +0300 Subject: [PATCH 68/81] added button onclicks modal now seems to work. just gotta reconsider css --- demo/components/dialog-demo.tsx | 4 +++- src/components/dialog/dialog.tsx | 28 ++++++++++++++++++---------- 2 files changed, 21 insertions(+), 11 deletions(-) diff --git a/demo/components/dialog-demo.tsx b/demo/components/dialog-demo.tsx index dd5583841..202ea7c39 100644 --- a/demo/components/dialog-demo.tsx +++ b/demo/components/dialog-demo.tsx @@ -24,5 +24,7 @@ export class DialogDemo extends React.Component<{}, DialogDemoState> { ); } - private toggleOpen = () => this.setState({isOpen: !this.state.isOpen}); + private toggleOpen = () => { + this.setState({isOpen: !this.state.isOpen}); + } } diff --git a/src/components/dialog/dialog.tsx b/src/components/dialog/dialog.tsx index f265dc77b..b766daf35 100644 --- a/src/components/dialog/dialog.tsx +++ b/src/components/dialog/dialog.tsx @@ -29,18 +29,26 @@ export class Dialog extends React.PureComponent { isOpen={this.props.isOpen} onRequestClose={this.props.onCancel} > -
- {this.props.title} - -
-
- {this.props.children} -
-
- - +
+
+ {this.props.title} + +
+
+ {this.props.children} +
+
+ + +
); } + + private onDialogBodyClick(e: React.SyntheticEvent) { + // without this, the click on the body propagates + // to the backdrop which closes the dialog + e.stopPropagation(); + } } From 6fc6280433a0aab11e97a4c062ae8706da431103 Mon Sep 17 00:00:00 2001 From: liorzisman Date: Thu, 19 Oct 2017 11:53:53 +0300 Subject: [PATCH 69/81] basic dialog completed --- src/components/dialog/dialog.tsx | 32 ++++++++++++---- test/components/dialog.spec.tsx | 65 ++++++++++++++++++++++++++++++++ 2 files changed, 90 insertions(+), 7 deletions(-) create mode 100644 test/components/dialog.spec.tsx diff --git a/src/components/dialog/dialog.tsx b/src/components/dialog/dialog.tsx index b766daf35..10df81aa4 100644 --- a/src/components/dialog/dialog.tsx +++ b/src/components/dialog/dialog.tsx @@ -7,8 +7,8 @@ import styles from './dialog.st.css'; export interface DialogProps extends React.HTMLAttributes { isOpen: boolean; - onCancel: () => void; - onOk: () => void; + onCancel?: () => void; + onOk?: () => void; title?: string; } @@ -29,17 +29,35 @@ export class Dialog extends React.PureComponent { isOpen={this.props.isOpen} onRequestClose={this.props.onCancel} > -
+
- {this.props.title} - + {this.props.title} +
{this.props.children}
- - + +
diff --git a/test/components/dialog.spec.tsx b/test/components/dialog.spec.tsx new file mode 100644 index 000000000..9905c6830 --- /dev/null +++ b/test/components/dialog.spec.tsx @@ -0,0 +1,65 @@ +import * as React from 'react'; +import {ClientRenderer, expect, selectDom, simulate, sinon, waitFor} from 'test-drive-react'; +import {DialogDemo} from '../../demo/components/dialog-demo'; +import {Dialog} from '../../src'; + +const dialogButtons = [ + {id: 'X', handler: 'onCancel'}, + {id: 'CANCEL', handler: 'onCancel'}, + {id: 'PRIMARY', handler: 'onOk'} +]; + +describe('', () => { + const clientRenderer = new ClientRenderer(); + const bodySelect = selectDom(document.body); + + afterEach(() => clientRenderer.cleanup()); + + it('opens the dialog upon extra button click, and closes it upon clicking any of the buttons', async () => { + const {select, waitForDom} = clientRenderer.render(); + + const showDialogBtn = select('DIALOG_BUTTON') as HTMLButtonElement; + showDialogBtn.click(); + + await waitForDom(() => expect(bodySelect('DIALOG_BODY')).to.be.present()); + + (bodySelect('DIALOG_BODY', 'DIALOG_X') as HTMLButtonElement).click(); + + await waitForDom(() => expect(bodySelect('DIALOG_BODY')).to.be.absent()); + showDialogBtn.click(); + + (bodySelect('DIALOG_BODY', 'DIALOG_CANCEL') as HTMLButtonElement).click(); + + await waitForDom(() => expect(bodySelect('DIALOG_BODY')).to.be.absent()); + showDialogBtn.click(); + + (bodySelect('DIALOG_BODY', 'DIALOG_PRIMARY') as HTMLButtonElement).click(); + + await waitForDom(() => expect(bodySelect('DIALOG_BODY')).to.be.absent()); + }); + + it('displays the provided title', async () => { + const testTitle = 'Do you accept this?'; + const {waitForDom} = clientRenderer.render(); + + await waitForDom(() => expect(bodySelect('DIALOG_BODY', 'DIALOG_TITLE')).to.have.text(testTitle)); + + }); + + dialogButtons.forEach(button => { + it(`invokes the callback handler provided for ${button.id} button`, async () => { + const onClick = sinon.spy(); + + const handlerProp = { + [button.handler]: onClick + }; + + clientRenderer.render(); + + (bodySelect('DIALOG_BODY', `DIALOG_${button.id}`) as HTMLButtonElement).click(); + + await waitFor(() => expect(onClick).to.have.been.calledOnce); + }); + }); + +}); From a92debd08eb3141918b8c316a92bce0f71188fa7 Mon Sep 17 00:00:00 2001 From: liorzisman Date: Thu, 19 Oct 2017 11:56:55 +0300 Subject: [PATCH 70/81] removed unused something --- test-kit/components/radio-group-driver.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/test-kit/components/radio-group-driver.ts b/test-kit/components/radio-group-driver.ts index d93b30a0c..6430a9e2b 100644 --- a/test-kit/components/radio-group-driver.ts +++ b/test-kit/components/radio-group-driver.ts @@ -1,6 +1,5 @@ import {DriverBase} from 'test-drive-react'; import {RadioButton, RadioGroup} from '../../src'; -import {hasCssState} from '../../test/utils'; export class RadioGroupDriver extends DriverBase { public static ComponentClass = RadioGroup; From 76702f00f2125e2c54a17121276adc53ae7b1306 Mon Sep 17 00:00:00 2001 From: liorzisman Date: Thu, 19 Oct 2017 11:57:30 +0300 Subject: [PATCH 71/81] removed unused soemthing ver2 --- test/components/auto-complete.spec.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/test/components/auto-complete.spec.tsx b/test/components/auto-complete.spec.tsx index 71edde7a8..a44690cb5 100644 --- a/test/components/auto-complete.spec.tsx +++ b/test/components/auto-complete.spec.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; import {ClientRenderer, expect, selectDom, simulate, sinon, trigger, waitForDom as gWaitForDom} from 'test-drive-react'; -import {stylable} from 'wix-react-tools'; import {AutoCompleteDemo} from '../../demo/components/auto-complete.demo'; import {AutoComplete} from '../../src'; import {WithTheme} from '../utils'; From a5100254a81194c8584484374376fb7c1f5a7ca9 Mon Sep 17 00:00:00 2001 From: liorzisman Date: Thu, 19 Oct 2017 12:01:13 +0300 Subject: [PATCH 72/81] removed unused final --- test/components/dialog.spec.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/components/dialog.spec.tsx b/test/components/dialog.spec.tsx index 9905c6830..64abf828e 100644 --- a/test/components/dialog.spec.tsx +++ b/test/components/dialog.spec.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import {ClientRenderer, expect, selectDom, simulate, sinon, waitFor} from 'test-drive-react'; +import {ClientRenderer, expect, selectDom, sinon, waitFor} from 'test-drive-react'; import {DialogDemo} from '../../demo/components/dialog-demo'; import {Dialog} from '../../src'; From 5a9b70c06d0df14a834dfd3d3fb1fe04f1b81880 Mon Sep 17 00:00:00 2001 From: liorzisman Date: Thu, 19 Oct 2017 12:41:38 +0300 Subject: [PATCH 73/81] modal driver wip --- test-kit/components/index.ts | 1 + test-kit/components/modal-driver.ts | 25 +++++++++++++ test/components/modal.spec.tsx | 56 ++++++++++++++--------------- 3 files changed, 53 insertions(+), 29 deletions(-) create mode 100644 test-kit/components/modal-driver.ts diff --git a/test-kit/components/index.ts b/test-kit/components/index.ts index e14a34381..c733ac2de 100644 --- a/test-kit/components/index.ts +++ b/test-kit/components/index.ts @@ -2,6 +2,7 @@ export * from './checkbox-driver'; export * from './tree-view-driver'; export * from './drop-down-driver'; export * from './image-driver'; +export * from './modal-driver'; export * from './portal-driver'; export * from './radio-group-driver'; export * from './selection-list-driver'; diff --git a/test-kit/components/modal-driver.ts b/test-kit/components/modal-driver.ts new file mode 100644 index 000000000..07ce74f76 --- /dev/null +++ b/test-kit/components/modal-driver.ts @@ -0,0 +1,25 @@ +import {DriverBase} from 'test-drive-react'; +import {Modal} from '../../src'; +import {PortalTestDriver} from './portal-driver'; + +export class ModalTestDriver extends DriverBase { + public static ComponentClass = Modal; + private portalDriver: PortalTestDriver; + + constructor(getModal: () => HTMLElement) { + super(getModal); + this.portalDriver = new PortalTestDriver(getModal); + } + + public get root(): HTMLElement { + return this.portalDriver.portal as HTMLElement; + } + + public get content(): Element { + return this.portalDriver.content[0]; + } + + public get children(): HTMLCollection { + return this.portalDriver.content[0].children[0].children; + } +} diff --git a/test/components/modal.spec.tsx b/test/components/modal.spec.tsx index ab05d1508..af66b2ace 100644 --- a/test/components/modal.spec.tsx +++ b/test/components/modal.spec.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import {ClientRenderer, expect, selectDom, simulate, sinon, waitFor} from 'test-drive-react'; import {ModalDemo} from '../../demo/components/modal-demo'; import {Modal} from '../../src'; +import {ModalTestDriver} from '../../test-kit/components'; describe('', () => { const clientRenderer = new ClientRenderer(); @@ -27,27 +28,29 @@ describe('', () => { }); it('renders to the screen', async () => { - clientRenderer.render(); + const {driver: modal} = clientRenderer.render().withDriver(ModalTestDriver); - await waitFor(() => expect(bodySelect('MODAL')!).to.be.present()); + await waitFor(() => expect(modal.content).to.be.present()); }); it('renders any children passed as props', async () => { - clientRenderer.render( + const {driver: modal} = clientRenderer.render( -

child 1

-

child 2

+

child 1

+

child 2

 - ); + ).withDriver(ModalTestDriver); await waitFor(() => { - expect(bodySelect('CHILD_1')).to.be.present(); - expect(bodySelect('CHILD_2')).to.be.present(); + expect(modal.children[0]).to.be.present(); + expect(modal.children[0]).to.have.text('child 1'); + expect(modal.children[1]).to.be.present(); + expect(modal.children[1]).to.have.text('child 2'); }); }); it('takes the full width and height of the viewport and is centered in the viewport', async () => { - clientRenderer.render(); + const {driver: modal} = clientRenderer.render().withDriver(ModalTestDriver); function checkIfAlignedToScreen(element: Element) { const rects = element.getBoundingClientRect(); @@ -55,41 +58,36 @@ describe('', () => { } await waitFor(() => { - expect(checkIfAlignedToScreen(bodySelect('MODAL')!), 'The modal wasn\'t centered').to.equal(true); - expect(bodySelect('MODAL')!.clientHeight).to.equal(window.innerHeight); - expect(bodySelect('MODAL')!.clientWidth).to.equal(window.innerWidth); + expect(checkIfAlignedToScreen(modal.content), 'The modal wasn\'t centered').to.equal(true); + expect(modal.content.clientHeight).to.equal(window.innerHeight); + expect(modal.content.clientWidth).to.equal(window.innerWidth); }); }); it('renders one child in the center of the viewport', async () => { - clientRenderer.render( + const {driver: modal} = clientRenderer.render( -

child 1

+

child 1

 - ); + ).withDriver(ModalTestDriver); await waitFor(() => { - const child = bodySelect('CHILD_1'); - const modal = bodySelect('MODAL'); - expect([child, modal]).to.be.horizontallyAligned('center', 1); - expect([child, modal]).to.be.verticallyAligned('center', 1); + expect([modal.children[0], modal.content]).to.be.horizontallyAligned('center', 1); + expect([modal.children[0], modal.content]).to.be.verticallyAligned('center', 1); }); }); it('renders children in horizontal alignment', async () => { - clientRenderer.render( + const {driver: modal} = clientRenderer.render( -

child 1

-

child 2

+

child 1

+

child 2

 - ); + ).withDriver(ModalTestDriver); - await waitFor(() => { - const childOne = bodySelect('CHILD_1'); - const childTwo = bodySelect('CHILD_2'); - const modal = bodySelect('MODAL'); - expect([childOne, childTwo, modal]).to.be.horizontallyAligned('center', 1); - }); + await waitFor(() => + expect([modal.children[0], modal.children[1], modal.content]) + .to.be.horizontallyAligned('center', 1)); }); it('adds overflow: hidden to the body when opened and removes it when closed', async () => { From bb15af24be66d6b28871b643318c3a373362aaad Mon Sep 17 00:00:00 2001 From: liorzisman Date: Thu, 19 Oct 2017 12:46:45 +0300 Subject: [PATCH 74/81] default props, inline-block --- src/components/dialog/dialog.st.css | 1 + src/components/dialog/dialog.tsx | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/dialog/dialog.st.css b/src/components/dialog/dialog.st.css index a707da932..ef2fd6905 100644 --- a/src/components/dialog/dialog.st.css +++ b/src/components/dialog/dialog.st.css @@ -7,6 +7,7 @@ .root { -st-extends: Modal; + display: inline-block; } .root::children { diff --git a/src/components/dialog/dialog.tsx b/src/components/dialog/dialog.tsx index 10df81aa4..3ea3a80eb 100644 --- a/src/components/dialog/dialog.tsx +++ b/src/components/dialog/dialog.tsx @@ -6,7 +6,7 @@ import {Modal} from '../modal'; import styles from './dialog.st.css'; export interface DialogProps extends React.HTMLAttributes { - isOpen: boolean; + isOpen?: boolean; onCancel?: () => void; onOk?: () => void; title?: string; @@ -26,7 +26,7 @@ export class Dialog extends React.PureComponent { return (
From 1a1e5a824a37be568b6e5a846363df0207a7f6aa Mon Sep 17 00:00:00 2001 From: liorzisman Date: Thu, 19 Oct 2017 12:58:35 +0300 Subject: [PATCH 75/81] dialog renders invisibly and therefore removed from default contract tests --- src/components/dialog/dialog.st.css | 1 - test/contracts/root-element.spec.tsx | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/dialog/dialog.st.css b/src/components/dialog/dialog.st.css index ef2fd6905..a707da932 100644 --- a/src/components/dialog/dialog.st.css +++ b/src/components/dialog/dialog.st.css @@ -7,7 +7,6 @@ .root { -st-extends: Modal; - display: inline-block; } .root::children { diff --git a/test/contracts/root-element.spec.tsx b/test/contracts/root-element.spec.tsx index 1b5a5d544..a80bc6fff 100644 --- a/test/contracts/root-element.spec.tsx +++ b/test/contracts/root-element.spec.tsx @@ -7,7 +7,7 @@ import {isReactComponent} from '../utils/is-react-component'; const allComponents = Object.keys(WixReactComponents); const failingComponents = [ - 'Portal', 'Popup', 'Modal', 'ContextProvider', 'GlobalEvent' + 'Portal', 'Popup', 'Modal', 'ContextProvider', 'GlobalEvent', 'Dialog' ]; describe('Root Element contract', () => { From 126e7e24e9acba6d782cb8e086a0c47cffb3ec6b Mon Sep 17 00:00:00 2001 From: liorzisman Date: Thu, 19 Oct 2017 15:08:40 +0300 Subject: [PATCH 76/81] inline-block --- src/components/dialog/dialog.st.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/dialog/dialog.st.css b/src/components/dialog/dialog.st.css index a707da932..c16ae79e0 100644 --- a/src/components/dialog/dialog.st.css +++ b/src/components/dialog/dialog.st.css @@ -7,6 +7,7 @@ .root { -st-extends: Modal; + display: inline-block; } .root::children { From e4417532213b0e6f5f1dc62325ee52a87d4aeb8d Mon Sep 17 00:00:00 2001 From: liorzisman Date: Thu, 19 Oct 2017 15:15:17 +0300 Subject: [PATCH 77/81] modal driver done --- test/components/modal.spec.tsx | 33 ++++++++++++++++++--------------- 1 file changed, 18 insertions(+), 15 deletions(-) diff --git a/test/components/modal.spec.tsx b/test/components/modal.spec.tsx index af66b2ace..2c9210dc5 100644 --- a/test/components/modal.spec.tsx +++ b/test/components/modal.spec.tsx @@ -110,10 +110,11 @@ describe('', () => { scroll.style.width = '1000vw'; document.body.appendChild(scroll); window.scrollTo(0, 2 * window.innerHeight); - clientRenderer.render(); + const {driver: modal} = + clientRenderer.render().withDriver(ModalTestDriver); await waitFor(() => { - expect(bodySelect('MODAL')!.getBoundingClientRect().top).to.equal(0); + expect(modal.content.getBoundingClientRect().top).to.equal(0); }); window.scrollTo(0, 0); @@ -122,9 +123,12 @@ describe('', () => { it('calls onRequestClose with source equal to backdrop when the backdrop is clicked', async () => { const onRequestClose = sinon.spy(); - clientRenderer.render(); + const {driver: modal} = + clientRenderer + .render() + .withDriver(ModalTestDriver); - simulate.click(bodySelect('MODAL')); + simulate.click(modal.content); await waitFor(() => expect(onRequestClose).to.have.been.calledWithMatch({source: 'backdrop'})); }); @@ -132,32 +136,31 @@ describe('', () => { it('calls onRequestClose with source equal to children when the child is clicked', async () => { const onRequestClose = sinon.spy(); - clientRenderer.render( + const {driver: modal} = clientRenderer.render( -

child 1

+

child 1

 - ); + ).withDriver(ModalTestDriver); - simulate.click(bodySelect('CHILD_1')); + simulate.click(modal.children[0]); await waitFor(() => expect(onRequestClose.getCall(0)).to.have.been.calledWithMatch({source: 'child'})); }); it('renders the modal to the bottom of the DOM', async () => { - const {container} = clientRenderer.render( + const {container, driver: modal} = clientRenderer.render( -

child 1

+

child 1

 - ); + ).withDriver(ModalTestDriver); await waitFor(() => { - const modal = bodySelect('MODAL')!; - const children = bodySelect('CHILD_1')!; + const children = modal.children[0]; /* tslint:disable:no-bitwise */ - expect(modal.compareDocumentPosition(children) & Node.DOCUMENT_POSITION_CONTAINED_BY, + expect(modal.content.compareDocumentPosition(children) & Node.DOCUMENT_POSITION_CONTAINED_BY, 'children contained in modal').to.equal(Node.DOCUMENT_POSITION_CONTAINED_BY); - expect(container.compareDocumentPosition(modal) & Node.DOCUMENT_POSITION_FOLLOWING, + expect(container.compareDocumentPosition(modal.content) & Node.DOCUMENT_POSITION_FOLLOWING, 'modal is following the app container').to.equal(Node.DOCUMENT_POSITION_FOLLOWING); /* tslint:enable:no-bitwise */ }); From bd6efcc0851d71b326d6ace2404bfd4b8e691408 Mon Sep 17 00:00:00 2001 From: Lior Zisman Date: Sun, 22 Oct 2017 17:40:09 +0300 Subject: [PATCH 78/81] dialog test driver --- src/components/dialog/dialog.tsx | 2 +- test-kit/components/dialog-driver.ts | 31 ++++++++++++++++++++++++++++ test-kit/components/index.ts | 1 + test/components/dialog.spec.tsx | 23 ++++++++++++++------- 4 files changed, 48 insertions(+), 9 deletions(-) create mode 100644 test-kit/components/dialog-driver.ts diff --git a/src/components/dialog/dialog.tsx b/src/components/dialog/dialog.tsx index 3ea3a80eb..f69e7446c 100644 --- a/src/components/dialog/dialog.tsx +++ b/src/components/dialog/dialog.tsx @@ -35,7 +35,7 @@ export class Dialog extends React.PureComponent { diff --git a/test-kit/components/dialog-driver.ts b/test-kit/components/dialog-driver.ts new file mode 100644 index 000000000..5b175a280 --- /dev/null +++ b/test-kit/components/dialog-driver.ts @@ -0,0 +1,31 @@ +import {DriverBase} from 'test-drive-react'; +import {Dialog} from '../../src'; +import {ModalTestDriver} from './modal-driver'; + +export type DialogButtonType = 'CANCEL' | 'CLOSE' | 'PRIMARY'; + +export class DialogTestDriver extends DriverBase { + public static ComponentClass = Dialog; + private modalDriver: ModalTestDriver; + + constructor(getDialog: () => HTMLElement) { + super(getDialog); + this.modalDriver = new ModalTestDriver(getDialog); + } + + public get root(): Element { + return this.modalDriver.children[0]; + } + + public get title(): Element { + return this.getDialogElement('DIALOG_TITLE'); + } + + public getButton(type: DialogButtonType) { + return this.getDialogElement(`DIALOG_${type}`); + } + + private getDialogElement(elem: string): Element { + return this.select(this.root.getAttribute('data-automation-id')!, elem); + } +} diff --git a/test-kit/components/index.ts b/test-kit/components/index.ts index c7c01baaa..97899230c 100644 --- a/test-kit/components/index.ts +++ b/test-kit/components/index.ts @@ -4,6 +4,7 @@ export * from './drop-down-driver'; export * from './image-driver'; export * from './modal-driver'; export * from './portal-driver'; +export * from './dialog-driver'; export * from './modal-driver'; export * from './radio-group-driver'; export * from './selection-list-driver'; diff --git a/test/components/dialog.spec.tsx b/test/components/dialog.spec.tsx index 64abf828e..ec7489739 100644 --- a/test/components/dialog.spec.tsx +++ b/test/components/dialog.spec.tsx @@ -2,11 +2,12 @@ import * as React from 'react'; import {ClientRenderer, expect, selectDom, sinon, waitFor} from 'test-drive-react'; import {DialogDemo} from '../../demo/components/dialog-demo'; import {Dialog} from '../../src'; +import {DialogButtonType, DialogTestDriver} from '../../test-kit/components'; const dialogButtons = [ - {id: 'X', handler: 'onCancel'}, - {id: 'CANCEL', handler: 'onCancel'}, - {id: 'PRIMARY', handler: 'onOk'} + {id: 'X', handler: 'onCancel', type: 'CLOSE'}, + {id: 'CANCEL', handler: 'onCancel', type: 'CANCEL'}, + {id: 'PRIMARY', handler: 'onOk', type: 'PRIMARY'} ]; describe('', () => { @@ -23,7 +24,7 @@ describe('', () => { await waitForDom(() => expect(bodySelect('DIALOG_BODY')).to.be.present()); - (bodySelect('DIALOG_BODY', 'DIALOG_X') as HTMLButtonElement).click(); + (bodySelect('DIALOG_BODY', 'DIALOG_CLOSE') as HTMLButtonElement).click(); await waitForDom(() => expect(bodySelect('DIALOG_BODY')).to.be.absent()); showDialogBtn.click(); @@ -40,9 +41,11 @@ describe('', () => { it('displays the provided title', async () => { const testTitle = 'Do you accept this?'; - const {waitForDom} = clientRenderer.render(); + const {driver: dialog, waitForDom} = clientRenderer + .render() + .withDriver(DialogTestDriver); - await waitForDom(() => expect(bodySelect('DIALOG_BODY', 'DIALOG_TITLE')).to.have.text(testTitle)); + await waitForDom(() => expect(dialog.title).to.have.text(testTitle)); }); @@ -54,9 +57,13 @@ describe('', () => { [button.handler]: onClick }; - clientRenderer.render(); + const {driver: dialog} = clientRenderer + .render() + .withDriver(DialogTestDriver); - (bodySelect('DIALOG_BODY', `DIALOG_${button.id}`) as HTMLButtonElement).click(); + const getButton: Element = dialog.getButton(button.type as DialogButtonType); + + (getButton as HTMLButtonElement).click(); await waitFor(() => expect(onClick).to.have.been.calledOnce); }); From 11b224c8ad2f5ca50cf6b250801905faeaba29d0 Mon Sep 17 00:00:00 2001 From: Lior Zisman Date: Sun, 22 Oct 2017 18:15:09 +0300 Subject: [PATCH 79/81] test driver for dialog --- test-kit/components/dialog-driver.ts | 2 +- test/components/dialog.spec.tsx | 44 +++++++++++++++++++++------- 2 files changed, 34 insertions(+), 12 deletions(-) diff --git a/test-kit/components/dialog-driver.ts b/test-kit/components/dialog-driver.ts index 5b175a280..ed856c311 100644 --- a/test-kit/components/dialog-driver.ts +++ b/test-kit/components/dialog-driver.ts @@ -6,7 +6,7 @@ export type DialogButtonType = 'CANCEL' | 'CLOSE' | 'PRIMARY'; export class DialogTestDriver extends DriverBase { public static ComponentClass = Dialog; - private modalDriver: ModalTestDriver; + public modalDriver: ModalTestDriver; constructor(getDialog: () => HTMLElement) { super(getDialog); diff --git a/test/components/dialog.spec.tsx b/test/components/dialog.spec.tsx index ec7489739..f59af5a6f 100644 --- a/test/components/dialog.spec.tsx +++ b/test/components/dialog.spec.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import {ClientRenderer, expect, selectDom, sinon, waitFor} from 'test-drive-react'; +import {ClientRenderer, DriverBase, expect, sinon, waitFor} from 'test-drive-react'; import {DialogDemo} from '../../demo/components/dialog-demo'; import {Dialog} from '../../src'; import {DialogButtonType, DialogTestDriver} from '../../test-kit/components'; @@ -10,33 +10,55 @@ const dialogButtons = [ {id: 'PRIMARY', handler: 'onOk', type: 'PRIMARY'} ]; +class DialogDemoDriver extends DriverBase { + public static ComponentClass = DialogDemo; + public dialogDriver: DialogTestDriver; + + constructor(getDialogDemo: () => HTMLElement) { + super(getDialogDemo); + this.dialogDriver = new DialogTestDriver(getDialogDemo); + } + + public get dialog(): Element { + return this.dialogDriver.root; + } + + public get showDialogButton(): Element { + return this.select('DIALOG_BUTTON'); + } +} + describe('', () => { const clientRenderer = new ClientRenderer(); - const bodySelect = selectDom(document.body); afterEach(() => clientRenderer.cleanup()); it('opens the dialog upon extra button click, and closes it upon clicking any of the buttons', async () => { - const {select, waitForDom} = clientRenderer.render(); + const {driver: dialogDemo, waitForDom} = + clientRenderer + .render() + .withDriver(DialogDemoDriver); - const showDialogBtn = select('DIALOG_BUTTON') as HTMLButtonElement; + const showDialogBtn = dialogDemo.showDialogButton as HTMLButtonElement; showDialogBtn.click(); - await waitForDom(() => expect(bodySelect('DIALOG_BODY')).to.be.present()); + const dialogDriver = dialogDemo.dialogDriver; + + await waitForDom(() => expect(dialogDemo.dialog).to.be.present()); - (bodySelect('DIALOG_BODY', 'DIALOG_CLOSE') as HTMLButtonElement).click(); + (dialogDriver.getButton('CLOSE') as HTMLButtonElement).click(); - await waitForDom(() => expect(bodySelect('DIALOG_BODY')).to.be.absent()); + await waitForDom(() => expect(dialogDriver.modalDriver.root).to.be.absent()); showDialogBtn.click(); - (bodySelect('DIALOG_BODY', 'DIALOG_CANCEL') as HTMLButtonElement).click(); + (dialogDriver.getButton('CANCEL') as HTMLButtonElement).click(); - await waitForDom(() => expect(bodySelect('DIALOG_BODY')).to.be.absent()); + await waitForDom(() => expect(dialogDriver.modalDriver.root).to.be.absent()); showDialogBtn.click(); - (bodySelect('DIALOG_BODY', 'DIALOG_PRIMARY') as HTMLButtonElement).click(); + (dialogDriver.getButton('PRIMARY') as HTMLButtonElement).click(); - await waitForDom(() => expect(bodySelect('DIALOG_BODY')).to.be.absent()); + await waitForDom(() => expect(dialogDriver.modalDriver.root).to.be.absent()); }); it('displays the provided title', async () => { From 5f66e3d38bb0d032e1a348b38779dba28f52c9e9 Mon Sep 17 00:00:00 2001 From: Lior Zisman Date: Sun, 22 Oct 2017 18:18:43 +0300 Subject: [PATCH 80/81] cleanup --- src/components/dialog/dialog.st.css | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/components/dialog/dialog.st.css b/src/components/dialog/dialog.st.css index c16ae79e0..80bf2dd5e 100644 --- a/src/components/dialog/dialog.st.css +++ b/src/components/dialog/dialog.st.css @@ -14,14 +14,10 @@ border: 1px solid black; border-radius: 5px; background-color: lightgray; - padding: 5px; } .header { border-bottom: 1px solid black; - width: calc(100% + 10px); - margin-left: -5px; - padding-bottom: 5px; } .header .title { From 93ea389d682e92fec7d832a6291f0abf7dcefa0d Mon Sep 17 00:00:00 2001 From: Lior Zisman Date: Mon, 23 Oct 2017 13:30:13 +0300 Subject: [PATCH 81/81] yes --- src/components/dialog/dialog.tsx | 21 ++++++++++++++++++--- src/components/modal/modal.tsx | 4 ++-- 2 files changed, 20 insertions(+), 5 deletions(-) diff --git a/src/components/dialog/dialog.tsx b/src/components/dialog/dialog.tsx index f69e7446c..e6b24ec87 100644 --- a/src/components/dialog/dialog.tsx +++ b/src/components/dialog/dialog.tsx @@ -1,13 +1,14 @@ +import keycode = require('keycode'); import * as React from 'react'; import {properties, stylable} from 'wix-react-tools'; import {noop} from '../../utils'; import {Button} from '../button'; -import {Modal} from '../modal'; +import {Modal, RequestCloseEvent} from '../modal'; import styles from './dialog.st.css'; export interface DialogProps extends React.HTMLAttributes { isOpen?: boolean; - onCancel?: () => void; + onCancel?: (src: RequestCloseEvent) => void; onOk?: () => void; title?: string; } @@ -29,7 +30,12 @@ export class Dialog extends React.PureComponent { isOpen={!!this.props.isOpen} onRequestClose={this.props.onCancel} > -
+
{this.props.title}