refactor(CodeSnippet): use hooks clean up render logic #4636

vpicone · 2019-11-09T23:33:24Z

No external changes. One of perhaps several components related to #4635

Changed:

use FC instead of Class w/ static properties
useLayoutEffect to combine componendDidMount and componentDidUpdate lifecycles
Use ref for uid rather than just assigning to class instance
clean up/combine return statements

Testing:

Component should perform identically to published version

netlify · 2019-11-09T23:41:51Z

Deploy preview for the-carbon-components ready!

Built with commit da0cea6

https://deploy-preview-4636--the-carbon-components.netlify.com

netlify · 2019-11-09T23:44:20Z

Deploy preview for carbon-components-react ready!

Built with commit da0cea6

https://deploy-preview-4636--carbon-components-react.netlify.com

netlify · 2019-11-09T23:45:57Z

Deploy preview for carbon-elements ready!

Built with commit da0cea6

https://deploy-preview-4636--carbon-elements.netlify.com

packages/react/src/components/CodeSnippet/CodeSnippet.js

Co-Authored-By: emyarod <[email protected]>

joshblack · 2019-11-11T16:21:00Z

Would love to take a look at this, wanted to leave a comment just to say I'd love to review this before it gets merged in 👀

jnm2377

I'm no longer seeing the show more/less button on the long multi-text snippet.

packages/react/src/components/CodeSnippet/CodeSnippet.js

…o code-snippet-refactor

joshblack · 2019-11-11T23:35:30Z

Random, noticed we swapped from useLayoutEffect. Curious what ended up not working with:

const [shouldShowButton, setShouldShowButton] = useState(false);
const ref = useRef(null);

useLayoutEffect(() => {
  if (ref.current) {
    const { height } = ref.current.getBoundingClientRect();
    setShouldShowButton(height > 255);
  }
}, [children]);

// ...
<pre ref={ref}>{children}</pre>
// ...

vpicone · 2019-11-11T23:57:55Z

@joshblack on first render the ref is null, since ref updates don’t trigger a re-render, the hook doesn’t get called again. #4636 (comment)

joshblack · 2019-11-12T00:23:20Z

@vpicone is that due to the fact that the ref was destructured? Didn’t notice it locally when trying it. I think when you access a ref in an effect with the current property it’ll work.

vpicone · 2019-11-12T01:00:42Z

@joshblack 🤦‍♂ fixed, ty.

emyarod

the refactor looks good to me, but how should we be checking that react docgen now processes the updated component? ref original issue

vpicone · 2019-11-12T14:05:35Z

@emyarod it does!

joshblack · 2019-11-12T19:01:06Z

packages/react/src/components/CodeSnippet/CodeSnippet.js

+}) {
+  const [expandedCode, setExpandedCode] = useState(false);
+  const [shouldShowMoreLessBtn, setShouldShowMoreLessBtn] = useState(false);
+  const { current: uid } = useRef(getUniqueId());


One thing that I don't think we remember is that technically we should not have ids start with a number, I think it's fine in HTML5 but in general can cause issues in certain cases (or at least has been brought up that way). Would we want to bring over our useId hook or add a prefix to this that's been passed to id?

@joshblack our uniqueId actually adds an id prefix by default, so starting with a number shouldn't be an issue. Do you think we should be specifying a more descriptive prefix? I'm a little gun shy about tweaking ID generation behavior at this point haha.

Ah, didn't realize it was using the older file for unique ids. In general, we use https://github.com/carbon-design-system/carbon/blob/master/packages/react/src/tools/setupGetInstanceId.js for newer code

@joshblack oh missed that. I think this is a great opportunity to switch to a hook. I really highly doubt someone's depending on the ID of the inline code component, but do you think it'd be worth keeping the id prefix?

It's not that an external user is leveraging it, just that folks have pointed out that ids generated with a number as the first character technically doesn't adhere to the HTML4 spec (I think this is addressed in HTML5). I think we could totally do id-{number}, we just have to be careful around collisions and the reason this came up with the newer approach is that it's easy to collide since they don't all share the same global id variable (which helps out a ton for tests). I think combining the local prefix plus the global id generation in a hook would be great and useId could help do that

I opened #4676 since I feel like changing the id generation behavior might be a little beyond the scope. The hook we have in the hooks package forces a - that doesn't exist in the current uniqueId implementation so it'd break some snapshots probably.

@vpicone are we or others using automatically generated ids in tests?

@joshblack wasn’t that the impetus for that big slack thread? Someone was using a generated ID to select an element in testing.

@vpicone that was when someone used an id they passed into the component, not a generated one.

Oh!!! That makes way more sense.

jnm2377

LGTM 👍

packages/react/src/components/CodeSnippet/CodeSnippet.js

Co-Authored-By: Josh Black <[email protected]>

refactor(CodeSnippet): use hooks clean up render logic

9f8c4b7

vpicone requested a review from a team as a code owner November 9, 2019 23:33

ghost requested review from jnm2377 and joshblack November 9, 2019 23:33

emyarod reviewed Nov 11, 2019

View reviewed changes

packages/react/src/components/CodeSnippet/CodeSnippet.js Outdated Show resolved Hide resolved

Update packages/react/src/components/CodeSnippet/CodeSnippet.js

dfdaf96

Co-Authored-By: emyarod <[email protected]>

jnm2377 suggested changes Nov 11, 2019

View reviewed changes

jnm2377 reviewed Nov 11, 2019

View reviewed changes

packages/react/src/components/CodeSnippet/CodeSnippet.js Outdated Show resolved Hide resolved

vpicone and others added 6 commits November 11, 2019 13:30

fix: update when children or ref changes

e76c476

Merge branch 'code-snippet-refactor' of github.com:vpicone/carbon int…

61b21d4

…o code-snippet-refactor

refactor: organize

cca649f

Merge branch 'master' into code-snippet-refactor

e6d051f

fix: use function rather than arrow

279ce84

Merge branch 'code-snippet-refactor' of github.com:vpicone/carbon int…

3b9582c

…o code-snippet-refactor

vpicone requested review from jnm2377 and emyarod November 11, 2019 22:02

fix: ref destructuring

2d00460

Merge branch 'master' into code-snippet-refactor

2a35126

emyarod reviewed Nov 12, 2019

View reviewed changes

Merge branch 'master' into code-snippet-refactor

9d742d8

emyarod approved these changes Nov 12, 2019

View reviewed changes

joshblack reviewed Nov 12, 2019

View reviewed changes

jnm2377 approved these changes Nov 12, 2019

View reviewed changes

joshblack reviewed Nov 12, 2019

View reviewed changes

packages/react/src/components/CodeSnippet/CodeSnippet.js Outdated Show resolved Hide resolved

vpicone and others added 4 commits November 13, 2019 10:25

Update packages/react/src/components/CodeSnippet/CodeSnippet.js

803b29d

Co-Authored-By: Josh Black <[email protected]>

fix: spread variable

0882caf

Merge branch 'master' into code-snippet-refactor

1deb7ed

Merge branch 'master' into code-snippet-refactor

0d69f32

joshblack approved these changes Nov 15, 2019

View reviewed changes

vpicone added 3 commits November 15, 2019 12:24

Merge branch 'master' into code-snippet-refactor

73eef6c

Merge branch 'master' into code-snippet-refactor

61aff34

Merge branch 'master' into code-snippet-refactor

da0cea6

vpicone merged commit 272488b into carbon-design-system:master Nov 16, 2019

vpicone deleted the code-snippet-refactor branch November 16, 2019 05:16

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor(CodeSnippet): use hooks clean up render logic #4636

refactor(CodeSnippet): use hooks clean up render logic #4636

vpicone commented Nov 9, 2019 •

edited

Loading

netlify bot commented Nov 9, 2019 •

edited

Loading

netlify bot commented Nov 9, 2019 •

edited

Loading

netlify bot commented Nov 9, 2019 •

edited

Loading

joshblack commented Nov 11, 2019

jnm2377 left a comment

joshblack commented Nov 11, 2019

vpicone commented Nov 11, 2019

joshblack commented Nov 12, 2019

vpicone commented Nov 12, 2019

emyarod left a comment

vpicone commented Nov 12, 2019

joshblack Nov 12, 2019

vpicone Nov 12, 2019

joshblack Nov 12, 2019

vpicone Nov 12, 2019

joshblack Nov 12, 2019

vpicone Nov 14, 2019

joshblack Nov 14, 2019

vpicone Nov 14, 2019

joshblack Nov 14, 2019

vpicone Nov 14, 2019

jnm2377 left a comment

refactor(CodeSnippet): use hooks clean up render logic #4636

refactor(CodeSnippet): use hooks clean up render logic #4636

Conversation

vpicone commented Nov 9, 2019 • edited Loading

netlify bot commented Nov 9, 2019 • edited Loading

netlify bot commented Nov 9, 2019 • edited Loading

netlify bot commented Nov 9, 2019 • edited Loading

joshblack commented Nov 11, 2019

jnm2377 left a comment

Choose a reason for hiding this comment

joshblack commented Nov 11, 2019

vpicone commented Nov 11, 2019

joshblack commented Nov 12, 2019

vpicone commented Nov 12, 2019

emyarod left a comment

Choose a reason for hiding this comment

vpicone commented Nov 12, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jnm2377 left a comment

Choose a reason for hiding this comment

vpicone commented Nov 9, 2019 •

edited

Loading

netlify bot commented Nov 9, 2019 •

edited

Loading

netlify bot commented Nov 9, 2019 •

edited

Loading

netlify bot commented Nov 9, 2019 •

edited

Loading