-
Notifications
You must be signed in to change notification settings - Fork 22
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
feat(creation-tunnel): init order summary component #1305
Conversation
🔎 A preview has been automatically published : https://clever-components-preview.cellar-c2.services.clever-cloud.com/tunnel-creation/order-summary/index.html. This preview will be deleted once this PR is closed. |
c5e6d5d
to
00ace19
Compare
00ace19
to
32ebcb7
Compare
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.
Nice component Bob. I really like the design. Praise for the css and html organization, it makes the code really clear and easy to read.
I left some minor comments but nothing blocking.
32ebcb7
to
54ba53d
Compare
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.
Hey @roberttran-cc, well done!!! Just a few notes and nitpicks 😉
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.
Well done @roberttran-cc the component looks really good.
I didn't expect it to feel so easy to read / lightweight so great job again!
Also, the code is very clean and easy to read ❤️
Some of the points I raised will need to be handled before the final release (out of beta I mean): the logo alternative text, the data list semantics.
Other points are really nitpicks or suggestions; they can easily be ignored / dismissed.
I have a few accessibility observations that are non blocking:
- the alignment of labels on the left and values on the right is not screen magnifier friendly. Some people using these tools will struggle. It's non blocking because placing labels next to values is only a requirement in forms + I don't really have a better idea that would look ok in this case. Also the distance is not that big (very very subjective) 🤷. It's just something we should avoid as much as possible but here I think it's ok?
- Placing text after (in the dom order) the create button is not fobidden but it should be discouraged because it's highly possible that people using screen readers won't even notice that it's there. Usually the "submit button" is the last part of a form and people don't expect to have to browse past it. We could move it within the DOM and keep the visual order, especially since it contains no focusable elements but let's wait and see how it evolves and what we want to show in that section exactly before deciding? Let's just keep that in mind.
Feel free to ping me if some stuff is unclear 😉
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.
Well done, the summary looks nice and it will sure be very useful ! 👏 I did not leave any comments, but I have overall questions:
- Have you considered using a
cc-block
to render the summary ? If so, why choosing not to use it ? - Why does the component only have one state ? Is it planned to have a loading and an error states in the future ?
Thanks in advance !
b9fa770
to
5044740
Compare
Thank you so much for your reviews! 🫶 @florian-sanders-cc & @HeleneAmouzou: about the state property @HeleneAmouzou: about the @florian-sanders-cc: on label alignment and screen magnifier @florian-sanders-cc: on the text after the submit button |
Yes this was really a nitpick, no problem 👍.
Yes this is really tricky and I don't have a good solution here. I think your modifications make it better and I think we can stick with that. To be honest my comment was more about raising the concern in general than fixing it in this specific case because I can't think of a better design 👍
I think we need to iterate a bit and see the component in its context before deciding whether we want to change this or leave it as is. The goal of my comment was to raise the issue so we don't forget it in the long run so don't worry, it's perfectly ok to keep it as it is (and it might even remain like that when we go to prod, we'll discuss synchronously as you suggested 👍 |
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've checked the feedback commits where I'm mentionned + the stories (quickly), it's all good for me!
Great job @roberttran-cc !!
@roberttran-cc Thanks for the detailed answers ! I have checked stories and LGTM ! |
5044740
to
1defa80
Compare
🔎 The preview has been automatically deleted. |
Fixes #1304
Quite a simple review