Docker/portainer
Docker/portainer
1
0
Fork 0
mirror of https://github.com/portainer/portainer.git synced 2025-07-24 07:49:41 +02:00
Code Issues Releases Activity

fix(ui/box-selectors): make multi use square [EE-3856] (#8470)

Browse source
This commit is contained in:
Chaim Lev-Ari 2023-02-27 12:47:29 +02:00 • committed by GitHub
parent e0481f69b1
commit 69a91ff90a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 37 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

45
app/react/components/BoxSelector/BoxSelectorItem.tsx
View file

@ -1,5 +1,6 @@
import clsx from 'clsx';
import { Icon as ReactFeatherComponentType, Check } from 'lucide-react';
import { Fragment } from 'react';
import { isLimitedToBE } from '@/react/portainer/feature-flags/feature-flags.service';
import { Icon } from '@/react/components/Icon';
@ -38,6 +39,9 @@ export function BoxSelectorItem<T extends Value>({
const limitedToBE = isLimitedToBE(option.feature);
const beIndicatorTooltipId = `box-selector-item-${radioName}-${option.id}-limited`;
const ContentBox = slim ? 'div' : Fragment;
return (
<BoxOption
className={clsx(styles.boxSelectorItem, {
@ -53,33 +57,22 @@ export function BoxSelectorItem<T extends Value>({
type={type}
checkIcon={checkIcon}
>
<>
{limitedToBE && (
<LimitedToBeIndicator
tooltipId={beIndicatorTooltipId}
featureId={option.feature}
/>
)}
<div
className={clsx('flex gap-2', {
'opacity-30': limitedToBE,
'h-full flex-col justify-between': !slim,
'slim items-center': slim,
})}
>
<div
className={clsx(styles.imageContainer, 'flex items-center', {
'flex-1': !slim,
})}
>
{renderIcon()}
</div>
<div>
<div className={styles.header}>{option.label}</div>
<p>{option.description}</p>
</div>
{limitedToBE && <LimitedToBeIndicator tooltipId={beIndicatorTooltipId} />}
<div
className={clsx('flex gap-2', {
'opacity-30': limitedToBE,
'h-full flex-col justify-start': !slim,
'slim items-center': slim,
})}
>
<div className={clsx(styles.imageContainer, 'flex items-start')}>
{renderIcon()}
</div>
</>
<ContentBox>
<div className={styles.header}>{option.label}</div>
<p className="mb-0">{option.description}</p>
</ContentBox>
</div>
</BoxOption>
);