From e7e980a869a448e1ef934749b0e1c0b7c38ab72b Mon Sep 17 00:00:00 2001 From: Edward Raffaele Date: Tue, 21 Feb 2017 13:14:39 -0800 Subject: [PATCH 1/6] fix(radiobutton): update to match design This brings the radio buttons inline with the pixel spec --- .../tripwire/modules/checkbox.overrides | 69 ++++++++++++++++++- semantic/yarn.lock | 4 ++ stories/controls.stories.js | 7 +- 3 files changed, 78 insertions(+), 2 deletions(-) create mode 100644 semantic/yarn.lock diff --git a/semantic/src/themes/tripwire/modules/checkbox.overrides b/semantic/src/themes/tripwire/modules/checkbox.overrides index 774b6da..84a953c 100644 --- a/semantic/src/themes/tripwire/modules/checkbox.overrides +++ b/semantic/src/themes/tripwire/modules/checkbox.overrides @@ -87,6 +87,7 @@ top: @radioTop; left: @radioLeft; border-color: @grey; + border-width: 2px; } @@ -98,9 +99,10 @@ width: @radioSize; height: @radioSize; line-height: @radioSize; - + background-color: @grey !important; } + /* Radio Checkbox */ .ui.radio.checkbox .box:after, .ui.radio.checkbox label:after { @@ -139,7 +141,19 @@ top: @radioTop; left: @radioLeft; border-color: @blue; +} + +.ui.radio.checkbox.disabled .box:hover::before, +.ui.radio.checkbox.disabled label:hover::before { + content: ''; + transform: none; + width: @radioSize; + height: @radioSize; + border-radius: @circularRadius; + top: @radioTop; + left: @radioLeft; + border-color: @grey; } /* Active */ @@ -153,6 +167,59 @@ background-color: @radioActiveBulletColor; border-color: @grey; } +.ui.radio.checkbox input:checked ~ .box:hover::before, +.ui.radio.checkbox input:checked ~ label:hover::before { + background-color: @radioActiveBackground; + border-color: @blue; +} +.ui.radio.checkbox input:checked ~ .box:hover::after, +.ui.radio.checkbox input:checked ~ label:hover::after { + background-color: @radioActiveBulletColor; + border-color: @blue; +} + +.ui.radio.checkbox .box:hover::after, +.ui.radio.checkbox label:hover::after { + border: none; + content: '' !important; + width: @radioSize; + height: @radioSize; + line-height: @radioSize; + background-color: @blue !important; +} + +.ui.radio.checkbox.disabled .box:hover::after, +.ui.radio.checkbox.disabled label:hover::after { + border: none; + content: '' !important; + width: @radioSize; + height: @radioSize; + line-height: @radioSize; + background-color: @grey !important; +} + +/* Active */ +.ui.radio.checkbox.disabled input:checked ~ .box:before, +.ui.radio.checkbox.disabled input:checked ~ label:before { + background-color: @radioActiveBackground; + border-color: @grey; +} +.ui.radio.checkbox.disabled input:checked ~ .box:after, +.ui.radio.checkbox.disabled input:checked ~ label:after { + background-color: @radioActiveBulletColor; + border-color: @grey; +} +.ui.radio.checkbox.disabled input:checked ~ .box:hover::before, +.ui.radio.checkbox.disabled input:checked ~ label:hover::before { + background-color: @radioActiveBackground; + border-color: @grey; +} +.ui.radio.checkbox.disabled input:checked ~ .box:hover::after, +.ui.radio.checkbox.disabled input:checked ~ label:hover::after { + background-color: @radioActiveBulletColor; + border-color: @grey; +} + /* Active Focus */ .ui.radio.checkbox input:focus:checked ~ .box:before, diff --git a/semantic/yarn.lock b/semantic/yarn.lock new file mode 100644 index 0000000..fb57ccd --- /dev/null +++ b/semantic/yarn.lock @@ -0,0 +1,4 @@ +# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. +# yarn lockfile v1 + + diff --git a/stories/controls.stories.js b/stories/controls.stories.js index a10ab04..039ad13 100644 --- a/stories/controls.stories.js +++ b/stories/controls.stories.js @@ -27,7 +27,12 @@ storiesOf('Interactive Controls', module) )) .add('Radio Button', () => ( - +
+ + + + +
)) .add('Dropdown Menu', () => ( From e8149fe2348104dbb93b529657fa972c88604d33 Mon Sep 17 00:00:00 2001 From: Edward Raffaele Date: Tue, 21 Feb 2017 13:16:35 -0800 Subject: [PATCH 2/6] fix(radiobutton): update to match design remove accidental file touch --- semantic/yarn.lock | 4 ---- 1 file changed, 4 deletions(-) delete mode 100644 semantic/yarn.lock diff --git a/semantic/yarn.lock b/semantic/yarn.lock deleted file mode 100644 index fb57ccd..0000000 --- a/semantic/yarn.lock +++ /dev/null @@ -1,4 +0,0 @@ -# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. -# yarn lockfile v1 - - From 340bea08e4016f42aae1af96a50237c501b34258 Mon Sep 17 00:00:00 2001 From: Edward Raffaele Date: Thu, 23 Feb 2017 08:40:09 -0800 Subject: [PATCH 3/6] fix(radiobutton): include documentation Adds links to the relevant SUI doc pages and touches up the checkbox component --- .../tripwire/modules/checkbox.overrides | 112 ++++++++++++++++++ .../tripwire/modules/checkbox.variables | 4 +- stories/controls.stories.js | 44 ++++++- 3 files changed, 153 insertions(+), 7 deletions(-) diff --git a/semantic/src/themes/tripwire/modules/checkbox.overrides b/semantic/src/themes/tripwire/modules/checkbox.overrides index 84a953c..729dda7 100644 --- a/semantic/src/themes/tripwire/modules/checkbox.overrides +++ b/semantic/src/themes/tripwire/modules/checkbox.overrides @@ -230,3 +230,115 @@ .ui.radio.checkbox input:focus:checked ~ label:after { background-color: @radioActiveFocusBulletColor; } + + +/*-------------- + Box +---------------*/ + + +.ui.checkbox .box, +.ui.checkbox label { + cursor: auto; + position: relative; + display: block; + padding-left: @labelDistance; + outline: none; + font-size: @labelFontSize; +} + +.ui.checkbox .box:before, +.ui.checkbox label:before { + position: absolute; + top: 0px; + left: 0px; + + width: @checkboxSize; + height: @checkboxSize; + content: ''; + + background: @checkboxBackground; + border-radius: @checkboxBorderRadius; + + transition: @checkboxTransition; + border: @checkboxBorder; +} + +/*-------------- + Checkmark +---------------*/ + + + +.ui.checkbox .box:hover::before, +.ui.checkbox label:hover::before { + background: @checkboxHoverBackground; + border-color: @blue; +} + + +.ui.checkbox .box:after, +.ui.checkbox label:after { + position: absolute; + font-size: @checkboxCheckFontSize; + top: @checkboxCheckTop; + left: @checkboxCheckLeft; + width: @checkboxCheckSize; + height: @checkboxCheckSize; + text-align: center; + + opacity: 0; + color: @grey; + transition: @checkboxTransition; + + + +} + +/*-------------- + Active +---------------*/ + +.ui.checkbox input:checked ~ .box:before, +.ui.checkbox input:checked ~ label:before { + background: @checkboxActiveBackground; + opacity: 1; + border-color: @grey; +} +.ui.checkbox input:checked ~ .box:after, +.ui.checkbox input:checked ~ label:after { + opacity: 1; + color: @grey; +} + +.ui.checkbox input:checked ~ .box:hover::before, +.ui.checkbox input:checked ~ label:hover::before { + background: @checkboxActiveBackground; + opacity: 1; + border-color: @blue; +} +.ui.checkbox input:checked ~ .box:hover::after, +.ui.checkbox input:checked ~ label:hover::after { + opacity: 1; + color: @blue; +} + + + +.ui.checkbox.disabled input:checked ~ .box:hover::before, +.ui.checkbox.disabled input:checked ~ label:hover::before { + background: @checkboxActiveBackground; + opacity: 1; + border-color: @grey; +} +.ui.checkbox.disabled input:checked ~ .box:hover::after, +.ui.checkbox.disabled input:checked ~ label:hover::after { + opacity: 1; + color: @grey; +} + +.ui.checkbox.disabled .box:hover::before, +.ui.checkbox.disabled label:hover::before { + background: @checkboxHoverBackground; + border-color: @grey; +} \ No newline at end of file diff --git a/semantic/src/themes/tripwire/modules/checkbox.variables b/semantic/src/themes/tripwire/modules/checkbox.variables index 6cdc97a..02b683f 100644 --- a/semantic/src/themes/tripwire/modules/checkbox.variables +++ b/semantic/src/themes/tripwire/modules/checkbox.variables @@ -13,8 +13,8 @@ /* Checkbox */ @checkboxBackground: @white; -@checkboxBorder: 1px solid @solidBorderColor; -@checkboxBorderRadius: @3px; +@checkboxBorder: 2px solid @grey; +@checkboxBorderRadius: 2px; @checkboxTransition: border @defaultDuration @defaultEasing, opacity @defaultDuration @defaultEasing, diff --git a/stories/controls.stories.js b/stories/controls.stories.js index 80cdc85..43c4e32 100644 --- a/stories/controls.stories.js +++ b/stories/controls.stories.js @@ -1,6 +1,6 @@ import React from 'react' import { storiesOf } from '@kadira/storybook' -import { Radio, Dropdown, Input, Button, Popup } from 'semantic-ui-react' +import { Radio, Dropdown, Input, Button, Popup, Checkbox } from 'semantic-ui-react' import FavoriteButton from '../src/components/FavoriteButton' import StopStartButton from '../src/components/StopStartButton' import PaginationControl from '../src/components/PaginationControl' @@ -50,12 +50,46 @@ storiesOf('Interactive Controls', module) )) .add('Radio Button', () => (
- - - - +
+ + Standard +
+
+ + Disabled +
+
+ + Checked Disabled +
+
+ Reference Semantic UI documentation for usage: here
)) + .add('Checkbox', () => ( +
+
+ + Standard +
+
+ + Checked +
+
+ + Disabled +
+
+ + Checked Disabled +
+ +
+ Reference Semantic UI documentation for usage: here +
+ )) + .add('Dropdown Menu', () => ( )) From 6404ebcc9787bf22916a780f522728d7c50678c6 Mon Sep 17 00:00:00 2001 From: Edward Raffaele Date: Wed, 1 Mar 2017 11:10:37 -0800 Subject: [PATCH 4/6] fix(style): checkbox style update Updates to the style to bring checkboxes in line with design spec --- semantic/src/themes/tripwire/modules/checkbox.overrides | 9 +++++++-- semantic/src/themes/tripwire/modules/checkbox.variables | 2 +- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/semantic/src/themes/tripwire/modules/checkbox.overrides b/semantic/src/themes/tripwire/modules/checkbox.overrides index 729dda7..8120a5b 100644 --- a/semantic/src/themes/tripwire/modules/checkbox.overrides +++ b/semantic/src/themes/tripwire/modules/checkbox.overrides @@ -42,16 +42,21 @@ height: 16px; padding: 2px; right: 1px; +} +.ui.toggle.checkbox label::hover:before { + + background-color: #f1f1f1; + } .ui.toggle.checkbox label:after { background-color: white; - box-shadow: 0 2px 5px rgba(0, 0, 0, .3) !important; + box-shadow: none; position: absolute; content: '' !important; opacity: 1; z-index: 2; - border: none; + border: 1px solid #e4e6e7; width: 14px; height: 14px; top: 0px; diff --git a/semantic/src/themes/tripwire/modules/checkbox.variables b/semantic/src/themes/tripwire/modules/checkbox.variables index 02b683f..95fc5db 100644 --- a/semantic/src/themes/tripwire/modules/checkbox.variables +++ b/semantic/src/themes/tripwire/modules/checkbox.variables @@ -3,7 +3,7 @@ *******************************/ @textColor: @grey; -@checkboxSize: 17px; +@checkboxSize: 20px; @checkboxColor: @textColor; @checkboxLineHeight: @checkboxSize; From 9a1143822ff705fbd22327e174fc9e8183204cef Mon Sep 17 00:00:00 2001 From: Edward Raffaele Date: Wed, 1 Mar 2017 17:57:34 -0800 Subject: [PATCH 5/6] fix(formcontrol): spacing issue fix the spacing issue on the radio toggle button --- .../tripwire/modules/checkbox.overrides | 7 ++++ src/components/charts/CircleChart/Circle.jsx | 2 +- stories/notifications.stories.js | 36 +++++++++---------- 3 files changed, 26 insertions(+), 19 deletions(-) diff --git a/semantic/src/themes/tripwire/modules/checkbox.overrides b/semantic/src/themes/tripwire/modules/checkbox.overrides index 8120a5b..1986db7 100644 --- a/semantic/src/themes/tripwire/modules/checkbox.overrides +++ b/semantic/src/themes/tripwire/modules/checkbox.overrides @@ -67,6 +67,13 @@ } +/* Active */ + +.ui.toggle.checkbox input:checked ~ .box:after, +.ui.toggle.checkbox input:checked ~ label:after { + left: (@toggleLaneWidth - @toggleHandleSize) + 0.35rem; +} + /*-------------- Radio ---------------*/ diff --git a/src/components/charts/CircleChart/Circle.jsx b/src/components/charts/CircleChart/Circle.jsx index 6ae0939..f933bc3 100644 --- a/src/components/charts/CircleChart/Circle.jsx +++ b/src/components/charts/CircleChart/Circle.jsx @@ -1,5 +1,5 @@ import React from 'react' -import colorPallete from '../../colorPallete'; +import colorPallete from '../../colorPallete' var d3 = Object.assign({}, require('d3-shape')) const twoPi = Math.PI * 2 diff --git a/stories/notifications.stories.js b/stories/notifications.stories.js index 2cc830a..a8b5c8d 100644 --- a/stories/notifications.stories.js +++ b/stories/notifications.stories.js @@ -17,25 +17,25 @@ const sampleNotifications = [{ { id: 6, name: 'TIME OUT 6: SOURCE', state: 'warning' } ] }, -{ - id: 2, - name: 'Time-Out', - filterOption: 'server', - state: 'critical', - timestamp: '03-12-2016 2:50:00', - detail: [ + { + id: 2, + name: 'Time-Out', + filterOption: 'server', + state: 'critical', + timestamp: '03-12-2016 2:50:00', + detail: [ { id: 10, name: 'TIME OUT 1: SOURCE', state: 'warning' }, { id: 11, name: 'TIME OUT 2: SOURCE', state: 'warning' }, { id: 12, name: 'TIME OUT 2: SOURCE', state: 'warning' } - ] -}, -{ - id: 3, - name: 'Connection Errors', - filterOption: 'server', - state: 'critical', - timestamp: '03-12-2016 2:40:00', - detail: [ + ] + }, + { + id: 3, + name: 'Connection Errors', + filterOption: 'server', + state: 'critical', + timestamp: '03-12-2016 2:40:00', + detail: [ { id: 20, name: 'Connection Error 1: SOURCE', state: 'critical' }, { id: 21, name: 'Connection Error 2: SOURCE', state: 'critical' }, { id: 22, name: 'Connection Error 3: SOURCE', state: 'critical' }, @@ -45,8 +45,8 @@ const sampleNotifications = [{ { id: 26, name: 'Connection Error 7: SOURCE', state: 'critical' }, { id: 27, name: 'Connection Error 8: SOURCE', state: 'critical' }, { id: 28, name: 'Connection Error 9: SOURCE', state: 'critical' } - ] -} + ] + } ] storiesOf('Notifications', module) From 891ed96117d457664ab9ddfa5fd742349d123e0f Mon Sep 17 00:00:00 2001 From: Edward Raffaele Date: Thu, 2 Mar 2017 08:20:22 -0800 Subject: [PATCH 6/6] chore(lint): linting issue windows standard linting rules differed from the result on nix --- stories/notifications.stories.js | 36 ++++++++++++++++---------------- stories/tables.stories.js | 1 - 2 files changed, 18 insertions(+), 19 deletions(-) diff --git a/stories/notifications.stories.js b/stories/notifications.stories.js index a8b5c8d..2cc830a 100644 --- a/stories/notifications.stories.js +++ b/stories/notifications.stories.js @@ -17,25 +17,25 @@ const sampleNotifications = [{ { id: 6, name: 'TIME OUT 6: SOURCE', state: 'warning' } ] }, - { - id: 2, - name: 'Time-Out', - filterOption: 'server', - state: 'critical', - timestamp: '03-12-2016 2:50:00', - detail: [ +{ + id: 2, + name: 'Time-Out', + filterOption: 'server', + state: 'critical', + timestamp: '03-12-2016 2:50:00', + detail: [ { id: 10, name: 'TIME OUT 1: SOURCE', state: 'warning' }, { id: 11, name: 'TIME OUT 2: SOURCE', state: 'warning' }, { id: 12, name: 'TIME OUT 2: SOURCE', state: 'warning' } - ] - }, - { - id: 3, - name: 'Connection Errors', - filterOption: 'server', - state: 'critical', - timestamp: '03-12-2016 2:40:00', - detail: [ + ] +}, +{ + id: 3, + name: 'Connection Errors', + filterOption: 'server', + state: 'critical', + timestamp: '03-12-2016 2:40:00', + detail: [ { id: 20, name: 'Connection Error 1: SOURCE', state: 'critical' }, { id: 21, name: 'Connection Error 2: SOURCE', state: 'critical' }, { id: 22, name: 'Connection Error 3: SOURCE', state: 'critical' }, @@ -45,8 +45,8 @@ const sampleNotifications = [{ { id: 26, name: 'Connection Error 7: SOURCE', state: 'critical' }, { id: 27, name: 'Connection Error 8: SOURCE', state: 'critical' }, { id: 28, name: 'Connection Error 9: SOURCE', state: 'critical' } - ] - } + ] +} ] storiesOf('Notifications', module) diff --git a/stories/tables.stories.js b/stories/tables.stories.js index 30ae300..34093b3 100644 --- a/stories/tables.stories.js +++ b/stories/tables.stories.js @@ -95,4 +95,3 @@ storiesOf('Tables', module) )) -