Lf 4747 create sensor readings kpi component #3705
Conversation
- remove defaults in css in exchange for updated defaults in component props - add boolean to opt out of default tablet medium breakpoint behaviour that turns off bento - update stories
Duncan-Brain
requested review from
SayakaOno and
kathyavini
and removed request for
a team
There was a problem hiding this comment.
Very interesting PR -- a ton of creative CSS solutions here! <BentoLayout> as a wrapping component reminds me of a proper component library, very neat
@SayakaOno since you've already approved and are the one using this component in your views, please go head and merge if it's blocking you 🙏
The only code that really needs to be fixed I think is the RegEx since it doesn't work (if that 3 to 6 digit hex functionality is something the charts need) but even that I don't think is necessarily blocking.
|
|
||
| .icon { | ||
| padding: 0px; | ||
| background-color: transparent; |
There was a problem hiding this comment.
Is it just my Storybook this doesn't work for? I saw a screenshot in the Figma thread where it was fine 😂 But for me I need to over-specify this class.
There was a problem hiding this comment.
@kathyavini Did you try restarting Storybook? I had the same issue -- and I have it all the time where classes where I think I should override look funny sometimes but not others it is so flakey! Even for the classes I did over-specify in this PR I could not for the life of me figure out why it was necessary, I literally have never had to over specify before.
I think there is an issue with vite not being able to compile properly on hot reloads. So by extension storybook-vite I think has the same issue.
…riginally had problems with typescript but this is better
|
Thanks for reviewing! I did try to make it like MUI -- I am now trying to understand when best to use "composition" (children prop) and make better components. I updated the component to take validation of color out of it -- that can go wherever color is decided. I updated stories since I did not realize the ability to edit parameters was negatively affected in the previous story and not possible. This is a better story but my typescript is a bit off. Maybe some future me can fix it but it is better to have a useful story than perfect types. |
Description
Waiting on final approval from Loic for multiple parameters styling see link in Jira commentsTiles: This creates KPI tiles for use with sensors arrays and individual sensor metrics.
Icon: Adds the ruler Icon.
Layout: It also creates a reusable layout for composition of tiles.
Notes
Jira link: LF-4747
Type of change
How Has This Been Tested?
Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration
Checklist: