Update multiple functional components to useGeneratedHtmlId hook #5195

cee-chen · 2021-09-16T20:55:36Z

Summary

Follow up to #5133: This PR updates our functional components to not regenerate our randomized HTML IDs on every component update/rerender.

Components addressed in separate PRs:
- Class components (Fix multiple class components to not regenerate IDs on rerender #5201)
- EuiBasicTable ([EuiBasicTable] Fix generated IDs regenerating on rerender #5196)
- EuiSuperSelect ([EuiSuperSelect] Fix regenerating and missing IDs #5197)
- EuiSuperDatePicker ([EuiSuperDatePicker] Fix multiple IDs regenerating on rerender #5200)
Components addressed in this PR:
- I'll go through each commit below (separated by component) and add before/after screencaps!

Checklist

N/A - Individual component QA steps listed above.

Changelog entry

- remove existing useMemo hook in favor of new helper - behavior should remain same as before

- replace useRefs with new hook - behavior should remain same as before

- replace useState with new hook - behavior should remain same as before

kibanamachine · 2021-09-16T21:19:58Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_5195/

cee-chen

QA before/after screencaps

cee-chen · 2021-09-16T21:03:50Z

src/components/button/button_group/button_group.tsx

@@ -156,7 +156,7 @@ export const EuiButtonGroup: FunctionComponent<Props> = ({
  );

  const typeIsSingle = type === 'single';
-  const nameIfSingle = name || htmlIdGenerator()();
+  const nameIfSingle = useGeneratedHtmlId({ conditionalId: name });


EuiButtonGroup (c9c846c)

Before:

After:

cee-chen · 2021-09-16T21:14:55Z

src/components/card/card.tsx

@@ -244,7 +244,7 @@ export const EuiCard: FunctionComponent<EuiCardProps> = ({
    className
  );

-  const ariaId = htmlIdGenerator()();
+  const ariaId = useGeneratedHtmlId();


EuiCard (b7d9024)

Before:

After:

cee-chen · 2021-09-16T21:15:58Z

src/components/form/switch/switch.tsx

+  const switchId = useGeneratedHtmlId({ conditionalId: id });
+  const labelId = useGeneratedHtmlId({ conditionalId: labelProps?.id });


[QA] This is a cleanup refactor and no behavior should have changed on https://eui.elastic.co/pr_5195/#/forms/form-controls#switch

cee-chen · 2021-09-16T21:18:32Z

src/components/key_pad_menu/key_pad_menu_item.tsx

@@ -184,7 +184,7 @@ export const EuiKeyPadMenuItem: FunctionComponent<EuiKeyPadMenuItemProps> = ({
  if (checkable) Element = 'label';
  type ElementType = ReactElementType<typeof Element>;

-  const itemId = id || htmlIdGenerator()();
+  const itemId = useGeneratedHtmlId({ conditionalId: id });


EuiKeyPadMenuItem (f6f8df6)

Before:

After:

cee-chen · 2021-09-16T21:24:00Z

src/components/markdown_editor/markdown_editor.tsx

-    const editorId = useMemo(() => _editorId || htmlIdGenerator()(), [
-      _editorId,
-    ]);
+    const editorId = useGeneratedHtmlId({ conditionalId: _editorId });


[QA] This is a cleanup refactor and no behavior should have changed on https://eui.elastic.co/pr_5195/#/editors-syntax/markdown-editor

cee-chen · 2021-09-16T21:25:18Z

src/components/markdown_editor/plugins/markdown_checkbox/renderer.tsx

@@ -21,7 +21,7 @@ export const CheckboxMarkdownRenderer: FunctionComponent<
  const { replaceNode } = useContext(EuiMarkdownContext);
  return (
    <EuiCheckbox
-      id={htmlIdGenerator()()}
+      id={useGeneratedHtmlId()}


EuiMarkDownEditor checkboxes (4385804)

Before:

After:

cee-chen · 2021-09-16T21:27:07Z

src/components/notification/notification_event.tsx

@@ -113,7 +113,7 @@ export const EuiNotificationEvent: FunctionComponent<EuiNotificationEventProps>
    'euiNotificationEvent__title--isRead': isRead,
  });

-  const randomHeadingId = htmlIdGenerator()();
+  const randomHeadingId = useGeneratedHtmlId();


Multiple EuiNotificationEvent IDs (ba36dec)

Before:

After:

cee-chen · 2021-09-16T21:28:08Z

src/components/resizable_container/resizable_button.tsx

+  const resizerId = useGeneratedHtmlId({
+    prefix: 'resizable-button',
+    conditionalId: id,
+  });


[QA] All resizable_container changes are cleanup refactors and no behavior should have changed on https://eui.elastic.co/pr_5195/#/layout/resizable-container

cee-chen · 2021-09-16T21:29:47Z

src/components/tour/tour_step.tsx

@@ -122,8 +122,7 @@ export const EuiTourStep: FunctionComponent<EuiTourStepProps> = ({
  footerAction,
  ...rest
 }) => {
-  const generatedId = htmlIdGenerator();
-  const titleId = generatedId();
+  const titleId = useGeneratedHtmlId();


EuiTour (d650595)

Before:

After:

kibanamachine · 2021-09-20T19:12:31Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_5195/

thompsongl

LGTM!

cee-chen added 10 commits September 16, 2021 13:35

[Fix] EuiButtonGroup generated ID

c9c846c

[Fix] EuiCard aria IDs

b7d9024

[Fix] EuiTour title ID

d650595

[Fix] EuiKeyPadMenuItem generated ID

f6f8df6

[Fix] Multiple EuiNotificationEvent generated IDs

ba36dec

[Fix] EuiHeaderAlert generated ID

37f9001

[Fix] EuiMarkdownEditor checkboxes generated IDs

4385804

[Refactor] EuiMarkdownEditor ID

a5ce656

- remove existing useMemo hook in favor of new helper - behavior should remain same as before

[Refactor] EuiResizeableContainer IDs

4e2139d

- replace useRefs with new hook - behavior should remain same as before

[Refactor] EuiSwitch IDs

bedb05d

- replace useState with new hook - behavior should remain same as before

cee-chen added the tech debt label Sep 16, 2021

cee-chen commented Sep 16, 2021

View reviewed changes

cee-chen mentioned this pull request Sep 16, 2021

[EuiBasicTable] Fix generated IDs regenerating on rerender #5196

Merged

cee-chen added the skip-changelog label Sep 16, 2021

cee-chen mentioned this pull request Sep 16, 2021

[EuiSuperSelect] Fix regenerating and missing IDs #5197

Merged

Merge branch 'master' into use-generated-html-id-2

5b2eee6

This was referenced Sep 20, 2021

[EuiSuperDatePicker] Fix multiple IDs regenerating on rerender #5200

Merged

Fix multiple class components to not regenerate IDs on rerender #5201

Merged

cee-chen added 2 commits September 20, 2021 11:47

Add changelog entry

ebda668

Merge branch 'master' into use-generated-html-id-2

9080035

cee-chen removed the skip-changelog label Sep 20, 2021

thompsongl approved these changes Sep 21, 2021

View reviewed changes

cee-chen merged commit 91baf67 into elastic:master Sep 21, 2021

cee-chen deleted the use-generated-html-id-2 branch September 21, 2021 21:08

breehall mentioned this pull request Oct 1, 2021

Bumping EUI to 39.0.0 elastic/kibana#113633

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update multiple functional components to useGeneratedHtmlId hook #5195

Update multiple functional components to useGeneratedHtmlId hook #5195

cee-chen commented Sep 16, 2021 •

edited

Loading

kibanamachine commented Sep 16, 2021

cee-chen left a comment

cee-chen Sep 16, 2021

cee-chen Sep 16, 2021

cee-chen Sep 16, 2021

cee-chen Sep 16, 2021

cee-chen Sep 16, 2021

cee-chen Sep 16, 2021

cee-chen Sep 16, 2021

cee-chen Sep 16, 2021 •

edited

Loading

cee-chen Sep 16, 2021

kibanamachine commented Sep 20, 2021

thompsongl left a comment

		const switchId = useGeneratedHtmlId({ conditionalId: id });
		const labelId = useGeneratedHtmlId({ conditionalId: labelProps?.id });

Update multiple functional components to useGeneratedHtmlId hook #5195

Update multiple functional components to useGeneratedHtmlId hook #5195

Conversation

cee-chen commented Sep 16, 2021 • edited Loading

Summary

Checklist

kibanamachine commented Sep 16, 2021

cee-chen left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

EuiButtonGroup (c9c846c)

Choose a reason for hiding this comment

EuiCard (b7d9024)

Choose a reason for hiding this comment

Choose a reason for hiding this comment

EuiKeyPadMenuItem (f6f8df6)

Choose a reason for hiding this comment

Choose a reason for hiding this comment

EuiMarkDownEditor checkboxes (4385804)

Choose a reason for hiding this comment

Multiple EuiNotificationEvent IDs (ba36dec)

cee-chen Sep 16, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

EuiTour (d650595)

kibanamachine commented Sep 20, 2021

thompsongl left a comment

Choose a reason for hiding this comment

cee-chen commented Sep 16, 2021 •

edited

Loading

EuiButtonGroup (`c9c846c`)

EuiCard (`b7d9024`)

EuiKeyPadMenuItem (`f6f8df6`)

EuiMarkDownEditor checkboxes (`4385804`)

Multiple EuiNotificationEvent IDs (`ba36dec`)

cee-chen Sep 16, 2021 •

edited

Loading

EuiTour (`d650595`)