-
Notifications
You must be signed in to change notification settings - Fork 204
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
Conversation
…ackpack into BD-9345-add-icon-to-bpk-price
Visit https://backpack.github.io/storybook-prs/3742 to see this build running in a browser. |
</div> | ||
{isAlignRight && getTrailingTextNode()} |
There was a problem hiding this comment.
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>
.
There was a problem hiding this comment.
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?
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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; |
There was a problem hiding this comment.
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 { |
There was a problem hiding this comment.
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(); |
There was a problem hiding this comment.
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.
@@ -39,6 +40,7 @@ type Props = { | |||
leadingClassName: ?string, | |||
trailingText: ?string, | |||
previousPrice: ?string, | |||
icon?: Node, |
There was a problem hiding this comment.
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?
There was a problem hiding this comment.
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.
Changes
icon
property to BpkPrice.Design
Figma link
Screenshots
Remember to include the following changes:
[KOA-123][BpkButton] Updating the colour
README.md
(If you have created a new component)README.md