IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Search: Move checkbox outside of item card (#65540)

Browse Source 
* Move checkbox outside of SeachItem

* Add li element
This commit is contained in:
Tobias Skarhed 2023-03-31 08:49:03 +02:00 committed by GitHub
parent 92965578b3
commit 7b4a222fbf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 37 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/app/features/search/components/SearchCheckbox.tsx
View File

@ -13,9 +13,7 @@ interface Props {
export const SearchCheckbox = memo( export const SearchCheckbox = memo(
({ onClick, className, checked = false, editable = false, 'aria-label': ariaLabel }: Props) => { ({ onClick, className, checked = false, editable = false, 'aria-label': ariaLabel }: Props) => {
return editable ? ( return editable ? (
<div onClick={onClick} className={className}> <Checkbox onClick={onClick} className={className} value={checked} aria-label={ariaLabel} />
<Checkbox value={checked} aria-label={ariaLabel} />
</div>
) : null; ) : null;
} }
); );

70
public/app/features/search/components/SearchItem.tsx
View File

@ -48,7 +48,6 @@ export const SearchItem = ({ item, isSelected, editable, onToggleChecked, onTagS
const handleCheckboxClick = useCallback( const handleCheckboxClick = useCallback(
(ev: React.MouseEvent) => { (ev: React.MouseEvent) => {
ev.stopPropagation(); ev.stopPropagation();
ev.preventDefault();
if (onToggleChecked) { if (onToggleChecked) {
onToggleChecked(item); onToggleChecked(item);
@ -68,38 +67,38 @@ export const SearchItem = ({ item, isSelected, editable, onToggleChecked, onTagS
); );
return ( return (
<Card <li className={styles.cardContainer}>
data-testid={selectors.dashboardItem(item.title)} <SearchCheckbox
href={item.url} aria-label="Select dashboard"
style={{ minHeight: SEARCH_ITEM_HEIGHT }} editable={editable}
className={styles.container} checked={isSelected}
onClick={onClickItem} onClick={handleCheckboxClick}
> />
<Card.Heading>{item.title}</Card.Heading>
<Card.Figure align={'center'} className={styles.checkbox}> <Card
<SearchCheckbox className={styles.card}
aria-label="Select dashboard" data-testid={selectors.dashboardItem(item.title)}
editable={editable} href={item.url}
checked={isSelected} style={{ minHeight: SEARCH_ITEM_HEIGHT }}
onClick={handleCheckboxClick} onClick={onClickItem}
/> >
</Card.Figure> <Card.Heading>{item.title}</Card.Heading>
<Card.Meta separator={''}> <Card.Meta separator={''}>
<span className={styles.metaContainer}>{description}</span> <span className={styles.metaContainer}>{description}</span>
{item.sortMetaName && ( {item.sortMetaName && (
<span className={styles.metaContainer}> <span className={styles.metaContainer}>
<Icon name={getIconFromMeta(item.sortMetaName)} /> <Icon name={getIconFromMeta(item.sortMetaName)} />
{item.sortMeta} {item.sortMetaName} {item.sortMeta} {item.sortMetaName}
</span> </span>
)} )}
</Card.Meta> </Card.Meta>
<Card.Tags> <Card.Tags>
<TagList tags={item.tags ?? []} onClick={tagSelected} getAriaLabel={(tag) => `Filter by tag "${tag}"`} /> <TagList tags={item.tags ?? []} onClick={tagSelected} getAriaLabel={(tag) => `Filter by tag "${tag}"`} />
</Card.Tags> </Card.Tags>
</Card> </Card>
</li>
); );
}; };
@ -116,9 +115,15 @@ function kindName(kind: DashboardViewItem['kind']) {
const getStyles = (theme: GrafanaTheme2) => { const getStyles = (theme: GrafanaTheme2) => {
return { return {
container: css` cardContainer: css`
display: flex;
list-style: none;
align-items: center;
margin-bottom: ${theme.spacing(0.75)}; margin-bottom: ${theme.spacing(0.75)};
`,
card: css`
padding: ${theme.spacing(1)} ${theme.spacing(2)}; padding: ${theme.spacing(1)} ${theme.spacing(2)};
margin-bottom: 0;
`, `,
metaContainer: css` metaContainer: css`
display: flex; display: flex;
@ -129,8 +134,5 @@ const getStyles = (theme: GrafanaTheme2) => {
margin-right: ${theme.spacing(0.5)}; margin-right: ${theme.spacing(0.5)};
} }
`, `,
checkbox: css`
margin-right: 0;
`,
}; };
}; };