fix(spacing): update custom element shape to be inline-block #67

demo/index.html

@@ -46,11 +46,18 @@ <h1>ods-hyperlink</h1>
 
       <h3>auro-hyperlink examples</h3>
 
+      <p>Ddefault link</p>
+      <demo-snippet>
+        <template>
+            This is a <auro-hyperlink href="//www.apple.com">link</auro-hyperlink>. How do I look?
+          </template>
+      </demo-snippet>
+
       <p>Telephone link</p>
       <demo-snippet>
         <template>
-            <auro-hyperlink href="sms:+18002527522">sms link</auro-hyperlink> or
-            <auro-hyperlink href="tel:+18002527522">telephone link</auro-hyperlink> or
+            <auro-hyperlink href="sms:+18002527522">sms link</auro-hyperlink>, or
+            <auro-hyperlink href="tel:+18002527522">telephone link</auro-hyperlink>, or
             <auro-hyperlink href="ftp://somewhere.on.the.internet">ftp link</auro-hyperlink>
           </template>
       </demo-snippet>

src/style.scss

@@ -16,20 +16,23 @@
 @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/animation";
 
 // Import Auro Sass variables
-// Dependency reauired to process variables from Icons
+// Dependency required to process variables from Icons
 @import "./node_modules/@alaskaairux/orion-design-tokens/dist/tokens/SCSSVariables";
 // Import tokens selectors
 @import "./node_modules/@alaskaairux/icons/dist/icons";
 
 // layout styles - define any layout specifications for UI that is contained WITHIN the component
-// never define layout that would cause effect on element ouside the scope of this component
+// never define layout that would cause effect on element outside the scope of this component
+
+:host {
+  display: inline-block;
+}
 
 // component shape styles
 .hyperlink {
   @include auro_transition(all, 0.15s, ease);
 
   color: var(--auro-color-ui-default-on-light);
-  padding: 0;
   text-decoration: underline;
 
   &:visited {