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

[EuiInlineEdit] Add title to Read Mode Button #6966

Merged
merged 7 commits into from
Jul 20, 2023

Conversation

breehall
Copy link
Contributor

@breehall breehall commented Jul 19, 2023

Summary

This PR adds the title prop to the EuiEmptyButton displayed in read mode. This is being added to improve readability of long text that may be truncated due to its length. The title will show the value of inline edit or the placeholder (depending on which is being shown).

With a stored value
image


With placeholder
image

QA

  1. Visit staging and hover over the inline edit (read mode) button for any example. For the placeholder example, the placeholder text should populate the title until a value is saved.

Remove or strikethrough items that do not apply to your PR.

General checklist

  • Added or updated jest and cypress 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

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

@kibanamachine
Copy link

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

@breehall breehall marked this pull request as ready for review July 19, 2023 17:41
@breehall breehall requested a review from cee-chen July 19, 2023 17:42
breehall and others added 4 commits July 19, 2023 14:56
Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com>
Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com>
Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com>
…t read mdoe - placeholder test to include checks for the title tooltip.
@kibanamachine
Copy link

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

Copy link
Contributor

@cee-chen cee-chen left a comment

Choose a reason for hiding this comment

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

Changes look great, thanks Bree! 🚢

@breehall breehall merged commit ec2602d into elastic:main Jul 20, 2023
mistic pushed a commit to elastic/kibana that referenced this pull request Aug 3, 2023
`85.0.0` ➡️ `85.1.0`

⚠️ The biggest change in this PR by far is the **removal** of several
`EuiFilterSelectItem` CSS classes and styles associated with those
classes. EUI has previously exported component-specific CSS classes for
usage such as `.euiFilterSelect__items`,
`.euiFilterGroup__popoverPanel`, or `.euiAccordionForm`.

❌ **As of our move to CSS-in-JS, we are actively moving away from this
architecture**. The goal is to either provide either a component or prop
directly to you instead of a CSS class. As a reminder, our classNames
are not guaranteed APIs and are subject to change without warning -
should you need to tweak or customize EUI's styling, we strongly
recommend passing in your own `className`.

💬 Moving forward, EUI will attempted to convert any usages of removed
CSS classes and their direct usages in Kibana for you. In most cases,
we'll hopefully be able to take the correct path of using a component or
prop instead. In cases where we cannot or significant/complex changes
are required, we may temporarily convert the CSS to a static CSS-in-JS
usage instead and add a TODO asking the relevant team to address this in
their own time (for example, the deprecation of `EuiFilterSelectItem`
and its conversion to `EuiSelectable`).

## [`85.1.0`](https://github.com/elastic/eui/tree/v85.1.0)

- Updated `EuiComboBox`'s `options` to accept `option.append` and
`option.prepend` props
([#6953](elastic/eui#6953))
- Updated deprecated `.substr()` usages to `.substring()`
([#6954](elastic/eui#6954))
- Updated `EuiInlineEdit`'s read mode button to include a title tooltip,
increasing readability of truncated text
([#6966](elastic/eui#6966))

**Bug fixes**

- Fixed `EuiFilterGroup`'s responsive styles
([#6983](elastic/eui#6983))

**Deprecations**

- Deprecated `EuiFilterSelectItem`; Use `EuiSelectable` instead
([#6982](elastic/eui#6982))

**CSS-in-JS conversions**

- Converted `EuiFilterSelectItem` to Emotion
([#6982](elastic/eui#6982))
- Removed `.euiFilterSelect__items` CSS; Use `EuiSelectable` instead
([#6982](elastic/eui#6982))
- Removed `.euiFilterSelect__note` and `.euiFilterSelect__noteContent`
CSS; Use `EuiSelectableMessage` instead
([#6982](elastic/eui#6982))
- Added `focus.transparency` and `focus.backgroundColor` theme tokens
([#6984](elastic/eui#6984))

---------

Co-authored-by: Cee Chen <constance.chen@elastic.co>
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
@breehall breehall deleted the inline-edit/title branch October 6, 2023 16:01
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.

3 participants