using label component

pull/13878/head
Peter Holmberg 7 years ago
parent 70f6100d53
commit 12336e1548
  1. 4
      public/app/core/components/Label/Label.tsx
  2. 16
      public/app/features/org/OrgPreferences.tsx
  3. 16
      public/app/features/org/__snapshots__/OrgPreferences.test.tsx.snap

@ -5,11 +5,12 @@ interface Props {
tooltip?: string; tooltip?: string;
for?: string; for?: string;
children: ReactNode; children: ReactNode;
width?: number;
} }
export const Label: SFC<Props> = props => { export const Label: SFC<Props> = props => {
return ( return (
<span className="gf-form-label width-10"> <span className={`gf-form-label width-${props.width ? props.width : '10'}`}>
<span>{props.children}</span> <span>{props.children}</span>
{props.tooltip && ( {props.tooltip && (
<Tooltip className="gf-form-help-icon--right-normal" placement="auto" content={props.tooltip}> <Tooltip className="gf-form-help-icon--right-normal" placement="auto" content={props.tooltip}>
@ -19,4 +20,3 @@ export const Label: SFC<Props> = props => {
</span> </span>
); );
}; };

@ -1,6 +1,6 @@
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import Tooltip from '../../core/components/Tooltip/Tooltip'; import { Label } from '../../core/components/Label/Label';
import SimplePicker from '../../core/components/Picker/SimplePicker'; import SimplePicker from '../../core/components/Picker/SimplePicker';
import { Dashboard, OrganizationPreferences } from 'app/types'; import { Dashboard, OrganizationPreferences } from 'app/types';
import { import {
@ -59,16 +59,12 @@ export class OrgPreferences extends PureComponent<Props> {
/> />
</div> </div>
<div className="gf-form"> <div className="gf-form">
<span className="gf-form-label width-11"> <Label
width={11}
tooltip="Not finding dashboard you want? Star it first, then it should appear in this select box."
>
Home Dashboard Home Dashboard
<Tooltip </Label>
className="gf-form-help-icon gf-form-help-icon--right-normal"
placement="right"
content="Not finding dashboard you want? Star it first, then it should appear in this select box."
>
<i className="fa fa-info-circle" />
</Tooltip>
</span>
<SimplePicker <SimplePicker
defaultValue={starredDashboards.find(dashboard => dashboard.id === preferences.homeDashboardId)} defaultValue={starredDashboards.find(dashboard => dashboard.id === preferences.homeDashboardId)}
getOptionValue={i => i.id} getOptionValue={i => i.id}

@ -44,20 +44,12 @@ exports[`Render should render component 1`] = `
<div <div
className="gf-form" className="gf-form"
> >
<span <Component
className="gf-form-label width-11" tooltip="Not finding dashboard you want? Star it first, then it should appear in this select box."
width={11}
> >
Home Dashboard Home Dashboard
<class_1 </Component>
className="gf-form-help-icon gf-form-help-icon--right-normal"
content="Not finding dashboard you want? Star it first, then it should appear in this select box."
placement="right"
>
<i
className="fa fa-info-circle"
/>
</class_1>
</span>
<SimplePicker <SimplePicker
defaultValue={ defaultValue={
Object { Object {

Loading…
Cancel
Save