mirror of
https://github.com/grafana/grafana.git
synced 2025-02-20 11:48:34 -06:00
9494c2cd4f
* feat(catalog): introduce additive filters for plugin type, installed status and search * feat(catalog): prefer FilterInput over custom styled search field * feat(catalog): update Browse page to use new search, filter features * refactor(catalog): keep filters with usePluginsByFilter hook * test(catalog): update tests to reflect new filtering and searching * refactor(catalog): rearrange filterByType radio buttons Co-authored-by: Ryan McKinley <ryantxu@gmail.com> * feat(catalog): ntroduce css for responsive filter layout * refactor(catalog): introduce pluginfilter type and give filter methods better names * fix(catalog): default q param to empty string so FiterInput doesn't show clear button on load Co-authored-by: Ryan McKinley <ryantxu@gmail.com>
34 lines
833 B
TypeScript
34 lines
833 B
TypeScript
import React from 'react';
|
|
import { css, cx } from '@emotion/css';
|
|
|
|
import { useTheme2 } from '@grafana/ui';
|
|
import { GrafanaTheme2 } from '@grafana/data';
|
|
|
|
interface HorizontalGroupProps {
|
|
children: React.ReactNode;
|
|
wrap?: boolean;
|
|
className?: string;
|
|
}
|
|
|
|
export const HorizontalGroup = ({ children, wrap, className }: HorizontalGroupProps) => {
|
|
const theme = useTheme2();
|
|
const styles = getStyles(theme, wrap);
|
|
|
|
return <div className={cx(styles.container, className)}>{children}</div>;
|
|
};
|
|
|
|
const getStyles = (theme: GrafanaTheme2, wrap?: boolean) => ({
|
|
container: css`
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: ${wrap ? 'wrap' : 'no-wrap'};
|
|
& > * {
|
|
margin-bottom: ${theme.spacing()};
|
|
margin-right: ${theme.spacing()};
|
|
}
|
|
& > *:last-child {
|
|
margin-right: 0;
|
|
}
|
|
`,
|
|
});
|