Collaborator

Sure thing. What kind of test do you imagine? Just test snapshots?

Created the PR on grommet-site: grommet/grommet-site#428

Sure thing. What kind of test do you imagine? Just test snapshots?

Yeah i think we can just do a snapshot test to make sure the styling was correctly applied when we use alignSelf="baseline"

Idk why, but when I add a new Box inside Box/alignSelf test 2 tests fail when rendering, and also I see this message:

Uncaught 'Over 200 classes were generated for component StyledBox with the id of "StyledBox-sc-13pk1d4-0".\n' +
      'Consider using the attrs method, together with a style object for frequently changed styles.\n' +
      'Example:\n' +
      '  const Component = styled.div.attrs(props => ({\n' +
      '    style: {\n' +
      '      background: props.background,\n' +
      '    },\n' +
      '  }))`width: 100%;`\n' +
      '\n' +
      '  <Component />'

Have you already seen this?

NOTE If I remove one Box (e.g.: <Box alignSelf="stretch" /> the tests pass

Just checked and I am getting that same error on my end. I think it is related to how many versions of styled boxes we have in that test file. I think in this case it makes sense to suppress the error in this file because we know that the reason we are over limit is just because of how many test cases we have.

I am unsure how to suppress the error in this file, any suggestions?
If I move one test to another file it works, maybe we can split these tests into two files, what do you think?

Hmm yeah I am not finding any good options for disabling the error for the test file. If possible I think we should avoid splitting this up into two test files. Ideally it would be nice to keep things organized under one file. I'll keep looking to see if I can find any other possible solutions...

I moved one style to attrs on StyledBox as the error suggested and now the tests are passing.
Please, take a look and let me know if it is one possible approach.

I mode one style to attrs on StyledBox as the error suggested and now the tests are passing. Please, take a look and let me know if it is one possible approach.

I think this ☝️ is the right direction. I believe @jcfilben was also exploring this approach.

Hey @matheushahnn I'm thinking this is probably the direction we will go. I'm going to look at it a bit more on Monday, I'm thinking about if we want to move additional items in styledBox within attrs not just wrap

Update: I chatted with some other members of the team and we are thinking that we do want to use attrs for styled box. However, these changes are going to happen in a separate pull request. For this PR I think we can remove the change to styled box, and comment out the test and just add a comment explaining that the test is being commented out until we change styled box to use attrs.

@jcfilben Followed your instructions 👍