-
Notifications
You must be signed in to change notification settings - Fork 842
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
[Emotion] Convert EuiFilePicker #7833
Conversation
+ remove necessary CSS
- simplify/remove mixin by using component directly instead
- not a super huge fan of how nest-y this is, but not sure there's a better way of writing this
- Move majority of CSS to `euiFilePicker__prompt` wrapper - the text styling doesn't need to be overly specific, except for the hover/focus underline - change element from div to span to indicate that it's not meant to be a layout element - simplify line-height and margin offset - [opinionated change] Tweak normal control color and font weight to match non-large control
@cee-chen Should this PR merge into |
Yes, it should merge into main. |
packages/eui/src/components/form/file_picker/file_picker.styles.ts
Outdated
Show resolved
Hide resolved
@@ -52,7 +51,7 @@ export interface EuiFilePickerProps | |||
* `default` for normal height, similar to other controls; | |||
* `large` for taller size | |||
*/ | |||
display?: EuiFilePickerDisplay; | |||
display?: 'default' | 'large'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think we need to add default value markers. We lost that info in both Storybook and the EUI docs now with the conversion for these props: compressed
, display
and initialPromptText
.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ahh thanks for catching this!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I wonder what caused defaultProps to stop getting parsed automatically though. I think it was the theme HOC, which is a little frustrating. I debated converting this component to a function component, but the fact that we expose class methods via ref
made me pause that work 😬
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It might be the added level of abstraction, yes. Also just as is. So far to me it seems that the props table generator that both Storybook and EUI use have trouble resolving complex types as well as too "abstracted away" types. I haven't really understood the "pattern" yet though either. That would required its own "little" investigation I think.
…e now missing
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🚢 🐈⬛ I had checked the changes manually and did not notice any issues apart from the mentioned expected changes. Thanks for the additional default prop update! Looks good to me now 👍
Thanks a million Lene!! |
Preview staging links for this PR:
|
💚 Build Succeeded
History
|
`v95.1.0`⏩`v95.2.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)_ --- ## [`v95.2.0`](https://github.com/elastic/eui/releases/v95.2.0) - Updated `EuiContextMenuItemIcon`'s type definition to explicitly define support for `EuiIcon`'s `IconType` ([#7804](elastic/eui#7804)) - Updated `EuiSteps` to support a new `titleSize="xxs"` style, which outputs the same title font size but smaller unnumbered step indicators ([#7813](elastic/eui#7813)) - Updated `EuiStepsHorizontal` to support a new `size="xs"` style, which outputs smaller unnumbered step indicators ([#7813](elastic/eui#7813)) - Updated `EuiStepNumber` to support new `titleSize="none"` which omits rendering step numbers, and will only render icons ([#7813](elastic/eui#7813)) - Updated `setEuiDevProviderWarning` to additionally accept a custom callback function, which warning messages will be passed to ([#7820](elastic/eui#7820)) - Updated `EuiIcon` to feature updated `logoElasticStack` logo for referencing Elastic Stack platform ([#7838](elastic/eui#7838)) - Updated `EuiIcon` to feature updated `casesApp` design. ([#7840](elastic/eui#7840)) - Updated `EuiComboBox` to no longer autocomplete searched text when used within forms ([#7842](elastic/eui#7842)) **CSS-in-JS conversions** - Converted `EuiFilePicker` to Emotion; Removed `$euiFilePickerTallHeight` ([#7833](elastic/eui#7833)) --------- Co-authored-by: Jon <jon@elastic.co>
Summary
This PR converts
EuiFilePicker
to Emotion. It also contains a few opinionated style cleanups:default
(non-large) file picker display has had its font colors tweaked to match large displays (change originally made in EuiFilePicker dropzone style updates #6479)compressed
+default
file pickers now resize their icons to match other compressed form controlsThe slight background color on compressed file pickers has been removed (to be honest, I'm not totally sure why it was ever there in the first place)
Removed unnecessary
.euiFilePicker__wrap
DOM elementQA
display="large/default"
+compressed={true/false}
. Then test with with invalid, loading, disabled, and files added statesRemoving files programmatically
section/demo should work as before with no regressionsGeneral checklist
Added orupdated jestand cypress testssnapshots- [ ] If applicable, added the breaking change issue label (and filled out the breaking change checklist)Figma does need updating, it was never updated during #6479
Emotion checklist
General
className(s)
read as expected in snapshots and browsers[ ] Checked component playgroundNo playgroundUnit tests
shouldRenderCustomStyles()
test was added and passes with parent component and any nestedchildProps
(e.g.tooltipProps
)[ ] Removed anymount()
ed snapshots in favor ofrender()
or a more specific assertionSass/Emotion conversion process
[ ] Converted all global Sass vars/mixins to JS (e.g.- N/A, this will be done last at the end of the full forms conversion$euiSize
toeuiTheme.size.base
)[ ] Added an@warn
deprecation message within theglobal_styling/mixins/{component}.scss
fileor convertedcomponent-specific Sass vars/mixins to exported JS versions[ ] Ranyarn compile-scss
to update var/mixin JSON files[ ] Simplifiedcalc()
tomathWithUnits
if possible (if mixing different unit types, this may not be possible)src/components/index.scss
[ ] Deleted anysrc/amsterdam/overrides/{component}.scss
files (styles within should have been converted to the baseline Emotion styles)CSS tech debt
euiCanAnimate
[ ] Usedgap
property to add margin between items if using flex-inline
and-block
logical properties (check inline styles as well as CSS)DOM Cleanup
euiComponent
,euiComponent__child
) - did remove, but checked first - no Kibana usagesKibana due diligence
{euiComponent}-
(case sensitive) to check for usage of modifier classes[ ] If usage exists, consider converting to adata
attribute so that consumers still have something to hook into**/target, **/*.snap, **/*.storyshot
for less noise) foreui{Component}
(case sensitive) to find:euiBadge
class on a div instead of simply using theEuiBadge
component)2 custom CSS styles that will need to be evaluated:
Extras/nice-to-have
[ ] Optional component/code cleanup: consider splitting up the component into multiple children if it's overly verbose or difficult to reason about[ ] Documentation pass[ ] Check for issues in the backlog that could be a quick fix for that componentI spiked out converting the component to a function component but decided against it due to the
removeFiles
ref usage in Kibana.