Added documentation for htmlIdGenerator

[anishagg17]

Summary

Fixes : #639
added documentation for htmlIdGenerator with all cases

Checklist

- [ ] Check against all themes for compatibility in both light and dark modes
- [ ] Checked in mobile
- [ ] Checked in IE11 and Firefox
- [ ] Props have proper autodocs

• Added documentation examples
  - [ ] Added or updated jest tests
  - [ ] Checked for breaking changes and labeled appropriately
  - [ ] Checked for accessibility including keyboard-only and screenreader modes
  - [ ] A changelog entry exists and is marked appropriately

[kibanamachine]

Since this is a community submitted pull request, a Jenkins build has not been kicked off automatically. Can an Elastic organization member please verify the contents of this patch and then kick off a build manually?

[chandlerprall]

Some comments that apply to the suffix/prefix examples,

• Use EuiFormRow to provide a label for the input boxes; placeholder text should be used to provide example data, not to label the field
• Use EuiFieldText instead of EuiFieldSearch
• I think it'd be nice if the examples pre-populated the input boxes to better demonstrate their use, instead of leaving them unused by default.

[anishagg17]

I have made the requested changes. Also, I have removed the reGenerate button so that user can see live changes with clicking on the button unnecessarily

[chandlerprall]

Let's trim the examples down to one generated ID per section; having a mix of 1, 2, and 3 examples is a little confusing

[anishagg17]

All changes have been made

[cchaos]

Jenkins test this

[kibanamachine]

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

[anishagg17]

@cchaos I have added description,

[anishagg17]

I have updated it accordingly

[cchaos]

@chandlerprall I don't think the prefix with suffix example is working properly. The function never produces a generated string. It just concatenates the prefix with an underscore then suffix.

So doing htmlIdGenerator('Some')('Id') produces Some_Id.

[anishagg17]

it('should create the same id for the same suffix', () => {

I think this should not be the desired behaviour

[chandlerprall]

Heh, you're right. Didn't realize the original function worked that way that - we should continue supporting the existing test cases, including the original logic of ${suffix || uuid()}. Go ahead and revert back... Actually - this shouldn't need any changes to the function itself. Why were those changes made? (we've been going through so much typescript conversion lately I'd assumed this was being converted from JS and needed to be updated to pass typescript, I apologize for the oversight).

[anishagg17]

So doing htmlIdGenerator('Some')('Id') produces Some_Id.

This was the main cause to change the function, currently

if no suffix is provided it generates

prefix_UUID_UUID

if there is a suffix it renders

prefix_UUID_suffix

It also includes the logic ${suffix || uuid()}

Earlier also if no prefix and no suffix was provided it generated UUID_UUID

[chandlerprall]

Ach, thank you. This is an annoying set of rules! The following passes tests and the values shown in the docs appear correct

export function htmlIdGenerator(idPrefix: string = '') {
  const staticUuid = uuid.v1();
  return (idSuffix: string = '') => {
    const prefix = `${idPrefix}${idPrefix !== '' ? '_' : 'i'}`;
    const suffix = idSuffix ? `_${idSuffix}` : '';
    return `${prefix}${suffix ? staticUuid : uuid.v1()}${suffix}`;
  };
}

[anishagg17]

The generator function has been updated.

[chandlerprall]

jenkins test this

[kibanamachine]

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

[chandlerprall]

Functionality & docs interactions LGTM

[cchaos]

Great, thanks!

[cchaos]

One last, jenkins test this

[kibanamachine]

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