fix(#449): add css base styles with class to positionable elements

Author: Cathy Siller

docs/components/menus/index.html

@@ -3,6 +3,7 @@
 minver: 0.2.0
 also:
   components/buttons: Buttons
+  components/menus/test.html: Testing - Menus
   elements/hx-menu: <hx-menu>
   elements/hx-menuitem: <hx-menuitem>
 ---

docs/components/menus/test.html

@@ -0,0 +1,36 @@
+---
+title: Testing - Menus
+---
+{% extends 'test.njk' %}
+{% block content %}
+  <section>
+    <nav class="hxBreadcrumb">
+      <a href="components/menus">Menus</a>
+      <hx-icon class="delimiter" type="angle-right"></hx-icon>
+      <a href="#">{{page.title}}</a>
+    </nav>
+  </section>
+
+  <section>
+    <header>
+      <h2 id="menu-in-table-header">Menu Inside a Table Header</h2>
+    </header>
+    <table class="hxTable">
+      <thead>
+        <tr>
+          <th>
+            Table Header
+            <hx-disclosure aria-controls="cogMenuId" class="hxBtn hxCog">
+              <hx-icon type="cog"></hx-icon>
+            </hx-disclosure>
+            <hx-menu id="cogMenuId" open>
+              <hx-menuitem>Action 1</hx-menuitem>
+              <hx-menuitem>Action 2</hx-menuitem>
+              <hx-menuitem>Action 3</hx-menuitem>
+            </hx-menu>
+          </th>
+        </tr>
+      </thead>
+    </table>
+  </section>
+{% endblock %}

docs/components/popovers/test.html

@@ -372,8 +372,6 @@ <h2>Within Scrollable Container</h2>
     </hx-div>
   </section>
 
-  <hr />
-
   <h2>Deprecated Markup</h2>
 
   <section>
@@ -529,4 +527,33 @@ <h3>Deprecated Scrolling Content</h3>
       </hx-popover>
     </div>
   </section>
+
+  <section>
+    <header>
+      <h2 id="popover-in-table-header">Popover Inside a Table Header</h2>
+    </header>
+    <table class="hxTable">
+      <thead>
+        <tr>
+          <th>
+            Table Header
+            <hx-disclosure aria-controls="testPopover" class="hxBtn" open>
+              <hx-icon type="cog"></hx-icon>
+            </hx-disclosure>
+            <hx-popover id="testPopover" open position="right">
+              <header>
+                Popover Header
+              </header>
+
+              <hx-div>
+                <p>
+                  This is my popover body.
+                </p>
+              </hx-div>
+            </hx-popover>
+          </th>
+        </tr>
+      </thead>
+    </table>
+  </section>
 {% endblock %}

docs/components/tooltips/test.html

@@ -243,4 +243,25 @@ <h2>Multiple Targets in Near Proximity</h2>
       </tbody>
     </table>
   </section>
+
+  <section>
+    <header>
+      <h2 id="tooltip-in-table-header">Tooltip Inside a Table Header</h2>
+    </header>
+    <table class="hxTable">
+      <thead>
+        <tr>
+          <th>
+            Rank
+            <p>
+              <hx-icon id="testIcon1" type="help-circle"></hx-icon>
+            </p>
+            <hx-tooltip for="testIcon1" open position="bottom-center">
+              Bottom Center Tooltip
+            </hx-tooltip>
+          </th>
+        </tr>
+      </thead>
+    </table>
+ </section>
 {% endblock %}

src/helix-ui/styles/components.less

@@ -1,3 +1,21 @@
+.hxComponent {
+  color: @gray-900;
+  font-family: "Roboto", sans-serif;
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: normal;
+  line-height: 1.5;
+  text-align: left;
+  text-decoration: none;
+  text-shadow: none;
+  text-transform: none;
+  white-space: normal;
+  word-break: normal;
+  word-spacing: normal;
+  word-wrap: normal;
+}
+
 /* ========== COMPONENTS ========== *\
     - Complex CSS Selectors
     - NO !important

src/helix-ui/styles/components/menus.less

@@ -1,7 +1,7 @@
 @import (reference) 'mixins';
 @import (reference) 'components/box';
 
-hx-menu {
+hx-menu:extend(.hxComponent) {
   #Positionable.base();
 
   background-color: @gray-0;

src/helix-ui/styles/components/modals.less

@@ -1,7 +1,7 @@
 @import (reference) 'vars';
 @import (reference) 'components/layouts';
 
-hx-modal {
+hx-modal:extend(.hxComponent) {
   display: none;
   height: 100vh;
   left: 0;
@@ -66,7 +66,6 @@ hx-modal {
   }
 
   // DEPRECATED: remove in v1.0.0
-
   hx-modalhead {
     flex-shrink: 0;
     order: 1;

src/helix-ui/styles/components/popovers.less

@@ -3,7 +3,7 @@
 @import (reference) 'components/layouts';
 @import (reference) 'components/typography';
 
-hx-popover {
+hx-popover:extend(.hxComponent) {
   #Positionable.base();
 
   max-width: 32rem; //~512px
@@ -29,7 +29,6 @@ hx-popover {
 // TODO: is there any way to simplify this?
 #hxPopover.hx-popover, // ShadyDOM selector
 hx-popover {
-  color: @gray-900;
   flex-direction: column;
 
   &[open] {

src/helix-ui/styles/components/search.less

@@ -1,6 +1,6 @@
 @import (reference) 'mixins';
 
-hx-search-assistance {
+hx-search-assistance:extend(.hxComponent) {
   #Positionable.base();
 
   background-color: @gray-0;

src/helix-ui/styles/components/tooltips.less

@@ -1,12 +1,10 @@
 @import (reference) 'mixins';
 
-hx-tooltip {
+hx-tooltip:extend(.hxComponent) {
   #Positionable.base();
 
-  color: @gray-900;
   font-size: 0.875rem;
   max-width: 25rem; // 400px
-  text-align: left;
   z-index: @tooltip-z-index;
 
   &[open] {