Skip to content
This repository has been archived by the owner on Aug 13, 2023. It is now read-only.

Inline link padding on default styling #1023

Merged
merged 18 commits into from
Jul 16, 2019

Conversation

pjlee11
Copy link
Contributor

@pjlee11 pjlee11 commented Jul 10, 2019

Resolves #1024
Resolves #777

Overall change: Sets the background colour to red, text colour to white during hover and focus states. Adds left/right padding and minus margin to increase buffer between the glyphs and background colour for legibility reasons. Adds pre-wrap to enhance legibility on the end of a line when the link wraps to a new line.

Code changes:

  • Uses REMs for padding and minus margin to increase with root font-size
  • Updates an incorrect PR number in changelog
  • Publishes as alpha
  • Updates snapshots
  • Removes part of README as it is no longer relevant

Testing notes:

  • Run the following command to:
    npm run build && cp packages/components/psammead-inline-link/dist/index.js packages/components/psammead-caption/node_modules/@bbc/psammead-inline-link/dist/index.js && cp packages/components/psammead-inline-link/dist/index.js packages/components/psammead-paragraph/node_modules/@bbc/psammead-inline-link/dist/index.js && npm run storybook
  • Test cross browser the paragraph and caption stories which have inline-link
  • Also ensure this bug cannot be reproduced

  • I have assigned myself to this PR and the corresponding issues
  • Tests added for new features
  • Test engineer approval

@pjlee11 pjlee11 added ws-articles Tasks for the WS Articles Team articles-av-epic labels Jul 10, 2019
@pjlee11 pjlee11 self-assigned this Jul 10, 2019
| 1.1.7 | [PR#892](https://github.com/bbc/psammead/pull/892) Bump dependencies |
| 1.1.6 | [PR#942](https://github.com/bbc/psammead/pull/942) Revert new inline-link styling due to [bug](https://github.com/bbc/simorgh/issues/2370) |
| 1.1.5 | [PR#783](https://github.com/bbc/psammead/pull/783) Update to latest psammead-test-helpers. Update snapshots. |
| 1.1.4 | [PR#769](https://github.com/bbc/psammead/pull/769) Fix stories not appearing in storybook when using `install:packages:link` |
| 1.1.3 | [PR#775](https://github.com/bbc/psammead/pull/775) Add section to readme regarding using this component without a wrapper and padding/margin |
| 1.1.2 | [PR#687](https://github.com/bbc/psammead/pull/687) Change visited text colour to `C_CLOUD_DARK` for `C_METAL` |
| 1.1.1 | [PR#761](https://github.com/bbc/psammead/pull/761) Link default `color` should be `Ebon` not `Postbox` |
| 1.1.0 | [PR#719](https://github.com/bbc/psammead/pull/719) Updates the link styling to new UX designs |
| 1.1.0 | [PR#707](https://github.com/bbc/psammead/pull/707) Updates the link styling to new UX designs |
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Incorrect link from previous

@pjlee11
Copy link
Contributor Author

pjlee11 commented Jul 11, 2019

New styling in hover/focus state:

image

@pjlee11 pjlee11 marked this pull request as ready for review July 11, 2019 12:11
Copy link
Contributor

@jamesdonoh jamesdonoh left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

Copy link
Contributor

@12 12 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM 👍

@jamesbrumpton
Copy link
Contributor

LGTM

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
ws-articles Tasks for the WS Articles Team
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Inline link styling new styling Inline link padding/margins do not scale when font size changes
7 participants