@ebay/skin 15.1.1 → 15.2.0

package/dist/link/link.css

@@ -1,18 +1,21 @@
-a.nav-link {
+a.nav-link,
+a.standalone-link {
   color: var(--nav-link-foreground-color, var(--color-foreground-primary));
   text-decoration: none;
 }
-a.nav-link:visited {
+a.nav-link:visited,
+a.standalone-link:visited {
   color: var(--nav-link-foreground-color, var(--color-foreground-primary));
 }
-a.nav-link:hover {
+a.nav-link:hover,
+a.standalone-link:hover {
   color: var(--nav-link-foreground-color-hover, var(--color-foreground-primary));
   text-decoration: underline;
 }
 button.fake-link {
   background-color: transparent;
   border: 0;
-  color: var(--fake-link-foreground-color, var(--color-foreground-accent));
+  color: var(--fake-link-foreground-color, var(--color-foreground-primary));
   font-family: inherit;
   font-size: inherit;
   padding: 0;
@@ -21,6 +24,3 @@ button.fake-link {
 button.fake-link[disabled] {
   color: var(--fake-link-foreground-disabled-color, var(--color-foreground-disabled));
 }
-button.fake-link:hover:not(:disabled) {
-  color: var(--color-state-accent-hover);
-}

package/dist/mixins/typography-mixins.less

@@ -76,7 +76,7 @@
 
 .typography-small() {
     font-size: @font-size-small;
-    line-height: 18px;
+    line-height: 16px;
 }
 
 .typography-small-bold() {

package/dist/pagination/pagination.css

@@ -21,7 +21,6 @@ ol.pagination__items {
   height: 44px;
   list-style-type: none;
   margin: 0;
-  overflow: hidden;
   padding: 0;
 }
 ol.pagination__items li:not([hidden]) {

package/dist/panel-dialog/panel-dialog.css

@@ -10,6 +10,8 @@
   will-change: background-color;
   z-index: 100000;
   flex-direction: column;
+  /* stylelint-disable-next-line declaration-block-no-duplicate-properties */
+  overflow-y: hidden;
 }
 .panel-dialog[role="dialog"]:not([hidden]) {
   display: flex;
@@ -61,6 +63,8 @@
   flex: 1 1 auto;
   margin: 16px;
   position: relative;
+  height: 1px;
+  overflow-y: auto;
 }
 .panel-dialog__main > :first-child {
   margin-top: 0;

package/dist/snackbar-dialog/snackbar-dialog.css

@@ -49,11 +49,16 @@
   margin-top: 16px;
 }
 .snackbar-dialog__actions .fake-link {
+  color: var(--snackbar-dialog-foreground-color, var(--color-foreground-on-inverse));
   text-decoration: none;
 }
 .snackbar-dialog__actions .fake-link::first-letter {
   text-decoration: underline;
 }
+.snackbar-dialog__actions button.fake-link:hover:not(:disabled) {
+  color: var(--snackbar-dialog-foreground-color, var(--color-foreground-on-inverse));
+  text-decoration: underline;
+}
 @media (min-width: 601px) {
   .snackbar-dialog {
     bottom: 20px;

package/dist/tokens/evo-core.css

@@ -27,7 +27,7 @@
     --color-magenta-1: #fad8f0;
     --color-magenta-2: #f5a0d9;
     --color-magenta-3: #ea5fbc;
-    --color-magenta-4: #82187c;
+    --color-magenta-4: #d11da4;
     --color-magenta-5: #a60d8a;
     --color-magenta-6: #82187c;
     --color-magenta-7: #500750;

package/dist/typography/typography.css

@@ -33,7 +33,7 @@
 }
 .small-text {
   font-size: 0.75rem;
-  line-height: 18px;
+  line-height: 16px;
 }
 .bold-text {
   font-weight: 700;

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@ebay/skin",
     "description": "Skin - CSS modules that represent the brand eBay",
-    "version": "15.1.1",
+    "version": "15.2.0",
     "license": "MIT",
     "main": "./index.js",
     "maintainers": [
@@ -59,21 +59,21 @@
     },
     "devDependencies": {
         "@babel/cli": "^7.18.10",
-        "@babel/core": "^7.19.6",
-        "@babel/preset-env": "^7.19.4",
-        "@commitlint/cli": "^17.1.2",
-        "@commitlint/config-conventional": "^17.1.0",
+        "@babel/core": "^7.20.2",
+        "@babel/preset-env": "^7.20.2",
+        "@commitlint/cli": "^17.2.0",
+        "@commitlint/config-conventional": "^17.2.0",
         "@ebay/browserslist-config": "^2.4.1",
-        "@percy/cli": "^1.11.0",
+        "@percy/cli": "^1.14.0",
         "@percy/storybook": "^4.3.4",
-        "@storybook/builder-webpack5": "^6.5.12",
-        "@storybook/html": "^6.5.12",
-        "@storybook/manager-webpack5": "^6.5.12",
-        "babel-loader": "^8.2.5",
+        "@storybook/builder-webpack5": "^6.5.13",
+        "@storybook/html": "^6.5.13",
+        "@storybook/manager-webpack5": "^6.5.13",
+        "babel-loader": "^9.1.0",
         "browser-sync": "^2.27.10",
         "btoa": "^1",
         "cross-env": "^7",
-        "eslint": "^8.25.0",
+        "eslint": "^8.27.0",
         "eslint-config-ebay": "^1",
         "eslint-config-prettier": "^8",
         "eslint-plugin-prettier": "^4",
@@ -82,7 +82,7 @@
         "gulp-clean-css": "^4",
         "gulp-less": "^5",
         "gulp-rename": "^2",
-        "husky": "^8.0.1",
+        "husky": "^8.0.2",
         "jekyll": "^3.0.0-beta1",
         "jsdom": "^20.0.1",
         "less-loader": "^11.1.0",
@@ -121,18 +121,18 @@
         "postcss-loader": "^7.0.0",
         "prettier": "^2.7.1",
         "rimraf": "^3",
-        "stylelint": "^14.14.0",
+        "stylelint": "^14.15.0",
         "stylelint-config-prettier": "^9",
         "stylelint-config-standard": "^29",
         "stylelint-no-unsupported-browser-features": "^6.0.1",
         "stylelint-order": "^5",
         "stylelint-prettier": "^2",
-        "svgo": "^2.7.0",
-        "webpack": "^5.74.0",
+        "svgo": "^3.0.1",
+        "webpack": "^5.75.0",
         "webpack-cli": "^4.10.0",
         "winston": "^3.8.2",
         "xmlserializer": "^0.6.1",
-        "yargs": "^17.6.0"
+        "yargs": "^17.6.2"
     },
     "keywords": [
         "eBay",

package/src/less/breadcrumbs/breadcrumbs.less

@@ -2,80 +2,114 @@
 @import "../mixins/private/token-mixins.less";
 
 nav.breadcrumbs {
-    .color-token(breadcrumbs-item-foreground-color, color-foreground-primary);
+    .color-token(breadcrumbs-item-foreground-color, color-foreground-secondary);
     font-size: @font-size-12;
     height: fit-content;
     margin: 8px 0;
     min-height: 16px;
-    overflow-x: scroll;
+    overflow-x: scroll; // Deprecated in 15.2.0; kept it in to support deprecated implementations; @TODO remove in 16.0.0
     padding: 8px;
-    scrollbar-width: none;
+    scrollbar-width: none; // Deprecated in 15.2.0; kept it in to support deprecated implementations; @TODO remove in 16.0.0
     white-space: nowrap;
+}
 
-    ul {
-        display: inline;
-        margin: 0;
-        min-width: 100%;
-        padding: 0;
-        right: 0;
-    }
+nav.breadcrumbs > ul {
+    display: inline-block;
+    margin: 0;
+    min-width: 100%;
+    padding: 0;
+    right: 0;
+}
 
-    // On certain pages spacing in each container can vary in size even if content is the same.
-    // Force content to flex makes it all have the same size
-    li {
-        align-items: center;
-        display: inline-flex;
-    }
+// On certain pages spacing in each container can vary in size even if content is the same.
+// Force content to flex makes it all have the same size
+nav.breadcrumbs > ul > li {
+    align-items: center;
+    display: inline-flex;
+    vertical-align: middle;
+}
 
-    li svg {
-        margin-left: 7px;
-        margin-right: 7px;
-    }
+nav.breadcrumbs > ul > li[hidden] {
+    display: none;
+}
 
-    a {
-        text-decoration: none;
-    }
+nav.breadcrumbs > ul > li svg {
+    margin-left: 7px;
+    margin-right: 7px;
+}
 
-    button {
-        background: none;
-        border: none;
-        font-family: inherit;
-        font-size: 1em;
-        margin: 0;
-        padding: 0;
-    }
+nav.breadcrumbs > ul > li > a {
+    text-decoration: none;
+}
 
-    a,
-    button {
-        color: inherit;
-        outline-offset: 5px;
-
-        &:focus,
-        &:hover {
-            .color-token(breadcrumbs-item-hover-foreground-color, color-foreground-accent);
-            text-decoration: underline;
-        }
-
-        &[aria-current] {
-            .color-token(breadcrumbs-item-current-foreground-color, color-foreground-secondary);
-            text-decoration: none;
-        }
-    }
+nav.breadcrumbs > ul > li > button {
+    background: none;
+    border: none;
+    font-family: inherit;
+    font-size: 1em;
+    margin: 0;
+    padding: 0;
+}
 
-    a:visited {
-        color: inherit;
+nav.breadcrumbs > ul > li > a,
+nav.breadcrumbs > ul > li > button {
+    color: inherit;
+    max-width: 168px;
+    outline-offset: 5px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    &:focus,
+    &:hover {
+        text-decoration: underline;
     }
 
-    a:focus:not(:focus-visible),
-    button:focus:not(:focus-visible) {
-        outline: none;
+    &[aria-current] {
+        .color-token(breadcrumbs-item-current-foreground-color, color-foreground-primary);
+        text-decoration: none;
     }
 }
 
+nav.breadcrumbs > ul > li > a:focus:not(:focus-visible),
+nav.breadcrumbs > ul > li > button:focus:not(:focus-visible) {
+    outline: none;
+}
+
+// Deprecated in 15.2.0; kept it in to support deprecated implementations; @TODO remove in 16.0.0
 nav.breadcrumbs::-webkit-scrollbar {
     display: none;
 }
 
+// Introduced modifier in 15.2.0; supports new implementations; @TODO remove in 16.0.0 and remove modifier class from markup
+nav.breadcrumbs.breadcrumb--overflow {
+    overflow-x: unset;
+    scrollbar-width: unset;
+}
+
+nav.breadcrumbs .fake-menu-button__button,
+nav.breadcrumbs .menu-button__button {
+    background-color: var(--icon-button-background-color, var(--color-background-secondary));
+    height: @spacing-300;
+    min-height: @spacing-300;
+    min-width: @spacing-300;
+    outline-offset: 1px;
+    width: @spacing-300;
+}
+
+nav.breadcrumbs .fake-menu-button__button svg.icon,
+nav.breadcrumbs .menu-button__button svg.icon {
+    .fill-token(breadcrumbs-overflow-foreground-color, color-foreground-secondary);
+}
+
+nav.breadcrumbs .fake-menu-button__menu,
+nav.breadcrumbs .menu-button__menu {
+    font-size: @font-size-14;
+}
+
+nav.breadcrumbs svg.icon--overflow-small {
+    transform: rotate(90deg);
+}
+
 @media (min-width: 601px) {
     nav.breadcrumbs {
         margin: 16px 0;

package/src/less/breadcrumbs/stories/button-overflow.stories.js

@@ -0,0 +1,138 @@
+export default { title: 'Breadcrumbs/Buttons/Overflow' };
+
+export const minimum = () => `
+<nav aria-labelledby="breadcrumbs-heading" class="breadcrumbs breadcrumb--overflow" role="navigation">
+    <h2 id="breadcrumbs-heading" class="clipped">You are here</h2>
+    <ul>
+        <li>
+            <button>ebay</button>
+            <svg class="icon icon--breadcrumb" focusable="false" height="8" width="8" aria-hidden="true">
+                <use href="#icon-breadcrumb"></use>
+            </svg>
+        </li>
+        <li>
+            <span class="fake-menu-button">
+                <button class="fake-menu-button__button icon-btn" aria-expanded="false" aria-haspopup="true" aria-label="eBay Menu"  type="button">
+                    <svg aria-hidden="true" class="icon icon--overflow-small" focusable="false">
+                        <use href="#icon-overflow-small"></use>
+                    </svg>
+                </button>
+
+                <ul class="fake-menu-button__menu">
+                    <li>
+                        <a class="fake-menu-button__item" href="https://www.ebay.com/rpp/cell-phone-pda">Cell Phones, Smart Watches &amp; Accessories</a>
+                    </li>
+                    <li>
+                        <a class="fake-menu-button__item" href="https://www.ebay.com/b/Smart-Watch-Accessories/182064/bn_16565905">Smart Watch Accessories</a>
+                    </li>
+                    <li>
+                        <a class="fake-menu-button__item" href="#">Smart Watch Bands</a>
+                    </li>
+                </ul>
+            </span>
+
+            <svg class="icon icon--breadcrumb" focusable="false" height="8" width="8" aria-hidden="true">
+                <use href="#icon-breadcrumb"></use>
+            </svg>
+        </li>
+        <li>
+            <button aria-current="location">Current Band</button>
+        </li>
+    </ul>
+</nav>
+`;
+
+export const collapsed = () => `
+<nav aria-labelledby="breadcrumbs-heading" class="breadcrumbs breadcrumb--overflow" role="navigation">
+    <h2 id="breadcrumbs-heading" class="clipped">You are here</h2>
+    <ul>
+        <li>
+            <button>ebay</button>
+            <svg class="icon icon--breadcrumb" focusable="false" height="8" width="8" aria-hidden="true">
+                <use href="#icon-breadcrumb"></use>
+            </svg>
+        </li>
+        <li>
+            <span class="fake-menu-button">
+                <button class="fake-menu-button__button icon-btn" aria-expanded="false" aria-haspopup="true" aria-label="eBay Menu"  type="button">
+                    <svg aria-hidden="true" class="icon icon--overflow-small" focusable="false">
+                        <use href="#icon-overflow-small"></use>
+                    </svg>
+                </button>
+
+                <ul class="fake-menu-button__menu">
+                    <li>
+                        <a class="fake-menu-button__item" href="https://www.ebay.com/rpp/cell-phone-pda">Cell Phones, Smart Watches &amp; Accessories</a>
+                    </li>
+                    <li>
+                        <a class="fake-menu-button__item" href="https://www.ebay.com/b/Smart-Watch-Accessories/182064/bn_16565905">Smart Watch Accessories</a>
+                    </li>
+                    <li>
+                        <a class="fake-menu-button__item" href="#">Smart Watch Bands</a>
+                    </li>
+                </ul>
+            </span>
+
+            <svg class="icon icon--breadcrumb" focusable="false" height="8" width="8" aria-hidden="true">
+                <use href="#icon-breadcrumb"></use>
+            </svg>
+        </li>
+        <li>
+            <button>Smart Watch Band Long Band Text Type 2</button>
+            <svg class="icon icon--breadcrumb" focusable="false" height="8" width="8" aria-hidden="true">
+                <use href="#icon-breadcrumb"></use>
+            </svg>
+        </li>
+        <li>
+            <button aria-current="location">Current Band</button>
+        </li>
+    </ul>
+</nav>
+`;
+
+export const expanded = () => `
+<nav aria-labelledby="breadcrumbs-heading" class="breadcrumbs breadcrumb--overflow" role="navigation">
+    <h2 id="breadcrumbs-heading" class="clipped">You are here</h2>
+    <ul>
+        <li>
+            <button>ebay</button>
+            <svg class="icon icon--breadcrumb" focusable="false" height="8" width="8" aria-hidden="true">
+                <use href="#icon-breadcrumb"></use>
+            </svg>
+        </li>
+        <li>
+            <span class="fake-menu-button">
+                <button class="fake-menu-button__button icon-btn" aria-expanded="true" aria-haspopup="true" aria-label="eBay Menu"  type="button">
+                    <svg aria-hidden="true" class="icon icon--overflow-small" focusable="false">
+                        <use href="#icon-overflow-small"></use>
+                    </svg>
+                </button>
+                <ul class="fake-menu-button__menu">
+                    <li>
+                        <a class="fake-menu-button__item" href="https://www.ebay.com/rpp/cell-phone-pda">Cell Phones, Smart Watches &amp; Accessories</a>
+                    </li>
+                    <li>
+                        <a class="fake-menu-button__item" href="https://www.ebay.com/b/Smart-Watch-Accessories/182064/bn_16565905">Smart Watch Accessories</a>
+                    </li>
+                    <li>
+                        <a class="fake-menu-button__item" href="#">Smart Watch Bands</a>
+                    </li>
+                </ul>
+            </span>
+
+            <svg class="icon icon--breadcrumb" focusable="false" height="8" width="8" aria-hidden="true">
+                <use href="#icon-breadcrumb"></use>
+            </svg>
+        </li>
+        <li>
+            <button>Smart Watch Band Long Band Text Type 2</button>
+            <svg class="icon icon--breadcrumb" focusable="false" height="8" width="8" aria-hidden="true">
+                <use href="#icon-breadcrumb"></use>
+            </svg>
+        </li>
+        <li>
+            <button aria-current="location">Current Band</button>
+        </li>
+    </ul>
+</nav>
+`;

package/src/less/breadcrumbs/stories/link-overflow.stories.js

@@ -0,0 +1,145 @@
+export default { title: 'Breadcrumbs/Links/Overflow' };
+
+export const minimum = () => `
+<nav aria-labelledby="breadcrumbs-heading" class="breadcrumbs breadcrumb--overflow" role="navigation">
+    <h2 id="breadcrumbs-heading" class="clipped">You are here</h2>
+    <ul>
+        <li>
+            <a href="https://www.ebay.com/">ebay</a>
+            <svg class="icon icon--breadcrumb" focusable="false" height="8" width="8" aria-hidden="true">
+                <use href="#icon-breadcrumb"></use>
+            </svg>
+        </li>
+        <li>
+            <span class="fake-menu-button">
+                <button class="fake-menu-button__button icon-btn" aria-expanded="false" aria-haspopup="true" aria-label="eBay Menu"  type="button">
+                    <svg aria-hidden="true" class="icon icon--overflow-small" focusable="false">
+                        <use href="#icon-overflow-small"></use>
+                    </svg>
+                </button>
+
+                <ul class="fake-menu-button__menu">
+
+                    <div role="menu" class="fake-menu-button__items">
+                        <div class="fake-menu-button__item" role="menuitem" tabindex="-1">
+                            <a href="https://www.ebay.com/rpp/cell-phone-pda">Cell Phones, Smart Watches &amp; Accessories</a>
+                        </div>
+                        <div class="fake-menu-button__item" role="menuitem" tabindex="-1">
+                            <a href="https://www.ebay.com/b/Smart-Watch-Accessories/182064/bn_16565905">Smart Watch Accessories</a>
+                        </div>
+                        <div class="fake-menu-button__item" role="menuitem" tabindex="-1">
+                            <a href="https://www.ebay.com/b/Smart-Watch-Bands/182068/bn_16565906">Smart Watch Bands</a>
+                        </div>
+                    </div>
+                </ul>
+            </span>
+
+            <svg class="icon icon--breadcrumb" focusable="false" height="8" width="8" aria-hidden="true">
+                <use href="#icon-breadcrumb"></use>
+            </svg>
+        </li>
+        <li>
+            <a aria-current="location">Current Band</a>
+        </li>
+    </ul>
+</nav>
+`;
+
+export const collapsed = () => `
+<nav aria-labelledby="breadcrumbs-heading" class="breadcrumbs breadcrumb--overflow" role="navigation">
+    <h2 id="breadcrumbs-heading" class="clipped">You are here</h2>
+    <ul>
+        <li>
+            <a href="https://www.ebay.com/">ebay</a>
+            <svg class="icon icon--breadcrumb" focusable="false" height="8" width="8" aria-hidden="true">
+                <use href="#icon-breadcrumb"></use>
+            </svg>
+        </li>
+        <li>
+            <span class="fake-menu-button">
+                <button class="fake-menu-button__button icon-btn" aria-expanded="false" aria-haspopup="true" aria-label="eBay Menu"  type="button">
+                    <svg aria-hidden="true" class="icon icon--overflow-small" focusable="false">
+                        <use href="#icon-overflow-small"></use>
+                    </svg>
+                </button>
+
+                <ul class="fake-menu-button__menu">
+
+                    <div role="menu" class="fake-menu-button__items">
+                        <div class="fake-menu-button__item" role="menuitem" tabindex="-1">
+                            <a href="https://www.ebay.com/rpp/cell-phone-pda">Cell Phones, Smart Watches &amp; Accessories</a>
+                        </div>
+                        <div class="fake-menu-button__item" role="menuitem" tabindex="-1">
+                            <a href="https://www.ebay.com/b/Smart-Watch-Accessories/182064/bn_16565905">Smart Watch Accessories</a>
+                        </div>
+                        <div class="fake-menu-button__item" role="menuitem" tabindex="-1">
+                            <a href="https://www.ebay.com/b/Smart-Watch-Bands/182068/bn_16565906">Smart Watch Bands</a>
+                        </div>
+                    </div>
+                </ul>
+            </span>
+
+            <svg class="icon icon--breadcrumb" focusable="false" height="8" width="8" aria-hidden="true">
+                <use href="#icon-breadcrumb"></use>
+            </svg>
+        </li>
+        <li>
+            <a href="https://www.ebay.com/b/Smart-Watch-Bands/182068/bn_16565906/Some-Random-Watch-Pand2">Smart Watch Band Long Band Text Type 2</a>
+            <svg class="icon icon--breadcrumb" focusable="false" height="8" width="8" aria-hidden="true">
+                <use href="#icon-breadcrumb"></use>
+            </svg>
+        </li>
+        <li>
+            <a aria-current="location">Current Band</a>
+        </li>
+    </ul>
+</nav>
+`;
+
+export const expanded = () => `
+<nav aria-labelledby="breadcrumbs-heading" class="breadcrumbs breadcrumb--overflow" role="navigation">
+    <h2 id="breadcrumbs-heading" class="clipped">You are here</h2>
+    <ul>
+        <li>
+            <a href="https://www.ebay.com/">ebay</a>
+            <svg class="icon icon--breadcrumb" focusable="false" height="8" width="8" aria-hidden="true">
+                <use href="#icon-breadcrumb"></use>
+            </svg>
+        </li>
+        <li>
+            <span class="fake-menu-button">
+                <button class="fake-menu-button__button icon-btn" aria-expanded="true" aria-haspopup="true" aria-label="eBay Menu"  type="button">
+                    <svg aria-hidden="true" class="icon icon--overflow-small" focusable="false">
+                        <use href="#icon-overflow-small"></use>
+                    </svg>
+                </button>
+
+                <ul class="fake-menu-button__menu">
+                    <li>
+                        <a class="fake-menu-button__item" href="https://www.ebay.com/rpp/cell-phone-pda">Cell Phones, Smart Watches &amp; Accessories</a>
+                    </li>
+                    <li>
+                        <a class="fake-menu-button__item" href="https://www.ebay.com/b/Smart-Watch-Accessories/182064/bn_16565905">Smart Watch Accessories</a>
+                    </li>
+                    <li>
+                        <a class="fake-menu-button__item" href="https://www.ebay.com/b/Smart-Watch-Bands/182068/bn_16565906">Smart Watch Bands</a>
+                    </li>
+                </ul>
+            </span>
+
+            <svg class="icon icon--breadcrumb" focusable="false" height="8" width="8" aria-hidden="true">
+                <use href="#icon-breadcrumb"></use>
+            </svg>
+        </li>
+        <li>
+            <a href="https://www.ebay.com/b/Smart-Watch-Bands/182068/bn_16565906/Some-Random-Watch-Pand1">Smart Watch Band Long Band Text Type 2</a>
+            <svg class="icon icon--breadcrumb" focusable="false" height="8" width="8" aria-hidden="true">
+                <use href="#icon-breadcrumb"></use>
+            </svg>
+        </li>
+        <li>
+            <a aria-current="location">Current Band</a>
+        </li>
+    </ul>
+</nav>
+`;

package/src/less/cta-button/cta-button.less

@@ -58,20 +58,30 @@ span.cta-btn__cell--fixed-height svg.icon {
     width: 1rem;
 }
 
+a.cta-btn--truncated {
+    .btn-truncate();
+}
+
 a.cta-btn--large {
-    border-radius: calc(@button-height-large / 2);
+    border-radius: @button-border-radius-large;
+    display: inline-flex;
     font-size: @font-size-16;
     min-height: @button-height-large;
 }
 
+// DEPRECATED remove cta-btn--large-truncated in next major version
 a.cta-btn--large-truncated {
     .btn-truncate();
-
+    border-radius: @button-border-radius-large;
+    display: inline-flex;
     font-size: @font-size-16;
     height: @button-height-large;
 }
 
+// DEPRECATED remove cta-btn--large-fixed-height in next major version
 a.cta-btn--large-fixed-height {
+    border-radius: @button-border-radius-large;
+    display: inline-flex;
     font-size: @font-size-16;
     height: @button-height-large;
 }