lib/ui utility classes (emberjs#1147)

* Cleanup warning message component

- Move to lib/ui
- Utility classes

* Cleanup error page component

- utility classes

* Cleanup disclosure triangle component

- utility classes

* Cleanup drag handle component

- utility classes

* Cleanup empty message component

- utility classes

* Cleanup toolbar divider component

- utility classes

* Cleanup toolbar search field component

- utility classes

* Misc nav and pill css cleanup

* Use ember-test-selectors

- Use ember-test-selectors across entire app
- Upgrade ember-test-selectors

Author: nummi

app/styles/base.scss

@@ -1,6 +1,7 @@
 :root {
   --font-sans-serif: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Cantarell', 'Oxygen', 'Ubuntu', 'Helvetica Neue', helvetica, arial, sans-serif;
   --font-monospace: 'SF Mono', Menlo, Monaco, monospace;
+  --inherit: inherit;
   --unit0: 0;
   --unit1: 4px;
   --unit2: calc(var(--unit1) * 2);

app/styles/utils.scss

@@ -1,16 +1,24 @@
-$units: 0, 1, 2, 3, 4;
+$units: 0, 1, 2, 3, 4, 5, 6;
 
+.box-border { box-sizing: border-box; }
+
+.absolute { position: absolute; }
 .relative { position: relative; }
 
 .sticky {
   position: -webkit-sticky;
   position: sticky;
 }
 
-.right-0 {
-  right: 0;
-}
+.top-0 { top: 0; }
+.right-0 { right: 0; }
+.bottom-0 { bottom: 0; }
+.left-0 { left: 0; }
+
+.overflow-auto { overflow: auto; }
+.overflow-hidden { overflow: hidden; }
 
+.inline-block { display: inline-block; }
 .flex { display: flex; }
 .inline-flex { display: inline-flex; }
 
@@ -19,19 +27,27 @@ $units: 0, 1, 2, 3, 4;
 .flex-shrink { flex-shrink: 1; }
 .flex-shrink-0 { flex-shrink: 0; }
 
+.flex-row { flex-direction: row; }
+.flex-col { flex-direction: column; }
 .items-center { align-items: center; }
 .self-stretch { align-self: stretch; }
+.justify-start { justify-content: flex-start; }
+.justify-center { justify-content: center; }
 
-.w-5 { width: var(--unit5); }
-.w-6 { width: var(--unit6); }
 .w-7 { width: var(--unit7); }
 .w-8 { width: var(--unit8); }
 .w-9 { width: var(--unit9); }
 .w-10 { width: var(--unit10); }
 .w-11 { width: var(--unit11); }
 .w-12 { width: var(--unit12); }
 
+.w-full { width: 100%; }
+.w-auto { width: auto; }
 .h-full { height: 100%; }
+.h-auto { height: auto; }
+
+.m-auto { margin: auto; }
+.border-0 { border-width: 0; }
 
 @each $key in $units {
   .w-#{$key} { width: var(--unit#{$key}); }
@@ -70,8 +86,6 @@ $units: 0, 1, 2, 3, 4;
   }
 }
 
-.border-0 { border-width: 0; }
-
 .rounded-none { border-radius: 0; }
 .rounded-sm { border-radius: calc(var(--unit1) / 2); }
 .rounded { border-radius: var(--unit1); }
@@ -80,18 +94,49 @@ $units: 0, 1, 2, 3, 4;
 
 .font-bold { font-weight: bold; }
 .font-mono { font-family: var(--font-monospace); }
+.leading-none { line-height: 1; }
 .no-underline { text-decoration: none; }
+.underline { text-decoration: underline; }
 .text-left { text-align: left; }
 .text-center { text-align: center; }
 .text-right { text-align: right; }
 .whitespace-no-wrap { white-space: nowrap; }
 
 .bg-transparent { background-color: var(--transparent); }
-.bg-base00 { background-color: var(--base00); }
-.bg-base01 { background-color: var(--base01); }
-.bg-base02 { background-color: var(--base02); }
+
+.fill-current { fill: currentColor; }
 
 .cursor-default { cursor: default; }
 .cursor-pointer { cursor: pointer; }
+.cursor-col-resize { cursor: col-resize; }
 
 .z-10 { z-index: 10; }
+
+.appearance-none {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+.pointer-events-none { pointer-events: none; }
+
+.outline-none { outline: 0; }
+
+/*
+  Utilities not part of Tailwind:
+*/
+
+.text-inherit { color: var(--inherit); }
+
+.bg-base00 { background-color: var(--base00); }
+.bg-base01 { background-color: var(--base01); }
+.bg-base02 { background-color: var(--base02); }
+.bg-base05 { background-color: var(--base05); }
+.bg-spec00 { background-color: var(--spec00); }
+
+.text-base11 { color: var(--base11); }
+.text-base13 { color: var(--base13); }
+
+.text-12 { font-size: 12px; }
+.text-13 { font-size: 13px; }
+.text-18 { font-size: 18px; }

app/templates/components/component-tree-item.hbs

@@ -96,7 +96,7 @@
       <button
         class="component-tree-item__action inline-flex items-center h-full p-0 border-0 cursor-pointer bg-transparent z-10"
         title="Scroll into view"
-        data-test="scroll-into-view"
+        data-test-scroll-into-view
         {{on "click" @item.scrollIntoView}}
       >
         {{svg-jar "eye" width="20px" height="20px"}}

app/templates/components/deprecation-item.hbs

@@ -1,5 +1,5 @@
 <Ui::Disclosure as |disclosure|>
-  <div class="deprecation-item px-3" data-test="deprecation-item">
+  <div class="deprecation-item px-3" data-test-deprecation-item>
     <div class="flex items-center">
       <div
         class="flex items-center flex-grow py-2"
@@ -12,12 +12,12 @@
         {{/if}}
 
         <div class="w-12 flex-shrink-0 pr-2 text-right">
-          <span class="pill" data-test="deprecation-count">
+          <span class="pill" data-test-deprecation-count>
             {{@model.count}}
           </span>
         </div>
 
-        <span class="flex-grow font-bold" data-test="deprecation-message">
+        <span class="flex-grow font-bold" data-test-deprecation-message>
           {{@model.message}}
         </span>
       </div>
@@ -26,7 +26,7 @@
         <button
           class="send-to-console send-to-console--chevron-only mr-2"
           title="Trace deprecations in console"
-          data-test="full-trace-deprecations-btn"
+          data-test-full-trace-deprecations-btn
           {{on "click" (fn @traceDeprecations @model)}}
         >
           {{svg-jar "send-with-chevron" width="6px" height="9px"}}
@@ -50,11 +50,11 @@
     {{#if (and @model.hasSourceMap disclosure.isExpanded)}}
       {{#each @model.sources as |single|}}
         <DeprecationItemSource @model={{single}} as |source|>
-          <div class="deprecation-source pb-2" data-test="deprecation-source">
+          <div class="deprecation-source pb-2" data-test-deprecation-source>
             <button
               class="send-to-console send-to-console--chevron-only mr-3"
               title="Trace deprecations in console"
-              data-test="trace-deprecations-btn"
+              data-test-trace-deprecations-btn
               {{on "click" (fn @traceSource @model source.model)}}
             >
               {{svg-jar "send-with-chevron" width="6px" height="9px"}}
@@ -65,13 +65,13 @@
                 <a
                   class="font-mono"
                   href="#"
-                  data-test="deprecation-source-link"
+                  data-test-deprecation-source-link
                   {{action @openResource source.model.map}}
                 >
                   {{source.url}}
                 </a>
               {{else}}
-                <span class="font-mono" data-test="deprecation-source-text">
+                <span class="font-mono" data-test-deprecation-source-text>
                   {{source.url}}
                 </span>
               {{/if}}

app/templates/components/promise-item.hbs

@@ -27,7 +27,7 @@
 
 <@list.cell>
   <div
-    class="pill pill--bold pill--text js-promise-state"
+    class="pill pill--text font-bold js-promise-state"
     style={{this.style}}
   >
     {{this.state}}

app/templates/components/route-cell-name.hbs

@@ -3,7 +3,7 @@
     title={{@route.value.name}}
     class={{concat
       "js-route-name"
-      (if this.isCurrent " pill pill--bold pill--blue pill--text")
+      (if this.isCurrent " pill pill--blue pill--text font-bold")
     }}
   >
     {{@route.value.name}}

app/templates/components/warning-message.hbs

@@ -19,6 +19,6 @@
 
   <Ui::ToolbarSearchField
     @value={{this.searchValue}}
-    data-test="deprecations-search"
+    data-test-deprecations-search
   />
 </div>

app/templates/deprecations-toolbar.hbs

@@ -6,7 +6,7 @@
   as |h|
   >
     <h.row as |r|>
-      <r.cell data-test-table-header-column="" />
+      <r.cell data-test-table-header-column />
     </h.row>
   </t.head>
   <t.body
@@ -18,10 +18,10 @@
   >
     <b.row
       class={{if (mod b.rowMeta.index 2) "striped"}}
-      data-test-table-row=""
+      data-test-table-row
     as |r|
     >
-      <r.cell data-test-table-cell="" as |value column row|>
+      <r.cell data-test-table-cell as |value column row|>
         <span class={{row.color}}>
           {{value}}
         </span>

app/templates/records.hbs

@@ -1,7 +1,7 @@
 {{#unless this.isWarningClosed}}
-  <WarningMessage @close={{this.closeWarning}}>
+  <Ui::WarningMessage @close={{this.closeWarning}}>
     Render times may be inaccurate due to instrumentation and environment
-  </WarningMessage>
+  </Ui::WarningMessage>
 {{/unless}}
 
 {{#if this.showEmpty}}