From 2f1204ff5b3e4deb7aa53266fb9ed5fbacf0c60d Mon Sep 17 00:00:00 2001 From: dan-searle Date: Tue, 4 Dec 2018 10:26:18 +0000 Subject: [PATCH] Fix Safari rendering problem where button text was being clipped. --- .../__snapshots__/snapshots.test.js.snap | 3 +++ .../src/ArticleSaveButton.jsx | 1 + .../src/ArticleSaveButton.scss | 21 ++++++++++++------- 3 files changed, 18 insertions(+), 7 deletions(-) diff --git a/__tests__/__snapshots__/snapshots.test.js.snap b/__tests__/__snapshots__/snapshots.test.js.snap index 569536a6f..e73fa11b7 100644 --- 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" > + Save diff --git a/components/x-article-save-button/src/ArticleSaveButton.jsx b/components/x-article-save-button/src/ArticleSaveButton.jsx index f8391b094..f0e767eba 100644 --- 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} > + {props.saved ? 'Saved' : 'Save'} diff --git a/components/x-article-save-button/src/ArticleSaveButton.scss b/components/x-article-save-button/src/ArticleSaveButton.scss index 9fb69850c..fd437e13b 100644 --- a/components/x-article-save-button/src/ArticleSaveButton.scss +++ b/components/x-article-save-button/src/ArticleSaveButton.scss @@ -6,6 +6,8 @@ $icon-size: 38px; @mixin background-icon($name, $color) { @include oIconsGetIcon($name, oColorsGetPaletteColor($color), $icon-size, $iconset-version: 1); + display: block; + margin-bottom: -5px; } .root { @@ -13,23 +15,28 @@ $icon-size: 38px; } .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'); } }