feat(RatingBadge): Star icon support for iOS safari

ticketmaster · Jun 29, 2018 · a2a5a59 · a2a5a59
1 parent 2c8d46a
commit a2a5a59
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 15 deletions.
diff --git a/src/components/Button/RatingBadge.js b/src/components/Button/RatingBadge.js
@@ -10,6 +10,11 @@ const Container = styled.span`
   padding-left: 2px;
 `;
 
+const StyledStarIcon = styled(StarIcon)`
+  flex: 0 0 auto;
+  line-height: 1;
+`;
+
 const RatingBadge = ({
   variant,
   children,
@@ -25,7 +30,7 @@ const RatingBadge = ({
     variant={variant}
     {...props}
   >
-    <StarIcon size={12} />
+    <StyledStarIcon size={12} />
     <Container>{children}</Container>
     {ratingValue && <meta itemProp="ratingValue" content={ratingValue} />}
     {bestRating && <meta itemProp="bestRating" content={bestRating} />}

diff --git a/src/components/Button/__tests__/__snapshots__/RatingBadge.spec.js.snap b/src/components/Button/__tests__/__snapshots__/RatingBadge.spec.js.snap
@@ -42,10 +42,17 @@ exports[`RatingBadge /> renders link RatingBadge correctly 1`] = `
   cursor: not-allowed;
 }
 
-.c1 {
+.c2 {
   padding-left: 2px;
 }
 
+.c1 {
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  line-height: 1;
+}
+
 <button
   className="c0"
   href="/"
@@ -54,6 +61,7 @@ exports[`RatingBadge /> renders link RatingBadge correctly 1`] = `
   itemType="https://schema.org/AggregateRating"
 >
   <svg
+    className="c1"
     fill="currentColor"
     height={12}
     viewBox="0 0 11 10"
@@ -65,7 +73,7 @@ exports[`RatingBadge /> renders link RatingBadge correctly 1`] = `
     />
   </svg>
   <span
-    className="c1"
+    className="c2"
   >
     RatingBadge
   </span>
@@ -126,17 +134,25 @@ exports[`RatingBadge /> renders outline RatingBadge correctly 1`] = `
   cursor: not-allowed;
 }
 
-.c1 {
+.c2 {
   padding-left: 2px;
 }
 
+.c1 {
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  line-height: 1;
+}
+
 <button
   className="c0"
   itemProp="aggregateRating"
   itemScope={true}
   itemType="https://schema.org/AggregateRating"
 >
   <svg
+    className="c1"
     fill="currentColor"
     height={12}
     viewBox="0 0 11 10"
@@ -148,7 +164,7 @@ exports[`RatingBadge /> renders outline RatingBadge correctly 1`] = `
     />
   </svg>
   <span
-    className="c1"
+    className="c2"
   >
     RatingBadge
   </span>
@@ -209,10 +225,17 @@ exports[`RatingBadge /> renders outline disabled RatingBadge correctly 1`] = `
   cursor: not-allowed;
 }
 
-.c1 {
+.c2 {
   padding-left: 2px;
 }
 
+.c1 {
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  line-height: 1;
+}
+
 <button
   className="c0"
   disabled={true}
@@ -221,6 +244,7 @@ exports[`RatingBadge /> renders outline disabled RatingBadge correctly 1`] = `
   itemType="https://schema.org/AggregateRating"
 >
   <svg
+    className="c1"
     fill="currentColor"
     height={12}
     viewBox="0 0 11 10"
@@ -232,7 +256,7 @@ exports[`RatingBadge /> renders outline disabled RatingBadge correctly 1`] = `
     />
   </svg>
   <span
-    className="c1"
+    className="c2"
   >
     RatingBadge
   </span>
@@ -293,17 +317,25 @@ exports[`RatingBadge /> renders standard RatingBadge correctly 1`] = `
   cursor: not-allowed;
 }
 
-.c1 {
+.c2 {
   padding-left: 2px;
 }
 
+.c1 {
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  line-height: 1;
+}
+
 <button
   className="c0"
   itemProp="aggregateRating"
   itemScope={true}
   itemType="https://schema.org/AggregateRating"
 >
   <svg
+    className="c1"
     fill="currentColor"
     height={12}
     viewBox="0 0 11 10"
@@ -315,7 +347,7 @@ exports[`RatingBadge /> renders standard RatingBadge correctly 1`] = `
     />
   </svg>
   <span
-    className="c1"
+    className="c2"
   >
     RatingBadge
   </span>
@@ -376,10 +408,17 @@ exports[`RatingBadge /> renders standard disabled RatingBadge correctly 1`] = `
   cursor: not-allowed;
 }
 
-.c1 {
+.c2 {
   padding-left: 2px;
 }
 
+.c1 {
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  line-height: 1;
+}
+
 <button
   className="c0"
   disabled={true}
@@ -388,6 +427,7 @@ exports[`RatingBadge /> renders standard disabled RatingBadge correctly 1`] = `
   itemType="https://schema.org/AggregateRating"
 >
   <svg
+    className="c1"
     fill="currentColor"
     height={12}
     viewBox="0 0 11 10"
@@ -399,7 +439,7 @@ exports[`RatingBadge /> renders standard disabled RatingBadge correctly 1`] = `
     />
   </svg>
   <span
-    className="c1"
+    className="c2"
   >
     RatingBadge
   </span>
@@ -460,17 +500,25 @@ exports[`RatingBadge /> renders transparent RatingBadge correctly 1`] = `
   cursor: not-allowed;
 }
 
-.c1 {
+.c2 {
   padding-left: 2px;
 }
 
+.c1 {
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  line-height: 1;
+}
+
 <button
   className="c0"
   itemProp="aggregateRating"
   itemScope={true}
   itemType="https://schema.org/AggregateRating"
 >
   <svg
+    className="c1"
     fill="currentColor"
     height={12}
     viewBox="0 0 11 10"
@@ -482,7 +530,7 @@ exports[`RatingBadge /> renders transparent RatingBadge correctly 1`] = `
     />
   </svg>
   <span
-    className="c1"
+    className="c2"
   >
     RatingBadge
   </span>
@@ -543,10 +591,17 @@ exports[`RatingBadge /> renders transparent disabled RatingBadge correctly 1`] =
   cursor: not-allowed;
 }
 
-.c1 {
+.c2 {
   padding-left: 2px;
 }
 
+.c1 {
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  line-height: 1;
+}
+
 <button
   className="c0"
   disabled={true}
@@ -555,6 +610,7 @@ exports[`RatingBadge /> renders transparent disabled RatingBadge correctly 1`] =
   itemType="https://schema.org/AggregateRating"
 >
   <svg
+    className="c1"
     fill="currentColor"
     height={12}
     viewBox="0 0 11 10"
@@ -566,7 +622,7 @@ exports[`RatingBadge /> renders transparent disabled RatingBadge correctly 1`] =
     />
   </svg>
   <span
-    className="c1"
+    className="c2"
   >
     RatingBadge
   </span>