Skip to content
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

[BD-9345][BpkPrice] Add a new icon property to BpkPrice #3742

Merged
merged 6 commits into from
Feb 17, 2025

Conversation

wuyq0808
Copy link
Contributor

@wuyq0808 wuyq0808 commented Feb 14, 2025

Changes

  1. Adds a new icon property to BpkPrice.
  2. Includes small improvements to the HTML structure and CSS properties.

Design

Figma link

image

Screenshots

Large Small Right aligned
image image image

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 [KOA-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

@wuyq0808 wuyq0808 added the minor Non breaking change label Feb 14, 2025
@skyscanner-backpack-bot
Copy link

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

@skyscanner-backpack-bot
Copy link

Browser support

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

Generated by 🚫 dangerJS against 43aa593

</div>
{isAlignRight && getTrailingTextNode()}
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Reorganize the elements for better clarity: When aligned right, the trailing text appears on a new line and is wrapped in a <div>. Otherwise, it remains inline and is wrapped in a <span>.

Copy link
Contributor

Choose a reason for hiding this comment

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

why does it need to be moved outside the span if it's aligned right?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

If aligned right, the trailing text appears on a new row, so it should be placed in a separate div within the flex container instead of a span, which is more suited for inline text.

Copy link
Contributor Author

@wuyq0808 wuyq0808 Feb 17, 2025

Choose a reason for hiding this comment

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

What we had if aligned right:

<div>{leadingText}</div>
<div>
  <span>{price}</span>
  <span>{trailingText}</span>   // 2 spans displayed in 2 rows
</div>

After change:

<div>{leadingText}</div>
<div>
  <span>{price}</span>
  <span>{icon}</span>  // 2 spans displayed in the same row
</div>
<div>
  <span>{trailingText}</span>
</div>

Does this make it clearer?

@include utils.bpk-rtl {
text-align: left;
}
align-items: flex-end;
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Replace text-align with align-items to simplify the code.

&__column-container {
display: flex;
flex-direction: column;
&__main {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Rename the css class name to better reflect the main part of the component.

@@ -66,12 +64,11 @@

&__spacing::after {
content: '';
margin-right: tokens.bpk-spacing-sm();
margin-inline-end: tokens.bpk-spacing-sm();
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Use margin-inline-end for simplification.

@wuyq0808 wuyq0808 marked this pull request as ready for review February 14, 2025 10:23
@@ -39,6 +40,7 @@ type Props = {
leadingClassName: ?string,
trailingText: ?string,
previousPrice: ?string,
icon?: Node,
Copy link
Contributor Author

@wuyq0808 wuyq0808 Feb 14, 2025

Choose a reason for hiding this comment

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

If ? is placed before the type Node, the IDE shows a warning about a missing required property in the example code.
I looked it up and found that placing ? after the property name is the correct syntax in Flow. Is there any context on why we place the ? before the type?

Copy link
Contributor

Choose a reason for hiding this comment

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

I think it might be that when we first started using flow ? was only supported before the type because looking at other flow'ed components, they all follow the same syntax. You're right though that the docs show it should be place after the property name.

@anambl anambl merged commit bea9f7d into main Feb 17, 2025
13 of 16 checks passed
@anambl anambl deleted the BD-9345-add-icon-to-bpk-price branch February 17, 2025 16:38
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