[Timelion] Remove kui usage (#80287) (#80819)

* [Timelion] Remove kui usage * Fix custom checkbox * Add tim prefix to the new classes * Fix functional test * PR fixes * Fix type * PR comments * Remove the last fontawesome usages * fix timelion links Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
elastic · Oct 16, 2020 · 1b8c092 · 1b8c092
1 parent 7120827
commit 1b8c092
Show file tree

Hide file tree

Showing 19 changed files with 217 additions and 67 deletions.
diff --git a/src/plugins/timelion/public/_app.scss b/src/plugins/timelion/public/_app.scss
@@ -15,7 +15,69 @@
   margin: $euiSizeM;
 }
 
+.timApp__title {
+  display: flex;
+  align-items: center;
+  padding: $euiSizeM $euiSizeS;
+  font-size: $euiSize;
+  font-weight: $euiFontWeightBold;
+  border-bottom: 1px solid $euiColorLightShade;
+  flex-grow: 1;
+  background-color: $euiColorEmptyShade;
+}
+
 .timApp__stats {
   font-weight: $euiFontWeightRegular;
   color: $euiColorMediumShade;
 }
+
+.timApp__form {
+  display: flex;
+  align-items: flex-start;
+  margin-top: $euiSize;
+  margin-bottom: $euiSize;
+}
+
+.timApp__expression {
+  display: flex;
+  flex: 1;
+  margin-right: $euiSizeS;
+}
+
+.timApp__button {
+  margin-top: $euiSizeS;
+  padding: $euiSizeXS $euiSizeM;
+  font-size: $euiSize;
+  border: none;
+  border-radius: $euiSizeXS;
+  color: $euiColorEmptyShade;
+  background-color: $euiColorPrimary;
+}
+
+.timApp__button--secondary {
+  margin-top: $euiSizeS;
+  padding: $euiSizeXS $euiSizeM;
+  font-size: $euiSize;
+  border: 1px solid $euiColorPrimary;
+  border-radius: $euiSizeXS;
+  color: $euiColorPrimary;
+  width: 100%;
+}
+
+.timApp__sectionTitle {
+  margin-bottom: $euiSizeM;
+  font-size: 18px;
+  color: $euiColorDarkestShade;
+}
+
+.timApp__helpText {
+  margin-bottom: $euiSize;
+  font-size: 14px;
+  color: $euiColorDarkShade;
+}
+
+.timApp__label {
+  font-size: $euiSize;
+  line-height: 1.5;
+  font-weight: $euiFontWeightBold;
+}
diff --git a/src/plugins/timelion/public/directives/_form.scss b/src/plugins/timelion/public/directives/_form.scss
@@ -34,3 +34,51 @@ select.form-control {
 .fullWidth {
   width: 100%;
 }
+
+.timDropdownWarning {
+  margin-bottom: $euiSize;
+  padding: $euiSizeXS $euiSizeS;
+  color: $euiColorDarkestShade;
+  border-left: solid 2px $euiColorDanger;
+  font-size: $euiSizeM;
+}
+
+.timFormCheckbox {
+  display: flex;
+  align-items: center;
+  line-height: 1.5;
+  position: relative;
+}
+
+.timFormCheckbox__input {
+  appearance: none;
+  background-color: $euiColorLightestShade;
+  border: 1px solid $euiColorLightShade;
+  border-radius: $euiSizeXS;
+  width: $euiSize;
+  height: $euiSize;
+  font-size: $euiSizeM;
+  transition: background-color .1s linear;
+}
+
+.timFormCheckbox__input:checked {
+  border-color: $euiColorPrimary;
+  background-color: $euiColorPrimary;
+}
+
+.timFormCheckbox__icon {
+  position: absolute;
+  top: 0;
+  left: 2px;
+}
+
+.timFormTextarea {
+  padding: $euiSizeXS $euiSizeM;
+  font-size: $euiSize;
+  line-height: 1.5;
+  color: $euiColorDarkestShade;
+  background-color: $euiFormBackgroundColor;
+  border: 1px solid $euiColorLightShade;
+  border-radius: $euiSizeXS;
+  transition: border-color .1s linear;
+}
diff --git a/src/plugins/timelion/public/directives/_saved_object_finder.scss b/src/plugins/timelion/public/directives/_saved_object_finder.scss
@@ -27,13 +27,50 @@
 
 saved-object-finder {
 
+  .timSearchBar {
+    display: flex;
+    align-items: center;
+  }
+
+  .timSearchBar__section {
+    position: relative;
+    margin-right: $euiSize;
+    flex: 1;
+  }
+
+  .timSearchBar__icon {
+    position: absolute;
+    top: $euiSizeS;
+    left: $euiSizeS;
+    font-size: $euiSize;
+    color: $euiColorDarkShade;
+  }
+
+  .timSearchBar__input {
+    padding: $euiSizeS $euiSizeM;
+    color: $euiColorDarkestShade;
+    background-color: $euiColorEmptyShade;
+    border: 1px solid $euiColorLightShade;
+    border-radius: $euiSizeXS;
+    transition: border-color .1s linear;
+    padding-left: $euiSizeXL;
+    width: 100%;
+    font-size: $euiSize;
+  }
+
+  .timSearchBar__pagecount {
+    font-size: $euiSize;
+    color: $euiColorDarkShade;
+  }
+
   .list-sort-button {
     border-top-left-radius: 0;
     border-top-right-radius: 0;
     border: none;
     padding: $euiSizeS $euiSize;
     font-weight: $euiFontWeightRegular;
     background-color: $euiColorLightestShade;
+    margin-top: $euiSize;
   }
 
   .li-striped {

diff --git a/src/plugins/timelion/public/directives/cells/_cells.scss b/src/plugins/timelion/public/directives/cells/_cells.scss
@@ -33,7 +33,6 @@
     text-align: center;
     width: $euiSizeL;
     height: $euiSizeL;
-    line-height: $euiSizeL;
     border-radius: $euiSizeL / 2;
     border: $euiBorderThin;
     background-color: $euiColorLightestShade;

diff --git a/src/plugins/timelion/public/directives/cells/cells.html b/src/plugins/timelion/public/directives/cells/cells.html
@@ -25,7 +25,7 @@
         tooltip-append-to-body="1"
         aria-label="{{ ::'timelion.cells.actions.removeAriaLabel' | i18n: { defaultMessage: 'Remove chart' } }}"
       >
-        <span class="fa fa-remove"></span>
+         <icon type="'cross'"></icon>
       </button>
       <button
         class="timCell__action"
@@ -35,7 +35,7 @@
         aria-label="{{ ::'timelion.cells.actions.reorderAriaLabel' | i18n: { defaultMessage: 'Drag to reorder' } }}"
         tabindex="-1"
       >
-        <span class="fa fa-arrows"></span>
+        <icon type="'grab'"></icon>
       </button>
       <button
         class="timCell__action"
@@ -44,7 +44,7 @@
         tooltip-append-to-body="1"
         aria-label="{{ ::'timelion.cells.actions.fullscreenAriaLabel' | i18n: { defaultMessage: 'Full screen chart' } }}"
       >
-        <span class="fa fa-expand"></span>
+        <icon type="'expandMini'"></icon>
       </button>
     </div>
   </div>

diff --git a/src/plugins/timelion/public/directives/fullscreen/fullscreen.html b/src/plugins/timelion/public/directives/fullscreen/fullscreen.html
@@ -8,7 +8,7 @@
       tooltip-append-to-body="1"
       aria-label="{{ ::'timelion.fullscreen.exitAriaLabel' | i18n: { defaultMessage: 'Exit full screen' } }}"
     >
-      <span class="fa fa-compress"></span>
+      <icon type="'minimize'"></icon>
     </button>
   </div>
 </div>
diff --git a/src/plugins/timelion/public/directives/saved_object_finder.html b/src/plugins/timelion/public/directives/saved_object_finder.html
@@ -1,13 +1,11 @@
 <form
   role="form"
-  class="kuiVerticalRhythm"
 >
-  <div class="kuiBar">
-    <div class="kuiBarSection">
-      <div class="kuiSearchInput fullWidth">
-        <div class="kuiSearchInput__icon kuiIcon fa-search"></div>
+  <div class="timSearchBar">
+      <div class="timSearchBar__section">
+        <icon class="timSearchBar__icon" type="'search'"></icon>
         <input
-          class="kuiSearchInput__input"
+          class="timSearchBar__input"
           input-focus
           disable-input-focus="disableAutoFocus"
           ng-model="filter"
@@ -18,18 +16,17 @@
           autocomplete="off"
           data-test-subj="savedObjectFinderSearchInput"
         >
-      </div>
     </div>
 
-    <div class="kuiBarSection">
-      <p class="kuiText kuiSubduedText"
+    <div>
+      <p class="timSearchBar__pagecount"
         i18n-id="timelion.savedObjectFinder.pageItemsFromHitCountDescription"
         i18n-default-message="{pageFirstItem}-{pageLastItem} of {hitCount}"
         i18n-values="{pageFirstItem, pageLastItem, hitCount: finder.hitCount}"
       ></p>
-      <div class="kuiButtonGroup">
+      <div>
         <button
-          class="kuiButton kuiButton--primary"
+          class="timApp__button"
           ng-if="onAddNew"
           ng-click="onAddNew()"
           data-test-subj="addNewSavedObjectLink"
@@ -40,7 +37,7 @@
         ></button>
 
         <button
-          class="kuiButton kuiButton--secondary"
+          class="timApp__button--secondary"
           ng-if="!useLocalManagement"
           ng-click="finder.manageObjects(finder.properties.name)"
           i18n-id="timelion.savedObjectFinder.manageItemsButtonLabel"
@@ -56,7 +53,6 @@
 <paginate
   list="finder.hits"
   per-page="20"
-  class="kuiVerticalRhythm"
 >
   <button
     class="paginate-heading list-group-item list-sort-button"
@@ -71,10 +67,8 @@
       i18n-id="timelion.savedObjectFinder.sortByButtonLabel"
       i18n-default-message="Name"
     ></span>
-    <span
-      class="fa"
-      ng-class="finder.isAscending ? 'fa-caret-up' : 'fa-caret-down'"
-    >
+    <icon type="'sortUp'" ng-if="finder.isAscending"></icon>
+    <icon type="'sortDown'" ng-if="!finder.isAscending"></icon>
       <span class="euiScreenReaderOnly"
         ng-if="finder.isAscending"
         i18n-id="timelion.savedObjectFinder.sortByButtonLabeAscendingScreenReaderOnly"
@@ -98,8 +92,8 @@
       <a ng-href="{{finder.makeUrl(hit)}}"
           ng-blur="finder.hitBlur($event)"
           ng-click="finder.preventClick($event)">
-          <span aria-hidden="true" class="finder-type fa" ng-if="hit.icon" ng-class="hit.icon"></span>
-          <div class="kuiIcon fa-flask ng-scope" ng-if="hit.type.shouldMarkAsExperimentalInUI()"></div>
+          <icon aria-hidden="true" class="finder-type" ng-if="hit.icon" ng-class="hit.icon"></icon>
+          <icon type="'beaker'" ng-if="hit.type.shouldMarkAsExperimentalInUI()"></icon>
           <span>{{hit.title}}</span>
           <p ng-if="hit.description" ng-bind="hit.description"></p>
       </a>

diff --git a/src/plugins/timelion/public/directives/saved_object_finder.js b/src/plugins/timelion/public/directives/saved_object_finder.js
@@ -168,7 +168,6 @@ export function initSavedObjectFinderDirective(app, savedSheetLoader, uiSettings
             switch (keyMap[$event.keyCode]) {
               case 'enter':
                 if (self.hitCount !== 1) return;
-
                 const hit = self.hits[0];
                 if (!hit) return;
 

diff --git a/src/plugins/timelion/public/directives/saved_object_save_as_checkbox.html b/src/plugins/timelion/public/directives/saved_object_save_as_checkbox.html
@@ -1,24 +1,25 @@
 <div ng-hide="!savedObject.id || savedObject.isSaving">
   <div
     ng-hide="!savedObject.isTitleChanged() || savedObject.copyOnSave"
-    class="kuiLocalDropdownWarning kuiVerticalRhythmSmall"
+    class="timDropdownWarning"
     i18n-id="timelion.savedObjects.howToSaveAsNewDescription"
     i18n-default-message="In previous versions of Kibana, changing the name of a {savedObjectName} would make a copy with the new name. Use the 'Save as a new {savedObjectName}' checkbox to do this now."
     i18n-values="{ savedObjectName: savedObject.getDisplayName() }"
     i18n-description="'Save as a new {savedObjectName}' refers to timelion.savedObjects.saveAsNewLabel and should be the same text."
   ></div>
 
-  <label class="kuiCheckBoxLabel kuiVerticalRhythmSmall">
+  <label class="timFormCheckbox">
     <input
-      class="kuiCheckBox"
+      class="timFormCheckbox__input"
       type="checkbox"
       data-test-subj="saveAsNewCheckbox"
       ng-model="savedObject.copyOnSave"
       ng-checked="savedObject.copyOnSave"
     >
+    <icon type="'check'" class="timFormCheckbox__icon" color="'white'" size="'s'"></icon>
 
     <span
-      class="kuiCheckBoxLabel__text"
+      style="margin-left: 8px;"
       i18n-id="timelion.savedObjects.saveAsNewLabel"
       i18n-default-message="Save as a new {savedObjectName}"
       i18n-values="{ savedObjectName: savedObject.getDisplayName() }"

diff --git a/src/plugins/timelion/public/directives/timelion_expression_input.html b/src/plugins/timelion/public/directives/timelion_expression_input.html
@@ -12,7 +12,7 @@
     data-expression-input
     role="textbox"
     rows="{{ rows }}"
-    class="timExpressionInput kuiTextArea fullWidth"
+    class="timExpressionInput timFormTextarea fullWidth"
     placeholder="{{ ::'timelion.expressionInputPlaceholder' | i18n: { defaultMessage: 'Try a query with {esQuery}', values: { esQuery: '.es(*)' } } }}"
     ng-model="sheet"
     ng-focus="onFocusInput()"

diff --git a/src/plugins/timelion/public/directives/timelion_help/_timelion_help.scss b/src/plugins/timelion/public/directives/timelion_help/_timelion_help.scss
@@ -15,6 +15,14 @@
   overflow-y: auto;
 }
 
+.timHelp__links {
+  color: $euiColorPrimary;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
 /**
  * 1. Override bootstrap .table styles.
  */