improved/simplified wrapping of button text for long button names on …

…mobile
guardian · Sep 9, 2019 · 3de4285 · 3de4285
1 parent 5855e08
commit 3de4285
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 21 deletions.
diff --git a/app/client/__tests__/__snapshots__/main.tsx.snap b/app/client/__tests__/__snapshots__/main.tsx.snap
@@ -1016,9 +1016,9 @@ exports[`Main renders something 1`] = `
                       css={
                         Object {
                           "map": undefined,
-                          "name": "3u56ol",
+                          "name": "efdsqi",
                           "next": undefined,
-                          "styles": "font-size:16px;font-family:\\"Guardian Text Sans Web\\", \\"Helvetica Neue\\", Helvetica, Arial, \\"Lucida Grande\\", sans-serif;border-radius:1000px;align-items:center;white-space:nowrap;position:relative;:active{outline:none;}min-height:36px;line-height:36px;font-weight:bold;display:inline-flex;background:#ffe500;color:#121212;border:none;padding:1px 40px 0 18px;svg{fill:currentColor;height:34px;position:absolute;right:0;top:50%;transform:translate(0, -50%);transition:transform .3s, background .3s;width:36px;}:hover{background:hsl(53.89999999999998, 100%, 45%);svg{transform:translate(3px, -50%);}}cursor:pointer;@media (max-width: 319px){max-width:280px;}@media (max-width: 424px){max-width:320px;white-space:normal;line-height:16px;}",
+                          "styles": "font-size:16px;font-family:\\"Guardian Text Sans Web\\", \\"Helvetica Neue\\", Helvetica, Arial, \\"Lucida Grande\\", sans-serif;border-radius:1000px;align-items:center;position:relative;:active{outline:none;}min-height:36px;font-weight:bold;display:inline-flex;background:#ffe500;color:#121212;border:none;padding:1px 40px 0 18px;svg{fill:currentColor;height:34px;position:absolute;right:0;top:50%;transform:translate(0, -50%);transition:transform .3s, background .3s;width:36px;}:hover{background:hsl(53.89999999999998, 100%, 45%);svg{transform:translate(3px, -50%);}}cursor:pointer;max-width:calc(100vw - 40px);",
                         }
                       }
                       onMouseUp={[Function]}
@@ -1042,9 +1042,9 @@ exports[`Main renders something 1`] = `
                     css={
                       Object {
                         "map": undefined,
-                        "name": "3u56ol",
+                        "name": "efdsqi",
                         "next": undefined,
-                        "styles": "font-size:16px;font-family:\\"Guardian Text Sans Web\\", \\"Helvetica Neue\\", Helvetica, Arial, \\"Lucida Grande\\", sans-serif;border-radius:1000px;align-items:center;white-space:nowrap;position:relative;:active{outline:none;}min-height:36px;line-height:36px;font-weight:bold;display:inline-flex;background:#ffe500;color:#121212;border:none;padding:1px 40px 0 18px;svg{fill:currentColor;height:34px;position:absolute;right:0;top:50%;transform:translate(0, -50%);transition:transform .3s, background .3s;width:36px;}:hover{background:hsl(53.89999999999998, 100%, 45%);svg{transform:translate(3px, -50%);}}cursor:pointer;@media (max-width: 319px){max-width:280px;}@media (max-width: 424px){max-width:320px;white-space:normal;line-height:16px;}",
+                        "styles": "font-size:16px;font-family:\\"Guardian Text Sans Web\\", \\"Helvetica Neue\\", Helvetica, Arial, \\"Lucida Grande\\", sans-serif;border-radius:1000px;align-items:center;position:relative;:active{outline:none;}min-height:36px;font-weight:bold;display:inline-flex;background:#ffe500;color:#121212;border:none;padding:1px 40px 0 18px;svg{fill:currentColor;height:34px;position:absolute;right:0;top:50%;transform:translate(0, -50%);transition:transform .3s, background .3s;width:36px;}:hover{background:hsl(53.89999999999998, 100%, 45%);svg{transform:translate(3px, -50%);}}cursor:pointer;max-width:calc(100vw - 40px);",
                       }
                     }
                     onMouseUp={[Function]}

diff --git a/app/client/components/buttons.tsx b/app/client/components/buttons.tsx
@@ -3,7 +3,6 @@ import { Link } from "@reach/router";
 import Color from "color";
 import React from "react";
 import palette from "../colours";
-import { maxWidth } from "../styles/breakpoints";
 import { sans } from "../styles/fonts";
 import { ArrowIcon } from "./svgs/arrowIcon";
 import { TickIcon } from "./svgs/tickIcon";
@@ -13,7 +12,6 @@ export interface ButtonProps {
   onClick?: () => void;
   height?: string;
   fontWeight?: "bold";
-  maxWidthIfWrapping?: string;
   left?: true;
   right?: true;
   disabled?: boolean;
@@ -90,7 +88,6 @@ const buttonCss = ({
   disabled,
   height,
   fontWeight,
-  maxWidthIfWrapping,
   colour = defaultColour,
   textColour = palette.white,
   left,
@@ -113,13 +110,11 @@ const buttonCss = ({
     fontFamily: sans,
     borderRadius: "1000px",
     alignItems: "center",
-    whiteSpace: "nowrap",
     position: "relative",
     ":active": {
       outline: "none"
     },
     minHeight: height || "36px",
-    lineHeight: height || "36px",
     fontWeight,
     display: hide ? "none" : "inline-flex",
     background: backgroundColour,
@@ -142,14 +137,15 @@ const buttonCss = ({
           ...applyIconStyleIfApplicable(true, left, right, leftTick)
         },
     cursor: disabled ? "not-allowed" : "pointer",
-    [maxWidth.mobile]: {
-      maxWidth: maxWidthIfWrapping || "280px"
-    },
-    [maxWidth.mobileLarge]: {
-      maxWidth: maxWidthIfWrapping || "320px",
-      whiteSpace: "normal",
-      lineHeight: "16px"
-    }
+    maxWidth: "calc(100vw - 40px)"
+    // [maxWidth.mobile]: {
+    //   maxWidth: maxWidthIfWrapping || "280px"
+    // },
+    // [maxWidth.mobileLarge]: {
+    //   maxWidth: maxWidthIfWrapping || "320px",
+    //   whiteSpace: "normal",
+    //   lineHeight: "16px"
+    // }
   });
 };
 

diff --git a/app/client/components/flowStartMultipleProductDetailHandler.tsx b/app/client/components/flowStartMultipleProductDetailHandler.tsx
@@ -159,7 +159,6 @@ const getProductDetailSelector = (
                       props.productType.friendlyName
                     }
                     onClick={() => selectProductDetail(productDetail)}
-                    maxWidthIfWrapping="290px"
                     right
                     primary
                   />

diff --git a/app/client/components/holiday/holidayConfirmed.tsx b/app/client/components/holiday/holidayConfirmed.tsx
@@ -40,14 +40,12 @@ export const HolidayConfirmed = (props: RouteableStepProps) => (
                       to={"/suspend/" + props.productType.urlPart + "/create"}
                       onClick={holidayStopsResponse.reload}
                       text="Schedule another suspension"
-                      maxWidthIfWrapping="230px"
                       right
                     />
                     <div css={{ width: "24px" }} />
                     <LinkButton
                       to={"/" + props.productType.urlPart}
                       text="Manage your subscriptions"
-                      maxWidthIfWrapping="230px"
                       primary
                       right
                     />

diff --git a/app/client/components/payment/update/paymentUpdated.tsx b/app/client/components/payment/update/paymentUpdated.tsx
@@ -105,7 +105,6 @@ const WithSubscriptionRenderer = (
         <LinkButton
           to={"/" + productType.urlPart}
           text={"Manage your " + productType.friendlyName}
-          maxWidthIfWrapping="230px"
           primary
           right
         />