Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[EuiStat] Allow customizing the render of the title and description HTML tags #3693

Merged
merged 14 commits into from
Jul 14, 2020

Conversation

ashikmeerankutty
Copy link
Contributor

@ashikmeerankutty ashikmeerankutty commented Jul 2, 2020

Summary

Fixes #3676

Added two new props titleElement and descriptionElement to be used for customizing title and render HTML tags

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
    - [ ] Checked Code Sandbox works for the any docs 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
Copy link

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?

@ashikmeerankutty
Copy link
Contributor Author

There is an issue with screenreader now :

  • If an element other than a string is provided. the screenreader p is shown as [object Object] due to
    <Fragment>
    {reverse ? `${title} ${description}` : `${description} ${title}`}
    </Fragment>

@cchaos cchaos requested a review from thompsongl July 2, 2020 19:13
@chandlerprall
Copy link
Contributor

The screen reader issue can be resolved by removing them from the string interpolation:

      <p>
        {isLoading ? (
          <EuiI18n token="euiStat.loadingText" default="Statistic is loading" />
        ) : (
          reverse ? <>{title} {description}</> : <>{description} {title}</>
        )}
      </p>

@ashikmeerankutty
Copy link
Contributor Author

The screen reader issue can be resolved by removing them from the string interpolation:

      <p>
        {isLoading ? (
          <EuiI18n token="euiStat.loadingText" default="Statistic is loading" />
        ) : (
          reverse ? <>{title} {description}</> : <>{description} {title}</>
        )}
      </p>

Thanks, but here still elements are wrapped in p. so the warning can be found again

Copy link
Contributor

@chandlerprall chandlerprall left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

One small request, otherwise this looks good to me

src/components/stat/stat.tsx Outdated Show resolved Hide resolved
@ashikmeerankutty
Copy link
Contributor Author

@chandlerprall Thanks for the review. Changes committed 👍

Remove an extra line left over from a merge resolution
@chandlerprall
Copy link
Contributor

Thanks @ashikmeerankutty! I'll approve&merge on passing CI

jenkins test this

@kibanamachine
Copy link

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

Copy link
Contributor

@chandlerprall chandlerprall left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changes LGTM, tested locally

@chandlerprall chandlerprall merged commit c09ece9 into elastic:master Jul 14, 2020
anishagg17 added a commit to anishagg17/eui that referenced this pull request Jul 20, 2020
* Break up release.js (elastic#3723)

* Switch release.js to use arguments instead of env vars

* Switch MFA code back to env var so it doesn't leak in CI logs

* Update job definition to use --type arg

* Support breaking up release steps with args

* Break release up to fetch time-sensitive MFA token right before publish

* Strip whitespace from each step

Co-authored-by: Chandler Prall <chandler.prall@gmail.com>

Co-authored-by: Chandler Prall <chandler.prall@gmail.com>

* Allow prop-setting on the FlexItems within DescribedFormGroup (elastic#3717)

* Allow prop-setting on the FlexItems within DescribedFormGroup

* Add changelog entry

* Honor classes on fieldFlexItem

* Update src/components/form/described_form_group/described_form_group.test.tsx

Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>

* Update snap name

Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>

* Re-focus EuiSuperSelect input after making a value change (elastic#3734)

* Re-focus EuiSuperSelect input after making a value change

* changelog

* [EuiStat] Allow customizing the render of the title and description HTML tags (elastic#3693)

* Add titleElement and descriptionElement to EuiStat

* Updated snapshots

* Updated changelog

* Fixed issue with screenreader

* Updated snapshots

* Use screen reader only if title and description is a string

* updated snapshots

* Merge remote-tracking branch 'upstream/master' into fix/stat

* Fixed typo in changelod

* removed titleChildren

* titlechildren as variable

* Update CHANGELOG.md

Remove an extra line left over from a merge resolution

Co-authored-by: Chandler Prall <chandler.prall@gmail.com>

* [EuiTable] Expand item action name to allow a function (elastic#3739)

* allow for item -> ReactNode in name

* docs

* CL

* Add ssh keys so new tags can be pushed to Github from Jenkins (elastic#3740)

* Add ssh keys so new tags can be pushed to Github

* Need a vault token before we can pull secrets

* update i18ntokens

* 27.1.0

* Updated documentation.

* Chore/decouple button content (elastic#3730)

* [New] EuiButtonContent

For rendering the contents of buttons, icon (loading spinner) and text wrapper for children

* Use EuiButtonContent in EuiButtonEmpty

* Fixing classNames and disabled states

* Create EuiButtonDisplay for internal usage

* Fix snaps

* ts gymnastics

* Added tests for EuiButtonContent

* More optimization

- Extend EuiButtonContentProps
- Content styles are in button_content.scss

* Restricted list of `element`s

* [Docs] Adding more acccessibility-focused notes and examples (elastic#3714)

* making more a11y callouts in docs

* Apply suggestions from code review

Co-authored-by: gchaps <33642766+gchaps@users.noreply.github.com>

* prettier update

Co-authored-by: gchaps <33642766+gchaps@users.noreply.github.com>

* [EuiFocusTrap] Use `react-focus-on` (elastic#3631)

* WIP: react-focus-on

* WIP: fix GuideFullScreen

* noIsolation; onClickOutside

* euiflyout snapshot updates

* euiflyout snapshot updates

* euimodal snapshot updates

* euidatagrid snapshot updates

* euicolorpalettepicker snapshot updates

* euisuperselect snapshot updates

* euicollapsible snapshot updates

* euifocustrap snapshot updates

* allow for array snapshots with takeMountedSnapshot

* docs improvements

* default to noIsolation=true and scrollLock=false

* CL

* Fixed bug in EuiComboBox always showing a scrollbar (elastic#3744)

* Fixed EuiComboBox always showing a scrollbar

* Adding the right PR number to CL

* Added useEuiI18n hook (elastic#3749)

* Added useEuiI18n hook

* Updated docs with useEuiI18n hook, added snippets

* Add support to fetch-1i8n-strings or useEuiI18n to match EuiI18n extraction

* Fix up return types for useEuiI18n

* Updated custom eslint i18n rule/package to lint useEuiI18n usages

* changelog

* Remove something I was testing with and lost where I had placeed it.

* [EuiSuperDatePicker] Bypass formatting `null` dates (elastic#3750)

* prevent formatting on null value

* remove unnecessary cast

* account for keyboard nav with null selection

* CL

* Updated EuiComboBox to allow the options list to open for single selection custom options (elastic#3706)

* Fixing includes to return true when object exists in array

* changelog

* Allowing list to open for single selection custom options

* Updated changelog

* PR review

* Improving example

* Improving example

* Addind isClearable

* Improving examples

* Improving explanation text

* Adding note

* Addressing PR issues

* Update src-docs/src/views/combo_box/combo_box_example.js

Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>

* Update src-docs/src/views/combo_box/combo_box_example.js

Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>

* Snippet

Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>

* Add analyze event glyph to EuiIcon (elastic#3729)

* adding analyze event security icon

* updating analyze_event icon

* updating again

* Update CHANGELOG.md

* Update consuming.md (elastic#3769)

* Path has changed and the wiki has not been updated.

* Fix zIndex for two popup ups (elastic#3768)

Clicking both buttons on https://eui.elastic.co/#/tabular-content/data-grid-styling-and-toolbar demo brings up partially hidden popups because their z-index is too low. Increasing by one seems to do the trick.

* [Playground] EuiBadge,   EuiNotificationBadge,   EuiBetaBadge (elastic#3722)

* created playground for badges

* removed commented code

* used validator for iconType and colour

* updated variable name

* removed colour validation

* removed unnecessary imports

* removed default values, fullscreen mode

* suggesstions

* removed placeholder, added required, some badge props set to string

* used actual value of child in text field

* added sanitize function

* fixed unique-key warning

* added validation

* updated to identify the change whenthe state changes

* suggestions

* added onCLick function snippet

* removed error popup by react-view

* removed lint err

* removed commented code

Co-authored-by: Josh Mock <joshua.mock@elastic.co>
Co-authored-by: Chandler Prall <chandler.prall@gmail.com>
Co-authored-by: Scott Gould <sbg@elastic.co>
Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>
Co-authored-by: Ashik Meerankutty <ashik9591@gmail.com>
Co-authored-by: Greg Thompson <thompson.glowe@gmail.com>
Co-authored-by: Michail Yasonik <michail.yasonik@elastic.co>
Co-authored-by: gchaps <33642766+gchaps@users.noreply.github.com>
Co-authored-by: Elizabet Oliveira <elizabet.oliveira@gmail.com>
Co-authored-by: Marra Sherrier <45169477+marrasherrier@users.noreply.github.com>
Co-authored-by: Alberto Andújar <josealbertoandujar@gmail.com>
Co-authored-by: Yuri Astrakhan <yuriastrakhan@gmail.com>
anishagg17 pushed a commit to anishagg17/eui that referenced this pull request Jul 20, 2020
…TML tags (elastic#3693)

* Add titleElement and descriptionElement to EuiStat

* Updated snapshots

* Updated changelog

* Fixed issue with screenreader

* Updated snapshots

* Use screen reader only if title and description is a string

* updated snapshots

* Merge remote-tracking branch 'upstream/master' into fix/stat

* Fixed typo in changelod

* removed titleChildren

* titlechildren as variable

* Update CHANGELOG.md

Remove an extra line left over from a merge resolution

Co-authored-by: Chandler Prall <chandler.prall@gmail.com>
anishagg17 added a commit to anishagg17/eui that referenced this pull request Jul 20, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[EuiStat] Allow customizing the render of the title and description HTML tags
5 participants