From 27da957ab99b1c6a96fbb39df81fbaccb8d5bb54 Mon Sep 17 00:00:00 2001
From: Jared Scheib <jared.scheib@gmail.com>
Date: Mon, 7 Aug 2017 17:30:34 -0700
Subject: [PATCH] Rename OneOrAny component to OptIn

---
 .../components/{OneOrAny.js => OptIn.js}      | 18 ++++++++---------
 ui/src/style/chronograf.scss                  |  2 +-
 .../{one-or-any.scss => opt-in.scss}          | 20 +++++++++----------
 3 files changed, 19 insertions(+), 21 deletions(-)
 rename ui/src/shared/components/{OneOrAny.js => OptIn.js} (92%)
 rename ui/src/style/components/{one-or-any.scss => opt-in.scss} (86%)

diff --git a/ui/src/shared/components/OneOrAny.js b/ui/src/shared/components/OptIn.js
similarity index 92%
rename from ui/src/shared/components/OneOrAny.js
rename to ui/src/shared/components/OptIn.js
index fe07818df6..6aae5bf41e 100644
--- a/ui/src/shared/components/OneOrAny.js
+++ b/ui/src/shared/components/OptIn.js
@@ -6,7 +6,7 @@ const RESET_TIMEOUT = 300
 const TOGGLE_CLICKED_TIMEOUT = 20
 const BLUR_FOCUS_GAP_TIMEOUT = 10
 
-class OneOrAny extends Component {
+class OptIn extends Component {
   constructor(props) {
     super(props)
 
@@ -133,20 +133,18 @@ class OneOrAny extends Component {
     const {useRightValue, rightValue} = this.state
 
     return (
-      <div
-        className={classnames('one-or-any', {'right-toggled': useRightValue})}
-      >
+      <div className={classnames('opt-in', {'right-toggled': useRightValue})}>
         <div
-          className="one-or-any--left-label"
+          className="opt-in--left-label"
           onClick={this.handleClickLeftValueField()}
         >
           {leftLabel}
         </div>
         <div
-          className="one-or-any--groove-knob-container"
+          className="opt-in--groove-knob-container"
           onClick={this.handleClickToggle()}
         >
-          <div className="one-or-any--groove-knob" />
+          <div className="opt-in--groove-knob" />
         </div>
         <input
           className="form-control input-sm"
@@ -170,7 +168,7 @@ class OneOrAny extends Component {
   }
 }
 
-OneOrAny.defaultProps = {
+OptIn.defaultProps = {
   leftLabel: 'auto',
   leftValue: '',
   rightLabel: 'Custom Value',
@@ -178,7 +176,7 @@ OneOrAny.defaultProps = {
 }
 const {func, string} = PropTypes
 
-OneOrAny.propTypes = {
+OptIn.propTypes = {
   leftLabel: string,
   leftValue: string,
   rightLabel: string,
@@ -186,4 +184,4 @@ OneOrAny.propTypes = {
   onSetValue: func.isRequired,
 }
 
-export default OneOrAny
+export default OptIn
diff --git a/ui/src/style/chronograf.scss b/ui/src/style/chronograf.scss
index c6547693cf..7b8979a009 100644
--- a/ui/src/style/chronograf.scss
+++ b/ui/src/style/chronograf.scss
@@ -36,7 +36,7 @@
 @import 'components/graph';
 @import 'components/input-tag-list';
 @import 'components/newsfeed';
-@import 'components/one-or-any';
+@import 'components/opt-in';
 @import 'components/page-header-dropdown';
 @import 'components/page-header-editable';
 @import 'components/page-spinner';
diff --git a/ui/src/style/components/one-or-any.scss b/ui/src/style/components/opt-in.scss
similarity index 86%
rename from ui/src/style/components/one-or-any.scss
rename to ui/src/style/components/opt-in.scss
index fb1dd146ba..4a3ccb5993 100644
--- a/ui/src/style/components/one-or-any.scss
+++ b/ui/src/style/components/opt-in.scss
@@ -1,14 +1,14 @@
 /*
-  One or Any Input
+  Opt In Component
   ------------------------------------------------------------------------------
   User can toggle between a single value or any value
 */
-.one-or-any {
+.opt-in {
   display: flex;
   align-items: stretch;
   flex-wrap: nowrap;
 }
-.one-or-any--left-label {
+.opt-in--left-label {
   border: 2px solid $g5-pepper;
   background-color: $g2-kevlar;
   color: $c-pool;
@@ -22,7 +22,7 @@
   @include no-user-select();
   transition: background-color 0.25s ease, color 0.25s ease;
 }
-.one-or-any--groove-knob-container {
+.opt-in--groove-knob-container {
   display: flex;
   align-items: center;
   border: 2px solid $g5-pepper;
@@ -31,7 +31,7 @@
   position: relative;
 
   // Groove
-  > div.one-or-any--groove-knob {
+  > div.opt-in--groove-knob {
     margin: 0 10px;
     z-index: 3;
     width: 28px;
@@ -85,22 +85,22 @@
   }
 }
 // Customize form input
-.one-or-any > input.form-control {
+.opt-in > input.form-control {
   border-radius: 0 4px 4px 0;
   font-family: $code-font;
   flex: 1 0 0;
 }
 // Right value toggled state
-.one-or-any.right-toggled {
-  .one-or-any--groove-knob:after {
+.opt-in.right-toggled {
+  .opt-in--groove-knob:after {
     transform: translate(0%, -50%);
   }
   // Fade out left, fade in right
-  .one-or-any--groove-knob-container:before {
+  .opt-in--groove-knob-container:before {
     opacity: 0;
   }
   // Make left label look disabled
-  .one-or-any--left-label {
+  .opt-in--left-label {
     background-color: $g3-castle;
     color: $g8-storm;
     font-style: italic;