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

[EuiToolTip] Convert to Emotion styling #6104

Merged
merged 21 commits into from
Sep 7, 2022
Merged

[EuiToolTip] Convert to Emotion styling #6104

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
79d096e
convert euitooltip to function component
thompsongl Aug 2, 2022
9e1db0a
account for exposed methods: forwardRef and useImperativeHandle
thompsongl Aug 3, 2022
9174f90
convert euitooltippopover to function component
thompsongl Aug 3, 2022
3062199
fix aria-describedby id
thompsongl Aug 3, 2022
ee53d7f
convert euitooltip to emotion styling
thompsongl Aug 3, 2022
c4c6b95
convert euitooltippopover to emotion styling
thompsongl Aug 3, 2022
f2dd033
removed unused sass
thompsongl Aug 3, 2022
d0ca72a
lint
thompsongl Aug 3, 2022
f9a219c
snapshot updates
thompsongl Aug 3, 2022
8657294
Merge branch 'main' into css-in-js/euitooltip
thompsongl Aug 3, 2022
3167174
CL
thompsongl Aug 3, 2022
36215d8
manual merge main
thompsongl Aug 24, 2022
3db6ade
Merge branch 'main' into css-in-js/euitooltip
thompsongl Aug 24, 2022
ae1728e
Merge branch 'main' into css-in-js/euitooltip
thompsongl Aug 25, 2022
215981e
remove comment
thompsongl Aug 25, 2022
d299fd9
use RTL
thompsongl Aug 25, 2022
dcfac5f
Merge branch 'main' into css-in-js/euitooltip
thompsongl Aug 30, 2022
b9cc1aa
refactor to make subcomponents responsible for their own styling
thompsongl Aug 30, 2022
4e0efa8
fix merge
thompsongl Aug 31, 2022
0513b1f
Merge branch 'main' into css-in-js/euitooltip
thompsongl Aug 31, 2022
20ffb8b
update CL
thompsongl Aug 31, 2022
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 src/components/badge/beta_badge/__snapshots__/beta_badge.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ exports[`EuiBetaBadge props size s is rendered 1`] = `

exports[`EuiBetaBadge props tooltip and anchorProps are rendered 1`] = `
<span
class="euiToolTipAnchor customAnchorClass"
class="euiToolTipAnchor customAnchorClass emotion-euiToolTipAnchor-inlineBlock"
data-test-subj="DTS"
>
<span
Expand Down
2 changes: 1 addition & 1 deletion src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ exports[`CollapsedItemActions render 1`] = `
class="euiPopover__anchor css-16vtueo-render"
>
<span
class="euiToolTipAnchor"
class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
>
<button
aria-label="All actions"
Expand Down
415 changes: 299 additions & 116 deletions src/components/code/__snapshots__/code_block.test.tsx.snap
View file
Open in desktop

Large diffs are not rendered by default.

16 changes: 8 additions & 8 deletions src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -990,7 +990,7 @@ Array [
class="euiPopover__anchor css-16vtueo-render"
>
<span
class="euiToolTipAnchor"
class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
>
<button
aria-label="Display options"
Expand All @@ -1009,7 +1009,7 @@ Array [
</div>
</div>
<span
class="euiToolTipAnchor"
class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
>
<button
aria-label="Enter fullscreen"
Expand Down Expand Up @@ -1435,7 +1435,7 @@ Array [
class="euiPopover__anchor css-16vtueo-render"
>
<span
class="euiToolTipAnchor"
class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
>
<button
aria-label="Display options"
Expand All @@ -1454,7 +1454,7 @@ Array [
</div>
</div>
<span
class="euiToolTipAnchor"
class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
>
<button
aria-label="Enter fullscreen"
Expand Down Expand Up @@ -2221,7 +2221,7 @@ Array [
class="euiPopover__anchor css-16vtueo-render"
>
<span
class="euiToolTipAnchor"
class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
>
<button
aria-label="Display options"
Expand All @@ -2240,7 +2240,7 @@ Array [
</div>
</div>
<span
class="euiToolTipAnchor"
class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
>
<button
aria-label="Enter fullscreen"
Expand Down Expand Up @@ -2665,7 +2665,7 @@ Array [
class="euiPopover__anchor css-16vtueo-render"
>
<span
class="euiToolTipAnchor"
class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
>
<button
aria-label="Display options"
Expand All @@ -2684,7 +2684,7 @@ Array [
</div>
</div>
<span
class="euiToolTipAnchor"
class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
>
<button
aria-label="Enter fullscreen"
Expand Down
8 changes: 5 additions & 3 deletions src/components/date_picker/super_date_picker/super_update_button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
* Side Public License, v 1.
*/

import React, { Component, MouseEventHandler, Ref } from 'react';
import React, { Component, MouseEventHandler, ElementRef } from 'react';
import classNames from 'classnames';

import { EuiButton, EuiButtonProps } from '../../button';
Expand All @@ -15,6 +15,8 @@ import { EuiToolTip, EuiToolTipProps } from '../../tool_tip';
import { EuiBreakpointSize } from '../../../services/breakpoint';
import { EuiHideFor, EuiShowFor } from '../../responsive';

type ToolTipRef = ElementRef<typeof EuiToolTip> | null;

type EuiSuperUpdateButtonInternalProps = {
isDisabled?: boolean;
isLoading?: boolean;
Expand Down Expand Up @@ -58,7 +60,7 @@ export class EuiSuperUpdateButton extends Component<
};
_isMounted = false;
tooltipTimeout: number | undefined;
tooltip: EuiToolTip | null = null;
tooltip: ToolTipRef = null;

componentWillUnmount() {
this._isMounted = false;
Expand All @@ -82,7 +84,7 @@ export class EuiSuperUpdateButton extends Component<
}
}

setTootipRef: Ref<EuiToolTip> = (node) => {
setTootipRef = (node: ToolTipRef) => {
Copy link
Contributor

Choose a reason for hiding this comment

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

this is much nicer

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yeah it's actually required for functional components, but I left it in after reverting to a class component.

this.tooltip = node;
};

Expand Down
1 change: 0 additions & 1 deletion src/components/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,4 +36,3 @@
@import 'suggest/index';
@import 'table/index';
@import 'tabs/index';
@import 'tool_tip/index';
8 changes: 4 additions & 4 deletions src/components/key_pad_menu/__snapshots__/key_pad_menu_item.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ exports[`EuiKeyPadMenuItem is rendered 1`] = `

exports[`EuiKeyPadMenuItem props betaBadge renders 1`] = `
<span
class="euiToolTipAnchor"
class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
>
<button
class="euiKeyPadMenuItem euiKeyPadMenuItem--hasBetaBadge"
Expand Down Expand Up @@ -128,7 +128,7 @@ exports[`EuiKeyPadMenuItem props betaBadge renders 1`] = `

exports[`EuiKeyPadMenuItem props betaBadge renders extra betaBadgeTooltipProps 1`] = `
<span
class="euiToolTipAnchor customTooltipClass"
class="euiToolTipAnchor customTooltipClass emotion-euiToolTipAnchor-inlineBlock"
>
<button
class="euiKeyPadMenuItem euiKeyPadMenuItem--hasBetaBadge"
Expand Down Expand Up @@ -161,7 +161,7 @@ exports[`EuiKeyPadMenuItem props betaBadge renders extra betaBadgeTooltipProps 1

exports[`EuiKeyPadMenuItem props betaBadge renders with betaBadgeIconType 1`] = `
<span
class="euiToolTipAnchor"
class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
>
<button
class="euiKeyPadMenuItem euiKeyPadMenuItem--hasBetaBadge"
Expand Down Expand Up @@ -199,7 +199,7 @@ exports[`EuiKeyPadMenuItem props betaBadge renders with betaBadgeIconType 1`] =

exports[`EuiKeyPadMenuItem props betaBadge renders with betaBadgeTooltipContent 1`] = `
<span
class="euiToolTipAnchor"
class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
>
<button
class="euiKeyPadMenuItem euiKeyPadMenuItem--hasBetaBadge"
Expand Down
Loading