Skip to content

[CLOVER-399][BpkText] Add color prop to improve overrides #3873

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 10 commits into from
Jul 11, 2025

Conversation

Supremeyh
Copy link
Contributor

@Supremeyh Supremeyh commented Jul 9, 2025

Context

BpkText’s lack of default or token-based color support leads to widespread manual style overrides (average 14.88% per major page), undermining VDL consistency and reducing design system reliability and maintainability across Skyscanner products.

We want to add color prop so that consumer can change BpkText color by config but not override.

Changes

  • Add optional prop color to BpkText

Remember to include the following changes:

  • Ensure the PR title includes the name of the component you are changing so it's clear in the release notes for consumers of the changes in the version e.g [Clover-123][BpkButton] Updating the colour
  • README.md (If you have created a new component)
  • Component README.md
  • Tests
  • Accessibility tests
    • The following checks were performed:
      • Ability to navigate using a keyboard only
      • Zoom functionality (Deque University explanation):
        • The page SHOULD be functional AND readable when only the text is magnified to 200% of its initial size
        • Pages must reflow as zoom increases up to 400% so that content continues to be presented in only one column i.e. Content MUST NOT require scrolling in two directions (both vertically and horizontally)
      • Ability to navigate using a screen reader only
  • Storybook examples created/updated
  • For breaking changes or deprecating components/properties, migration guides added to the description of the PR. If the guide has large changes, consider creating a new Markdown page inside the component's docs folder and link it here

@Supremeyh Supremeyh added the minor Non breaking change label Jul 9, 2025
@skyscanner-backpack-bot
Copy link

Visit https://backpack.github.io/storybook-prs/3873 to see this build running in a browser.

@Supremeyh Supremeyh self-assigned this Jul 9, 2025
@skyscanner-backpack-bot
Copy link

Visit https://backpack.github.io/storybook-prs/3873 to see this build running in a browser.

@skyscanner-backpack-bot
Copy link

skyscanner-backpack-bot bot commented Jul 9, 2025

Warnings
⚠️

Package source files (e.g. packages/package-name/src/Component.js) were updated, but snapshots weren't. Have you checked that the tests still pass?

Browser support

If this is a visual change, make sure you've tested it in multiple browsers.

Generated by 🚫 dangerJS against acf7e80

[rest: string]: any;
};

const BpkText = ({
children,
className = null,
color = '',
Copy link
Contributor Author

Choose a reason for hiding this comment

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

The color set to empty by default is get ride of update snapshots anywhere even there are no color passed.

@skyscanner-backpack-bot
Copy link

Visit https://backpack.github.io/storybook-prs/3873 to see this build running in a browser.

@skyscanner-backpack-bot
Copy link

Visit https://backpack.github.io/storybook-prs/3873 to see this build running in a browser.

@Supremeyh Supremeyh marked this pull request as draft July 10, 2025 05:10
@skyscanner-backpack-bot
Copy link

Visit https://backpack.github.io/storybook-prs/3873 to see this build running in a browser.

@skyscanner-backpack-bot
Copy link

Visit https://backpack.github.io/storybook-prs/3873 to see this build running in a browser.

@@ -92,10 +94,13 @@ const BpkText = ({
className,
);

const { style, ...otherProps } = rest;
Copy link
Contributor Author

Choose a reason for hiding this comment

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

the reason why extract style here because we don't want to expose style as prop to consumer, if extract as color and tagName, it would expose style in readme.

Comment on lines +97 to +98
const { style, ...otherProps } = rest;
const computedStyles = { ...style, ...(color ? { color } : {}) };
Copy link
Contributor Author

Choose a reason for hiding this comment

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

it use computedStyles which combine from style and color, in case consumer use style to override would not work anymore.

@Supremeyh Supremeyh marked this pull request as ready for review July 10, 2025 07:46
@Supremeyh Supremeyh requested a review from GCpigsic July 10, 2025 07:46
@skyscanner-backpack-bot
Copy link

Visit https://backpack.github.io/storybook-prs/3873 to see this build running in a browser.

@skyscanner-backpack-bot
Copy link

Visit https://backpack.github.io/storybook-prs/3873 to see this build running in a browser.

@Supremeyh Supremeyh merged commit 15273e9 into main Jul 11, 2025
10 checks passed
@Supremeyh Supremeyh deleted the ez/clover-386_add_color_prop_to_bpktext branch July 11, 2025 09:00
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
minor Non breaking change
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants