chore(ui): upgrade Clockface to 1.0.0 (#15428)

* chore(ui): upgrade clockface dependency

* refactor(ui): update components affected by breaking changes

* refactor(ui): update test snapshots

* refactor(ui): remove obsolete component

* refactor(ui): remove reference to non-existant stylesheet

* refactor(ui): update selector in e2e collectors test

* refactor(ui): attempt to fix e2e test

* refactor(ui): appease linter

* refactor(ui): update implementation of client library cards

* refactor: update all breakage from new version

* refactor: revert this commit

* refactor: fix popover by using useRef instead of createRef

* fix: update all instances of EmptyStateText

* fix: update all instances of PageHeader

* fix: update straggler empty state text

* fix: update instance of PageHeaderCenter

* fix: update instance of PageContents

* fix: update style rule for dashboard cards

* chore: update test snapshots

* refactor: update instance of question mark tooltip

* refactor: use brighten prop to ensure contrast with background

* Revert "refactor: revert this commit"

This reverts commit f325916d91.

* chore: upgrade to NPM package instead of local

* refactor: fix css import

* refactor: update test snapshot

* refactor: Guard against string being null

Co-Authored-By: Alex Boatwright <alex@drdelambre.com>

* refactor: move resource getter inside overlay so it does not disrupt layout

* refactor: fix unit test by updating selector

* refactor: guard against name being absent

* chore: upgrade to latest clockface to utilize a bugfix

* chore: update snapshot test

* refactor: fix appearance of searchableDropdown

* chore: upgrade dependency (again) for bugfixes

* refactor: fix labels e2e test

* refactor: fix tokens e2e test

* refactor: appease linter

ui/cypress/e2e/collectors.test.ts

@@ -25,11 +25,7 @@ describe('Collectors', () => {
 
       cy.contains('Create Configuration').click()
       cy.getByTestID('overlay--container').within(() => {
-        cy.getByTestID('telegraf-plugins--System').within(() => {
-          // This extra get could be avoided by fixing this issue:
-          // https://github.com/influxdata/clockface/issues/245
-          cy.get('.cf-selectable-card--container').click()
-        })
+        cy.getByTestID('telegraf-plugins--System').click()
         cy.getByTestID('next').click()
         cy.getByInputName('name')
           .clear()

ui/cypress/e2e/labels.test.ts

@@ -105,7 +105,7 @@ describe('labels', () => {
     cy.getByTestID('color-picker--input').clear()
     cy.getByTestID('form--element-error').should(
       'contain',
-      'Hexcodes must begin with #, and must be 7 characters'
+      'Please enter a hexcode'
     )
     cy.getByTestID('input-error').should($ie => {
       expect($ie).to.have.class('alert-triangle')
@@ -115,7 +115,7 @@ describe('labels', () => {
     cy.getByTestID('color-picker--input').type('zzzzzz')
     cy.getByTestID('form--element-error').should(
       'contain',
-      'Hexcodes must begin with #, and must be 7 characters'
+      'Please enter a hexcode'
     )
     cy.getByTestID('input-error').should($ie => {
       expect($ie).to.have.class('alert-triangle')

ui/cypress/e2e/tokens.test.ts

@@ -204,11 +204,12 @@ describe('tokens', () => {
       .contains('token test 03')
       .parents('[data-testid=table-row]')
       .within(() => {
-        cy.getByTestID('delete-token--button')
-          .click()
-          .then(() => {
-            cy.getByTestID('button').click({force: true})
-          })
+        cy.getByTestID('delete-token--button').click()
+      })
+      .then(() => {
+        cy.getByTestID('delete-token--popover--contents').within(() => {
+          cy.getByTestID('button').click()
+        })
       })
 
     cy.getByTestID('table-row').should('have.length', 3)

ui/package.json

@@ -120,7 +120,7 @@
     "webpack-merge": "^4.2.1"
   },
   "dependencies": {
-    "@influxdata/clockface": "0.0.28",
+    "@influxdata/clockface": "1.0.2",
     "@influxdata/flux-parser": "^0.3.0",
     "@influxdata/giraffe": "0.16.4",
     "@influxdata/influx": "0.5.5",

ui/src/alerting/components/AlertHistoryIndex.tsx

@@ -87,7 +87,6 @@ const AlertHistoryIndex: FC<Props> = ({params: {orgID}, resourceIDs}) => {
                   </Page.Header>
                   <Page.Contents
                     fullWidth={true}
-                    fullHeight={true}
                     scrollable={false}
                     className="alert-history-page--contents"
                   >

ui/src/alerting/components/AlertingIndex.tsx

@@ -37,10 +37,10 @@ const AlertingIndex: FunctionComponent<StateProps> = ({
     <>
       <Page titleTag={pageTitleSuffixer(['Monitoring & Alerting'])}>
         <Page.Header fullWidth={false}>
-          <Page.Header.Left>
+          <Page.HeaderLeft>
             <PageTitleWithOrg title="Monitoring & Alerting" />
-          </Page.Header.Left>
-          <Page.Header.Right />
+          </Page.HeaderLeft>
+          <Page.HeaderRight />
         </Page.Header>
         <Page.Contents fullWidth={false} scrollable={false}>
           <GetResources resource={ResourceType.Labels}>

ui/src/alerting/components/AlertsColumn.tsx

@@ -11,13 +11,14 @@ import {
   FlexBox,
   FlexDirection,
   ComponentSize,
+  QuestionMarkTooltip,
+  ComponentColor,
 } from '@influxdata/clockface'
-import QuestionMarkTooltip from 'src/shared/components/question_mark_tooltip/QuestionMarkTooltip'
 
 interface Props {
   title: string
   createButton: JSX.Element
-  questionMarkTooltipContents: ReactChild
+  questionMarkTooltipContents: JSX.Element | string
   children: (searchTerm: string) => ReactChild
 }
 
@@ -39,8 +40,10 @@ const AlertsColumnHeader: FC<Props> = ({
             {title}
           </Panel.Title>
           <QuestionMarkTooltip
+            diameter={18}
+            color={ComponentColor.Primary}
             testID={`${title}--question-mark`}
-            tipContent={questionMarkTooltipContents}
+            tooltipContents={questionMarkTooltipContents}
           />
         </FlexBox>
         {createButton}

ui/src/alerting/components/CheckAlertingButton.tsx

@@ -27,7 +27,7 @@ const CheckAlertingButton: FunctionComponent<Props> = ({
   }
 
   return (
-    <Radio shape={ButtonShape.StretchToFit}>
+    <Radio shape={ButtonShape.StretchToFit} style={{width: '300px'}}>
       <Radio.Button
         key="queries"
         id="queries"

ui/src/alerting/components/CheckCards.tsx

@@ -82,22 +82,17 @@ const EmptyChecksList: FunctionComponent<EmptyProps> = ({
   if (searchTerm) {
     return (
       <EmptyState size={ComponentSize.Small} className="alert-column--empty">
-        <EmptyState.Text
-          text="No checks  match your search"
-          highlightWords={['checks']}
-        />
+        <EmptyState.Text>
+          No <b>checks</b> match your search
+        </EmptyState.Text>
       </EmptyState>
     )
   }
 
   if (showFirstTimeWidget) {
     return (
-      <Panel
-        gradient={Gradients.PolarExpress}
-        size={ComponentSize.Large}
-        className="alerting-first-time"
-      >
-        <Panel.Body>
+      <Panel gradient={Gradients.PolarExpress} className="alerting-first-time">
+        <Panel.Body size={ComponentSize.Large}>
           <h1>Get started monitoring by creating a check</h1>
           <h5>When a value crosses a specific threshold:</h5>
           <Button
@@ -124,10 +119,13 @@ const EmptyChecksList: FunctionComponent<EmptyProps> = ({
 
   return (
     <EmptyState size={ComponentSize.Small} className="alert-column--empty">
-      <EmptyState.Text
-        text="Looks like you have not created a Check  yet LINEBREAK LINEBREAK You will need one to be notified about LINEBREAK any changes in system status"
-        highlightWords={['Check']}
-      />
+      <EmptyState.Text>
+        Looks like you have not created a <b>Check</b> yet
+        <br />
+        <br />
+        You will need one to be notified about
+        <br /> any changes in system status
+      </EmptyState.Text>
     </EmptyState>
   )
 }

ui/src/alerting/components/CheckEOHeader.tsx

@@ -105,7 +105,7 @@ const CheckEOHeader: FC<Props> = ({
 
   return (
     <Page.Header fullWidth={true}>
-      <Page.Header.Left>
+      <Page.HeaderLeft>
         <RenamablePageTitle
           name={name}
           onRename={onSetName}
@@ -113,15 +113,15 @@ const CheckEOHeader: FC<Props> = ({
           maxLength={CHECK_NAME_MAX_LENGTH}
           onClickOutside={handleClickOutsideTitle}
         />
-      </Page.Header.Left>
-      <Page.Header.Center widthPixels={300}>
+      </Page.HeaderLeft>
+      <Page.HeaderCenter>
         <CheckAlertingButton
           activeTab={activeTab}
           draftQueries={draftQueries}
           setActiveTab={setActiveTab}
         />
-      </Page.Header.Center>
-      <Page.Header.Right>
+      </Page.HeaderCenter>
+      <Page.HeaderRight>
         <SquareButton
           icon={IconFont.Remove}
           onClick={onCancel}
@@ -136,7 +136,7 @@ const CheckEOHeader: FC<Props> = ({
           singleAggregateFunc={singleAggregateFunc}
           oneOrMoreThresholds={oneOrMoreThresholds}
         />
-      </Page.Header.Right>
+      </Page.HeaderRight>
     </Page.Header>
   )
 }

ui/src/alerting/components/CheckEOSaveButton.tsx

@@ -1,9 +1,10 @@
 // Libraries
-import React, {FunctionComponent} from 'react'
+import React, {FunctionComponent, useRef, RefObject} from 'react'
 
 // Components
 import {
   SquareButton,
+  ButtonRef,
   ComponentColor,
   ComponentSize,
   ComponentStatus,
@@ -34,36 +35,42 @@ const CheckEOSaveButton: FunctionComponent<Props> = ({
   singleAggregateFunc,
   oneOrMoreThresholds,
 }) => {
+  const triggerRef: RefObject<ButtonRef> = useRef(null)
+
   return (
-    <Popover
-      visible={status !== ComponentStatus.Default}
-      position={PopoverPosition.Below}
-      showEvent={PopoverInteraction.None}
-      hideEvent={PopoverInteraction.None}
-      color={ComponentColor.Secondary}
-      type={PopoverType.Outline}
-      contents={() => (
-        <div className="query-checklist--popover">
-          <p>{`To create a ${checkType} check, you must select:`}</p>
-          <ul className="query-checklist--list">
-            <QueryChecklistItem text="One field" selected={singleField} />
-            {checkType === 'threshold' && (
-              <>
-                <QueryChecklistItem
-                  text="One aggregate function"
-                  selected={singleAggregateFunc}
-                />
-                <QueryChecklistItem
-                  text="One or more thresholds"
-                  selected={oneOrMoreThresholds}
-                />
-              </>
-            )}
-          </ul>
-        </div>
-      )}
-    >
+    <>
+      <Popover
+        triggerRef={triggerRef}
+        visible={status !== ComponentStatus.Default}
+        position={PopoverPosition.Below}
+        enableDefaultStyles={false}
+        showEvent={PopoverInteraction.None}
+        hideEvent={PopoverInteraction.None}
+        color={ComponentColor.Secondary}
+        type={PopoverType.Outline}
+        contents={() => (
+          <div className="query-checklist--popover">
+            <p>{`To create a ${checkType} check, you must select:`}</p>
+            <ul className="query-checklist--list">
+              <QueryChecklistItem text="One field" selected={singleField} />
+              {checkType === 'threshold' && (
+                <>
+                  <QueryChecklistItem
+                    text="One aggregate function"
+                    selected={singleAggregateFunc}
+                  />
+                  <QueryChecklistItem
+                    text="One or more thresholds"
+                    selected={oneOrMoreThresholds}
+                  />
+                </>
+              )}
+            </ul>
+          </div>
+        )}
+      />
       <SquareButton
+        ref={triggerRef}
         className={className}
         icon={IconFont.Checkmark}
         color={ComponentColor.Success}
@@ -72,7 +79,7 @@ const CheckEOSaveButton: FunctionComponent<Props> = ({
         onClick={onSave}
         testID="save-cell--button"
       />
-    </Popover>
+    </>
   )
 }
 

ui/src/alerting/components/CreateCheckDropdown.tsx

@@ -61,7 +61,11 @@ const CreateCheckDropdown: FunctionComponent<Props> = ({
   )
 
   return (
-    <Dropdown button={DropdownButton} menu={DropdownMenu} widthPixels={124} />
+    <Dropdown
+      button={DropdownButton}
+      menu={DropdownMenu}
+      style={{width: '124px'}}
+    />
   )
 }
 

ui/src/alerting/components/builder/CheckMatchingRulesCard.tsx

@@ -65,8 +65,14 @@ const CheckMatchingRulesCard: FunctionComponent<StateProps> = ({
       size={ComponentSize.Small}
       className="alert-builder--card__empty"
     >
-      <EmptyState.Text text="Notification Rules configured to act on tag sets matching this Alert Check will automatically show up here" />
-      <EmptyState.Text text="Looks like no notification rules match the tag set defined in this Alert Check" />
+      <EmptyState.Text>
+        Notification Rules configured to act on tag sets matching this Alert
+        Check will automatically show up here
+      </EmptyState.Text>
+      <EmptyState.Text>
+        Looks like no notification rules match the tag set defined in this Alert
+        Check
+      </EmptyState.Text>
     </EmptyState>
   )
 

ui/src/alerting/components/builder/CheckTagRow.tsx

@@ -38,13 +38,9 @@ const CheckTagRow: FC<Props> = ({
   }
 
   return (
-    <Panel
-      testID="tag-rule"
-      size={ComponentSize.ExtraSmall}
-      className="alert-builder--tag-row"
-    >
+    <Panel testID="tag-rule" className="alert-builder--tag-row">
       <DismissButton onClick={handleRemove} color={ComponentColor.Default} />
-      <Panel.Body>
+      <Panel.Body size={ComponentSize.ExtraSmall}>
         <FlexBox direction={FlexDirection.Row} margin={ComponentSize.Small}>
           <FlexBox.Child grow={1}>
             <Input

ui/src/alerting/components/endpoints/EndpointCards.tsx

@@ -43,20 +43,23 @@ const EmptyEndpointList: FC<{searchTerm: string}> = ({searchTerm}) => {
   if (searchTerm) {
     return (
       <EmptyState size={ComponentSize.Small} className="alert-column--empty">
-        <EmptyState.Text
-          text="No endpoints  match your search"
-          highlightWords={['endpoints']}
-        />
+        <EmptyState.Text>
+          "No <b>endpoints</b> match your search
+        </EmptyState.Text>
       </EmptyState>
     )
   }
 
   return (
     <EmptyState size={ComponentSize.Small} className="alert-column--empty">
-      <EmptyState.Text
-        text="Want to send notifications to Slack, LINEBREAK PagerDuty or an HTTP server? LINEBREAK LINEBREAK Try creating a Notification  Endpoint"
-        highlightWords={['Notification', 'Endpoint']}
-      />
+      <EmptyState.Text>
+        Want to send notifications to Slack,
+        <br />
+        PagerDuty or an HTTP server?
+        <br />
+        <br />
+        Try creating a <b>Notification Endpoint</b>
+      </EmptyState.Text>
     </EmptyState>
   )
 }

ui/src/alerting/components/notifications/RuleCards.tsx

@@ -42,20 +42,20 @@ const EmptyNotificationRulesList: FC<{searchTerm: string}> = ({searchTerm}) => {
   if (searchTerm) {
     return (
       <EmptyState size={ComponentSize.Small} className="alert-column--empty">
-        <EmptyState.Text
-          text="No rules  match your search"
-          highlightWords={['rules']}
-        />
+        <EmptyState.Text>
+          No <b>rules</b> match your search
+        </EmptyState.Text>
       </EmptyState>
     )
   }
 
   return (
     <EmptyState size={ComponentSize.Small} className="alert-column--empty">
-      <EmptyState.Text
-        text="You need at least 1 Notification  Endpoint  before LINEBREAK you can create a Notification  Rule"
-        highlightWords={['Notification', 'Rule', 'Endpoint']}
-      />
+      <EmptyState.Text>
+        You need at least 1 <b>Notification Endpoint</b> before
+        <br />
+        you can create a <b>Notification Rule</b>
+      </EmptyState.Text>
     </EmptyState>
   )
 }

ui/src/alerting/components/notifications/RuleEndpointDropdown.tsx

@@ -28,7 +28,7 @@ const RuleEndpointDropdown: FC<Props> = ({
 
     const menu = () => null
 
-    return <Dropdown button={button} widthPixels={160} menu={menu} />
+    return <Dropdown button={button} style={{width: '160px'}} menu={menu} />
   }
 
   const items = endpoints.map(({id, name}) => (
@@ -64,7 +64,7 @@ const RuleEndpointDropdown: FC<Props> = ({
     <Dropdown
       button={button}
       menu={menu}
-      widthPixels={160}
+      style={{width: '160px'}}
       testID="endpoint-change--dropdown"
     />
   )

ui/src/alerting/components/notifications/RuleOverlayContents.tsx

@@ -46,8 +46,8 @@ const RuleOverlayContents: FC<Props> = ({saveButtonText, onSave}) => {
         <Grid.Row>
           <Grid.Column widthSM={Columns.Two}>About</Grid.Column>
           <Grid.Column widthSM={Columns.Ten}>
-            <Panel size={ComponentSize.ExtraSmall}>
-              <Panel.Body>
+            <Panel>
+              <Panel.Body size={ComponentSize.ExtraSmall}>
                 <Form.Element label="Name">
                   <Input
                     testID="rule-name--input"

ui/src/alerting/components/notifications/StatusRule.tsx

@@ -14,8 +14,8 @@ interface Props {
 
 const StatusRuleComponent: FC<Props> = ({status}) => {
   return (
-    <Panel size={ComponentSize.ExtraSmall} testID="status-rule">
-      <Panel.Body>
+    <Panel testID="status-rule">
+      <Panel.Body size={ComponentSize.ExtraSmall}>
         <StatusLevels status={status} />
       </Panel.Body>
     </Panel>

ui/src/alerting/components/notifications/TagRule.tsx

@@ -65,9 +65,9 @@ const TagRule: FC<Props> = ({tagRule}) => {
   }
 
   return (
-    <Panel testID="tag-rule" size={ComponentSize.ExtraSmall}>
+    <Panel testID="tag-rule">
       <DismissButton onClick={onDelete} color={ComponentColor.Default} />
-      <Panel.Body>
+      <Panel.Body size={ComponentSize.ExtraSmall}>
         <FlexBox direction={FlexDirection.Row} margin={ComponentSize.Small}>
           <TextBlock
             text="AND"

ui/src/authorizations/components/BucketsSelector.tsx

@@ -69,10 +69,10 @@ class BucketsSelector extends PureComponent<Props> {
         return (
           <>
             <EmptyState size={ComponentSize.Small}>
-              <EmptyState.Text
-                text="This token will be able to write to all existing buckets as well
-                as to any bucket created in the future"
-              />
+              <EmptyState.Text>
+                This token will be able to write to all existing buckets as well
+                as to any bucket created in the future
+              </EmptyState.Text>
             </EmptyState>
           </>
         )

ui/src/authorizations/components/GenerateTokenDropdown.tsx

@@ -20,7 +20,7 @@ export default class GenerateTokenDropdown extends PureComponent<Props> {
     return (
       <Dropdown
         testID="dropdown--gen-token"
-        widthPixels={160}
+        style={{width: '160px'}}
         button={(active, onClick) => (
           <Dropdown.Button
             active={active}

ui/src/authorizations/components/TokenList.tsx

@@ -124,7 +124,7 @@ export default class TokenList extends PureComponent<Props, State> {
 
     return (
       <EmptyState size={ComponentSize.Large}>
-        <EmptyState.Text text={emptyStateText} />
+        <EmptyState.Text>{emptyStateText}</EmptyState.Text>
       </EmptyState>
     )
   }

ui/src/authorizations/components/TokenRow.tsx

@@ -41,7 +41,7 @@ class TokenRow extends PureComponent<Props> {
     const {description} = this.props.auth
 
     return (
-      <IndexList.Row>
+      <IndexList.Row brighten={true}>
         <IndexList.Cell>
           <EditableName
             name={description}

ui/src/authorizations/components/__snapshots__/ViewTokenOverlay.test.tsx.snap

@@ -1,18 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Account rendering renders! 1`] = `
-<OverlayContainer
-  maxWidth={800}
-  testID="overlay--container"
->
+<OverlayContainer>
   <OverlayHeader
     onDismiss={[Function]}
-    testID="overlay--header"
     title="My token"
   />
-  <OverlayBody
-    testID="overlay--body"
-  >
+  <OverlayBody>
     <CodeSnippet
       copyText="RcW2uWiD-vfxujKyJCirK8un3lJsWPfiA6ulmWY_SlSITUal7Z180OwExiKKfrO98X8W6qGrd5hSGdag-hEpWw=="
       label="Code Snippet"

ui/src/buckets/components/BucketAddDataButton.tsx

@@ -1,10 +1,11 @@
 // Libraries
-import React, {PureComponent} from 'react'
+import React, {PureComponent, createRef, RefObject} from 'react'
 
 // Components
 import CloudExclude from 'src/shared/components/cloud/CloudExclude'
 import {
   Button,
+  ButtonRef,
   IconFont,
   ComponentSize,
   ComponentColor,
@@ -20,56 +21,61 @@ interface Props {
 }
 
 export default class BucketAddDataButton extends PureComponent<Props> {
+  private triggerRef: RefObject<ButtonRef> = createRef()
+
   public render() {
     const {onAddCollector, onAddLineProtocol, onAddScraper} = this.props
 
     return (
-      <Popover
-        color={ComponentColor.Secondary}
-        type={PopoverType.Outline}
-        position={PopoverPosition.ToTheRight}
-        distanceFromTrigger={8}
-        contents={onHide => (
-          <div className="bucket-add-data" onClick={onHide}>
-            <div className="bucket-add-data--option" onClick={onAddCollector}>
-              <div className="bucket-add-data--option-header">
-                Configure Telegraf Agent
-              </div>
-              <div className="bucket-add-data--option-desc">
-                Configure a Telegraf agent to push data into your bucket.
-              </div>
-            </div>
-            <div
-              className="bucket-add-data--option"
-              onClick={onAddLineProtocol}
-            >
-              <div className="bucket-add-data--option-header">
-                Line Protocol
-              </div>
-              <div className="bucket-add-data--option-desc">
-                Quickly load an existing line protocol file.
-              </div>
-            </div>
-            <CloudExclude>
-              <div className="bucket-add-data--option" onClick={onAddScraper}>
+      <>
+        <Popover
+          color={ComponentColor.Secondary}
+          type={PopoverType.Outline}
+          position={PopoverPosition.ToTheRight}
+          triggerRef={this.triggerRef}
+          distanceFromTrigger={8}
+          contents={onHide => (
+            <div className="bucket-add-data" onClick={onHide}>
+              <div className="bucket-add-data--option" onClick={onAddCollector}>
                 <div className="bucket-add-data--option-header">
-                  Scrape Metrics
+                  Configure Telegraf Agent
                 </div>
                 <div className="bucket-add-data--option-desc">
-                  Add a scrape target to pull data into your bucket.
+                  Configure a Telegraf agent to push data into your bucket.
                 </div>
               </div>
-            </CloudExclude>
-          </div>
-        )}
-      >
+              <div
+                className="bucket-add-data--option"
+                onClick={onAddLineProtocol}
+              >
+                <div className="bucket-add-data--option-header">
+                  Line Protocol
+                </div>
+                <div className="bucket-add-data--option-desc">
+                  Quickly load an existing line protocol file.
+                </div>
+              </div>
+              <CloudExclude>
+                <div className="bucket-add-data--option" onClick={onAddScraper}>
+                  <div className="bucket-add-data--option-header">
+                    Scrape Metrics
+                  </div>
+                  <div className="bucket-add-data--option-desc">
+                    Add a scrape target to pull data into your bucket.
+                  </div>
+                </div>
+              </CloudExclude>
+            </div>
+          )}
+        />
         <Button
+          ref={this.triggerRef}
           text="Add Data"
           icon={IconFont.Plus}
           size={ComponentSize.ExtraSmall}
           color={ComponentColor.Secondary}
         />
-      </Popover>
+      </>
     )
   }
 }

ui/src/buckets/components/BucketsTab.tsx

@@ -198,10 +198,9 @@ class BucketsTab extends PureComponent<Props, State> {
     if (_.isEmpty(searchTerm)) {
       return (
         <EmptyState size={ComponentSize.Large}>
-          <EmptyState.Text
-            text={`Looks like there aren't any Buckets, why not create one?`}
-            highlightWords={['Buckets']}
-          />
+          <EmptyState.Text>
+            Looks like there aren't any <b>Buckets</b>, why not create one?
+          </EmptyState.Text>
           <Button
             text="Create Bucket"
             icon={IconFont.Plus}
@@ -214,7 +213,7 @@ class BucketsTab extends PureComponent<Props, State> {
 
     return (
       <EmptyState size={ComponentSize.Large}>
-        <EmptyState.Text text="No Buckets match your query" />
+        <EmptyState.Text>No Buckets match your query</EmptyState.Text>
       </EmptyState>
     )
   }

ui/src/clientLibraries/components/ClientLibraries.tsx

@@ -51,8 +51,9 @@ const ClientLibraries: FunctionComponent<Props> = ({orgID, router}) => {
                   testID={`client-libraries-cards--${cl.id}`}
                   selected={false}
                   onClick={handleClick}
-                  image={createElement(cl.image)}
-                />
+                >
+                  {createElement(cl.image)}
+                </SelectableCard>
               )
             })}
           </ResponsiveGridSizer>

ui/src/dashboards/components/DashboardHeader.tsx

@@ -75,7 +75,7 @@ export default class DashboardHeader extends Component<Props> {
 
     return (
       <Page.Header fullWidth={true}>
-        <Page.Header.Left>
+        <Page.HeaderLeft>
           <RenamablePageTitle
             prefix={_.get(org, 'name', '')}
             maxLength={DASHBOARD_NAME_MAX_LENGTH}
@@ -83,8 +83,8 @@ export default class DashboardHeader extends Component<Props> {
             name={activeDashboard}
             placeholder={DEFAULT_DASHBOARD_NAME}
           />
-        </Page.Header.Left>
-        <Page.Header.Right>
+        </Page.HeaderLeft>
+        <Page.HeaderRight>
           <GraphTips />
           <Button
             icon={IconFont.AddCell}
@@ -127,7 +127,7 @@ export default class DashboardHeader extends Component<Props> {
             titleText="Enter Presentation Mode"
             onClick={this.handleClickPresentationButton}
           />
-        </Page.Header.Right>
+        </Page.HeaderRight>
       </Page.Header>
     )
   }

ui/src/dashboards/components/DashboardsCardGrid.scss

@@ -14,7 +14,7 @@
       margin-bottom: 0;
    }
 
-   .resource-description {
+   .cf-resource-description {
       height: 60px;
       overflow: hidden;
    }

ui/src/dashboards/components/VEOHeader.tsx

@@ -33,7 +33,7 @@ class VEOHeader extends PureComponent<Props> {
     const {name, onSetName, onCancel, onSave} = this.props
     return (
       <Page.Header fullWidth={true}>
-        <Page.Header.Left>
+        <Page.HeaderLeft>
           <RenamablePageTitle
             name={name}
             onRename={onSetName}
@@ -41,8 +41,8 @@ class VEOHeader extends PureComponent<Props> {
             maxLength={CELL_NAME_MAX_LENGTH}
             onClickOutside={this.handleClickOutsideTitle}
           />
-        </Page.Header.Left>
-        <Page.Header.Right>
+        </Page.HeaderLeft>
+        <Page.HeaderRight>
           <ViewTypeDropdown />
           <VisOptionsButton />
           <SquareButton
@@ -58,7 +58,7 @@ class VEOHeader extends PureComponent<Props> {
             onClick={onSave}
             testID="save-cell--button"
           />
-        </Page.Header.Right>
+        </Page.HeaderRight>
       </Page.Header>
     )
   }

ui/src/dashboards/components/dashboard_empty/DashboardEmpty.tsx

@@ -22,11 +22,9 @@ class DashboardEmpty extends Component<Props> {
     return (
       <div className="dashboard-empty">
         <EmptyState size={ComponentSize.Large}>
-          <EmptyState.Text
-            text="This Dashboard doesn't have any Cells , why not add
-          one?"
-            highlightWords={['Cells']}
-          />
+          <EmptyState.Text>
+            This Dashboard doesn't have any <b>Cells</b>, why not add one?
+          </EmptyState.Text>
           <Button
             text="Add Cell"
             size={ComponentSize.Medium}

ui/src/dashboards/components/dashboard_index/DashboardsIndex.tsx

@@ -81,10 +81,10 @@ class DashboardIndex extends PureComponent<Props, State> {
           titleTag={pageTitleSuffixer(['Dashboards'])}
         >
           <Page.Header fullWidth={false}>
-            <Page.Header.Left>
+            <Page.HeaderLeft>
               <PageTitleWithOrg title="Dashboards" />
-            </Page.Header.Left>
-            <Page.Header.Right>
+            </Page.HeaderLeft>
+            <Page.HeaderRight>
               <AddResourceDropdown
                 onSelectNew={createDashboard}
                 onSelectImport={this.summonImportOverlay}
@@ -93,7 +93,7 @@ class DashboardIndex extends PureComponent<Props, State> {
                 canImportFromTemplate={true}
                 status={this.addResourceStatus}
               />
-            </Page.Header.Right>
+            </Page.HeaderRight>
           </Page.Header>
           <Page.Contents fullWidth={false} scrollable={true}>
             <GetResources resource={ResourceType.Dashboards}>

ui/src/dashboards/components/dashboard_index/Table.tsx

@@ -119,17 +119,18 @@ class DashboardsTable extends PureComponent<Props, State> {
     if (searchTerm) {
       return (
         <EmptyState size={ComponentSize.Large} testID="empty-dashboards-list">
-          <EmptyState.Text text="No Dashboards match your search term" />
+          <EmptyState.Text>
+            No Dashboards match your search term
+          </EmptyState.Text>
         </EmptyState>
       )
     }
 
     return (
       <EmptyState size={ComponentSize.Large} testID="empty-dashboards-list">
-        <EmptyState.Text
-          text="Looks like you don’t have any Dashboards , why not create one?"
-          highlightWords={['Dashboards']}
-        />
+        <EmptyState.Text>
+          Looks like you don’t have any <b>Dashboards</b>, why not create one?
+        </EmptyState.Text>
         <AddResourceDropdown
           onSelectNew={onCreateDashboard}
           onSelectImport={onImportDashboard}

ui/src/dashboards/components/variablesControlBar/VariableDropdown.tsx

@@ -53,7 +53,7 @@ class VariableDropdown extends PureComponent<Props> {
       <div className="variable-dropdown">
         {/* TODO: Add variable description to title attribute when it is ready */}
         <Dropdown
-          widthPixels={140}
+          style={{width: `${140}px`}}
           className="variable-dropdown--dropdown"
           testID="variable-dropdown"
           button={(active, onClick) => (

ui/src/dashboards/components/variablesControlBar/VariablesControlBar.tsx

@@ -94,7 +94,9 @@ class VariablesControlBar extends PureComponent<Props, State> {
         size={ComponentSize.ExtraSmall}
         className="variables-control-bar--empty"
       >
-        <EmptyState.Text text="To see variable controls here, use a variable in a cell query" />
+        <EmptyState.Text>
+          To see variable controls here, use a variable in a cell query
+        </EmptyState.Text>
       </EmptyState>
     )
   }

ui/src/dataExplorer/components/DataExplorerPage.tsx

@@ -21,16 +21,16 @@ const DataExplorerPage: SFC = ({children}) => {
       {children}
       <GetResources resource={ResourceType.Variables}>
         <Page.Header fullWidth={true}>
-          <Page.Header.Left>
+          <Page.HeaderLeft>
             <PageTitleWithOrg title="Data Explorer" />
-          </Page.Header.Left>
-          <Page.Header.Right>
+          </Page.HeaderLeft>
+          <Page.HeaderRight>
             <DeleteDataButton />
             <TimeZoneDropdown />
             <ViewTypeDropdown />
             <VisOptionsButton />
             <SaveAsButton />
-          </Page.Header.Right>
+          </Page.HeaderRight>
         </Page.Header>
         <Page.Contents fullWidth={true} scrollable={false}>
           <DataExplorer />

ui/src/dataLoaders/components/collectorsWizard/select/StreamingSelector.tsx

@@ -10,6 +10,7 @@ import {
   FormElement,
   Grid,
   SelectableCard,
+  IconFont,
 } from '@influxdata/clockface'
 import {ResponsiveGridSizer} from 'src/clockface'
 import {ErrorHandling} from 'src/shared/decorators/errors'
@@ -24,7 +25,7 @@ import BucketDropdown from 'src/dataLoaders/components/BucketsDropdown'
 // Types
 import {TelegrafPlugin, BundleName} from 'src/types/dataLoaders'
 import {Bucket} from 'src/types'
-import {IconFont, Columns, ComponentSize} from '@influxdata/clockface'
+import {Columns, ComponentSize} from '@influxdata/clockface'
 
 export interface Props {
   buckets: Bucket[]
@@ -106,8 +107,10 @@ class StreamingSelector extends PureComponent<Props, State> {
                 testID={`telegraf-plugins--${b}`}
                 selected={this.isCardChecked(b)}
                 onClick={this.handleToggle}
-                image={createElement(BUNDLE_LOGOS[b])}
-              />
+                icon={IconFont.Checkmark}
+              >
+                {createElement(BUNDLE_LOGOS[b])}
+              </SelectableCard>
             )
           })}
         </ResponsiveGridSizer>
@@ -134,7 +137,7 @@ class StreamingSelector extends PureComponent<Props, State> {
     if (searchTerm && noMatches) {
       return (
         <EmptyState size={ComponentSize.Medium}>
-          <EmptyState.Text text="No plugins match your search" />
+          <EmptyState.Text>No plugins match your search</EmptyState.Text>
         </EmptyState>
       )
     }

ui/src/dataLoaders/components/lineProtocolWizard/configure/PrecisionDropdown.tsx

@@ -34,7 +34,7 @@ class PrecisionDropdown extends PureComponent<Props> {
       <div className="wizard-step--lp-precision">
         <label>Time Precision</label>
         <Dropdown
-          widthPixels={200}
+          style={{width: '200px'}}
           className="wizard-step--lp-precision"
           button={(active, onClick) => (
             <Dropdown.Button active={active} onClick={onClick}>

ui/src/dataLoaders/components/lineProtocolWizard/configure/__snapshots__/LineProtocol.test.tsx.snap

@@ -6,8 +6,6 @@ exports[`LineProtocol rendering renders! 1`] = `
 >
   <Form
     onSubmit={[Function]}
-    preventDefault={true}
-    testID="form-container"
   >
     <FancyScrollbar
       autoHeight={false}

ui/src/dataLoaders/components/lineProtocolWizard/configure/__snapshots__/LineProtocolTabs.test.tsx.snap

@@ -12,16 +12,11 @@ exports[`LineProtocolTabs rendering renders! 1`] = `
       ]
     }
   />
-  <Grid
-    testID="grid"
-  >
-    <GridRow
-      testID="grid--row"
-    >
+  <Grid>
+    <GridRow>
       <GridColumn
         offsetLG={2}
         offsetMD={1}
-        testID="grid--column"
         widthLG={8}
         widthMD={10}
         widthXS={12}

ui/src/dataLoaders/components/lineProtocolWizard/verify/__snapshots__/StatusIndicator.test.tsx.snap

@@ -10,8 +10,6 @@ exports[`StatusIndicator rendering renders! 1`] = `
     >
       <SparkleSpinner
         loading="NotStarted"
-        sizePixels={100}
-        testID="sparkle-spinner"
       />
     </div>
   </div>

ui/src/dataLoaders/components/side_bar/__snapshots__/SideBarButton.test.tsx.snap

@@ -2,17 +2,11 @@
 
 exports[`SideBarButton rendering renders! wee! 1`] = `
 <Button
-  active={false}
   className="side-bar--button"
   color="secondary"
   onClick={[MockFunction]}
-  placeIconAfterText={false}
-  shape="none"
   size="sm"
-  status="default"
-  testID="button"
   text="text"
   titleText="titleText"
-  type="button"
 />
 `;

ui/src/labels/components/LabelsTab.tsx

@@ -164,17 +164,16 @@ class Labels extends PureComponent<Props, State> {
     if (searchTerm) {
       return (
         <EmptyState size={ComponentSize.Medium}>
-          <EmptyState.Text text="No Labels match your search term" />
+          <EmptyState.Text>No Labels match your search term</EmptyState.Text>
         </EmptyState>
       )
     }
 
     return (
       <EmptyState size={ComponentSize.Medium}>
-        <EmptyState.Text
-          text="Looks like you haven't created any Labels , why not create one?"
-          highlightWords={['Labels']}
-        />
+        <EmptyState.Text>
+          Looks like you haven't created any <b>Labels</b>, why not create one?
+        </EmptyState.Text>
         <Button
           text="Create Label"
           color={ComponentColor.Primary}

ui/src/labels/utils/index.ts

@@ -12,7 +12,7 @@ export const validateLabelUniqueness = (
   name: string
 ): string | null => {
   if (!name) {
-    return null
+    return 'Label name is required'
   }
 
   if (name.trim() === '') {

ui/src/me/components/DashboardsList.tsx

@@ -24,7 +24,7 @@ class DashboardList extends PureComponent<Props> {
     if (this.isEmpty) {
       return (
         <EmptyState size={ComponentSize.ExtraSmall}>
-          <EmptyState.Text text="You don't have any Dashboards" />
+          <EmptyState.Text>You don't have any Dashboards</EmptyState.Text>
         </EmptyState>
       )
     }

ui/src/me/components/UserPageHeader.tsx

@@ -16,8 +16,8 @@ export default class UserPageHeader extends PureComponent<Props> {
   public render() {
     return (
       <Page.Header fullWidth={false}>
-        <Page.Header.Left>{this.title}</Page.Header.Left>
-        <Page.Header.Right />
+        <Page.HeaderLeft>{this.title}</Page.HeaderLeft>
+        <Page.HeaderRight />
       </Page.Header>
     )
   }

ui/src/me/components/account/__snapshots__/Settings.test.tsx.snap

@@ -13,210 +13,192 @@ exports[`Account rendering renders! 1`] = `
     }
   }
 >
-  <Grid
-    testID="grid"
-  >
-    <div
-      className="cf-grid--container"
-      data-testid="grid"
-    >
-      <GridRow
-        testID="grid--row"
+  <Grid>
+    <Grid>
+      <div
+        className="cf-grid--container"
+        data-testid="grid"
       >
-        <div
-          className="cf-grid--row"
-          data-testid="grid--row"
-        >
-          <GridColumn
-            testID="grid--column"
-            widthXS={6}
+        <GridRow>
+          <div
+            className="cf-grid--row"
+            data-testid="grid--row"
           >
-            <div
-              className="cf-grid--column cf-col-xs-6"
-              data-testid="grid--column"
+            <GridColumn
+              widthXS={6}
             >
-              <Panel
-                backgroundColor="#292933"
-                size="sm"
-                testID="panel"
+              <div
+                className="cf-grid--column cf-col-xs-6"
+                data-testid="grid--column"
               >
-                <div
-                  className="cf-panel cf-panel--sm cf-panel__light-text"
-                  data-testid="panel"
-                  style={
-                    Object {
-                      "backgroundColor": "#292933",
-                    }
-                  }
-                >
-                  <PanelHeader
-                    alignItems="center"
-                    flexDirection="row"
-                    justifyContent="space-between"
-                    testID="panel--header"
-                  >
+                <Panel>
+                  <Panel>
                     <div
-                      className="cf-panel--header"
-                      data-testid="panel--header"
+                      className="cf-panel cf-panel__light-text"
+                      data-testid="panel"
+                      style={
+                        Object {
+                          "backgroundColor": "#292933",
+                        }
+                      }
                     >
-                      <FlexBox
-                        alignItems="center"
-                        direction="row"
-                        justifyContent="space-between"
-                        stretchToFitHeight={false}
-                        stretchToFitWidth={true}
-                        testID="flex-box"
-                      >
+                      <PanelHeader>
                         <div
-                          className="cf-flex-box cf-flex-box__row cf-flex-box__justify-space-between cf-flex-box__align-center cf-flex-box__stretch-w"
-                          data-testid="flex-box"
+                          className="cf-panel--header cf-panel--header__sm"
+                          data-testid="panel--header"
                         >
-                          <PanelTitle
-                            testID="panel--title"
+                          <FlexBox
+                            alignItems="center"
+                            direction="row"
+                            justifyContent="space-between"
+                            stretchToFitWidth={true}
                           >
-                            <div
-                              className="cf-panel--title"
-                              data-testid="panel--title"
+                            <FlexBox
+                              alignItems="center"
+                              direction="row"
+                              justifyContent="space-between"
+                              stretchToFitWidth={true}
                             >
-                              About Me
-                            </div>
-                          </PanelTitle>
-                          <Button
-                            active={false}
-                            color="default"
-                            placeIconAfterText={false}
-                            shape="none"
-                            size="sm"
-                            status="default"
-                            testID="button"
-                            text="Edit About Me"
-                            type="button"
-                          >
-                            <ButtonBase
-                              active={false}
-                              color="default"
-                              shape="none"
-                              size="sm"
-                              status="default"
-                              tabIndex={0}
-                              testID="button"
-                              titleText="Edit About Me"
-                              type="button"
-                            >
-                              <button
-                                className="cf-button cf-button-sm cf-button-default"
-                                data-testid="button"
-                                disabled={false}
-                                tabIndex={0}
-                                title="Edit About Me"
-                                type="button"
+                              <div
+                                className="cf-flex-box cf-flex-box__row cf-flex-box__justify-space-between cf-flex-box__align-center cf-flex-box__stretch-w"
+                                data-testid="flex-box"
                               >
-                                <span
-                                  className="cf-button--label"
-                                >
-                                  Edit About Me
-                                </span>
-                              </button>
-                            </ButtonBase>
-                          </Button>
-                        </div>
-                      </FlexBox>
-                    </div>
-                  </PanelHeader>
-                  <PanelBody
-                    testID="panel--body"
-                  >
-                    <div
-                      className="cf-panel--body"
-                      data-testid="panel--body"
-                    >
-                      <Form
-                        preventDefault={true}
-                        testID="form-container"
-                      >
-                        <form
-                          className="cf-form--wrapper"
-                          data-testid="form-container"
-                          onSubmit={[Function]}
-                        >
-                          <FormElement
-                            label="Username"
-                            testID="form--element"
-                          >
-                            <div
-                              className="cf-form--element"
-                              data-testid="form--element"
-                            >
-                              <FormLabel
-                                label="Username"
-                                testID="form--label"
-                              >
-                                <label
-                                  className="cf-form--label"
-                                  data-testid="form--label"
-                                >
-                                  <span>
-                                    Username
-                                  </span>
-                                </label>
-                              </FormLabel>
-                              <Input
-                                autoFocus={false}
-                                autocomplete="off"
-                                disabledTitleText="This input is disabled"
-                                name=""
-                                onChange={[Function]}
-                                placeholder=""
-                                required={false}
-                                size="sm"
-                                spellCheck={false}
-                                status="disabled"
-                                testID="nameInput"
-                                titleText="Username"
-                                type="text"
-                                value="groot"
-                              >
-                                <div
-                                  className="cf-input cf-input-sm cf-input__disabled"
-                                  style={
-                                    Object {
-                                      "width": "100%",
-                                    }
-                                  }
-                                >
-                                  <input
-                                    autoComplete="off"
-                                    autoFocus={false}
-                                    className="cf-input-field"
-                                    data-testid="nameInput"
-                                    disabled={true}
-                                    name=""
-                                    onChange={[Function]}
-                                    placeholder=""
-                                    required={false}
-                                    spellCheck={false}
-                                    title="This input is disabled"
-                                    type="text"
-                                    value="groot"
-                                  />
+                                <PanelTitle>
                                   <div
-                                    className="cf-input-shadow"
-                                  />
-                                </div>
-                              </Input>
-                            </div>
-                          </FormElement>
-                        </form>
-                      </Form>
+                                    className="cf-panel--title cf-panel--title__sm"
+                                    data-testid="panel--title"
+                                  >
+                                    About Me
+                                  </div>
+                                </PanelTitle>
+                                <Button
+                                  text="Edit About Me"
+                                >
+                                  <ButtonBase
+                                    active={false}
+                                    color="default"
+                                    shape="none"
+                                    size="sm"
+                                    status="default"
+                                    tabIndex={0}
+                                    testID="button"
+                                    titleText="Edit About Me"
+                                    type="button"
+                                  >
+                                    <button
+                                      className="cf-button cf-button-sm cf-button-default"
+                                      data-testid="button"
+                                      disabled={false}
+                                      tabIndex={0}
+                                      title="Edit About Me"
+                                      type="button"
+                                    >
+                                      <X
+                                        icon=""
+                                        placeIconAfterText={false}
+                                        text="Edit About Me"
+                                      >
+                                        <span
+                                          className="cf-button--label"
+                                        >
+                                          Edit About Me
+                                        </span>
+                                      </X>
+                                    </button>
+                                  </ButtonBase>
+                                </Button>
+                              </div>
+                            </FlexBox>
+                          </FlexBox>
+                        </div>
+                      </PanelHeader>
+                      <PanelBody>
+                        <div
+                          className="cf-panel--body cf-panel--body__sm"
+                          data-testid="panel--body"
+                        >
+                          <Form>
+                            <Form>
+                              <form
+                                className="cf-form--wrapper"
+                                data-testid="form-container"
+                                onSubmit={[Function]}
+                              >
+                                <FormElement
+                                  label="Username"
+                                >
+                                  <div
+                                    className="cf-form--element"
+                                    data-testid="form--element"
+                                  >
+                                    <FormLabel
+                                      label="Username"
+                                    >
+                                      <label
+                                        className="cf-form--label"
+                                        data-testid="form--label"
+                                      >
+                                        <span>
+                                          Username
+                                        </span>
+                                      </label>
+                                    </FormLabel>
+                                    <Input
+                                      onChange={[Function]}
+                                      size="sm"
+                                      status="disabled"
+                                      testID="nameInput"
+                                      titleText="Username"
+                                      value="groot"
+                                    >
+                                      <div
+                                        className="cf-input cf-input-sm cf-input__disabled"
+                                        style={
+                                          Object {
+                                            "width": "100%",
+                                          }
+                                        }
+                                      >
+                                        <input
+                                          autoComplete="off"
+                                          autoFocus={false}
+                                          className="cf-input-field"
+                                          data-testid="nameInput"
+                                          disabled={true}
+                                          name=""
+                                          onChange={[Function]}
+                                          placeholder=""
+                                          required={false}
+                                          spellCheck={false}
+                                          title="This input is disabled"
+                                          type="text"
+                                          value="groot"
+                                        />
+                                        <ye
+                                          status="disabled"
+                                        >
+                                          <div
+                                            className="cf-input-shadow"
+                                          />
+                                        </ye>
+                                      </div>
+                                    </Input>
+                                  </div>
+                                </FormElement>
+                              </form>
+                            </Form>
+                          </Form>
+                        </div>
+                      </PanelBody>
                     </div>
-                  </PanelBody>
-                </div>
-              </Panel>
-            </div>
-          </GridColumn>
-        </div>
-      </GridRow>
-    </div>
+                  </Panel>
+                </Panel>
+              </div>
+            </GridColumn>
+          </div>
+        </GridRow>
+      </div>
+    </Grid>
   </Grid>
 </Settings>
 `;

ui/src/members/components/AddMembersForm.tsx

@@ -51,7 +51,7 @@ export default class AddMembersForm extends PureComponent<Props> {
                 <Input
                   icon={IconFont.Search}
                   placeholder="Filter users..."
-                  widthPixels={200}
+                  style={{width: '200px'}}
                   value={searchTerm}
                   onChange={onFilterChange}
                   onBlur={onFilterBlur}

ui/src/members/components/Members.tsx

@@ -116,17 +116,16 @@ class Members extends PureComponent<Props & WithRouterProps, State> {
     if (_.isEmpty(searchTerm)) {
       return (
         <EmptyState size={ComponentSize.Medium}>
-          <EmptyState.Text
-            text={`Looks like there aren't any Members , why not invite some?`}
-            highlightWords={['Members']}
-          />
+          <EmptyState.Text>
+            Looks like there aren't any <b>Members</b>, why not invite some?
+          </EmptyState.Text>
         </EmptyState>
       )
     }
 
     return (
       <EmptyState size={ComponentSize.Medium}>
-        <EmptyState.Text text="No Members match your query" />
+        <EmptyState.Text>No Members match your query</EmptyState.Text>
       </EmptyState>
     )
   }

ui/src/members/components/__snapshots__/Members.test.tsx.snap

@@ -1,29 +1,22 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`MemberList rendering renders 1`] = `
-<ResourceList
-  testID="resource-list"
->
-  <ResourceListHeader
-    testID="resource-list--header"
-  >
+<ResourceList>
+  <ResourceListHeader>
     <ResourceListSorter
       name="Username"
       sort="none"
       sortKey="name"
-      testID="resource-list--sorter"
     />
     <ResourceListSorter
       name="Role"
       sort="none"
       sortKey="role"
-      testID="resource-list--sorter"
     />
   </ResourceListHeader>
   <ResourceListBody
     data-testid="members-list"
     emptyState={<React.Fragment />}
-    testID="resource-list--body"
   >
     <MemberCard
       key="1"

ui/src/onboarding/components/AdminStep.tsx

@@ -3,8 +3,7 @@ import React, {PureComponent, ChangeEvent} from 'react'
 import {getDeep} from 'src/utils/wrappers'
 
 // Components
-import {Form, Input, Grid} from '@influxdata/clockface'
-import QuestionMarkTooltip from 'src/shared/components/question_mark_tooltip/QuestionMarkTooltip'
+import {Form, Input, Grid, QuestionMarkTooltip} from '@influxdata/clockface'
 import OnboardingButtons from 'src/onboarding/components/OnboardingButtons'
 
 // Actions
@@ -18,6 +17,7 @@ import {
   InputType,
   ComponentSize,
   ComponentStatus,
+  ComponentColor,
 } from '@influxdata/clockface'
 import {StepStatus} from 'src/clockface/constants/wizard'
 import {OnboardingStepProps} from 'src/onboarding/containers/OnboardingWizard'
@@ -244,8 +244,12 @@ class AdminStep extends PureComponent<Props, State> {
   private orgTip = (): JSX.Element => {
     return (
       <QuestionMarkTooltip
+        diameter={16}
+        style={{marginLeft: '8px'}}
+        color={ComponentColor.Primary}
         testID="admin_org_tooltip"
-        tipContent="An organization is a workspace for a group of users requiring access to time series data, dashboards, and other resources.
+        tooltipStyle={{width: '300px'}}
+        tooltipContents="An organization is a workspace for a group of users requiring access to time series data, dashboards, and other resources.
         You can create organizations for different functional groups, teams, or projects."
       />
     )
@@ -254,8 +258,12 @@ class AdminStep extends PureComponent<Props, State> {
   private bucketTip = (): JSX.Element => {
     return (
       <QuestionMarkTooltip
+        diameter={16}
+        style={{marginLeft: '8px'}}
+        color={ComponentColor.Primary}
         testID="admin_bucket_tooltip"
-        tipContent="A bucket is where your time series data is stored with a retention policy."
+        tooltipStyle={{width: '300px'}}
+        tooltipContents="A bucket is where your time series data is stored with a retention policy."
       />
     )
   }

ui/src/onboarding/components/OnboardingButtons.tsx

@@ -62,7 +62,7 @@ class OnboardingButtons extends PureComponent<Props> {
             size={ComponentSize.Medium}
             type={ButtonType.Submit}
             testID="next"
-            refObject={this.submitRef}
+            ref={this.submitRef}
             status={nextButtonStatus}
             tabIndex={0}
           />

ui/src/onboarding/components/__snapshots__/AdminStep.test.tsx.snap

@@ -6,8 +6,6 @@ exports[`Onboarding.Components.AdminStep renders 1`] = `
 >
   <Form
     onSubmit={[Function]}
-    preventDefault={true}
-    testID="form-container"
   >
     <div
       className="wizard-step--scroll-area"
@@ -27,62 +25,42 @@ exports[`Onboarding.Components.AdminStep renders 1`] = `
         >
           You will be able to create additional Users, Buckets and Organizations later
         </h5>
-        <Grid
-          testID="grid"
-        >
-          <GridRow
-            testID="grid--row"
-          >
+        <Grid>
+          <GridRow>
             <GridColumn
               offsetMD={1}
-              testID="grid--column"
               widthMD={10}
               widthXS={12}
             >
               <FormElement
                 label="Username"
-                testID="form--element"
               >
                 <Input
                   autoFocus={true}
-                  autocomplete="off"
                   disabledTitleText="Username has been set"
                   icon={null}
-                  name=""
                   onChange={[Function]}
-                  placeholder=""
-                  required={false}
                   size="md"
-                  spellCheck={false}
                   status="default"
                   testID="input-field--username"
                   titleText="Username"
-                  type="text"
                   value=""
                 />
               </FormElement>
             </GridColumn>
             <GridColumn
               offsetMD={1}
-              testID="grid--column"
               widthMD={5}
               widthXS={6}
             >
               <FormElement
                 label="Password"
-                testID="form--element"
               >
                 <Input
-                  autoFocus={false}
-                  autocomplete="off"
                   disabledTitleText="Password has been set"
                   icon={null}
-                  name=""
                   onChange={[Function]}
-                  placeholder=""
-                  required={false}
                   size="md"
-                  spellCheck={false}
                   status="default"
                   testID="input-field--password"
                   titleText="Password"
@@ -92,26 +70,18 @@ exports[`Onboarding.Components.AdminStep renders 1`] = `
               </FormElement>
             </GridColumn>
             <GridColumn
-              testID="grid--column"
               widthMD={5}
               widthXS={6}
             >
               <FormElement
                 errorMessage={false}
                 label="Confirm Password"
-                testID="form--element"
               >
                 <Input
-                  autoFocus={false}
-                  autocomplete="off"
                   disabledTitleText="password has been set"
                   icon={null}
-                  name=""
                   onChange={[Function]}
-                  placeholder=""
-                  required={false}
                   size="md"
-                  spellCheck={false}
                   status="default"
                   testID="input-field--password-chk"
                   titleText="Confirm Password"
@@ -122,7 +92,6 @@ exports[`Onboarding.Components.AdminStep renders 1`] = `
             </GridColumn>
             <GridColumn
               offsetMD={1}
-              testID="grid--column"
               widthMD={10}
               widthXS={12}
             >
@@ -132,27 +101,20 @@ exports[`Onboarding.Components.AdminStep renders 1`] = `
                 testID="form-elem--orgname"
               >
                 <Input
-                  autoFocus={false}
-                  autocomplete="off"
                   disabledTitleText="Initial organization name has been set"
                   icon={null}
-                  name=""
                   onChange={[Function]}
                   placeholder="An organization is a workspace for a group of users."
-                  required={false}
                   size="md"
-                  spellCheck={false}
                   status="default"
                   testID="input-field--orgname"
                   titleText="Initial Organization Name"
-                  type="text"
                   value=""
                 />
               </FormElement>
             </GridColumn>
             <GridColumn
               offsetMD={1}
-              testID="grid--column"
               widthMD={10}
               widthXS={12}
             >
@@ -162,20 +124,14 @@ exports[`Onboarding.Components.AdminStep renders 1`] = `
                 testID="form-elem--bucketname"
               >
                 <Input
-                  autoFocus={false}
-                  autocomplete="off"
                   disabledTitleText="Initial bucket name has been set"
                   icon={null}
-                  name=""
                   onChange={[Function]}
                   placeholder="A bucket is where your time series data is stored with a retention policy."
-                  required={false}
                   size="md"
-                  spellCheck={false}
                   status="default"
                   testID="input-field--bucketname"
                   titleText="Initial Bucket Name"
-                  type="text"
                   value=""
                 />
               </FormElement>

ui/src/onboarding/components/__snapshots__/CompletionStep.test.tsx.snap

@@ -40,14 +40,9 @@ exports[`Onboarding.Components.CompletionStep renders 1`] = `
         <dl
           className="wizard-completion--options"
         >
-          <Grid
-            testID="grid"
-          >
-            <GridRow
-              testID="grid--row"
-            >
+          <Grid>
+            <GridRow>
               <GridColumn
-                testID="grid--column"
                 widthSM={4}
                 widthXS={12}
               >
@@ -68,7 +63,6 @@ exports[`Onboarding.Components.CompletionStep renders 1`] = `
                 </div>
               </GridColumn>
               <GridColumn
-                testID="grid--column"
                 widthSM={4}
                 widthXS={12}
               >
@@ -89,7 +83,6 @@ exports[`Onboarding.Components.CompletionStep renders 1`] = `
                 </div>
               </GridColumn>
               <GridColumn
-                testID="grid--column"
                 widthSM={4}
                 widthXS={12}
               >
@@ -97,16 +90,11 @@ exports[`Onboarding.Components.CompletionStep renders 1`] = `
                   className="wizard-completion--option"
                 >
                   <Button
-                    active={false}
                     color="success"
                     onClick={[MockFunction]}
-                    placeIconAfterText={false}
-                    shape="none"
                     size="lg"
-                    status="default"
                     testID="button--conf-later"
                     text="Configure Later"
-                    type="button"
                   />
                   <dt>
                     I've got this...

ui/src/onboarding/containers/OnboardingWizardPage.tsx

@@ -81,10 +81,10 @@ export class OnboardingWizardPage extends PureComponent<Props, State> {
             <div className="wizard-contents">
               <div className="wizard-step--container">
                 <EmptyState size={ComponentSize.Large}>
-                  <EmptyState.Text
-                    text="Initial  User  is already set up, nothing to see here folks!"
-                    highlightWords={['Initial', 'User']}
-                  />
+                  <EmptyState.Text>
+                    <b>Initial User</b> is already set up, nothing to see here
+                    folks!
+                  </EmptyState.Text>
                   <Button
                     text="Return to Home Page"
                     onClick={this.redirectToHome}

ui/src/organizations/components/OrgProfileTab.tsx

@@ -29,20 +29,21 @@ type Props = WithRouterProps
 class OrgProfileTab extends PureComponent<Props> {
   public render() {
     return (
-      <Panel size={ComponentSize.Small} backgroundColor={InfluxColors.Onyx}>
-        <Panel.Header>
-          <Panel.Title>Organization Profile</Panel.Title>
+      <Panel backgroundColor={InfluxColors.Onyx}>
+        <Panel.Header size={ComponentSize.Small}>
+          <Panel.Title size={ComponentSize.Small}>
+            Organization Profile
+          </Panel.Title>
         </Panel.Header>
-        <Panel.Body>
+        <Panel.Body size={ComponentSize.Small}>
           <Form onSubmit={this.handleShowEditOverlay}>
-            <Panel
-              gradient={Gradients.DocScott}
-              size={ComponentSize.ExtraSmall}
-            >
-              <Panel.Header>
-                <Panel.Title>Danger Zone!</Panel.Title>
+            <Panel gradient={Gradients.DocScott}>
+              <Panel.Header size={ComponentSize.ExtraSmall}>
+                <Panel.Title size={ComponentSize.ExtraSmall}>
+                  Danger Zone!
+                </Panel.Title>
               </Panel.Header>
-              <Panel.Body>
+              <Panel.Body size={ComponentSize.ExtraSmall}>
                 <FlexBox
                   stretchToFitWidth={true}
                   alignItems={AlignItems.Center}

ui/src/scrapers/components/Scrapers.tsx

@@ -148,10 +148,9 @@ class Scrapers extends PureComponent<Props, State> {
     if (_.isEmpty(searchTerm)) {
       return (
         <EmptyState size={ComponentSize.Large}>
-          <EmptyState.Text
-            text={`${orgName} does not own any Scrapers , why not create one?`}
-            highlightWords={['Scrapers']}
-          />
+          <EmptyState.Text>
+            {`${orgName}`} does not own any <b>Scrapers</b>, why not create one?
+          </EmptyState.Text>
           {this.createScraperButton('create-scraper-button-empty')}
         </EmptyState>
       )
@@ -159,7 +158,7 @@ class Scrapers extends PureComponent<Props, State> {
 
     return (
       <EmptyState size={ComponentSize.Large}>
-        <EmptyState.Text text="No Scrapers match your query" />
+        <EmptyState.Text>No Scrapers match your query</EmptyState.Text>
       </EmptyState>
     )
   }

ui/src/scrapers/components/__snapshots__/Scrapers.test.tsx.snap

@@ -2,34 +2,26 @@
 
 exports[`ScraperList rendering renders 1`] = `
 <Fragment>
-  <ResourceList
-    testID="resource-list"
-  >
-    <ResourceListHeader
-      testID="resource-list--header"
-    >
+  <ResourceList>
+    <ResourceListHeader>
       <ResourceListSorter
         name="name"
         sort="none"
         sortKey="name"
-        testID="resource-list--sorter"
       />
       <ResourceListSorter
         name="url"
         sort="none"
         sortKey="url"
-        testID="resource-list--sorter"
       />
       <ResourceListSorter
         name="bucket"
         sort="none"
         sortKey="bucket"
-        testID="resource-list--sorter"
       />
     </ResourceListHeader>
     <ResourceListBody
       emptyState={<React.Fragment />}
-      testID="resource-list--body"
     >
       <ScraperRow
         key="03636a0bfe351000"

ui/src/settings/components/LoadDataHeader.tsx

@@ -8,10 +8,10 @@ class LoadDataHeader extends Component {
   public render() {
     return (
       <Page.Header fullWidth={false}>
-        <Page.Header.Left>
+        <Page.HeaderLeft>
           <PageTitleWithOrg title="Load Data" />
-        </Page.Header.Left>
-        <Page.Header.Right />
+        </Page.HeaderLeft>
+        <Page.HeaderRight />
       </Page.Header>
     )
   }

ui/src/settings/components/SettingsHeader.tsx

@@ -8,10 +8,10 @@ class SettingsHeader extends Component {
   public render() {
     return (
       <Page.Header fullWidth={false}>
-        <Page.Header.Left>
+        <Page.HeaderLeft>
           <PageTitleWithOrg title="Settings" />
-        </Page.Header.Left>
-        <Page.Header.Right />
+        </Page.HeaderLeft>
+        <Page.HeaderRight />
       </Page.Header>
     )
   }

ui/src/shared/components/AddResourceDropdown.tsx

@@ -37,7 +37,7 @@ export default class AddResourceDropdown extends PureComponent<Props> {
     const {titleText, status} = this.props
     return (
       <Dropdown
-        widthPixels={160}
+        style={{width: `${160}px`}}
         testID="add-resource-dropdown"
         button={(active, onClick) => (
           <Dropdown.Button

ui/src/shared/components/ColorDropdown.tsx

@@ -37,11 +37,11 @@ const ColorDropdown: FC<Props> = props => {
   } = props
 
   const status = disabled ? ComponentStatus.Disabled : ComponentStatus.Default
-  const width = stretchToFit ? null : widthPixels
+  const style = stretchToFit ? null : {width: `${widthPixels}px`}
 
   return (
     <Dropdown
-      widthPixels={width}
+      style={style}
       button={(active, onClick) => (
         <Dropdown.Button active={active} onClick={onClick} status={status}>
           <div className="color-dropdown--item">

ui/src/shared/components/SearchableDropdown.tsx

@@ -1,5 +1,5 @@
 // Libraries
-import React, {Component, ChangeEvent} from 'react'
+import React, {Component, ChangeEvent, CSSProperties} from 'react'
 
 // Components
 import {
@@ -26,11 +26,11 @@ interface Props {
   buttonColor: ComponentColor
   buttonStatus: ComponentStatus
   buttonTestID: string
-  widthPixels?: number
   menuTheme: DropdownMenuTheme
   menuTestID: string
   options: string[]
   emptyText: string
+  style?: CSSProperties
 }
 
 @ErrorHandling
@@ -56,7 +56,7 @@ export default class SearchableDropdown extends Component<Props> {
       selectedOption,
       testID,
       className,
-      widthPixels,
+      style,
       menuTheme,
       menuTestID,
     } = this.props
@@ -65,7 +65,7 @@ export default class SearchableDropdown extends Component<Props> {
       <Dropdown
         testID={testID}
         className={className}
-        widthPixels={widthPixels}
+        style={style}
         button={(active, onClick) => (
           <Dropdown.Button
             active={active}

ui/src/shared/components/TimeRangeDropdown.tsx

@@ -63,7 +63,7 @@ class TimeRangeDropdown extends PureComponent<Props, State> {
         )}
         <div ref={this.dropdownRef}>
           <Dropdown
-            widthPixels={this.dropdownWidth}
+            style={{width: `${this.dropdownWidth}px`}}
             button={(active, onClick) => (
               <Dropdown.Button active={active} onClick={onClick}>
                 {this.formattedCustomTimeRange}
@@ -72,7 +72,7 @@ class TimeRangeDropdown extends PureComponent<Props, State> {
             menu={onCollapse => (
               <Dropdown.Menu
                 onCollapse={onCollapse}
-                overrideWidth={this.dropdownWidth + 50}
+                style={{width: `${this.dropdownWidth + 50}px`}}
               >
                 {TIME_RANGES.map(({label}) => {
                   if (label === TIME_RANGE_LABEL) {

ui/src/shared/components/TimeZoneDropdown.tsx

@@ -32,7 +32,7 @@ const TimeZoneDropdown: FunctionComponent<Props> = ({
       selectedOption={selectedTimeZone}
       onSelect={onSetTimeZone}
       buttonIcon={IconFont.Annotate}
-      widthPixels={115}
+      style={{width: '115px'}}
     />
   )
 }

ui/src/shared/components/columns_options/ColumnsOptions.tsx

@@ -51,7 +51,7 @@ class ColumnsOptions extends Component<Props> {
     return (
       <Form.Box>
         <EmptyState size={ComponentSize.Small}>
-          <EmptyState.Text text="This query returned no columns" />
+          <EmptyState.Text>This query returned no columns</EmptyState.Text>
         </EmptyState>
       </Form.Box>
     )

ui/src/shared/components/dropdown_auto_refresh/AutoRefreshDropdown.tsx

@@ -49,7 +49,7 @@ export default class AutoRefreshDropdown extends Component<Props> {
     return (
       <div className={this.className}>
         <Dropdown
-          widthPixels={this.dropdownWidthPixels}
+          style={{width: `${this.dropdownWidthPixels}px`}}
           button={(active, onClick) => (
             <Dropdown.Button
               active={active}
@@ -63,7 +63,7 @@ export default class AutoRefreshDropdown extends Component<Props> {
           menu={onCollapse => (
             <Dropdown.Menu
               onCollapse={onCollapse}
-              overrideWidth={DROPDOWN_WIDTH_FULL}
+              style={{width: `${DROPDOWN_WIDTH_FULL}px`}}
             >
               {autoRefreshOptions.map(option => {
                 if (option.type === AutoRefreshOptionType.Header) {

ui/src/shared/components/inlineLabels/InlineLabelsList.tsx

@@ -91,7 +91,11 @@ class InlineLabelsList extends Component<Props> {
           size={ComponentSize.Small}
           testID="inline-labels-list--used-all"
         >
-          <EmptyState.Text text="This resource has all available labels, LINEBREAK start typing to create a new label" />
+          <EmptyState.Text>
+            This resource has all available labels,
+            <br />
+            start typing to create a new label
+          </EmptyState.Text>
         </EmptyState>
       )
     }
@@ -102,7 +106,7 @@ class InlineLabelsList extends Component<Props> {
           size={ComponentSize.Small}
           testID="inline-labels-list--none-exist"
         >
-          <EmptyState.Text text="Start typing to create a new label" />
+          <EmptyState.Text>Start typing to create a new label</EmptyState.Text>
         </EmptyState>
       )
     }

ui/src/shared/components/question_mark_tooltip/QuestionMarkTooltip.scss

@@ -1,62 +0,0 @@
-/*
-    Question Mark Tooltip
-    ----------------------------------------------
-*/
-$qmark-tooltip-size: 16px;
-
-.question-mark-tooltip {
-  display: inline-block;
-}
-
-.question-mark-tooltip--children {
-  display: flex;
-  align-items: center
-}
-
-.question-mark-tooltip--icon {
-  width: $qmark-tooltip-size;
-  height: $qmark-tooltip-size;
-  border-radius: 50%;
-  background-color: $g8-storm;
-  color: $g0-obsidian;
-  transition: background-color 0.25s ease;
-  text-align: center;
-  font-size: 13px;
-  line-height: ($qmark-tooltip-size + 1px);
-
-  &:after {
-    content: '?';
-    display: inline-block;
-    font-weight: 900;
-  }
-
-  &__adjacent {
-    margin-left: 5px;
-    flex: 0 0 $qmark-tooltip-size;
-  }
-}
-
-.question-mark-tooltip--contents {
-  padding: $ix-marg-c;
-  font-weight: 500;
-  font-size: 14px;
-  line-height: 20px;
-  color: $g12-forge;
-
-  strong {
-    color: $g18-cloud;
-  }
-
-  & > *:first-child {
-    margin-top: 0;
-  }
-
-  & > *:last-child {
-    margin-bottom: 0;
-  }
-}
-
-.question-mark-tooltip:hover .question-mark-tooltip--icon {
-  background-color: $c-pool;
-}
-

ui/src/shared/components/question_mark_tooltip/QuestionMarkTooltip.tsx

@@ -1,40 +0,0 @@
-// Libraries
-import React, {SFC, ReactChild} from 'react'
-
-// Components
-import {Popover, PopoverInteraction} from '@influxdata/clockface'
-
-interface Props {
-  testID: string
-  tipContent: ReactChild
-}
-
-const QuestionMarkTooltip: SFC<Props> = ({testID, tipContent, children}) => {
-  let trigger = <div className="question-mark-tooltip--icon" />
-
-  if (children) {
-    trigger = (
-      <div className="question-mark-tooltip--children">
-        {children}
-        <div className="question-mark-tooltip--icon question-mark-tooltip--icon__adjacent" />
-      </div>
-    )
-  }
-
-  return (
-    <Popover
-      distanceFromTrigger={6}
-      className="question-mark-tooltip"
-      testID={testID}
-      showEvent={PopoverInteraction.Hover}
-      hideEvent={PopoverInteraction.Hover}
-      contents={() => (
-        <div className="question-mark-tooltip--contents">{tipContent}</div>
-      )}
-    >
-      {trigger}
-    </Popover>
-  )
-}
-
-export default QuestionMarkTooltip

ui/src/shared/components/search_widget/SearchWidget.tsx

@@ -57,7 +57,7 @@ class SearchWidget extends Component<Props, State> {
       <Input
         icon={IconFont.Search}
         placeholder={placeholderText}
-        widthPixels={widthPixels}
+        style={{width: `${widthPixels}px`}}
         value={searchTerm}
         onChange={this.handleChange}
         onBlur={this.handleBlur}

ui/src/style/chronograf.scss

@@ -28,7 +28,6 @@
 @import 'src/shared/components/views/Markdown.scss';
 @import 'src/shared/components/custom_singular_time/CustomSingularTime.scss';
 @import 'src/onboarding/OnboardingWizard.scss';
-@import 'src/shared/components/question_mark_tooltip/QuestionMarkTooltip.scss';
 @import 'src/shared/components/protoboard_icon/ProtoboardIcon.scss';
 @import 'src/shared/components/columns_options/ColumnsOptions.scss';
 @import 'src/shared/components/InputClickToEdit.scss';

ui/src/tasks/components/EmptyTasksList.tsx

@@ -29,9 +29,7 @@ export default class EmptyTasksLists extends PureComponent<Props> {
     if (totalCount && searchTerm === '') {
       return (
         <EmptyState testID="empty-tasks-list" size={ComponentSize.Large}>
-          <EmptyState.Text
-            text={`All ${totalCount} of your Tasks are inactive`}
-          />
+          <EmptyState.Text>{`All ${totalCount} of your Tasks are inactive`}</EmptyState.Text>
         </EmptyState>
       )
     }
@@ -39,10 +37,9 @@ export default class EmptyTasksLists extends PureComponent<Props> {
     if (searchTerm === '') {
       return (
         <EmptyState testID="empty-tasks-list" size={ComponentSize.Large}>
-          <EmptyState.Text
-            text={"Looks like you don't have any Tasks , why not create one?"}
-            highlightWords={['Tasks']}
-          />
+          <EmptyState.Text>
+            Looks like you don't have any <b>Tasks</b>, why not create one?"
+          </EmptyState.Text>
           <AddResourceDropdown
             canImportFromTemplate={true}
             onSelectNew={onCreate}
@@ -56,7 +53,7 @@ export default class EmptyTasksLists extends PureComponent<Props> {
 
     return (
       <EmptyState testID="empty-tasks-list" size={ComponentSize.Large}>
-        <EmptyState.Text text="No Tasks match your search term" />
+        <EmptyState.Text>No Tasks match your search term</EmptyState.Text>
       </EmptyState>
     )
   }

ui/src/tasks/components/TaskHeader.tsx

@@ -23,10 +23,10 @@ export default class TaskHeader extends PureComponent<Props> {
   public render() {
     return (
       <Page.Header fullWidth={true}>
-        <Page.Header.Left>
+        <Page.HeaderLeft>
           <PageTitleWithOrg title={this.props.title} />
-        </Page.Header.Left>
-        <Page.Header.Right>
+        </Page.HeaderLeft>
+        <Page.HeaderRight>
           <Button
             color={ComponentColor.Default}
             text="Cancel"
@@ -42,7 +42,7 @@ export default class TaskHeader extends PureComponent<Props> {
             }
             onClick={this.props.onSave}
           />
-        </Page.Header.Right>
+        </Page.HeaderRight>
       </Page.Header>
     )
   }

ui/src/tasks/components/TaskRunsList.tsx

@@ -69,10 +69,9 @@ export default class TaskRunsList extends PureComponent<Props> {
         <IndexList.Body
           emptyState={
             <EmptyState size={ComponentSize.Large}>
-              <EmptyState.Text
-                text={"Looks like this Task doesn't have any Runs"}
-                highlightWords={['Runs']}
-              />
+              <EmptyState.Text>
+                Looks like this Task doesn't have any <b>Runs</b>
+              </EmptyState.Text>
             </EmptyState>
           }
           columnCount={5}

ui/src/tasks/components/TaskRunsPage.tsx

@@ -79,10 +79,10 @@ class TaskRunsPage extends PureComponent<Props & WithRouterProps, State> {
       >
         <Page titleTag={pageTitleSuffixer(['Task Runs'])}>
           <Page.Header fullWidth={false}>
-            <Page.Header.Left>
+            <Page.HeaderLeft>
               <PageTitleWithOrg title={this.title} />
-            </Page.Header.Left>
-            <Page.Header.Right>
+            </Page.HeaderLeft>
+            <Page.HeaderRight>
               <Button
                 onClick={this.handleEditTask}
                 text="Edit Task"
@@ -93,7 +93,7 @@ class TaskRunsPage extends PureComponent<Props & WithRouterProps, State> {
                 text="Run Task"
                 icon={IconFont.Play}
               />
-            </Page.Header.Right>
+            </Page.HeaderRight>
           </Page.Header>
           <Page.Contents fullWidth={false} scrollable={true}>
             <TaskRunsList

ui/src/tasks/components/TasksHeader.tsx

@@ -35,10 +35,10 @@ export default class TasksHeader extends PureComponent<Props> {
 
     return (
       <Page.Header fullWidth={false}>
-        <Page.Header.Left>
+        <Page.HeaderLeft>
           <PageTitleWithOrg title="Tasks" />
-        </Page.Header.Left>
-        <Page.Header.Right>
+        </Page.HeaderLeft>
+        <Page.HeaderRight>
           <SlideToggle.Label text="Show Inactive" />
           <SlideToggle
             active={showInactive}
@@ -53,7 +53,7 @@ export default class TasksHeader extends PureComponent<Props> {
             resourceName="Task"
             status={this.addResourceStatus}
           />
-        </Page.Header.Right>
+        </Page.HeaderRight>
       </Page.Header>
     )
   }

ui/src/tasks/components/__snapshots__/TaskForm.test.tsx.snap

@@ -1,72 +1,40 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`TaskForm rendering renders 1`] = `
-<Form
-  preventDefault={true}
-  testID="form-container"
->
-  <Grid
-    testID="grid"
-  >
-    <GridRow
-      testID="grid--row"
-    >
+<Form>
+  <Grid>
+    <GridRow>
       <GridColumn
-        testID="grid--column"
         widthXS={12}
       >
         <FormElement
           label="Name"
-          testID="form--element"
         >
           <Input
-            autoFocus={false}
-            autocomplete="off"
-            disabledTitleText="This input is disabled"
             name="name"
             onChange={[MockFunction]}
             placeholder="Name your task"
-            required={false}
-            size="sm"
-            spellCheck={false}
-            status="default"
             testID="task-form-name"
-            titleText=""
-            type="text"
             value=""
           />
         </FormElement>
       </GridColumn>
-      <GridColumn
-        testID="grid--column"
-        widthXS={12}
-      >
+      <GridColumn>
         <FormElement
           label="Schedule Task"
-          testID="form--element"
         >
           <FlexBox
             alignItems="flex-start"
             direction="column"
-            justifyContent="flex-start"
             margin="sm"
-            stretchToFitHeight={false}
-            stretchToFitWidth={false}
-            testID="flex-box"
           >
             <Radio
-              color="primary"
               shape="stretch"
-              size="sm"
-              testID="radio-button"
             >
               <RadioButton
                 active={false}
-                disabled={false}
-                disabledTitleText="This option is disabled"
                 id="every"
                 onClick={[Function]}
-                testID="radio--button"
                 titleText="Run task at regular intervals"
                 value="interval"
               >
@@ -74,11 +42,8 @@ exports[`TaskForm rendering renders 1`] = `
               </RadioButton>
               <RadioButton
                 active={false}
-                disabled={false}
-                disabledTitleText="This option is disabled"
                 id="cron"
                 onClick={[Function]}
-                testID="radio--button"
                 titleText="Use cron syntax for more control over scheduling"
                 value="cron"
               >

ui/src/tasks/components/__snapshots__/TasksList.test.tsx.snap

@@ -2,35 +2,27 @@
 
 exports[`TasksList rendering renders 1`] = `
 <Fragment>
-  <ResourceList
-    testID="resource-list"
-  >
-    <ResourceListHeader
-      testID="resource-list--header"
-    >
+  <ResourceList>
+    <ResourceListHeader>
       <ResourceListSorter
         name="Name"
         sort="none"
         sortKey="name"
-        testID="resource-list--sorter"
       />
       <ResourceListSorter
         name="Active"
         sort="none"
         sortKey="status"
-        testID="resource-list--sorter"
       />
       <ResourceListSorter
         name="Schedule"
         sort="none"
         sortKey="every"
-        testID="resource-list--sorter"
       />
       <ResourceListSorter
         name="Last Completed"
         sort="none"
         sortKey="latestCompleted"
-        testID="resource-list--sorter"
       />
     </ResourceListHeader>
     <ResourceListBody
@@ -41,7 +33,6 @@ exports[`TasksList rendering renders 1`] = `
           searchTerm=""
         />
       }
-      testID="resource-list--body"
     >
       <Connect(withRouter(TaskCard))
         key="task-id--02ef9deff2141000"

ui/src/telegrafs/components/Collectors.tsx

@@ -210,10 +210,10 @@ class Collectors extends PureComponent<Props, State> {
     if (_.isEmpty(searchTerm)) {
       return (
         <EmptyState size={ComponentSize.Medium}>
-          <EmptyState.Text
-            text={`${orgName} does not own any Telegraf  Configurations, why not create one?`}
-            highlightWords={['Telegraf', 'Configurations']}
-          />
+          <EmptyState.Text>
+            {`${orgName}`} does not own any <b>Telegraf Configurations</b>, why
+            not create one?
+          </EmptyState.Text>
           {this.createButton}
         </EmptyState>
       )
@@ -221,10 +221,9 @@ class Collectors extends PureComponent<Props, State> {
 
     return (
       <EmptyState size={ComponentSize.Medium}>
-        <EmptyState.Text
-          text="No Telegraf  Configurations  match your query"
-          highlightWords={['Telegraf', 'Configurations']}
-        />
+        <EmptyState.Text>
+          No <b>Telegraf Configurations</b> match your query
+        </EmptyState.Text>
       </EmptyState>
     )
   }

ui/src/telegrafs/components/__snapshots__/Collectors.test.tsx.snap

@@ -2,28 +2,21 @@
 
 exports[`CollectorList rendering renders 1`] = `
 <Fragment>
-  <ResourceList
-    testID="resource-list"
-  >
-    <ResourceListHeader
-      testID="resource-list--header"
-    >
+  <ResourceList>
+    <ResourceListHeader>
       <ResourceListSorter
         name="Name"
         sort="none"
         sortKey="name"
-        testID="resource-list--sorter"
       />
       <ResourceListSorter
         name="Bucket"
         sort="none"
         sortKey="bucket"
-        testID="resource-list--sorter"
       />
     </ResourceListHeader>
     <ResourceListBody
       emptyState={<React.Fragment />}
-      testID="resource-list--body"
     >
       <Connect(withRouter(CollectorRow))
         bucket=""

ui/src/templates/components/EmptyTemplatesList.tsx

@@ -24,10 +24,9 @@ const EmptyTemplatesList: FunctionComponent<Props> = ({
   if (searchTerm === '') {
     return (
       <EmptyState size={ComponentSize.Large}>
-        <EmptyState.Text
-          text={"Looks like you don't have any Templates, why not create one?"}
-          highlightWords={['Templates']}
-        />
+        <EmptyState.Text>
+          Looks like you don't have any <b>Templates</b>, why not create one?
+        </EmptyState.Text>
         <Button
           text="Import Template"
           icon={IconFont.Plus}
@@ -40,7 +39,7 @@ const EmptyTemplatesList: FunctionComponent<Props> = ({
 
   return (
     <EmptyState size={ComponentSize.Large}>
-      <EmptyState.Text text="No Templates match your search term" />
+      <EmptyState.Text>No Templates match your search term</EmptyState.Text>
     </EmptyState>
   )
 }

ui/src/templates/components/createFromTemplateOverlay/TemplateBrowserDetails.tsx

@@ -28,11 +28,12 @@ class TemplateBrowserDetails extends PureComponent<Props> {
         autoSize={false}
       >
         <Panel
-          size={ComponentSize.Medium}
           testID="template-panel"
           className="import-template-overlay--panel"
         >
-          <Panel.Body>{this.panelContents}</Panel.Body>
+          <Panel.Body size={ComponentSize.Medium}>
+            {this.panelContents}
+          </Panel.Body>
         </Panel>
       </DapperScrollbars>
     )
@@ -44,7 +45,7 @@ class TemplateBrowserDetails extends PureComponent<Props> {
     if (!selectedTemplateSummary) {
       return (
         <EmptyState size={ComponentSize.Medium}>
-          <EmptyState.Text text="Select a Template from the left" />
+          <EmptyState.Text>Select a Template from the left</EmptyState.Text>
         </EmptyState>
       )
     }

ui/src/templates/components/createFromTemplateOverlay/TemplateBrowserEmpty.tsx

@@ -25,10 +25,10 @@ class TemplateBrowserEmpty extends PureComponent<Props> {
     return (
       <div className="import-template-overlay--empty">
         <EmptyState size={ComponentSize.Large}>
-          <EmptyState.Text
-            text="Looks like you don't have any Templates  yet, why not import one?"
-            highlightWords={['Templates']}
-          />
+          <EmptyState.Text>
+            Looks like you don't have any <b>Templates</b> yet, why not import
+            one?
+          </EmptyState.Text>
           <Button
             size={ComponentSize.Medium}
             text="Go to Templates Settings"

ui/src/timeMachine/components/EditorShortcutsTooltip.tsx

@@ -1,12 +1,14 @@
+// Libraries
 import React, {FC} from 'react'
 
-import QuestionMarkTooltip from 'src/shared/components/question_mark_tooltip/QuestionMarkTooltip'
+// Components
+import {QuestionMarkTooltip} from '@influxdata/clockface'
 
 const EditorShortcutsTooltip: FC = () => {
   return (
     <QuestionMarkTooltip
       testID="editor-shortcuts"
-      tipContent={
+      tooltipContents={
         <div className="editor-shortcuts">
           <h5>Shortcuts</h5>
           <dl className="editor-shortcuts--body">

ui/src/timeMachine/components/QueryBuilder.test.tsx

@@ -83,7 +83,7 @@ describe('QueryBuilder', () => {
 
     fireEvent.click(windowSelectorButton)
 
-    const windowSelector = getByTestId('duration-selector--menu')
+    const windowSelector = getByTestId('duration-selector--menu--contents')
 
     expect(windowSelector.childElementCount).toBe(14)
 

ui/src/timeMachine/components/variableToolbar/VariableTooltipContents.tsx

@@ -88,7 +88,7 @@ const VariableTooltipContents: FunctionComponent<Props> = ({
           options={dropdownItems}
           selectedOption={selectedOption}
           buttonStatus={status}
-          widthPixels={200}
+          style={{width: '200px'}}
           onSelect={value => onSelectVariableValue(variableID, value)}
         />
       </Form.Element>

ui/src/timeMachine/components/view_options/ViewTypeDropdown.tsx

@@ -32,7 +32,7 @@ class ViewTypeDropdown extends PureComponent<Props> {
   public render() {
     return (
       <Dropdown
-        widthPixels={215}
+        style={{width: '215px'}}
         className="view-type-dropdown"
         button={(active, onClick) => (
           <Dropdown.Button

ui/src/variables/components/CreateVariableOverlay.tsx

@@ -12,19 +12,19 @@ type Props = WithRouterProps
 class CreateVariableOverlay extends PureComponent<Props> {
   public render() {
     return (
-      <GetResources resource={ResourceType.Variables}>
-        <Overlay visible={true}>
-          <Overlay.Container maxWidth={1000}>
-            <Overlay.Header
-              title="Create Variable"
-              onDismiss={this.handleHideOverlay}
-            />
-            <Overlay.Body>
+      <Overlay visible={true}>
+        <Overlay.Container maxWidth={1000}>
+          <Overlay.Header
+            title="Create Variable"
+            onDismiss={this.handleHideOverlay}
+          />
+          <Overlay.Body>
+            <GetResources resource={ResourceType.Variables}>
               <VariableFormContext onHideOverlay={this.handleHideOverlay} />
-            </Overlay.Body>
-          </Overlay.Container>
-        </Overlay>
-      </GetResources>
+            </GetResources>
+          </Overlay.Body>
+        </Overlay.Container>
+      </Overlay>
     )
   }
 

ui/src/variables/components/VariablesTab.tsx

@@ -109,10 +109,9 @@ class VariablesTab extends PureComponent<Props, State> {
     if (!searchTerm) {
       return (
         <EmptyState size={ComponentSize.Large}>
-          <EmptyState.Text
-            text={`Looks like there aren't any Variables, why not create one?`}
-            highlightWords={['Variables']}
-          />
+          <EmptyState.Text>
+            Looks like there aren't any <b>Variables</b>, why not create one?
+          </EmptyState.Text>
           <AddResourceDropdown
             resourceName="Variable"
             onSelectImport={this.handleOpenImportOverlay}
@@ -124,7 +123,7 @@ class VariablesTab extends PureComponent<Props, State> {
 
     return (
       <EmptyState size={ComponentSize.Large}>
-        <EmptyState.Text text="No Variables match your query" />
+        <EmptyState.Text>No Variables match your query</EmptyState.Text>
       </EmptyState>
     )
   }

ui/src/variables/components/__snapshots__/VariableForm.test.tsx.snap

@@ -38,7 +38,7 @@ exports[`Variables.Components.VariableForm rendering renders 1`] = `
               </span>
             </label>
             <div
-              class="cf-input cf-input-sm"
+              class="cf-input cf-input-sm cf-input__error"
               style="width: 100%;"
             >
               <input
@@ -52,10 +52,20 @@ exports[`Variables.Components.VariableForm rendering renders 1`] = `
                 type="text"
                 value=""
               />
+              <span
+                class="cf-icon alert-triangle cf-input-status"
+                data-testid="input-error"
+              />
               <div
                 class="cf-input-shadow"
               />
             </div>
+            <span
+              class="cf-form--element-error"
+              data-testid="form--element-error"
+            >
+              Variable name cannot be empty
+            </span>
           </div>
         </div>
       </div>

ui/src/variables/components/__snapshots__/Variables.test.tsx.snap

@@ -2,28 +2,21 @@
 
 exports[`VariableList rendering renders 1`] = `
 <Fragment>
-  <ResourceList
-    testID="resource-list"
-  >
-    <ResourceListHeader
-      testID="resource-list--header"
-    >
+  <ResourceList>
+    <ResourceListHeader>
       <ResourceListSorter
         name="Name"
         sort="none"
         sortKey="name"
-        testID="resource-list--sorter"
       />
       <ResourceListSorter
         name="Type"
         sort="none"
         sortKey="arguments"
-        testID="resource-list--sorter"
       />
     </ResourceListHeader>
     <ResourceListBody
       emptyState={<React.Fragment />}
-      testID="resource-list--body"
     >
       <Connect(withRouter(VariableCard))
         key="variable-0"

ui/src/variables/utils/validation.ts

@@ -10,8 +10,8 @@ const reservedVarNames = [TIME_RANGE_START, TIME_RANGE_STOP, WINDOW_PERIOD]
 export const validateVariableName = (
   varName: string,
   variables: Variable[]
-): {error: string} => {
-  if (varName.match(/^\s*$/)) {
+): {error: string | null} => {
+  if ((varName || '').match(/^\s*$/)) {
     return {error: 'Variable name cannot be empty'}
   }
 

ui/yarn.lock

@@ -970,6 +970,13 @@
   dependencies:
     regenerator-runtime "^0.12.0"
 
+"@babel/runtime@^7.3.1":
+  version "7.6.3"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.6.3.tgz#935122c74c73d2240cafd32ddb5fc2a6cd35cf1f"
+  integrity sha512-kq6anf9JGjW8Nt5rYfEuGRaEAaH1mkv3Bbu6rYvLOpPh/RusSJXuKPEAoZ7L7gybZkchE8+NV5g9vKF4AGAtsA==
+  dependencies:
+    regenerator-runtime "^0.13.2"
+
 "@babel/template@^7.0.0 <7.4.0":
   version "7.2.2"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.2.2.tgz#005b3fdf0ed96e88041330379e0da9a708eb2907"
@@ -1080,10 +1087,14 @@
   resolved "https://registry.yarnpkg.com/@iarna/toml/-/toml-2.2.3.tgz#f060bf6eaafae4d56a7dac618980838b0696e2ab"
   integrity sha512-FmuxfCuolpLl0AnQ2NHSzoUKWEJDFl63qXjzdoWBVyFCXzMGm1spBzk7LeHNoVCiWCF7mRVms9e6jEV9+MoPbg==
 
-"@influxdata/clockface@0.0.28":
-  version "0.0.28"
-  resolved "https://registry.yarnpkg.com/@influxdata/clockface/-/clockface-0.0.28.tgz#132a5e3a0918b6556877e0a304aa4d620d2c342b"
-  integrity sha512-6XmP+N1CF+ZDO2RP4ynvk5gi0F+RGklwlvfCXI1apLwQlXIKR5VACEI67MIFAWLafR5A3Rnzdm2NeHtMCJtVoA==
+"@influxdata/clockface@1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@influxdata/clockface/-/clockface-1.0.2.tgz#7c3926bbce62de6477208ac9d01c75352cd1a1de"
+  integrity sha512-7EGySc3ev2Os9XNpdSzjkkSqRy8dlC+s+/Fmil7VZ8tN76kaoKan8e6E+SD6DcLIPNK3SNhUFC/dn19ox84ibw==
+  dependencies:
+    "@types/d3-ease" "^1.0.8"
+    d3-ease "^1.0.5"
+    react-spring "^8.0.27"
 
 "@influxdata/flux-parser@^0.3.0":
   version "0.3.0"
@@ -1389,6 +1400,11 @@
   resolved "https://registry.yarnpkg.com/@types/d3-color/-/d3-color-1.2.1.tgz#26141c3c554e320edd40726b793570a3ae57397e"
   integrity sha512-xwb1tqvYNWllbHuhMFhiXk63Imf+QNq/dJdmbXmr2wQVnwGenCuj3/0IWJ9hdIFQIqzvhT7T37cvx93jtAsDbQ==
 
+"@types/d3-ease@^1.0.8":
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/@types/d3-ease/-/d3-ease-1.0.9.tgz#1dd849bd7edef6426e915e220ed9970db5ea4e04"
+  integrity sha512-U5ADevQ+W6fy32FVZZC9EXallcV/Mi12A5Tkd0My5MrC7T8soMQEhlDAg88XUWm0zoCQlB4XV0en/24LvuDB4Q==
+
 "@types/d3-scale@^2.0.1":
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/@types/d3-scale/-/d3-scale-2.0.2.tgz#61145948aa1a52ab31384766cd013308699112b3"
@@ -3910,6 +3926,11 @@ d3-color@1:
   resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-1.2.3.tgz#6c67bb2af6df3cc8d79efcc4d3a3e83e28c8048f"
   integrity sha512-x37qq3ChOTLd26hnps36lexMRhNXEtVxZ4B25rL0DVdDsGQIJGB18S7y9XDwlDD6MD/ZBzITCf4JjGMM10TZkw==
 
+d3-ease@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/d3-ease/-/d3-ease-1.0.5.tgz#8ce59276d81241b1b72042d6af2d40e76d936ffb"
+  integrity sha512-Ct1O//ly5y5lFM9YTdu+ygq7LleSgSE4oj7vUt9tPLHUi8VCV7QoizGpdWRWAwCO9LdYzIrQDg97+hGVdsSGPQ==
+
 d3-format@1, d3-format@^1.3.2:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/d3-format/-/d3-format-1.3.2.tgz#6a96b5e31bcb98122a30863f7d92365c00603562"
@@ -9963,6 +9984,14 @@ react-scrollbars-custom@^4.0.0-alpha.8:
     cnbuilder "^1.0.8"
     react-draggable "^3.2.1"
 
+react-spring@^8.0.27:
+  version "8.0.27"
+  resolved "https://registry.yarnpkg.com/react-spring/-/react-spring-8.0.27.tgz#97d4dee677f41e0b2adcb696f3839680a3aa356a"
+  integrity sha512-nDpWBe3ZVezukNRandTeLSPcwwTMjNVu1IDq9qA/AMiUqHuRN4BeSWvKr3eIxxg1vtiYiOLy4FqdfCP5IoP77g==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    prop-types "^15.5.8"
+
 react-test-renderer@^16.0.0-0:
   version "16.5.2"
   resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.5.2.tgz#92e9d2c6f763b9821b2e0b22f994ee675068b5ae"
@@ -10148,6 +10177,11 @@ regenerator-runtime@^0.12.0:
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz#fa1a71544764c036f8c49b13a08b2594c9f8a0de"
   integrity sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg==
 
+regenerator-runtime@^0.13.2:
+  version "0.13.3"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz#7cf6a77d8f5c6f60eb73c5fc1955b2ceb01e6bf5"
+  integrity sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw==
+
 regenerator-transform@^0.13.3:
   version "0.13.3"
   resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.13.3.tgz#264bd9ff38a8ce24b06e0636496b2c856b57bcbb"