Dev Diary 2020.03.29 – Components - davidhorm/wavelength GitHub Wiki

Dev Diary - Components

Lets actually do some project work.

I got to do some funky math to align the elements the way I want them to. I initially started doing the math offline, but then I remembered some random blog somewhere that said CSS % should only be in increments of 25% or something like that. And here I am making something 43.07% that wouldn't make any sense if I needed to update this in the future. So I'll break that up into it's own function with named variables.

Random Aside: I was thinking maybe I could use image-size-loader since most of the math is based off of the existing sizes, but there's a specific custom measurement I need, so might as well hardcode all of the measurements than figure out how to use this now.

I set the overflow to hidden. I was thinking about masking the bottom part of the gauge, i.e. between the last dash and the bottom of the image. I tried clipping the target image, but the clip moved with the image. I was wondering if a mask would work, but decided the overflow is good enough. Time to keep moving on!

Style Provider

I created a component to hold the controls, state, and component. The

style in Storybook doesn't match app's

style when I yarn start. Here's an article on how to Use a ThemeProvider component in Storybook. But that references the old .storybook/config.js way of doing things. There's an updated way using .storybook/preview.js described with global Storybook Decorators. But this assumes Themes, which I'm not using right now. There's examples for Adding a Sass Stylesheet to CRA, and Custom Sass Webconfig for Storybook. The more I think about it, the more I don't care about Style for now. I should get everything else working.

⚠️ **GitHub.com Fallback** ⚠️