github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-06-27 18:51:07 -04:00
Code Issues Projects Releases Packages Wiki Activity

Added user avatar tooltip (#142162)

Browse source 
* Added user avatar tooltip

* Updated js docs
This commit is contained in:
Thom Heymann 2022-10-03 15:30:04 +01:00 • committed by GitHub
parent 40b397d0e1
commit 44b38630e6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 334 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

1
examples/user_profile_examples/public/panel_with_code_block.tsx
View file

@ -31,6 +31,5 @@ export const PanelWithCodeBlock: React.FunctionComponent<PanelWithCodeBlockProps
</EuiCodeBlock>
</EuiSplitPanel.Inner>
</EuiSplitPanel.Outer>
<EuiSpacer size="l" />
</>
);

23
examples/user_profile_examples/public/plugin.tsx
View file

@ -14,6 +14,7 @@ import { KibanaPageTemplate } from '@kbn/shared-ux-page-kibana-template';
import { AvatarDemo } from './avatar_demo';
import { PopoverDemo } from './popover_demo';
import { SelectableDemo } from './selectable_demo';
import { ToolTipDemo } from './tooltip_demo';
interface SetupDeps {
developerExamples: DeveloperExamplesSetup;
@ -38,14 +39,20 @@ export class UserProfilesPlugin implements Plugin<void, void, SetupDeps, StartDe
// });
ReactDOM.render(
<KibanaPageTemplate
pageHeader={{
pageTitle: 'User profile components',
}}
>
<AvatarDemo />
<SelectableDemo />
<PopoverDemo />
<KibanaPageTemplate>
<KibanaPageTemplate.Header pageTitle="User profile components" />
<KibanaPageTemplate.Section>
<AvatarDemo />
</KibanaPageTemplate.Section>
<KibanaPageTemplate.Section>
<ToolTipDemo />
</KibanaPageTemplate.Section>
<KibanaPageTemplate.Section>
<SelectableDemo />
</KibanaPageTemplate.Section>
<KibanaPageTemplate.Section>
<PopoverDemo />
</KibanaPageTemplate.Section>
</KibanaPageTemplate>,
element
);

62
examples/user_profile_examples/public/tooltip_demo.tsx Normal file
View file

@ -0,0 +1,62 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0 and the Server Side Public License, v 1; you may not use this file except
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/
import React, { FunctionComponent } from 'react';
import { UserAvatarTip, UserToolTip } from '@kbn/user-profile-components';
import type { UserProfile, UserProfileAvatarData } from '@kbn/user-profile-components';
import { EuiCommentList, EuiComment } from '@elastic/eui';
import { PanelWithCodeBlock } from './panel_with_code_block';
export const ToolTipDemo: FunctionComponent = () => {
const userProfile: UserProfile<{ avatar: UserProfileAvatarData }> = {
uid: 'u_9xDEQqUqoYCnFnPPLq5mIRHKL8gBTo_NiKgOnd5gGk0_0',
enabled: true,
user: {
username: 'wet_dingo',
email: 'wet_dingo@elastic.co',
full_name: 'Wet Dingo',
},
data: {
avatar: {
color: '#09e8ca',
initials: 'WD',
imageUrl: 'https://source.unsplash.com/64x64/?dingo',
},
},
};
return (
<PanelWithCodeBlock title="Tooltip" code={code}>
<EuiCommentList>
<EuiComment
timelineAvatar={
<UserAvatarTip user={userProfile.user} avatar={userProfile.data.avatar} />
}
username={
<UserToolTip
position="top"
delay="regular"
user={userProfile.user}
avatar={userProfile.data.avatar}
>
<strong>{userProfile.user.full_name}</strong>
</UserToolTip>
}
event="pushed incident X0Z235 on Jan 3, 2020"
/>
</EuiCommentList>
</PanelWithCodeBlock>
);
};
const code = `import { UserToolTip, UserAvatarTip } from '@kbn/user-profile-components';
<UserToolTip user={userProfile.user} avatar={userProfile.data.avatar}>
<!-- An inline element to trigger the tooltip -->
</UserToolTip>
<UserAvatarTip user={userProfile.user} avatar={userProfile.data.avatar} />`;