Fix Safari rendering problem where button text was being clipped.

Financial-Times · Dec 4, 2018 · 2f1204f · 2f1204f
1 parent 71d84db
commit 2f1204f
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 7 deletions.
diff --git a/__tests__/__snapshots__/snapshots.test.js.snap b/__tests__/__snapshots__/snapshots.test.js.snap
@@ -21,6 +21,9 @@ exports[`@financial-times/x-article-save-button renders a default Basic ArticleS
     data-trackable="trackable-id"
     type="submit"
   >
+    <span
+      className="ArticleSaveButton_icon__-7Con"
+    />
     Save
   </button>
 </form>

diff --git a/components/x-article-save-button/src/ArticleSaveButton.jsx b/components/x-article-save-button/src/ArticleSaveButton.jsx
@@ -45,6 +45,7 @@ export const ArticleSaveButton = props => {
 				aria-label={getLabel(props)}
 				aria-pressed={props.saved}
 			>
+				<span className={classNames(articleSaveStyles.icon)} />
 				{props.saved ? 'Saved' : 'Save'}
 			</button>
 		</form>

diff --git a/components/x-article-save-button/src/ArticleSaveButton.scss b/components/x-article-save-button/src/ArticleSaveButton.scss
@@ -6,30 +6,37 @@ $icon-size: 38px;
 
 @mixin background-icon($name, $color) {
 	@include oIconsGetIcon($name, oColorsGetPaletteColor($color), $icon-size, $iconset-version: 1);
+	display: block;
+	margin-bottom: -5px;
 }
 
 .root {
 	display: inline-block;
 }
 
 .button {
-	@include background-icon(bookmark-outline, 'black');
 	@include oTypographySans($scale: -2);
 	border: 0;
-	padding: ($icon-size - 5px) 0 0 0;
 	width: $icon-size;
-	color: getColor('black');
+	padding: 0;
+	color: oColorsGetPaletteColor('black');
+	background-color: transparent;
+	text-align: center;
 
 	&:focus {
-		outline: 3px solid getColor('teal-40');
+		outline: 3px solid oColorsGetPaletteColor('teal-40');
 		outline-offset: 3px;
 	}
 
-	&:hover {
-		@include background-icon(bookmark, 'black-50');
+	.icon {
+		@include background-icon(bookmark-outline, 'black');
+
+		&:hover {
+			@include background-icon(bookmark, 'black-50');
+		}
 	}
 
-	&[aria-pressed=true]:not(:hover) {
+	&[aria-pressed=true]:not(:hover) .icon {
 		@include background-icon(bookmark, 'claret');
 	}
 }