Merge pull request #626 from dbeaver/fix/tooltips

fix(core-blocks): CB-1542 add extra tooltip for labels
This commit is contained in:
Alexey
2022-01-20 23:19:49 +03:00
committed by GitHub
3 changed files with 14 additions and 6 deletions
@@ -62,6 +62,7 @@ const INPUT_FIELD_STYLES = composes(
type BaseProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'name' | 'value'> & ILayoutSizeProps & {
description?: string;
labelTooltip?: string;
mod?: 'surface';
ref?: React.Ref<HTMLInputElement>;
style?: ComponentStyle;
@@ -105,6 +106,7 @@ export const InputField: InputFieldType = observer(function InputField({
children,
className,
description,
labelTooltip,
mod,
fill,
small,
@@ -161,7 +163,7 @@ export const InputField: InputFieldType = observer(function InputField({
return styled(styles)(
<field className={className} {...use({ small, medium, large, tiny })}>
<field-label title={rest.title}>{children}{required && ' *'}</field-label>
<field-label title={labelTooltip || rest.title}>{children}{required && ' *'}</field-label>
<input-container>
<input
ref={ref}
@@ -44,6 +44,7 @@ const styles = css`
`;
type BaseProps = Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange' | 'style'> & ILayoutSizeProps & {
labelTooltip?: string;
mod?: 'surface';
style?: ComponentStyle;
embedded?: boolean;
@@ -81,6 +82,7 @@ export const Textarea: TextareaType = observer(function Textarea({
small,
medium,
large,
labelTooltip,
mod,
embedded,
onChange = () => { },
@@ -104,7 +106,7 @@ export const Textarea: TextareaType = observer(function Textarea({
return styled(useStyles(baseFormControlStyles, styles, style))(
<field className={className} {...use({ tiny, small, medium, large, embedded })}>
<field-label as='label' title={rest.title}>{children}{required && ' *'}</field-label>
<field-label as='label' title={labelTooltip || rest.title}>{children}{required && ' *'}</field-label>
<textarea
{...rest}
value={value ?? ''}
@@ -179,7 +179,8 @@ export const RenderField = observer<RenderFieldProps>(function RenderField({
if (state !== undefined) {
return (
<Textarea
title={property.description}
title={state[property.id!]}
labelTooltip={property.description || property.displayName}
name={property.id!}
state={state}
disabled={disabled}
@@ -194,7 +195,8 @@ export const RenderField = observer<RenderFieldProps>(function RenderField({
return (
<Textarea
title={property.description}
title={value}
labelTooltip={property.description || property.displayName}
name={property.id!}
value={value}
disabled={disabled}
@@ -211,7 +213,8 @@ export const RenderField = observer<RenderFieldProps>(function RenderField({
return (
<InputField
type={password ? 'password' : 'text'}
title={property.description}
title={state[property.id!]}
labelTooltip={property.description || property.displayName}
name={property.id!}
state={state}
defaultValue={defaultValue}
@@ -231,7 +234,8 @@ export const RenderField = observer<RenderFieldProps>(function RenderField({
return (
<InputField
type={password ? 'password' : 'text'}
title={property.description}
title={value}
labelTooltip={property.description || property.displayName}
name={property.id!}
value={value}
defaultValue={defaultValue}