fix(RatingBadge): align button content for Safari 10

ticketmaster · Aug 13, 2018 · 19b710d · 19b710d
1 parent aec75d9
commit 19b710d
Show file tree

Hide file tree

Showing 7 changed files with 1,547 additions and 1,357 deletions.
diff --git a/src/components/Backdrop/__tests__/__snapshots__/index.spec.js.snap b/src/components/Backdrop/__tests__/__snapshots__/index.spec.js.snap
@@ -17,15 +17,15 @@ exports[`<Backdrop /> calls the onKeyPress function on pressing the ESC key 1`]
 >
   <div
     aria-modal="true"
-    class="sc-gZMcBi bAAoDN"
+    class="sc-VigVT cjpxrU"
     role="dialog"
   >
     <div
-      class="sc-gqjmRU iUNIdM sc-htpNat cXQsRx"
+      class="sc-jTzLTM leZhon sc-htpNat cXQsRx"
     >
       <button
         aria-label="Close BottomSheet"
-        class="button--cancel sc-iwsKbI hubDNE"
+        class="button--cancel sc-gqjmRU eoSmaZ"
         role="button"
         size="45"
       >
@@ -60,15 +60,15 @@ exports[`<Backdrop /> renders Backdrop correctly 1`] = `
 >
   <div
     aria-modal="true"
-    class="sc-gZMcBi bAAoDN"
+    class="sc-VigVT cjpxrU"
     role="dialog"
   >
     <div
-      class="sc-gqjmRU iUNIdM sc-htpNat cXQsRx"
+      class="sc-jTzLTM leZhon sc-htpNat cXQsRx"
     >
       <button
         aria-label="Close BottomSheet"
-        class="button--cancel sc-iwsKbI hubDNE"
+        class="button--cancel sc-gqjmRU eoSmaZ"
         role="button"
         size="45"
       >

diff --git a/src/components/BottomSheet/__tests__/__snapshots__/index.spec.js.snap b/src/components/BottomSheet/__tests__/__snapshots__/index.spec.js.snap
@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<BottomSheet /> removes the BottomSheet on clicking cancel 1`] = `"<div class=\\"sc-iwsKbI kvjgOS\\" role=\\"dialog\\" aria-modal=\\"true\\"><div class=\\"sc-gZMcBi lkUNjI sc-bwzfXH gaxaPs\\"><button class=\\"button--cancel sc-dnqmqq cyEnqJ\\" size=\\"45\\" aria-label=\\"Close BottomSheet\\" role=\\"button\\"><svg viewBox=\\"0 0 12 12\\" width=\\"12\\" height=\\"12\\" fill=\\"rgba(0, 0, 15, 1)\\"><path d=\\"M6.563 6.203l4.523 4.516a.384.384 0 0 1 .117.281c0 .11-.039.203-.117.281a.378.378 0 0 1-.137.09.417.417 0 0 1-.297 0 .378.378 0 0 1-.136-.09L6 6.766 1.484 11.28a.378.378 0 0 1-.136.09.417.417 0 0 1-.297 0 .378.378 0 0 1-.137-.09A.384.384 0 0 1 .797 11c0-.11.039-.203.117-.281l4.524-4.516L.913 1.68a.384.384 0 0 1-.117-.282c0-.109.039-.203.117-.28A.388.388 0 0 1 1.2 1c.112 0 .207.04.285.117L6 5.633l4.516-4.516A.388.388 0 0 1 10.8 1c.112 0 .207.04.285.117a.384.384 0 0 1 .117.281c0 .11-.039.204-.117.282L6.562 6.203z\\"></path></svg></button></div><div>Europe</div><div>Africa</div><div>Asias</div></div>"`;
+exports[`<BottomSheet /> removes the BottomSheet on clicking cancel 1`] = `"<div class=\\"sc-gqjmRU eqneQK\\" role=\\"dialog\\" aria-modal=\\"true\\"><div class=\\"sc-VigVT iUSGsh sc-bwzfXH gaxaPs\\"><button class=\\"button--cancel sc-gZMcBi fHowBB\\" size=\\"45\\" aria-label=\\"Close BottomSheet\\" role=\\"button\\"><svg viewBox=\\"0 0 12 12\\" width=\\"12\\" height=\\"12\\" fill=\\"rgba(0, 0, 15, 1)\\"><path d=\\"M6.563 6.203l4.523 4.516a.384.384 0 0 1 .117.281c0 .11-.039.203-.117.281a.378.378 0 0 1-.137.09.417.417 0 0 1-.297 0 .378.378 0 0 1-.136-.09L6 6.766 1.484 11.28a.378.378 0 0 1-.136.09.417.417 0 0 1-.297 0 .378.378 0 0 1-.137-.09A.384.384 0 0 1 .797 11c0-.11.039-.203.117-.281l4.524-4.516L.913 1.68a.384.384 0 0 1-.117-.282c0-.109.039-.203.117-.28A.388.388 0 0 1 1.2 1c.112 0 .207.04.285.117L6 5.633l4.516-4.516A.388.388 0 0 1 10.8 1c.112 0 .207.04.285.117a.384.384 0 0 1 .117.281c0 .11-.039.204-.117.282L6.562 6.203z\\"></path></svg></button></div><div>Europe</div><div>Africa</div><div>Asias</div></div>"`;
 
-exports[`<BottomSheet /> renders BottomSheet Container correctly 1`] = `"<div class=\\"sc-iwsKbI kvjgOS\\" role=\\"dialog\\" aria-modal=\\"true\\"><div class=\\"sc-gZMcBi lkUNjI sc-bwzfXH gaxaPs\\"><button class=\\"button--cancel sc-dnqmqq cyEnqJ\\" size=\\"45\\" aria-label=\\"Close BottomSheet\\" role=\\"button\\"><svg viewBox=\\"0 0 12 12\\" width=\\"12\\" height=\\"12\\" fill=\\"rgba(0, 0, 15, 1)\\"><path d=\\"M6.563 6.203l4.523 4.516a.384.384 0 0 1 .117.281c0 .11-.039.203-.117.281a.378.378 0 0 1-.137.09.417.417 0 0 1-.297 0 .378.378 0 0 1-.136-.09L6 6.766 1.484 11.28a.378.378 0 0 1-.136.09.417.417 0 0 1-.297 0 .378.378 0 0 1-.137-.09A.384.384 0 0 1 .797 11c0-.11.039-.203.117-.281l4.524-4.516L.913 1.68a.384.384 0 0 1-.117-.282c0-.109.039-.203.117-.28A.388.388 0 0 1 1.2 1c.112 0 .207.04.285.117L6 5.633l4.516-4.516A.388.388 0 0 1 10.8 1c.112 0 .207.04.285.117a.384.384 0 0 1 .117.281c0 .11-.039.204-.117.282L6.562 6.203z\\"></path></svg></button></div><div>Europe</div><div>Africa</div><div>Asias</div></div>"`;
+exports[`<BottomSheet /> renders BottomSheet Container correctly 1`] = `"<div class=\\"sc-gqjmRU eqneQK\\" role=\\"dialog\\" aria-modal=\\"true\\"><div class=\\"sc-VigVT iUSGsh sc-bwzfXH gaxaPs\\"><button class=\\"button--cancel sc-gZMcBi fHowBB\\" size=\\"45\\" aria-label=\\"Close BottomSheet\\" role=\\"button\\"><svg viewBox=\\"0 0 12 12\\" width=\\"12\\" height=\\"12\\" fill=\\"rgba(0, 0, 15, 1)\\"><path d=\\"M6.563 6.203l4.523 4.516a.384.384 0 0 1 .117.281c0 .11-.039.203-.117.281a.378.378 0 0 1-.137.09.417.417 0 0 1-.297 0 .378.378 0 0 1-.136-.09L6 6.766 1.484 11.28a.378.378 0 0 1-.136.09.417.417 0 0 1-.297 0 .378.378 0 0 1-.137-.09A.384.384 0 0 1 .797 11c0-.11.039-.203.117-.281l4.524-4.516L.913 1.68a.384.384 0 0 1-.117-.282c0-.109.039-.203.117-.28A.388.388 0 0 1 1.2 1c.112 0 .207.04.285.117L6 5.633l4.516-4.516A.388.388 0 0 1 10.8 1c.112 0 .207.04.285.117a.384.384 0 0 1 .117.281c0 .11-.039.204-.117.282L6.562 6.203z\\"></path></svg></button></div><div>Europe</div><div>Africa</div><div>Asias</div></div>"`;
diff --git a/src/components/Button/RatingBadge.js b/src/components/Button/RatingBadge.js
@@ -6,6 +6,19 @@ import StyledBadge from "./Badge.styles";
 import StarIcon from "../Icons/Star";
 import BUTTON_VARIANTS from "./constants";
 
+const StyledBadgeRating = StyledBadge.extend`
+  padding: 0;
+`;
+
+const ContentWrapper = styled.span`
+  display: flex;
+  flex-flow: row;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+`;
+
 const Container = styled.span`
   padding-left: 2px;
 `;
@@ -23,19 +36,21 @@ const RatingBadge = ({
   ratingCount,
   ...props
 }) => (
-  <StyledBadge
+  <StyledBadgeRating
     itemProp="aggregateRating"
     itemScope
     itemType="https://schema.org/AggregateRating"
     variant={variant}
     {...props}
   >
-    <StyledStarIcon size={12} />
-    <Container>{children}</Container>
-    {ratingValue && <meta itemProp="ratingValue" content={ratingValue} />}
-    {bestRating && <meta itemProp="bestRating" content={bestRating} />}
-    {ratingCount && <meta itemProp="ratingCount" content={ratingCount} />}
-  </StyledBadge>
+    <ContentWrapper>
+      <StyledStarIcon size={12} />
+      <Container>{children}</Container>
+      {ratingValue && <meta itemProp="ratingValue" content={ratingValue} />}
+      {bestRating && <meta itemProp="bestRating" content={bestRating} />}
+      {ratingCount && <meta itemProp="ratingCount" content={ratingCount} />}
+    </ContentWrapper>
+  </StyledBadgeRating>
 );
 
 RatingBadge.propTypes = {