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.

Sign up for GitHub

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

Jump to bottom

[EuiFieldText][EuiFieldNumber] Various icon related fixes #7666

Merged
merged 7 commits into from
Apr 11, 2024
Merged

[EuiFieldText][EuiFieldNumber] Various icon related fixes #7666

merged 7 commits into from
Apr 11, 2024

Conversation

cee-chen
Copy link
Contributor

@cee-chen cee-chen commented Apr 9, 2024 •
edited by tkajtoch
Loading

Summary

@dplumlee helped us identify a visual bug with customizing EuiFieldText and EuiFieldNumber's icon prop using object configuration to configure the icon side. While here, I found Even More Bugs (yay!)

Before After

QA

Right side icon fix:

Control only fix:

Color picker fix:

General checklist

  • Browser QA
    • Checked in Chrome, Safari, Edge, and Firefox
  • Docs site QA
    • Added Storybook stories for QA
    • Props have proper autodocs (using @default if default values are missing) and playground toggles
  • Code quality checklist
  • Release checklist
    • A changelog entry exists and is marked appropriately.
  • Designer checklist - N/A

cee-chen added 6 commits April 9, 2024 12:40
@cee-chen
[EuiFieldNumber] Fix icon type - should also accept an obj shape
537b3ed
@cee-chen
Add new util for icons configured to the right side
7195758
@cee-chen
Fix EuiFieldNumber and EuiFieldText to correctly set paddings for rig…
47ac625 
…ht side icons
@cee-chen
Add storybooks for testing the icon shape/prop
131b093
@cee-chen
Fix controlOnly prop to actually fully ignore icon/prepend/`app…
e6f5c72 
…end`

- which is what it says on the props docs

- rendering was visually broken if `icon` and `prepend/append` were also passed
@cee-chen
[EuiColorPicker] Fix input padding
d375b56 
- icon behavior was previously relying on buggy `EuiFieldText` logic

- also didn't have the correct right side padding CSS in any case
@cee-chen cee-chen added the bug label Apr 9, 2024
@cee-chen cee-chen self-assigned this Apr 9, 2024
@elasticmachine
Copy link
Collaborator

elasticmachine commented Apr 9, 2024 •
edited
Loading

💚 Build Succeeded

History

cc @cee-chen

@kibanamachine
Copy link

Preview staging links for this PR:

@cee-chen cee-chen marked this pull request as ready for review April 9, 2024 21:12
@cee-chen cee-chen requested a review from a team as a code owner April 9, 2024 21:13
tkajtoch
tkajtoch approved these changes Apr 10, 2024
View reviewed changes
Copy link
Member

@tkajtoch tkajtoch left a comment

Choose a reason for hiding this comment

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

The changes look and work great! Thanks for also fixing the additional bugs you found 🎉

mgadewoll
mgadewoll approved these changes Apr 10, 2024
View reviewed changes
Copy link
Contributor

@mgadewoll mgadewoll left a comment

Choose a reason for hiding this comment

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

🚢 🐈‍⬛ Awesome that you're fixing it immediately! Looking good to me!

@cee-chen cee-chen merged commit 9b0e1da into elastic:main Apr 11, 2024
8 checks passed
@cee-chen cee-chen deleted the form-icon-fix branch April 11, 2024 16:10
cee-chen added a commit to cee-chen/eui that referenced this pull request Apr 18, 2024
@cee-chen
[EuiFieldText][EuiFieldNumber] Various icon related fixes (elastic#…
0a8bfdf 
…7666)
@cee-chen cee-chen mentioned this pull request Apr 29, 2024
Merged
cee-chen added a commit to elastic/kibana that referenced this pull request May 3, 2024
@cee-chen @tkajtoch
Upgrade EUI to v94.2.1 (#182023)
31e8c54 
`v94.1.0-backport.0` ⏩ `v94.2.1-backport.0`

_[Questions? Please see our Kibana upgrade
FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams)_

---

##
[`v94.2.1-backport.0`](https://github.com/elastic/eui/releases/v94.2.1-backport.0)

**This is a backport release only intended for use by Kibana.**

- Reverted the `EuiFlexGroup`/`EuiFlexItem` `component` prop feature due
to Kibana typing issues

## [`v94.2.1`](https://github.com/elastic/eui/releases/v94.2.1)

**Bug fixes**

- Fixed an `EuiTabbedContent` edge case bug that occurred when updated
with a completely different set of `tabs`
([#7713](elastic/eui#7713))
- Fixed the `@storybook/test` dependency to be listed in
`devDependencies` and not `dependencies`
([#7719](elastic/eui#7719))

## [`v94.2.0`](https://github.com/elastic/eui/releases/v94.2.0)

- Updated `getDefaultEuiMarkdownPlugins()` to allow excluding the
following plugins in addition to `tooltip`:
([#7676](elastic/eui#7676))
  - `checkbox`
  - `linkValidator`
  - `lineBreaks`
  - `emoji`
- Updated `EuiSelectable`'s `isPreFiltered` prop to allow passing a
configuration object, which allows disabling search highlighting in
addition to search filtering
([#7683](elastic/eui#7683))
- Updated `EuiFlexGroup` and `EuiFlexItem` prop types to support passing
any valid React component type to the `component` prop and ensure proper
type checking of the extra props forwarded to the `component`.
([#7688](elastic/eui#7688))
- Updated `EuiSearchBar` to allow the `@` special character in query
string searches ([#7702](elastic/eui#7702))
- Added a new, optional `optionMatcher` prop to `EuiSelectable` and
`EuiComboBox` allowing passing a custom option matcher function to these
components and controlling option filtering for given search string
([#7709](elastic/eui#7709))

**Bug fixes**

- Fixed an `EuiPageTemplate` bug where prop updates would not cascade
down to child sections
([#7648](elastic/eui#7648))
- To cascade props down to the sidebar, `EuiPageTemplate` now explicitly
requires using the `EuiPageTemplate.Sidebar` rather than
`EuiPageSidebar`
- Fixed `EuiFieldNumber`'s typing to accept an icon configuration shape
([#7666](elastic/eui#7666))
- Fixed `EuiFieldText` and `EuiFieldNumber` to render the correct
paddings for icon shapes set to `side: 'right'`
([#7666](elastic/eui#7666))
- Fixed `EuiFieldText` and `EuiFieldNumber` to fully ignore
`icon`/`prepend`/`append` when `controlOnly` is set to true
([#7666](elastic/eui#7666))
- Fixed `EuiColorPicker`'s input not setting the correct right padding
for the number of icons displayed
([#7666](elastic/eui#7666))
- Visual fixes for `EuiRange`s with `showInput`:
([#7678](elastic/eui#7678))
  - Longer `append`/`prepend` labels no longer cause a background bug
  - Inputs can no longer overwhelm the actual range in width
- Fixed a visual text alignment regression in `EuiTableRowCell`s with
the `row` header scope
([#7681](elastic/eui#7681))
- Fixed `toolTipProps` type on `EuiSuperUpdateButton` to use
`Partial<EuiToolTipProps>`
([#7692](elastic/eui#7692))
- Fixes missing prop type for `popperProps` on `EuiDatePicker`
([#7694](elastic/eui#7694))
- Fixed a focus bug with `EuiDataGrid`s with `leadingControlColumns`
when moving columns to the left/right
([#7701](elastic/eui#7701))
([#7698](elastic/eui#7698))
- Fixed `EuiSuperDatePicker` to validate date string with respect of
locale on `EuiAbsoluteTab`.
([#7705](elastic/eui#7705))
- Fixed a visual bug with `EuiSuperDatePicker`'s absolute tab on small
mobile screens ([#7708](elastic/eui#7708))
- Fixed i18n of empty and loading state messages for the
`FieldValueSelectionFilter` component
([#7718](elastic/eui#7718))

**Dependency updates**

- Updated `@hello-pangea/dnd` to v16.6.0
([#7599](elastic/eui#7599))
- Updated `remark-rehype` to v8.1.0
([#7601](elastic/eui#7601))

**Accessibility**

- Improved `EuiBasicTable` and `EuiInMemoryTable`'s selection checkboxes
to have unique aria-labels per row
([#7672](elastic/eui#7672))
- Added `aria-valuetext` attributes to `EuiRange`s with tick labels for
improved screen reader UX
([#7675](elastic/eui#7675))
- Updated `EuiAccordion` to keep focus on accordion trigger instead of
moving to content on click/keypress
([#7696](elastic/eui#7696))
- Added `aria-disabled` attribute to `EuiHorizontalSteps` when status is
"disabled" ([#7699](elastic/eui#7699))

---------

Co-authored-by: Tomasz Kajtoch <tomasz.kajtoch@elastic.co>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@mgadewoll mgadewoll mgadewoll approved these changes

@tkajtoch tkajtoch tkajtoch approved these changes

Assignees

@cee-chen cee-chen

Labels
bug
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
5 participants
@cee-chen @elasticmachine @kibanamachine @tkajtoch @mgadewoll