@buildcanada/charts 0.2.2 → 0.3.2

package/src/grapher/controls/Dropdown.scss

@@ -1,26 +1,33 @@
+/*******************************************************************************
+ * Dropdown
+ *
+ * Select/dropdown component styling.
+ * Uses Build Canada design system colors.
+ ******************************************************************************/
+
 @import "dropdown-icons";
 
 $grapher-dropdown-hover-fill: $gray-10;
-$grapher-dropdown-active-fill: $blue-20;
-$grapher-dropdown-selected-fill: #c7ced7;
+$grapher-dropdown-active-fill: $auburn-100;
+$grapher-dropdown-selected-fill: $auburn-200;
 
 .grapher-dropdown {
     position: relative;
     font: 400 13px/16px $sans-serif-font-stack;
 
-    // fixes a bug in Firefox where long labels would cause the dropdown to resize,
-    // see https://github.com/JedWatson/react-select/issues/5170
+    // Fixes a Firefox bug where long labels would cause the dropdown to resize
+    // See: https://github.com/JedWatson/react-select/issues/5170
     display: grid;
     grid-template-columns: minmax(0, 1fr);
 
     .clear-indicator {
         padding-right: 10px;
         position: absolute;
-        right: 29px; // Leave space for the dropdown caret
+        right: 29px;
         top: 50%;
         transform: translateY(-50%);
         cursor: pointer;
-        border-right: 1px solid #dadada;
+        border-right: 1px solid $gray-20;
         background: none;
         display: flex;
         align-items: center;
@@ -47,18 +54,18 @@ $grapher-dropdown-selected-fill: #c7ced7;
         display: flex;
         align-items: center;
         border: 1px solid $gray-20;
-        border-radius: 4px;
-        padding: 7px;
-        color: $gray-90;
-        background: white;
+        border-radius: 0;
+        padding: 8px 12px;
+        color: $charcoal;
+        background: $white;
         cursor: pointer;
         position: relative;
         width: 100%;
+        transition: all 150ms ease;
 
         &:focus-visible {
-            // Override global focus-visible style.
-            outline: 1px solid $blue-30;
-            outline-offset: -1px;
+            outline: 2px solid $auburn;
+            outline-offset: 2px;
         }
 
         &:hover {
@@ -66,8 +73,8 @@ $grapher-dropdown-selected-fill: #c7ced7;
         }
 
         &[data-disabled] {
-            opacity: 0.75;
-            cursor: default;
+            opacity: 0.5;
+            cursor: not-allowed;
             background: $gray-10;
         }
 
@@ -77,6 +84,7 @@ $grapher-dropdown-selected-fill: #c7ced7;
             width: 16px;
             height: 16px;
             margin-left: auto;
+            flex-shrink: 0;
         }
 
         &.loading:after {
@@ -84,14 +92,15 @@ $grapher-dropdown-selected-fill: #c7ced7;
         }
 
         &[data-pressed] {
-            border-color: $blue-30;
+            border-color: $auburn-500;
+            background: $auburn-50;
             &:after {
                 background: url($menu-caret-up) no-repeat center;
             }
         }
 
         .label {
-            color: $gray-70;
+            color: $gray-60;
 
             svg {
                 margin-left: 1px;
@@ -107,7 +116,7 @@ $grapher-dropdown-selected-fill: #c7ced7;
         width: 100%;
 
         &[data-placeholder] {
-            color: $gray-60;
+            color: $gray-50;
             white-space: nowrap;
         }
     }
@@ -118,42 +127,44 @@ $grapher-dropdown-selected-fill: #c7ced7;
     overflow-y: auto;
 
     &:focus-visible {
-        // Override global focus-visible style.
         outline: none;
     }
 }
 
 .grapher-dropdown-menu {
-    $option-checkmark: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xMS4wMTU2IDAuOTg0Mzc1QzExLjMyMDMgMS4yNjU2MiAxMS4zMjAzIDEuNzU3ODEgMTEuMDE1NiAyLjAzOTA2TDUuMDE1NjIgOC4wMzkwNkM0LjczNDM4IDguMzQzNzUgNC4yNDIxOSA4LjM0Mzc1IDMuOTYwOTQgOC4wMzkwNkwwLjk2MDkzOCA1LjAzOTA2QzAuNjU2MjUgNC43NTc4MSAwLjY1NjI1IDQuMjY1NjIgMC45NjA5MzggMy45ODQzOEMxLjI0MjE5IDMuNjc5NjkgMS43MzQzOCAzLjY3OTY5IDIuMDE1NjIgMy45ODQzOEw0LjQ3NjU2IDYuNDQ1MzFMOS45NjA5NCAwLjk4NDM3NUMxMC4yNDIyIDAuNjc5Njg4IDEwLjczNDQgMC42Nzk2ODggMTEuMDE1NiAwLjk4NDM3NVoiIGZpbGw9IiMxRDNENjMiLz4KPC9zdmc+";
+    $option-checkmark: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xMS4wMTU2IDAuOTg0Mzc1QzExLjMyMDMgMS4yNjU2MiAxMS4zMjAzIDEuNzU3ODEgMTEuMDE1NiAyLjAzOTA2TDUuMDE1NjIgOC4wMzkwNkM0LjczNDM4IDguMzQzNzUgNC4yNDIxOSA4LjM0Mzc1IDMuOTYwOTQgOC4wMzkwNkwwLjk2MDkzOCA1LjAzOTA2QzAuNjU2MjUgNC43NTc4MSAwLjY1NjI1IDQuMjY1NjIgMC45NjA5MzggMy45ODQzOEMxLjI0MjE5IDMuNjc5NjkgMS43MzQzOCAzLjY3OTY5IDIuMDE1NjIgMy45ODQzOEw0LjQ3NjU2IDYuNDQ1MzFMOS45NjA5NCAwLjk4NDM3NUMxMC4yNDIyIDAuNjc5Njg4IDEwLjczNDQgMC42Nzk2ODggMTEuMDE1NiAwLjk4NDM3NVoiIGZpbGw9IiMxZjVmN2YiLz4KPC9zdmc+";
     $option-checkmark-width: 12px;
     font: 400 13px/16px $sans-serif-font-stack;
 
-    margin-top: 3px;
-    border-radius: 4px;
-    background: white;
-    box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.15);
+    margin-top: 4px;
+    border-radius: 0;
+    background: $white;
+    box-shadow: 0px 4px 20px 0px rgba(39, 39, 39, 0.15);
     z-index: $zindex-controls-popup;
-    color: $gray-90;
+    color: $charcoal;
     width: var(--trigger-width);
     overflow-y: hidden;
+    border: 1px solid $gray-20;
 
     .group-heading {
         @include grapher_h5-black-caps;
         font-size: 11px;
-        color: $light-text;
-        margin: 12px 8px 2px 8px;
+        color: $gray-60;
+        margin: 12px 12px 4px 12px;
         font-weight: 700;
+        letter-spacing: 0.05em;
     }
 
     .group + .group .group-heading {
         margin-top: 8px;
-        padding: 12px 0 2px 0;
-        border-top: 1px solid #f2f2f2;
+        padding: 12px 0 4px 0;
+        border-top: 1px solid $gray-10;
     }
 
     .option {
         padding: 10px calc(16px + $option-checkmark-width + 2px) 10px 16px;
         cursor: pointer;
+        transition: all 100ms ease;
 
         &[data-hovered],
         &[data-focused] {
@@ -161,19 +172,19 @@ $grapher-dropdown-selected-fill: #c7ced7;
         }
 
         &:focus-visible {
-            // Override global focus-visible style.
             outline: none !important;
         }
 
         &[data-pressed] {
-            color: $active-text;
+            color: $auburn;
             background: $grapher-dropdown-active-fill;
         }
 
         &[data-selected] {
             position: relative;
-            color: $active-text;
+            color: $auburn;
             background: $grapher-dropdown-active-fill;
+            font-weight: 500;
 
             &:hover {
                 background: $grapher-dropdown-selected-fill;
@@ -185,29 +196,40 @@ $grapher-dropdown-selected-fill: #c7ced7;
                 width: $option-checkmark-width;
                 height: 9px;
                 position: absolute;
-                right: 18px;
+                right: 16px;
                 top: 50%;
                 transform: translateY(-50%);
             }
         }
 
         .detail {
-            color: $gray-70;
+            color: $gray-60;
+            font-size: 12px;
         }
 
         &[data-selected] .detail {
-            color: $blue-60;
+            color: $auburn-700;
         }
     }
 }
 
+/*******************************************************************************
+ * Dropdown Search
+ ******************************************************************************/
+
 .grapher-dropdown-search {
     display: flex;
     align-items: center;
-    margin: 4px;
+    margin: 8px;
     border: 1px solid $gray-20;
-    border-radius: 4px;
-    height: 32px;
+    border-radius: 0;
+    height: 36px;
+    background: $white;
+    transition: all 150ms ease;
+
+    &:focus-within {
+        border-color: $auburn-500;
+    }
 }
 
 .grapher-dropdown-search-input {
@@ -216,34 +238,43 @@ $grapher-dropdown-selected-fill: #c7ced7;
     border: none;
     outline: 0;
     font: 400 13px/16px $sans-serif-font-stack;
-    color: $dark-text;
-    background: white;
-    padding: 4px 6px;
+    color: $charcoal;
+    background: transparent;
+    padding: 8px;
 
     &:focus-visible {
-        // Override global focus-visible style.
         outline: none;
     }
+
+    &::placeholder {
+        color: $gray-50;
+    }
 }
 
 .grapher-dropdown-search-icon {
-    $magnifying-glass: "data:image/svg+xml;base64,PHN2ZwogICAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICAgdmlld0JveD0iMCAwIDUxMiA1MTIiCj4KICA8cGF0aAogICAgZD0iTTQxNiAyMDhjMCA0NS45LTE0LjkgODguMy00MCAxMjIuN0w1MDIuNiA0NTcuNGMxMi41IDEyLjUgMTIuNSAzMi44IDAgNDUuM3MtMzIuOCAxMi41LTQ1LjMgMEwzMzAuNyAzNzZjLTM0LjQgMjUuMi03Ni44IDQwLTEyMi43IDQwQzkzLjEgNDE2IDAgMzIyLjkgMCAyMDhTOTMuMSAwIDIwOCAwUzQxNiA5My4xIDQxNiAyMDh6TTIwOCAzNTJhMTQ0IDE0NCAwIDEgMCAwLTI4OCAxNDQgMTQ0IDAgMSAwIDAgMjg4eiIKICAgIGZpbGw9IiM4NTg1ODUiCiAgLz4KPC9zdmc+Cg==";
-    margin-left: 8px;
-    width: 12px;
-    height: 12px;
+    $magnifying-glass: "data:image/svg+xml;base64,PHN2ZwogICAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICAgdmlld0JveD0iMCAwIDUxMiA1MTIiCj4KICA8cGF0aAogICAgZD0iTTQxNiAyMDhjMCA0NS45LTE0LjkgODguMy00MCAxMjIuN0w1MDIuNiA0NTcuNGMxMi41IDEyLjUgMTIuNSAzMi44IDAgNDUuM3MtMzIuOCAxMi41LTQ1LjMgMEwzMzAuNyAzNzZjLTM0LjQgMjUuMi03Ni44IDQwLTEyMi43IDQwQzkzLjEgNDE2IDAgMzIyLjkgMCAyMDhTOTMuMSAwIDIwOCAwUzQxNiA5My4xIDQxNiAyMDh6TTIwOCAzNTJhMTQ0IDE0NCAwIDEgMCAwLTI4OCAxNDQgMTQ0IDAgMSAwIDAgMjg4eiIKICAgIGZpbGw9IiM3MzczNzMiCiAgLz4KPC9zdmc+Cg==";
+    margin-left: 10px;
+    width: 14px;
+    height: 14px;
     background: url($magnifying-glass) no-repeat center;
+    background-size: contain;
+    flex-shrink: 0;
 }
 
 .grapher-dropdown-search-reset {
-    margin-right: 8px;
+    margin-right: 10px;
     border: none;
     background: none;
-    padding: 0;
+    padding: 4px;
     cursor: pointer;
-    color: $gray-60;
+    color: $gray-50;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: color 150ms ease;
 
     &:hover {
-        color: $dark-text;
+        color: $charcoal;
     }
 }
 

package/src/grapher/controls/SearchField.scss

@@ -1,10 +1,17 @@
+/*******************************************************************************
+ * Search Field
+ *
+ * Search input field styling.
+ * Uses Build Canada design system colors.
+ ******************************************************************************/
+
 .grapher-search-field {
-    // search icon
-    $svg-margin: 8px;
-    $svg-size: 12px;
+    // Search icon
+    $svg-margin: 10px;
+    $svg-size: 14px;
 
-    $placeholder: $gray-60;
-    $focus: 1px solid $blue-30;
+    $placeholder: $gray-50;
+    $focus: 2px solid $auburn-500;
 
     position: relative;
 
@@ -12,14 +19,14 @@
         position: absolute;
         top: 50%;
         left: $svg-margin;
-        color: $light-text;
+        color: $gray-50;
         transform: translateY(-50%);
         font-size: $svg-size;
     }
 
     .clear {
         margin: 0;
-        padding: 0;
+        padding: 4px;
         background: none;
         border: none;
         position: absolute;
@@ -27,31 +34,40 @@
         right: $svg-margin;
         transform: translateY(-50%);
         font-size: $svg-size;
-        color: $dark-text;
+        color: $gray-50;
         cursor: pointer;
+        transition: color 150ms ease;
+
+        &:hover {
+            color: $charcoal;
+        }
     }
 
     input[type="search"] {
         @include grapher_label-2-regular;
         width: 100%;
-        height: 32px;
+        height: 36px;
         border: 1px solid $gray-20;
-        padding-left: $svg-margin + $svg-size + 4px;
-        padding-right: $svg-margin + $svg-size + 4px;
-        border-radius: 4px;
-        background: #fff;
-        color: $dark-text;
+        padding-left: $svg-margin + $svg-size + 6px;
+        padding-right: $svg-margin + $svg-size + 6px;
+        border-radius: 0;
+        background: $white;
+        color: $charcoal;
+        transition: all 150ms ease;
 
-        // style focus state
+        &::placeholder {
+            color: $placeholder;
+        }
+
+        // Style focus state
         &:focus {
             outline: none;
-            border: $focus;
-        }
-        &:focus:not(:focus-visible) {
-            border: none;
+            border-color: $auburn-500;
         }
+
         &:focus-visible {
-            border: $focus;
+            outline: 2px solid $auburn;
+            outline-offset: 2px;
         }
     }
 
@@ -61,18 +77,18 @@
         pointer-events: none;
         position: absolute;
         top: 50%;
-        left: $svg-size + $svg-margin + 6px;
+        left: $svg-size + $svg-margin + 8px;
         transform: translateY(-50%);
 
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
-        width: calc(100% - $svg-size - $svg-margin - 2 * 6px);
+        width: calc(100% - $svg-size - $svg-margin - 2 * 8px);
     }
 
     &.grapher-search-field--empty {
         input[type="search"] {
-            padding-right: 8px;
+            padding-right: 12px;
         }
     }
 }

package/src/grapher/controls/SettingsMenu.scss

@@ -18,7 +18,8 @@ $control-row-height: 32px;
 
 @at-root .GrapherSettingsPopover {
     background: white;
-    border-radius: 4px;
+    border-radius: 0;
+    border: 1px solid $gray-20;
     box-shadow: 0px 4px 23px 4px #0000000f;
     z-index: $zindex-controls-popup;
     overflow-y: auto;
@@ -49,7 +50,7 @@ $control-row-height: 32px;
             border: 1px solid $light-stroke;
             font: $medium 13px/16px $lato;
             letter-spacing: 0.01em;
-            border-radius: 4px;
+            border-radius: 0;
             padding: 7px;
             height: 40px;
 

package/src/grapher/controls/ShareMenu.scss

@@ -8,7 +8,7 @@ $zindex-ControlsFooter: 2;
 
 .ShareMenu {
     $hover-fill: $gray-10;
-    $active-fill: $blue-20;
+    $active-fill: $cerulean-100;
 
     position: absolute;
     bottom: $timelineHeight + 8px;
@@ -17,7 +17,8 @@ $zindex-ControlsFooter: 2;
     box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.06);
     padding: 4px 0;
     z-index: $zindex-ControlsFooterMenu;
-    border-radius: 4px;
+    border-radius: 0;
+    border: 1px solid $gray-20;
 
     h2 {
         font-family: $sans-serif-font-stack;

package/src/grapher/core/grapher.scss

@@ -17,12 +17,12 @@
 @import "./typography.scss";
 
 // grapher frame
-$frame-color: $gray-10;
+$frame-color: $gray-20;
 
 // text
-$dark-text: $gray-80;
-$light-text: $gray-70;
-$active-text: $blue-90;
+$dark-text: $charcoal;
+$light-text: $gray-60;
+$active-text: $cerulean-900;
 
 // These should be between 0–100 in order to avoid conflicting with
 // site dropdowns, search overlays, etc.
@@ -119,8 +119,8 @@ $zindex-controls-drawer: 150;
 
     line-height: 1em;
 
-    background: white;
-    color: $gray-80;
+    background: $linen;
+    color: $charcoal;
 
     position: relative;
     container-type: size;
@@ -212,9 +212,9 @@ $zindex-controls-drawer: 150;
 }
 
 .tippy-box[data-theme="grapher-dark"] {
-    background-color: $gray-90;
+    background-color: $charcoal;
     color: white;
-    border-radius: 4px;
+    border-radius: 0;
     font-size: 12px;
     line-height: 16px;
     padding: 8px;
@@ -224,7 +224,7 @@ $zindex-controls-drawer: 150;
     }
 
     .tippy-arrow {
-        color: $gray-90;
+        color: $charcoal;
     }
 }
 

package/src/grapher/entitySelector/EntitySelector.scss

@@ -198,7 +198,7 @@
                 top: 0;
                 left: 0;
                 height: 100%;
-                background: $blue-10;
+                background: $auburn-200;
                 z-index: -1;
             }
 

package/src/grapher/footer/Footer.tsx

@@ -22,8 +22,13 @@ import {
     GRAPHER_FRAME_PADDING_HORIZONTAL,
     GrapherModal,
 } from "../core/GrapherConstants"
+
 import { GRAPHER_LIGHT_TEXT } from "../color/ColorConstants"
 
+// Estimated dimensions of action buttons for layout calculations
+const ESTIMATED_ACTION_BUTTONS_WIDTH = 400
+const ACTION_BUTTONS_HEIGHT = 32
+
 /*
 
 The footer contains the sources, the note (optional), the action buttons and the license and origin URL (optional).
@@ -168,13 +173,7 @@ abstract class AbstractFooter<
     }
 
     @computed protected get finalUrlText(): string | undefined {
-        const {
-            correctedUrlText,
-            licenseText,
-            fontSize,
-            maxWidth,
-            actionButtons,
-        } = this
+        const { correctedUrlText, licenseText, fontSize, maxWidth } = this
 
         if (this.hideOriginUrl) return undefined
 
@@ -193,7 +192,7 @@ abstract class AbstractFooter<
         // If the URL is too long, don't show it
         if (
             licenseAndOriginUrlWidth + HORIZONTAL_PADDING >
-            maxWidth - actionButtons.width
+            maxWidth - ESTIMATED_ACTION_BUTTONS_WIDTH
         )
             return undefined
 
@@ -230,47 +229,35 @@ abstract class AbstractFooter<
         return !this.manager.hideNote && !!this.noteText
     }
 
-    @computed private get actionButtonsWidthWithIconsOnly(): number {
-        return new ActionButtons({
-            manager: this.manager,
-            maxWidth: this.maxWidth,
-        }).widthWithIconsOnly
-    }
-
     @computed private get useFullWidthSources(): boolean {
-        const {
-            showNote,
-            sourcesFontSize,
-            maxWidth,
-            sourcesText,
-            actionButtonsWidthWithIconsOnly,
-        } = this
+        const { showNote, sourcesFontSize, maxWidth, sourcesText } = this
         if (showNote) return true
         const sourcesWidth = Bounds.forText(sourcesText, {
             fontSize: sourcesFontSize,
         }).width
-        return sourcesWidth > 2 * (maxWidth - actionButtonsWidthWithIconsOnly)
+        return (
+            sourcesWidth > 2 * (maxWidth - ESTIMATED_ACTION_BUTTONS_WIDTH)
+        )
     }
 
     @computed private get useFullWidthNote(): boolean {
-        const {
-            fontSize,
-            maxWidth,
-            noteText,
-            actionButtonsWidthWithIconsOnly,
-        } = this
+        const { fontSize, maxWidth, noteText } = this
         const noteWidth = Bounds.forText(noteText, { fontSize }).width
-        return noteWidth > 2 * (maxWidth - actionButtonsWidthWithIconsOnly)
+        return noteWidth > 2 * (maxWidth - ESTIMATED_ACTION_BUTTONS_WIDTH)
     }
 
     @computed protected get sourcesMaxWidth(): number {
         if (this.useFullWidthSources) return this.maxWidth
-        return this.maxWidth - this.actionButtons.width - HORIZONTAL_PADDING
+        return (
+            this.maxWidth - ESTIMATED_ACTION_BUTTONS_WIDTH - HORIZONTAL_PADDING
+        )
     }
 
     @computed protected get noteMaxWidth(): number {
         if (this.useFullWidthNote) return this.maxWidth
-        return this.maxWidth - this.actionButtons.width - HORIZONTAL_PADDING
+        return (
+            this.maxWidth - ESTIMATED_ACTION_BUTTONS_WIDTH - HORIZONTAL_PADDING
+        )
     }
 
     @computed protected get licenseAndOriginUrlMaxWidth(): number {
@@ -326,60 +313,6 @@ abstract class AbstractFooter<
         })
     }
 
-    @computed private get actionButtonsMaxWidth(): number {
-        const {
-            correctedUrlText,
-            licenseText,
-            maxWidth,
-            fontSize,
-            sourcesFontSize,
-            useFullWidthSources,
-            sourcesText,
-            noteText,
-            showNote,
-            useFullWidthNote,
-        } = this
-
-        const sourcesWidth = Bounds.forText(sourcesText, {
-            fontSize: sourcesFontSize,
-        }).width
-        const noteWidth = Bounds.forText(noteText, { fontSize }).width
-
-        // text next to the action buttons
-        const leftTextWidth = !useFullWidthSources
-            ? sourcesWidth
-            : showNote && !useFullWidthNote
-              ? noteWidth
-              : 0
-        // text above the action buttons
-        // (taken into account to ensure the action buttons are not too close to clickable text)
-        const topTextWidth = useFullWidthSources
-            ? useFullWidthNote
-                ? noteWidth
-                : sourcesWidth
-            : 0
-        const licenseAndOriginUrlWidth = Bounds.forText(
-            AbstractFooter.constructLicenseAndOriginUrlText(
-                correctedUrlText,
-                licenseText
-            ),
-            { fontSize }
-        ).width
-
-        return (
-            maxWidth -
-            Math.max(topTextWidth, leftTextWidth, licenseAndOriginUrlWidth) -
-            HORIZONTAL_PADDING
-        )
-    }
-
-    @computed private get actionButtons(): ActionButtons {
-        return new ActionButtons({
-            manager: this.manager,
-            maxWidth: this.actionButtonsMaxWidth,
-        })
-    }
-
     @computed get height(): number {
         return this.topContentHeight + this.bottomContentHeight
     }
@@ -555,7 +488,7 @@ abstract class AbstractFooter<
     }
 
     @computed private get bottomContentHeight(): number {
-        const { actionButtons, sources, note } = this
+        const { sources, note } = this
 
         const renderSources = !this.useFullWidthSources
         const renderNote = this.showNote && !this.useFullWidthNote
@@ -567,7 +500,7 @@ abstract class AbstractFooter<
             (renderPadding ? this.verticalPadding : 0) +
             (renderLicense ? this.licenseAndOriginUrl.height : 0)
 
-        return Math.max(textHeight, actionButtons.height)
+        return Math.max(textHeight, ACTION_BUTTONS_HEIGHT)
     }
 
     // renders the action buttons and the content next to it
@@ -600,10 +533,7 @@ abstract class AbstractFooter<
                     {renderPadding && this.renderVerticalSpace()}
                     {renderLicense && this.renderLicense()}
                 </div>
-                <ActionButtons
-                    manager={this.manager}
-                    maxWidth={this.actionButtonsMaxWidth}
-                />
+                <ActionButtons manager={this.manager} />
             </div>
         )
     }