@ebay/skin 14.2.1 → 15.0.0-1

package/src/less/combobox/combobox.less

@@ -27,14 +27,14 @@ span.combobox {
     width: 100%;
 }
 
-.combobox__options--reverse[role="listbox"] {
-    right: 0;
-}
-
 .combobox__listbox {
     .dropdown-base(combobox-listbox);
 }
 
+.combobox__listbox--reverse {
+    .dropdown-reverse();
+}
+
 .combobox__option[role^="option"] {
     .listbox-option-base();
     .dropdown-item-border-radius(combobox-listbox);

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

@@ -33,12 +33,6 @@ a.cta-btn[aria-disabled="true"] {
     .color-token(cta-btn-disabled-foreground-color, color-foreground-disabled);
 }
 
-// deprecated
-a.cta-btn--wide {
-    padding-left: @button-padding-horizontal-wide;
-    padding-right: @button-padding-horizontal-wide;
-}
-
 a.cta-btn--fluid {
     width: 100%;
 }

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

@@ -10,14 +10,3 @@ export const base = () => `
     </span>
 </a>
 `;
-
-export const wide = () => `
-<a class="cta-btn cta-btn--wide" href="http://www.ebay.com">
-    <span class="cta-btn__cell">
-        <span>Link</span>
-        <svg class="icon icon--cta" focusable="false" height="8" width="8" aria-hidden="true">
-            <use xlink:href="#icon-cta"></use>
-        </svg>
-    </span>
-</a>
-`;

package/src/less/field/field.less

@@ -76,7 +76,7 @@ div.field__group {
 
 // if using a div for description, it implies it's always at bottom of field
 div.field__description {
-    margin: 2px 16px 0;
+    margin: 2px 0 0;
 }
 
 .field__row {

package/src/less/gh/gh-mixins.less

@@ -42,10 +42,6 @@
     @import "../../../dist/eek/eek.css";
 }
 
-.expand-button-mixin() {
-    @import "../../../dist/expand-button/expand-button.css";
-}
-
 .field-mixin() {
     @import "../../../dist/field/field.css";
 }
@@ -197,7 +193,3 @@
 .utility-mixin() {
     @import "../../../dist/utility/utility.css";
 }
-
-.window-notice-mixin() {
-    @import "../../../dist/window-notice/window-notice.css";
-}

package/src/less/global/stories/global.stories.js

@@ -60,9 +60,9 @@ export const alignment = () => `
 </span>
 
 <span class="listbox-button">
-    <button class="expand-btn expand-btn--fixed-height" aria-expanded="false" aria-haspopup="listbox">
-        <span class="expand-btn__cell">
-            <span class="expand-btn__text">Options</span>
+    <button class="btn btn--form btn--fixed-height" aria-expanded="false" aria-haspopup="listbox">
+        <span class="btn__cell">
+            <span class="btn__text">Options</span>
             <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
                 <use xlink:href="#icon-dropdown"></use>
             </svg>
@@ -71,9 +71,9 @@ export const alignment = () => `
 </span>
 
 <span class="menu-button">
-    <button class="expand-btn expand-btn--fixed-height" aria-haspopup="true" type="button">
-        <span class="expand-btn__cell">
-            <span class="expand-btn__text">Menu</span>
+    <button class="btn btn--form btn--fixed-height" aria-haspopup="true" type="button">
+        <span class="btn__cell">
+            <span class="btn__text">Menu</span>
             <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
                 <use xlink:href="#icon-dropdown"></use>
             </svg>
@@ -113,9 +113,9 @@ export const RTLAlignment = () => `
     </span>
 
     <span class="listbox-button">
-        <button class="expand-btn expand-btn--fixed-height" aria-expanded="false" aria-haspopup="listbox">
-            <span class="expand-btn__cell">
-                <span class="expand-btn__text">Options</span>
+        <button class="btn btn--fixed-height" aria-expanded="false" aria-haspopup="listbox">
+            <span class="btn__cell">
+                <span class="btn__text">Options</span>
                 <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
                     <use xlink:href="#icon-dropdown"></use>
                 </svg>
@@ -124,9 +124,9 @@ export const RTLAlignment = () => `
     </span>
 
     <span class="menu-button">
-        <button class="expand-btn expand-btn--fixed-height" aria-haspopup="true" type="button">
-            <span class="expand-btn__cell">
-                <span class="expand-btn__text">Menu</span>
+        <button class="btn btn--fixed-height" aria-haspopup="true" type="button">
+            <span class="btn__cell">
+                <span class="btn__text">Menu</span>
                 <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
                     <use xlink:href="#icon-dropdown"></use>
                 </svg>
@@ -166,9 +166,9 @@ export const alignmentLarge = () => `
 </span>
 
 <span class="listbox-button">
-    <button class="expand-btn expand-btn--large expand-btn--large-fixed-height" aria-expanded="false" aria-haspopup="listbox">
-        <span class="expand-btn__cell">
-            <span class="expand-btn__text">Options</span>
+    <button class="btn btn--large btn--form btn--large-fixed-height" aria-expanded="false" aria-haspopup="listbox">
+        <span class="btn__cell">
+            <span class="btn__text">Options</span>
             <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
                 <use xlink:href="#icon-dropdown"></use>
             </svg>
@@ -177,9 +177,9 @@ export const alignmentLarge = () => `
 </span>
 
 <span class="menu-button">
-    <button class="expand-btn expand-btn--large expand-btn--large-fixed-height" aria-haspopup="true" type="button">
-        <span class="expand-btn__cell">
-            <span class="expand-btn__text">Menu</span>
+    <button class="btn btn--large btn--form btn--large-fixed-height" aria-haspopup="true" type="button">
+        <span class="btn__cell">
+            <span class="btn__text">Menu</span>
             <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
                 <use xlink:href="#icon-dropdown"></use>
             </svg>