[142] Make component widths accessible in text zoom mode

Author: george

app/components/SideNav/styles.scss

@@ -45,7 +45,6 @@
     .side-nav-menu {
       h4 {
         color: $black;
-        font-size: 18px;
         font-weight: $global-font-weight-bold;
       }
 

src/js/__tests__/__snapshots__/accordion.spec.js.snap

@@ -101,7 +101,7 @@ exports[`Accordions #render -> Accordion Button Click (no toggle multiple) opens
         aria-labelledby="button-2"
         class="accordion-content"
         id="content-2"
-        style="max-height: 0px;"
+        style="max-height: 0em;"
       >
         
         
@@ -177,7 +177,7 @@ exports[`Accordions #render -> Accordion Button Click (toggle multiple) opens cl
         aria-labelledby="button-1"
         class="accordion-content"
         id="content-1"
-        style="max-height: 0px;"
+        style="max-height: 0em;"
       >
         
         
@@ -236,7 +236,7 @@ exports[`Accordions #render -> Accordion Button Click (toggle multiple) opens cl
         aria-labelledby="button-2"
         class="accordion-content"
         id="content-2"
-        style="max-height: 0px;"
+        style="max-height: 0em;"
       >
         
         
@@ -311,7 +311,7 @@ exports[`Accordions API start sets attributes 1`] = `
         aria-labelledby="button-1"
         class="accordion-content"
         id="content-1"
-        style="max-height: 0px;"
+        style="max-height: 0em;"
       >
         
         

src/js/accordion.js

@@ -33,6 +33,8 @@ const Messages = {
     `Could not find accordion content block with id '${id}'; should match trigger with [data-target='${id}'].`,
 }
 
+const BASE_FONT_SIZE = 16
+
 export default class Accordion {
   constructor() {
     // events
@@ -125,7 +127,7 @@ export default class Accordion {
     }
 
     if (contentShouldExpand === "true") {
-      dom.css(buttonContent, "maxHeight", `${buttonContent.scrollHeight}px`)
+      dom.css(buttonContent, "maxHeight", `${buttonContent.scrollHeight / BASE_FONT_SIZE}em`)
       dom.setAttr(instance, Selectors.ARIA_EXPANDED, "true")
       dom.setAttr(buttonContent, Selectors.ARIA_HIDDEN, "false")
 
@@ -235,7 +237,11 @@ export default class Accordion {
     if (dom.css(this._activeContent, "maxHeight")) {
       dom.css(this._activeContent, "maxHeight", null)
     } else {
-      dom.css(this._activeContent, "maxHeight", `${this._activeContent.scrollHeight}px`)
+      dom.css(
+        this._activeContent,
+        "maxHeight",
+        `${this._activeContent.scrollHeight / BASE_FONT_SIZE}em`
+      )
     }
   }
 

src/scss/_config.scss

@@ -274,7 +274,7 @@ $type-p-line-height: $global-line-height !default;
 $type-p-margin-bottom: $global-font-size !default;
 
 $type-code-font: $global-monospace !default;
-$type-code-font-size: 1em !default;
+$type-code-font-size: $global-font-size !default;
 $type-code-color: $gray600 !default;
 $type-code-background: lighten($gray900, 10%) !default;
 $type-code-border: none !default;
@@ -296,10 +296,10 @@ $type-mark-padding: 0 !default;
 $type-mark-color: $gray200 !default;
 $type-mark-background: status(warning) !default;
 
-$underline-text-decoration: underline;
+$underline-text-decoration: underline !default;
 
-$hr-border: 1px solid $gray900;
-$hr-margin: 2.5rem 0;
+$hr-border: 1px solid $gray900 !default;
+$hr-margin: spacing(4) 0 !default;
 
 $ul-list-style: disc !default;
 $ol-list-style: decimal !default;
@@ -615,8 +615,6 @@ $input-border-radius: $form-radius !default;
 $input-background: $white !default;
 $input-resize: vertical !default;
 
-// Input + Textarea states
-
 $input-hover-background: $input-background !default;
 $input-hover-border: $global-border-width solid $gray600 !default;
 $input-hover-box-shadow: $input-box-shadow !default;
@@ -666,7 +664,7 @@ $modal-transition-ease: $global-ease !default;
 $modal-container-background-color: $white !default;
 $modal-container-border-radius: $global-border-radius !default;
 $modal-container-padding: $global-space !default;
-$modal-container-width: 450px !default;
+$modal-container-width: em(450px) !default;
 $modal-container-width-small: 95% !default;
 $modal-container-margin: 40px auto !default;
 $modal-container-margin-small: $global-space auto !default;
@@ -718,7 +716,7 @@ $dropdown-menu-transition: opacity $global-transition !default;
 $dropdown-menu-padding: 8px 0 !default;
 $dropdown-menu-border-radius: $global-border-radius !default;
 $dropdown-menu-background-color: $white !default;
-$dropdown-menu-width: 200px !default;
+$dropdown-menu-width: em(200px) !default;
 $dropdown-menu-border: 1px solid $dropdown-border-color !default;
 
 $dropdown-arrow-offset: 12px !default;
@@ -744,7 +742,7 @@ $tooltip-arrows-enabled: true !default;
 $tooltip-padding: 4px 8px !default;
 $tooltip-margin: 0 0 $arrow-size !default;
 
-$tooltip-transition: opacity $global-transition !default;
+$tooltip-transition: $global-transition !default;
 
 $tooltip-font-size: 14px !default;
 $tooltip-border-radius: $global-border-radius !default;

src/scss/components/_tooltip.scss

@@ -21,7 +21,7 @@
   position: absolute;
   display: block;
   opacity: 0;
-  transition: $tooltip-transition;
+  transition: opacity $tooltip-transition;
   pointer-events: none;
   word-wrap: break-word;
   white-space: nowrap;

src/scss/utilities/_functions.scss

@@ -5,3 +5,13 @@
 @function breakpoint($name) {
   @return map-get($breakpoints, $name);
 }
+
+$base-em-font-size: 16px !default;
+
+@function em($pixels, $font-size: $base-em-font-size) {
+  @return #{$pixels / $font-size}em;
+}
+
+@function spacing($increment) {
+  @return map-get($spacing-increments, "#{$increment}");
+}