github
/
portainer
mirror of https://github.com/portainer/portainer
1
0
Fork 0
Code Issues Releases Wiki Activity

fix(ui/switch): reduce label size [EE-3803] (#10019)

pull/10239/head
Chaim Lev-Ari 2023-09-03 10:26:38 +01:00 committed by GitHub
parent 8cc5e0796c
commit 4a6b7e2654
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 7 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
app/react/components/form-components/SwitchField/SwitchField.tsx
View File

@ -1,5 +1,6 @@
import clsx from 'clsx'; import clsx from 'clsx';
import { ComponentProps } from 'react'; import { ComponentProps } from 'react';
import uuid from 'uuid';
import { FeatureId } from '@/react/portainer/feature-flags/enums'; import { FeatureId } from '@/react/portainer/feature-flags/enums';
@ -30,7 +31,7 @@ export function SwitchField({
checked, checked,
label, label,
index, index,
name, name = uuid(),
labelClass, labelClass,
fieldClass, fieldClass,
dataCy, dataCy,
@ -43,15 +44,16 @@ export function SwitchField({
const toggleName = name ? `toggle_${name}` : ''; const toggleName = name ? `toggle_${name}` : '';
return ( return (
<label className={clsx(styles.root, fieldClass)}> <div className={clsx(styles.root, fieldClass)}>
<span <label
className={clsx('space-right control-label !p-0 text-left', labelClass)} className={clsx('space-right control-label !p-0 text-left', labelClass)}
htmlFor={toggleName}
> >
{label} {label}
{tooltip && ( {tooltip && (
<Tooltip message={tooltip} setHtmlMessage={setTooltipHtmlMessage} /> <Tooltip message={tooltip} setHtmlMessage={setTooltipHtmlMessage} />
)} )}
</span> </label>
<Switch <Switch
className={clsx('space-right', switchClass)} className={clsx('space-right', switchClass)}
name={toggleName} name={toggleName}
@ -63,6 +65,6 @@ export function SwitchField({
featureId={featureId} featureId={featureId}
dataCy={dataCy} dataCy={dataCy}
/> />
</label> </div>
); );
} }