From 13c6d54cfd720df42e77628ded23eca574f2eae9 Mon Sep 17 00:00:00 2001 From: Alex P Date: Fri, 3 Aug 2018 16:24:14 -0700 Subject: [PATCH 1/4] Import styles into individual components instead of master stylesheet Also adding organizational comments --- ui/src/reusable_ui/components/Button/Button.scss | 2 ++ ui/src/reusable_ui/components/Button/index.tsx | 6 ++++++ .../components/card_select/CardSelectCard.scss | 7 +++++++ .../components/card_select/CardSelectCard.tsx | 9 +++++++-- .../components/card_select/CardSelectList.scss | 7 +++++++ ui/src/reusable_ui/components/dropdowns/Dropdown.tsx | 3 +++ .../components/dropdowns/DropdownButton.scss | 2 ++ .../components/dropdowns/DropdownButton.tsx | 4 ++++ ui/src/reusable_ui/components/form_layout/Form.scss | 3 ++- ui/src/reusable_ui/components/form_layout/Form.tsx | 3 +++ ui/src/reusable_ui/components/inputs/Input.scss | 2 ++ ui/src/reusable_ui/components/inputs/Input.tsx | 3 +++ ui/src/reusable_ui/components/overlays/Overlay.scss | 2 ++ .../components/overlays/OverlayTechnology.tsx | 3 +++ ui/src/reusable_ui/components/panel/Panel.scss | 2 ++ ui/src/reusable_ui/components/panel/Panel.tsx | 3 +++ .../components/slide_toggle/SlideToggle.scss | 2 ++ .../components/slide_toggle/SlideToggle.tsx | 3 +++ .../components/wizard/ProgressConnector.scss | 7 ++++++- .../components/wizard/ProgressConnector.tsx | 9 +++++++-- .../components/wizard/WizardButtonBar.scss | 7 ++++++- .../reusable_ui/components/wizard/WizardButtonBar.tsx | 5 ++++- .../components/wizard/WizardController.scss | 9 ++++++--- .../components/wizard/WizardController.tsx | 11 +++++++++-- .../components/wizard/WizardFullScreen.scss | 9 ++++++--- .../components/wizard/WizardFullScreen.tsx | 8 +++++++- .../reusable_ui/components/wizard/WizardOverlay.tsx | 5 +++++ .../components/wizard/WizardProgressBar.scss | 9 ++++++--- .../components/wizard/WizardProgressBar.tsx | 10 ++++++++-- ui/src/reusable_ui/components/wizard/WizardStep.scss | 7 ++++++- ui/src/reusable_ui/components/wizard/WizardStep.tsx | 7 ++++++- ui/src/reusable_ui/styles.scss | 11 ----------- ui/src/style/chronograf.scss | 3 --- 33 files changed, 145 insertions(+), 38 deletions(-) delete mode 100644 ui/src/reusable_ui/styles.scss diff --git a/ui/src/reusable_ui/components/Button/Button.scss b/ui/src/reusable_ui/components/Button/Button.scss index b43e4f8b0..3a412a973 100644 --- a/ui/src/reusable_ui/components/Button/Button.scss +++ b/ui/src/reusable_ui/components/Button/Button.scss @@ -3,6 +3,8 @@ ------------------------------------------------------------------------------ */ +@import 'src/style/modules/modules'; + .button { font-weight: 700; font-family: $ix-text-font; diff --git a/ui/src/reusable_ui/components/Button/index.tsx b/ui/src/reusable_ui/components/Button/index.tsx index 7f10e2f6c..28cecf5c0 100644 --- a/ui/src/reusable_ui/components/Button/index.tsx +++ b/ui/src/reusable_ui/components/Button/index.tsx @@ -11,6 +11,11 @@ import { IconFont, } from 'src/reusable_ui/types' +// Styles +import 'src/reusable_ui/components/Button/Button.scss' + +import {ErrorHandling} from 'src/shared/decorators/errors' + interface Props { text: string onClick?: () => void @@ -22,6 +27,7 @@ interface Props { titleText?: string } +@ErrorHandling class Button extends Component { public static defaultProps: Partial = { color: ComponentColor.Default, diff --git a/ui/src/reusable_ui/components/card_select/CardSelectCard.scss b/ui/src/reusable_ui/components/card_select/CardSelectCard.scss index 3e7a821a1..d82738ac6 100644 --- a/ui/src/reusable_ui/components/card_select/CardSelectCard.scss +++ b/ui/src/reusable_ui/components/card_select/CardSelectCard.scss @@ -1,3 +1,10 @@ +/* + Card Selector Card + ------------------------------------------------------------------------------ +*/ + +@import 'src/style/modules/modules'; + $card-select--gutter: 4px; $card-breakpoint-col-2: 600px; diff --git a/ui/src/reusable_ui/components/card_select/CardSelectCard.tsx b/ui/src/reusable_ui/components/card_select/CardSelectCard.tsx index 8b414c8e2..8edf979e7 100644 --- a/ui/src/reusable_ui/components/card_select/CardSelectCard.tsx +++ b/ui/src/reusable_ui/components/card_select/CardSelectCard.tsx @@ -1,9 +1,14 @@ +// Libraries import React, {PureComponent} from 'react' -import {ErrorHandling} from 'src/shared/decorators/errors' +import classnames from 'classnames' +// Types import {CardSelectCardProps} from 'src/types/cardSelect' -import classnames from 'classnames' +// Styles +import 'src/reusable_ui/components/card_select/CardSelectCard.scss' + +import {ErrorHandling} from 'src/shared/decorators/errors' interface State { checked: boolean diff --git a/ui/src/reusable_ui/components/card_select/CardSelectList.scss b/ui/src/reusable_ui/components/card_select/CardSelectList.scss index bf10fc16d..df0e57ba5 100644 --- a/ui/src/reusable_ui/components/card_select/CardSelectList.scss +++ b/ui/src/reusable_ui/components/card_select/CardSelectList.scss @@ -1,3 +1,10 @@ +/* + Card Selector Wrapper + ------------------------------------------------------------------------------ +*/ + +@import 'src/style/modules/modules'; + .card-select--wrapper { border: none; box-sizing: border-box; diff --git a/ui/src/reusable_ui/components/dropdowns/Dropdown.tsx b/ui/src/reusable_ui/components/dropdowns/Dropdown.tsx index 12a51396b..a802a7650 100644 --- a/ui/src/reusable_ui/components/dropdowns/Dropdown.tsx +++ b/ui/src/reusable_ui/components/dropdowns/Dropdown.tsx @@ -18,6 +18,9 @@ import { IconFont, } from 'src/reusable_ui/types' +// Styles +import 'src/reusable_ui/components/dropdowns/Dropdown.scss' + import {ErrorHandling} from 'src/shared/decorators/errors' interface Props { diff --git a/ui/src/reusable_ui/components/dropdowns/DropdownButton.scss b/ui/src/reusable_ui/components/dropdowns/DropdownButton.scss index b5d75308c..9fae53bb2 100644 --- a/ui/src/reusable_ui/components/dropdowns/DropdownButton.scss +++ b/ui/src/reusable_ui/components/dropdowns/DropdownButton.scss @@ -3,6 +3,8 @@ ------------------------------------------------------------------------------ */ +@import 'src/style/modules/modules'; + /* Button */ .dropdown--button { position: relative; diff --git a/ui/src/reusable_ui/components/dropdowns/DropdownButton.tsx b/ui/src/reusable_ui/components/dropdowns/DropdownButton.tsx index 822e2f3e6..dbced3a4e 100644 --- a/ui/src/reusable_ui/components/dropdowns/DropdownButton.tsx +++ b/ui/src/reusable_ui/components/dropdowns/DropdownButton.tsx @@ -11,6 +11,10 @@ import { DropdownChild, } from 'src/reusable_ui/types' +// Styles +import 'src/reusable_ui/components/Button/Button.scss' +import 'src/reusable_ui/components/dropdowns/DropdownButton.scss' + import {ErrorHandling} from 'src/shared/decorators/errors' interface Props { diff --git a/ui/src/reusable_ui/components/form_layout/Form.scss b/ui/src/reusable_ui/components/form_layout/Form.scss index a724028ac..d74ee3baa 100644 --- a/ui/src/reusable_ui/components/form_layout/Form.scss +++ b/ui/src/reusable_ui/components/form_layout/Form.scss @@ -3,8 +3,9 @@ ------------------------------------------------------------------------------ */ -$grid--form-gutter: 6px; +@import 'src/style/modules/modules'; +$grid--form-gutter: 6px; .form--wrapper { width: calc(100% + #{$grid--form-gutter * 2}); diff --git a/ui/src/reusable_ui/components/form_layout/Form.tsx b/ui/src/reusable_ui/components/form_layout/Form.tsx index 926207a52..e82b212fc 100644 --- a/ui/src/reusable_ui/components/form_layout/Form.tsx +++ b/ui/src/reusable_ui/components/form_layout/Form.tsx @@ -8,6 +8,9 @@ import FormLabel from 'src/reusable_ui/components/form_layout/FormLabel' import FormDivider from 'src/reusable_ui/components/form_layout/FormDivider' import FormFooter from 'src/reusable_ui/components/form_layout/FormFooter' +// Styles +import 'src/reusable_ui/components/form_layout/Form.scss' + import {ErrorHandling} from 'src/shared/decorators/errors' interface Props { diff --git a/ui/src/reusable_ui/components/inputs/Input.scss b/ui/src/reusable_ui/components/inputs/Input.scss index 387ed43c5..d4c7b8a1c 100644 --- a/ui/src/reusable_ui/components/inputs/Input.scss +++ b/ui/src/reusable_ui/components/inputs/Input.scss @@ -3,6 +3,8 @@ ------------------------------------------------------------------------------ */ +@import 'src/style/modules/modules'; + $input-bg: $g2-kevlar; $input-disabled-bg: $g3-castle; diff --git a/ui/src/reusable_ui/components/inputs/Input.tsx b/ui/src/reusable_ui/components/inputs/Input.tsx index a429e0457..36415190a 100644 --- a/ui/src/reusable_ui/components/inputs/Input.tsx +++ b/ui/src/reusable_ui/components/inputs/Input.tsx @@ -10,6 +10,9 @@ import classnames from 'classnames' // Types import {ComponentStatus, ComponentSize, IconFont} from 'src/reusable_ui/types' +// Styles +import 'src/reusable_ui/components/inputs/Input.scss' + export enum InputType { Text = 'text', Number = 'number', diff --git a/ui/src/reusable_ui/components/overlays/Overlay.scss b/ui/src/reusable_ui/components/overlays/Overlay.scss index 870143ce5..1a214a5a9 100644 --- a/ui/src/reusable_ui/components/overlays/Overlay.scss +++ b/ui/src/reusable_ui/components/overlays/Overlay.scss @@ -3,6 +3,8 @@ ----------------------------------------------------------------------------- */ +@import 'src/style/modules/modules'; + $overlay-title-height: $chronograf-page-header-height; $overlay-gutter: 30px; $overlay-min-height: 150px; diff --git a/ui/src/reusable_ui/components/overlays/OverlayTechnology.tsx b/ui/src/reusable_ui/components/overlays/OverlayTechnology.tsx index 53f9bf33f..6b13d8178 100644 --- a/ui/src/reusable_ui/components/overlays/OverlayTechnology.tsx +++ b/ui/src/reusable_ui/components/overlays/OverlayTechnology.tsx @@ -2,6 +2,9 @@ import React, {Component} from 'react' import classnames from 'classnames' +// Styles +import 'src/reusable_ui/components/overlays/Overlay.scss' + import {ErrorHandling} from 'src/shared/decorators/errors' interface Props { diff --git a/ui/src/reusable_ui/components/panel/Panel.scss b/ui/src/reusable_ui/components/panel/Panel.scss index 40dea8156..bc929b8cc 100644 --- a/ui/src/reusable_ui/components/panel/Panel.scss +++ b/ui/src/reusable_ui/components/panel/Panel.scss @@ -3,6 +3,8 @@ ----------------------------------------------------------------------------- */ +@import 'src/style/modules/modules'; + $panel-gutter: 30px; $panel-background: $g3-castle; diff --git a/ui/src/reusable_ui/components/panel/Panel.tsx b/ui/src/reusable_ui/components/panel/Panel.tsx index d483a3aab..8a7a21c66 100644 --- a/ui/src/reusable_ui/components/panel/Panel.tsx +++ b/ui/src/reusable_ui/components/panel/Panel.tsx @@ -8,6 +8,9 @@ import PanelHeader from 'src/reusable_ui/components/panel/PanelHeader' import PanelBody from 'src/reusable_ui/components/panel/PanelBody' import PanelFooter from 'src/reusable_ui/components/panel/PanelFooter' +// Styles +import 'src/reusable_ui/components/panel/Panel.scss' + import {ErrorHandling} from 'src/shared/decorators/errors' export enum PanelType { diff --git a/ui/src/reusable_ui/components/slide_toggle/SlideToggle.scss b/ui/src/reusable_ui/components/slide_toggle/SlideToggle.scss index b6eb8990e..9ba50cf17 100644 --- a/ui/src/reusable_ui/components/slide_toggle/SlideToggle.scss +++ b/ui/src/reusable_ui/components/slide_toggle/SlideToggle.scss @@ -3,6 +3,8 @@ ------------------------------------------------------------------------------ */ +@import 'src/style/modules/modules'; + .slide-toggle { background-color: $g1-raven; position: relative; diff --git a/ui/src/reusable_ui/components/slide_toggle/SlideToggle.tsx b/ui/src/reusable_ui/components/slide_toggle/SlideToggle.tsx index dbedc5f31..5b0071338 100644 --- a/ui/src/reusable_ui/components/slide_toggle/SlideToggle.tsx +++ b/ui/src/reusable_ui/components/slide_toggle/SlideToggle.tsx @@ -5,6 +5,9 @@ import classnames from 'classnames' // Types import {ComponentColor, ComponentSize} from 'src/reusable_ui/types' +// Styles +import 'src/reusable_ui/components/slide_toggle/SlideToggle.scss' + import {ErrorHandling} from 'src/shared/decorators/errors' interface Props { diff --git a/ui/src/reusable_ui/components/wizard/ProgressConnector.scss b/ui/src/reusable_ui/components/wizard/ProgressConnector.scss index 27a5cc130..eae31852d 100644 --- a/ui/src/reusable_ui/components/wizard/ProgressConnector.scss +++ b/ui/src/reusable_ui/components/wizard/ProgressConnector.scss @@ -1,4 +1,9 @@ -@import 'src/style/modules/influx-colors'; +/* + Wizard Progress Connector Styles + ------------------------------------------------------------------------------ +*/ + +@import 'src/style/modules/modules'; .wizard-progress-connector { width: 50px; diff --git a/ui/src/reusable_ui/components/wizard/ProgressConnector.tsx b/ui/src/reusable_ui/components/wizard/ProgressConnector.tsx index ae3fce412..96b384f1e 100644 --- a/ui/src/reusable_ui/components/wizard/ProgressConnector.tsx +++ b/ui/src/reusable_ui/components/wizard/ProgressConnector.tsx @@ -1,9 +1,14 @@ +// Libraries import React, {PureComponent} from 'react' -import {ConnectorState} from 'src/reusable_ui/constants/wizard' -import {ErrorHandling} from 'src/shared/decorators/errors' +// Types +import {ConnectorState} from 'src/reusable_ui/constants/wizard' + +// Styles import 'src/reusable_ui/components/wizard/ProgressConnector.scss' +import {ErrorHandling} from 'src/shared/decorators/errors' + interface Props { status: ConnectorState } diff --git a/ui/src/reusable_ui/components/wizard/WizardButtonBar.scss b/ui/src/reusable_ui/components/wizard/WizardButtonBar.scss index 871d13506..c7a2e8301 100644 --- a/ui/src/reusable_ui/components/wizard/WizardButtonBar.scss +++ b/ui/src/reusable_ui/components/wizard/WizardButtonBar.scss @@ -1,4 +1,9 @@ -@import 'src/style/modules/variables'; +/* + Wizard Button Bar Styles + ------------------------------------------------------------------------------ +*/ + +@import 'src/style/modules/modules'; .wizard-button-bar { display: flex; diff --git a/ui/src/reusable_ui/components/wizard/WizardButtonBar.tsx b/ui/src/reusable_ui/components/wizard/WizardButtonBar.tsx index cba2b8048..6eb76b59f 100644 --- a/ui/src/reusable_ui/components/wizard/WizardButtonBar.tsx +++ b/ui/src/reusable_ui/components/wizard/WizardButtonBar.tsx @@ -1,8 +1,11 @@ +// Libraries import React, {PureComponent} from 'react' -import {ErrorHandling} from 'src/shared/decorators/errors' +// Styles import 'src/reusable_ui/components/wizard/WizardButtonBar.scss' +import {ErrorHandling} from 'src/shared/decorators/errors' + interface Props { decrement?: () => void nextLabel?: string diff --git a/ui/src/reusable_ui/components/wizard/WizardController.scss b/ui/src/reusable_ui/components/wizard/WizardController.scss index dc73900ce..5247864d5 100644 --- a/ui/src/reusable_ui/components/wizard/WizardController.scss +++ b/ui/src/reusable_ui/components/wizard/WizardController.scss @@ -1,6 +1,9 @@ -@import 'src/style/modules/influx-colors'; -@import 'src/style/modules/variables'; -@import 'src/style/modules/mixins'; +/* + Wizard Controller Styles + ------------------------------------------------------------------------------ +*/ + +@import 'src/style/modules/modules'; .wizard-step-title { text-align: center; diff --git a/ui/src/reusable_ui/components/wizard/WizardController.tsx b/ui/src/reusable_ui/components/wizard/WizardController.tsx index 702aab121..61619ff53 100644 --- a/ui/src/reusable_ui/components/wizard/WizardController.tsx +++ b/ui/src/reusable_ui/components/wizard/WizardController.tsx @@ -1,11 +1,18 @@ +// Libraries import React, {PureComponent, ReactElement} from 'react' + +// Components import WizardProgressBar from 'src/reusable_ui/components/wizard/WizardProgressBar' -import {ErrorHandling} from 'src/shared/decorators/errors' + +// Types import {WizardStepProps, Step} from 'src/types/wizard' import {StepStatus} from 'src/reusable_ui/constants/wizard' +// Styles import 'src/reusable_ui/components/wizard/WizardController.scss' +import {ErrorHandling} from 'src/shared/decorators/errors' + interface State { steps: Step[] currentStepIndex: number @@ -20,7 +27,7 @@ interface Props { @ErrorHandling class WizardController extends PureComponent { public static defaultProps: Partial = { - skipLinkText: 'skip', + skipLinkText: 'Skip', } public static getDerivedStateFromProps(props: Props, state: State) { diff --git a/ui/src/reusable_ui/components/wizard/WizardFullScreen.scss b/ui/src/reusable_ui/components/wizard/WizardFullScreen.scss index 60daee11a..7b8baa758 100644 --- a/ui/src/reusable_ui/components/wizard/WizardFullScreen.scss +++ b/ui/src/reusable_ui/components/wizard/WizardFullScreen.scss @@ -1,6 +1,9 @@ -@import 'src/style/modules/influx-colors'; -@import 'src/style/modules/variables'; -@import 'src/style/modules/mixins'; +/* + Full Screen Wizard Styles + ------------------------------------------------------------------------------ +*/ + +@import 'src/style/modules/modules'; .wizard-container { padding: 30px; diff --git a/ui/src/reusable_ui/components/wizard/WizardFullScreen.tsx b/ui/src/reusable_ui/components/wizard/WizardFullScreen.tsx index 3d3e29e99..73a985734 100644 --- a/ui/src/reusable_ui/components/wizard/WizardFullScreen.tsx +++ b/ui/src/reusable_ui/components/wizard/WizardFullScreen.tsx @@ -1,12 +1,18 @@ +// Libraries import React, {PureComponent, ReactElement} from 'react' +// Components import SplashPage from 'src/shared/components/SplashPage' import WizardController from 'src/reusable_ui/components/wizard/WizardController' -import {ErrorHandling} from 'src/shared/decorators/errors' +// Types import {WizardStepProps} from 'src/types/wizard' +// Styles import 'src/reusable_ui/components/wizard/WizardFullScreen.scss' + +import {ErrorHandling} from 'src/shared/decorators/errors' + interface Props { children: Array> title: string diff --git a/ui/src/reusable_ui/components/wizard/WizardOverlay.tsx b/ui/src/reusable_ui/components/wizard/WizardOverlay.tsx index 53c2e3a62..6d443e34d 100644 --- a/ui/src/reusable_ui/components/wizard/WizardOverlay.tsx +++ b/ui/src/reusable_ui/components/wizard/WizardOverlay.tsx @@ -1,11 +1,16 @@ +// Libraries import React, {PureComponent, ReactElement} from 'react' + +// Components import OverlayBody from 'src/reusable_ui/components/overlays/OverlayBody' import OverlayContainer from 'src/reusable_ui/components/overlays/OverlayContainer' import OverlayTechnology from 'src/reusable_ui/components/overlays/OverlayTechnology' import WizardController from 'src/reusable_ui/components/wizard/WizardController' import OverlayHeading from 'src/reusable_ui/components/overlays/OverlayHeading' +// Types import {WizardStepProps} from 'src/types/wizard' + import {ErrorHandling} from 'src/shared/decorators/errors' interface Props { diff --git a/ui/src/reusable_ui/components/wizard/WizardProgressBar.scss b/ui/src/reusable_ui/components/wizard/WizardProgressBar.scss index ba73080a3..fb92f5e81 100644 --- a/ui/src/reusable_ui/components/wizard/WizardProgressBar.scss +++ b/ui/src/reusable_ui/components/wizard/WizardProgressBar.scss @@ -1,6 +1,9 @@ -@import 'src/style/modules/influx-colors'; -@import 'src/style/modules/variables'; -@import 'src/style/modules/mixins'; +/* + Wizard Progress Bar Styles + ------------------------------------------------------------------------------ +*/ + +@import 'src/style/modules/modules'; .wizard-progress-bar { display: inline-flex; diff --git a/ui/src/reusable_ui/components/wizard/WizardProgressBar.tsx b/ui/src/reusable_ui/components/wizard/WizardProgressBar.tsx index 2387fa4b9..e7ca6e420 100644 --- a/ui/src/reusable_ui/components/wizard/WizardProgressBar.tsx +++ b/ui/src/reusable_ui/components/wizard/WizardProgressBar.tsx @@ -1,12 +1,18 @@ +// Libraries import React, {PureComponent} from 'react' -import ProgressConnector from 'src/reusable_ui/components/wizard/ProgressConnector' -import {ErrorHandling} from 'src/shared/decorators/errors' +// Components +import ProgressConnector from 'src/reusable_ui/components/wizard/ProgressConnector' + +// Types import {Step} from 'src/types/wizard' import {ConnectorState, StepStatus} from 'src/reusable_ui/constants/wizard' +// Types import 'src/reusable_ui/components/wizard/WizardProgressBar.scss' +import {ErrorHandling} from 'src/shared/decorators/errors' + interface Props { steps: Step[] currentStepIndex: number diff --git a/ui/src/reusable_ui/components/wizard/WizardStep.scss b/ui/src/reusable_ui/components/wizard/WizardStep.scss index 3275d0938..140dd6287 100644 --- a/ui/src/reusable_ui/components/wizard/WizardStep.scss +++ b/ui/src/reusable_ui/components/wizard/WizardStep.scss @@ -1,4 +1,9 @@ -@import 'src/style/modules/variables'; +/* + Wizard Step Styles + ------------------------------------------------------------------------------ +*/ + +@import 'src/style/modules/modules'; .wizard-step-content { margin: $ix-marg-b 0; diff --git a/ui/src/reusable_ui/components/wizard/WizardStep.tsx b/ui/src/reusable_ui/components/wizard/WizardStep.tsx index 1826249d4..26cfe753e 100644 --- a/ui/src/reusable_ui/components/wizard/WizardStep.tsx +++ b/ui/src/reusable_ui/components/wizard/WizardStep.tsx @@ -1,10 +1,15 @@ +// Libraries import React, {PureComponent, ReactNode} from 'react' + +// Components import FancyScrollbar from 'src/shared/components/FancyScrollbar' import WizardButtonBar from 'src/reusable_ui/components/wizard/WizardButtonBar' -import {ErrorHandling} from 'src/shared/decorators/errors' +// Styles import 'src/reusable_ui/components/wizard/WizardStep.scss' +import {ErrorHandling} from 'src/shared/decorators/errors' + interface Props { children: ReactNode title: string diff --git a/ui/src/reusable_ui/styles.scss b/ui/src/reusable_ui/styles.scss deleted file mode 100644 index d2bbf5b38..000000000 --- a/ui/src/reusable_ui/styles.scss +++ /dev/null @@ -1,11 +0,0 @@ -// Reusable UI Components -@import 'components/Button/Button'; -@import 'components/dropdowns/Dropdown'; -@import 'components/dropdowns/DropdownButton'; -@import 'components/form_layout/Form'; -@import 'components/inputs/Input'; -@import 'components/overlays/Overlay'; -@import 'components/panel/Panel'; -@import 'components/slide_toggle/SlideToggle'; -@import 'components/card_select/CardSelectCard.scss'; -@import 'components/card_select/CardSelectList.scss'; \ No newline at end of file diff --git a/ui/src/style/chronograf.scss b/ui/src/style/chronograf.scss index dace8889a..671d1aceb 100644 --- a/ui/src/style/chronograf.scss +++ b/ui/src/style/chronograf.scss @@ -73,9 +73,6 @@ @import 'components/histogram-chart'; @import 'components/import-dashboard-mappings'; -// Reusable UI Components -@import '../reusable_ui/styles'; - // Pages @import 'pages/config-endpoints'; @import 'pages/auth-page'; From 07bc7c3c78b9d3615af6219a73e5a25052239549 Mon Sep 17 00:00:00 2001 From: Alex P Date: Fri, 3 Aug 2018 16:26:37 -0700 Subject: [PATCH 2/4] Test import pattern in component in use --- .../components/rename_dashboard/RenameDashboard.scss | 5 +---- .../components/rename_dashboard/RenameDashboard.tsx | 10 ++++++++-- ui/src/style/layout/page-header.scss | 2 -- ui/src/style/modules/_variables.scss | 3 +++ 4 files changed, 12 insertions(+), 8 deletions(-) diff --git a/ui/src/dashboards/components/rename_dashboard/RenameDashboard.scss b/ui/src/dashboards/components/rename_dashboard/RenameDashboard.scss index 69a6a0b9c..9a8e4e9c4 100644 --- a/ui/src/dashboards/components/rename_dashboard/RenameDashboard.scss +++ b/ui/src/dashboards/components/rename_dashboard/RenameDashboard.scss @@ -3,10 +3,7 @@ ------------------------------------------------------------------------------ */ -@import 'src/style/modules/influx-colors'; -@import 'src/style/modules/variables'; -@import 'src/style/modules/mixins'; -@import 'src/style/layout/page-header'; +@import 'src/style/modules/modules'; $rename-dash-title-padding: 7px; diff --git a/ui/src/dashboards/components/rename_dashboard/RenameDashboard.tsx b/ui/src/dashboards/components/rename_dashboard/RenameDashboard.tsx index 33c8534bb..a63b3833f 100644 --- a/ui/src/dashboards/components/rename_dashboard/RenameDashboard.tsx +++ b/ui/src/dashboards/components/rename_dashboard/RenameDashboard.tsx @@ -1,11 +1,17 @@ +// Libraries import React, {Component, KeyboardEvent} from 'react' -import {ErrorHandling} from 'src/shared/decorators/errors' -import './RenameDashboard.scss' + +// Constants import { DASHBOARD_NAME_MAX_LENGTH, DEFAULT_DASHBOARD_NAME, } from 'src/dashboards/constants/index' +// Styles +import 'src/dashboards/components/rename_dashboard/RenameDashboard.scss' + +import {ErrorHandling} from 'src/shared/decorators/errors' + interface Props { onRename: (name: string) => void name: string diff --git a/ui/src/style/layout/page-header.scss b/ui/src/style/layout/page-header.scss index fb3f32a86..5326f2cc8 100644 --- a/ui/src/style/layout/page-header.scss +++ b/ui/src/style/layout/page-header.scss @@ -2,8 +2,6 @@ Page Header ------------------------------------------------------------------------------ */ -$page-header-size: 19px; -$page-header-weight: 400 !important; .page-header { height: $chronograf-page-header-height; diff --git a/ui/src/style/modules/_variables.scss b/ui/src/style/modules/_variables.scss index 259215096..bb95e6d61 100644 --- a/ui/src/style/modules/_variables.scss +++ b/ui/src/style/modules/_variables.scss @@ -10,6 +10,9 @@ $page-wrapper-padding: 60px; $page-wrapper-max-width: 1300px; $chronograf-page-header-height: 60px; +$page-header-size: 19px; +$page-header-weight: 400 !important; + $ix-marg-a: 4px; $ix-marg-b: 8px; $ix-marg-c: 16px; From 2e1e10e40122d15acbcbf01a4a836c411d0c1dbb Mon Sep 17 00:00:00 2001 From: Alex P Date: Fri, 3 Aug 2018 16:38:15 -0700 Subject: [PATCH 3/4] Test new css import pattern on component in use --- ui/src/dashboards/components/ImportDashboardOverlay.tsx | 2 +- .../import_dashboard_mappings/ImportDashboardMappings.scss} | 2 ++ .../ImportDashboardMappings.tsx | 3 +++ ui/src/style/chronograf.scss | 1 - ui/test/dashboards/components/ImportDashboardMappings.test.tsx | 2 +- 5 files changed, 7 insertions(+), 3 deletions(-) rename ui/src/{style/components/import-dashboard-mappings.scss => dashboards/components/import_dashboard_mappings/ImportDashboardMappings.scss} (96%) rename ui/src/dashboards/components/{ => import_dashboard_mappings}/ImportDashboardMappings.tsx (98%) diff --git a/ui/src/dashboards/components/ImportDashboardOverlay.tsx b/ui/src/dashboards/components/ImportDashboardOverlay.tsx index 2fb2b649f..9e9b31f4d 100644 --- a/ui/src/dashboards/components/ImportDashboardOverlay.tsx +++ b/ui/src/dashboards/components/ImportDashboardOverlay.tsx @@ -6,7 +6,7 @@ import Container from 'src/reusable_ui/components/overlays/OverlayContainer' import Heading from 'src/reusable_ui/components/overlays/OverlayHeading' import Body from 'src/reusable_ui/components/overlays/OverlayBody' import DragAndDrop from 'src/shared/components/DragAndDrop' -import ImportDashboardMappings from 'src/dashboards/components/ImportDashboardMappings' +import ImportDashboardMappings from 'src/dashboards/components/import_dashboard_mappings/ImportDashboardMappings' import {notifyDashboardImportFailed} from 'src/shared/copy/notifications' import {Dashboard, Cell, Source} from 'src/types' diff --git a/ui/src/style/components/import-dashboard-mappings.scss b/ui/src/dashboards/components/import_dashboard_mappings/ImportDashboardMappings.scss similarity index 96% rename from ui/src/style/components/import-dashboard-mappings.scss rename to ui/src/dashboards/components/import_dashboard_mappings/ImportDashboardMappings.scss index 7b53c0d33..97a58aeb4 100644 --- a/ui/src/style/components/import-dashboard-mappings.scss +++ b/ui/src/dashboards/components/import_dashboard_mappings/ImportDashboardMappings.scss @@ -3,6 +3,8 @@ ----------------------------------------------------------------------------- */ +@import 'src/style/modules/modules'; + .dash-map--source, .dash-map--header, .dash-map--cell { diff --git a/ui/src/dashboards/components/ImportDashboardMappings.tsx b/ui/src/dashboards/components/import_dashboard_mappings/ImportDashboardMappings.tsx similarity index 98% rename from ui/src/dashboards/components/ImportDashboardMappings.tsx rename to ui/src/dashboards/components/import_dashboard_mappings/ImportDashboardMappings.tsx index d8b5fe496..72c66b12d 100644 --- a/ui/src/dashboards/components/ImportDashboardMappings.tsx +++ b/ui/src/dashboards/components/import_dashboard_mappings/ImportDashboardMappings.tsx @@ -25,6 +25,9 @@ import { SourceItemValue, } from 'src/types/dashboards' +// Styles +import 'src/dashboards/components/import_dashboard_mappings/ImportDashboardMappings.scss' + interface Props { cells: Cell[] source: Source diff --git a/ui/src/style/chronograf.scss b/ui/src/style/chronograf.scss index 671d1aceb..d64cfed50 100644 --- a/ui/src/style/chronograf.scss +++ b/ui/src/style/chronograf.scss @@ -71,7 +71,6 @@ @import 'components/kapacitor-logs-table'; @import 'components/dropdown-placeholder'; @import 'components/histogram-chart'; -@import 'components/import-dashboard-mappings'; // Pages @import 'pages/config-endpoints'; diff --git a/ui/test/dashboards/components/ImportDashboardMappings.test.tsx b/ui/test/dashboards/components/ImportDashboardMappings.test.tsx index 96304ee16..f024f160b 100644 --- a/ui/test/dashboards/components/ImportDashboardMappings.test.tsx +++ b/ui/test/dashboards/components/ImportDashboardMappings.test.tsx @@ -1,7 +1,7 @@ import React from 'react' import {shallow} from 'enzyme' -import ImportDashboardMappings from 'src/dashboards/components/ImportDashboardMappings' +import ImportDashboardMappings from 'src/dashboards/components/import_dashboard_mappings/ImportDashboardMappings' import {source, cell, query} from 'test/fixtures' const setup = (override = {}) => { From 950299a0a8ac6b60846f3c05504ed8cc20c18e7b Mon Sep 17 00:00:00 2001 From: Alex P Date: Fri, 3 Aug 2018 16:54:22 -0700 Subject: [PATCH 4/4] Fix the oops --- ui/src/reusable_ui/components/dropdowns/Dropdown.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/ui/src/reusable_ui/components/dropdowns/Dropdown.scss b/ui/src/reusable_ui/components/dropdowns/Dropdown.scss index 7a8645e1c..ac8cbd4cf 100644 --- a/ui/src/reusable_ui/components/dropdowns/Dropdown.scss +++ b/ui/src/reusable_ui/components/dropdowns/Dropdown.scss @@ -3,6 +3,8 @@ ------------------------------------------------------------------------------ */ +@import 'src/style/modules/modules'; + /* Dropdown Menu */ .dropdown--menu-container { overflow: hidden;