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

[Emotion] Convert EuiFilePicker #7833

Merged
merged 17 commits into from
Jun 18, 2024
Merged

[Emotion] Convert EuiFilePicker #7833

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
c432ff2
Set up EuiFilePicker Emotion styles file
cee-chen Jun 12, 2024
00bc138
Convert `.euiFilePicker__input`
cee-chen Jun 12, 2024
2362d54
Convert file picker size styles to Emotion
cee-chen Jun 12, 2024
347eb85
Convert border color logic to Emotion
cee-chen Jun 12, 2024
3e18558
Convert icon styles
cee-chen Jun 13, 2024
45100a0
Convert right side clear/loading icon to Emotion
cee-chen Jun 13, 2024
00f1611
Convert disabled styles
cee-chen Jun 13, 2024
502e9ad
Convert large hover/interactive styles
cee-chen Jun 13, 2024
6586268
Convert prompt text styles to Emotion
cee-chen Jun 13, 2024
283aad5
[cleanup] Remove modifier map and unnecessary `__wrap` element
cee-chen Jun 13, 2024
5b97e82
`shouldRenderCustomStyles` test
cee-chen Jun 13, 2024
6147627
Delete Sass files
cee-chen Jun 13, 2024
3ffa20c
changelog
cee-chen Jun 13, 2024
662f15f
Fix truncation on mobile/short widths for `large` displays
cee-chen Jun 13, 2024
9c22a92
Update VRT + add another story for the more compressed/form-like display
cee-chen Jun 13, 2024
531c394
Fix non-rounded loading indicator when `display="large"`
cee-chen Jun 13, 2024
5428af7
[PR feedback] types/props shenanigans - add `@default` jsdocs that ar…
cee-chen Jun 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/eui/src/components/form/file_picker/__snapshots__/file_picker.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ exports[`EuiFilePicker is rendered 1`] = `
<input
aria-describedby="generated-id-filePicker__prompt"
aria-label="aria-label"
class="euiFilePicker__input emotion-euiFilePicker__input"
class="euiFilePicker__input emotion-euiFilePicker__input-largeInteractive"
data-test-subj="test subject string"
type="file"
/>
Expand Down
28 changes: 0 additions & 28 deletions packages/eui/src/components/form/file_picker/_file_picker.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,34 +21,6 @@

// Large styles only
.euiFilePicker--large {
// stylelint-disable max-nesting-depth
// Hover and focus
.euiFilePicker__input:hover:not(:disabled),
.euiFilePicker__input:focus {
+ .euiFilePicker__prompt {
.euiFilePicker__promptText {
// Adding the underline to the prompt text ensures the underline
// color is the same as the current text color
text-decoration: underline;
}

.euiFilePicker__icon {
transform: scale(1.1);
}
}
}

// While dragging files over the dropzone
&.euiFilePicker__showDrop .euiFilePicker__prompt {
.euiFilePicker__promptText {
text-decoration: underline;
}

.euiFilePicker__icon {
transform: scale(1.1);
}
}

&.euiFilePicker-hasFiles .euiFilePicker__promptText {
font-weight: $euiFontWeightBold;
}
Expand Down
45 changes: 31 additions & 14 deletions packages/eui/src/components/form/file_picker/file_picker.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,23 +48,40 @@ export const euiFilePickerStyles = (euiThemeContext: UseEuiTheme) => {
fullWidth: css(formStyles.fullWidth),

// The input is an invisible dropzone / button
euiFilePicker__input: css`
position: absolute;
inset: 0;
opacity: 0;
input: {
euiFilePicker__input: css`
position: absolute;
inset: 0;
opacity: 0;

&:hover {
cursor: pointer;
}
&:hover {
cursor: pointer;
}

&:hover:disabled {
cursor: not-allowed;
}
&:hover:disabled {
cursor: not-allowed;
}

&:disabled {
opacity: 0;
}
`,
&:disabled {
opacity: 0;
}
`,
largeInteractive: css`
&:hover,
&:focus,
.euiFilePicker-isDroppingFile & {
cee-chen marked this conversation as resolved.
Show resolved Hide resolved
& + .euiFilePicker__prompt {
mgadewoll marked this conversation as resolved.
Show resolved Hide resolved
.euiFilePicker__promptText {
text-decoration: underline;
}

.euiFilePicker__icon {
transform: scale(1.1);
}
}
}
`,
},

euiFilePicker__prompt: css`
pointer-events: none; /* Don't block the user from dropping files onto the filepicker */
Expand Down
9 changes: 7 additions & 2 deletions packages/eui/src/components/form/file_picker/file_picker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -180,7 +180,7 @@ export class EuiFilePickerClass extends Component<
'euiFilePicker',
displayToClassNameMap[display!],
{
euiFilePicker__showDrop: this.state.isHoveringDrop,
'euiFilePicker-isDroppingFile': this.state.isHoveringDrop,
'euiFilePicker-isInvalid': isInvalid,
'euiFilePicker-isLoading': isLoading,
'euiFilePicker-hasFiles': isOverridingInitialPrompt,
Expand All @@ -198,6 +198,11 @@ export class EuiFilePickerClass extends Component<
isLoading && styles.loading,
];

const inputStyles = [
styles.input.euiFilePicker__input,
!normalFormControl && !disabled && styles.input.largeInteractive,
];

const promptStyles = [
styles.euiFilePicker__prompt,
disabled && styles.disabled,
Expand Down Expand Up @@ -285,7 +290,7 @@ export class EuiFilePickerClass extends Component<
type="file"
id={id}
name={name}
css={styles.euiFilePicker__input}
css={inputStyles}
className="euiFilePicker__input"
onChange={this.handleChange}
ref={(input) => {
Expand Down