Bug 1466720 - Make PR shipping options use inline amounts followed by labels. r=sfoster
MozReview-Commit-ID: n13dUARIH
--- a/browser/components/payments/res/components/rich-select.css
+++ b/browser/components/payments/res/components/rich-select.css
@@ -23,10 +23,10 @@ rich-select[open] > .rich-select-popup-b
.rich-select-popup-box > .rich-option[selected] {
background-color: #ffa;
}
.rich-option {
display: grid;
border-bottom: 1px solid #ddd;
background: #fff; /* TODO: system colors */
- padding: 5px 20px;
+ padding: 8px;
}
--- a/browser/components/payments/res/components/shipping-option.css
+++ b/browser/components/payments/res/components/shipping-option.css
@@ -1,24 +1,12 @@
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-shipping-option {
- grid-row-gap: 5px;
- grid-column-gap: 10px;
- grid-template-areas:
- "label amount";
-}
-
-shipping-option > .label {
- grid-area: label;
- font-weight: bold;
-}
-
-shipping-option > .amount {
- grid-area: amount;
+shipping-option.rich-option {
+ display: block;
}
shipping-option > .label,
shipping-option > .amount {
white-space: nowrap;
}
--- a/browser/components/payments/res/components/shipping-option.js
+++ b/browser/components/payments/res/components/shipping-option.js
@@ -28,16 +28,17 @@ export default class ShippingOption exte
this._currencyAmount = new CurrencyAmount();
this._currencyAmount.classList.add("amount");
this._label = document.createElement("span");
this._label.classList.add("label");
}
connectedCallback() {
this.appendChild(this._currencyAmount);
+ this.append(" ");
this.appendChild(this._label);
super.connectedCallback();
}
render() {
this._label.textContent = this.label;
this._currencyAmount.currency = this.amountCurrency;
this._currencyAmount.value = this.amountValue;
--- a/browser/components/payments/res/debugging.js
+++ b/browser/components/payments/res/debugging.js
@@ -117,17 +117,17 @@ let REQUEST_2 = {
},
selected: true,
},
{
id: "947",
label: "Slow",
amount: {
currency: "USD",
- value: 10,
+ value: 1,
},
selected: false,
},
],
modifiers: [
{
supportedMethods: "basic-card",
total: {