@grafana/scenes 5.41.3 → 5.42.0
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.md +12 -0
- package/dist/esm/utils/ControlsLabel.js +1 -1
- package/dist/esm/utils/ControlsLabel.js.map +1 -1
- package/dist/esm/variables/components/VariableValueSelectors.js +7 -1
- package/dist/esm/variables/components/VariableValueSelectors.js.map +1 -1
- package/dist/index.js +8 -2
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,15 @@
|
|
|
1
|
+
# v5.42.0 (Thu Feb 06 2025)
|
|
2
|
+
|
|
3
|
+
#### 🚀 Enhancement
|
|
4
|
+
|
|
5
|
+
- Themes: Fixes variable labels to support border radius [#1050](https://github.com/grafana/scenes/pull/1050) ([@torkelo](https://github.com/torkelo))
|
|
6
|
+
|
|
7
|
+
#### Authors: 1
|
|
8
|
+
|
|
9
|
+
- Torkel Ödegaard ([@torkelo](https://github.com/torkelo))
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
1
13
|
# v5.41.3 (Thu Feb 06 2025)
|
|
2
14
|
|
|
3
15
|
#### 🐛 Bug Fix
|
|
@@ -78,7 +78,7 @@ const getStyles = (theme) => ({
|
|
|
78
78
|
fontSize: theme.typography.bodySmall.fontSize,
|
|
79
79
|
height: theme.spacing(theme.components.height.md),
|
|
80
80
|
lineHeight: theme.spacing(theme.components.height.md),
|
|
81
|
-
borderRadius: theme.shape.
|
|
81
|
+
borderRadius: `${theme.shape.radius.default} 0 0 ${theme.shape.radius.default}`,
|
|
82
82
|
border: `1px solid ${theme.components.input.borderColor}`,
|
|
83
83
|
position: "relative",
|
|
84
84
|
right: -1,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ControlsLabel.js","sources":["../../../src/utils/ControlsLabel.tsx"],"sourcesContent":["import React from 'react';\nimport { Icon, IconButton, Tooltip, useStyles2, useTheme2 } from '@grafana/ui';\nimport { selectors } from '@grafana/e2e-selectors';\nimport { GrafanaTheme2, IconName } from '@grafana/data';\nimport { css } from '@emotion/css';\nimport { LoadingIndicator } from './LoadingIndicator';\nimport { ControlsLayout } from '../core/types';\n\ninterface ControlsLabelProps {\n label: string;\n htmlFor?: string;\n description?: string;\n isLoading?: boolean;\n error?: string;\n icon?: IconName;\n layout?: ControlsLayout;\n onCancel?: () => void;\n onRemove?: () => void;\n}\n\nexport function ControlsLabel(props: ControlsLabelProps) {\n const styles = useStyles2(getStyles);\n const theme = useTheme2();\n const isVertical = props.layout === 'vertical';\n\n const loadingIndicator = Boolean(props.isLoading) ? (\n <div\n style={{ marginLeft: theme.spacing(1), marginTop: '-1px' }}\n aria-label={selectors.components.LoadingIndicator.icon}\n >\n <LoadingIndicator\n onCancel={(e) => {\n e.preventDefault();\n e.stopPropagation();\n props.onCancel?.();\n }}\n />\n </div>\n ) : null;\n\n let errorIndicator = null;\n if (props.error) {\n errorIndicator = (\n <Tooltip content={props.error} placement={'bottom'}>\n <Icon className={styles.errorIcon} name=\"exclamation-triangle\" />\n </Tooltip>\n );\n }\n\n let descriptionIndicator = null;\n if (props.description) {\n descriptionIndicator = (\n <Tooltip content={props.description} placement={isVertical ? 'top' : 'bottom'}>\n <Icon className={styles.normalIcon} name=\"info-circle\" />\n </Tooltip>\n );\n }\n\n const testId =\n typeof props.label === 'string' ? selectors.pages.Dashboard.SubMenu.submenuItemLabels(props.label) : '';\n let labelElement: JSX.Element;\n\n // The vertical layout has different css class and order of elements (label always first)\n\n if (isVertical) {\n labelElement = (\n <label className={styles.verticalLabel} data-testid={testId} htmlFor={props.htmlFor}>\n {props.label}\n {descriptionIndicator}\n {errorIndicator}\n {props.icon && <Icon name={props.icon} className={styles.normalIcon} />}\n {loadingIndicator}\n {props.onRemove && (\n <IconButton variant=\"secondary\" size=\"xs\" name=\"times\" onClick={props.onRemove} tooltip={'Remove'} />\n )}\n </label>\n );\n } else {\n labelElement = (\n <label className={styles.horizontalLabel} data-testid={testId} htmlFor={props.htmlFor}>\n {errorIndicator}\n {props.icon && <Icon name={props.icon} className={styles.normalIcon} />}\n {props.label}\n {descriptionIndicator}\n {loadingIndicator}\n </label>\n );\n }\n\n return labelElement;\n}\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n horizontalLabel: css({\n background: theme.isDark ? theme.colors.background.primary : theme.colors.background.secondary,\n display: `flex`,\n alignItems: 'center',\n padding: theme.spacing(0, 1),\n fontWeight: theme.typography.fontWeightMedium,\n fontSize: theme.typography.bodySmall.fontSize,\n height: theme.spacing(theme.components.height.md),\n lineHeight: theme.spacing(theme.components.height.md),\n borderRadius: theme.shape.
|
|
1
|
+
{"version":3,"file":"ControlsLabel.js","sources":["../../../src/utils/ControlsLabel.tsx"],"sourcesContent":["import React from 'react';\nimport { Icon, IconButton, Tooltip, useStyles2, useTheme2 } from '@grafana/ui';\nimport { selectors } from '@grafana/e2e-selectors';\nimport { GrafanaTheme2, IconName } from '@grafana/data';\nimport { css } from '@emotion/css';\nimport { LoadingIndicator } from './LoadingIndicator';\nimport { ControlsLayout } from '../core/types';\n\ninterface ControlsLabelProps {\n label: string;\n htmlFor?: string;\n description?: string;\n isLoading?: boolean;\n error?: string;\n icon?: IconName;\n layout?: ControlsLayout;\n onCancel?: () => void;\n onRemove?: () => void;\n}\n\nexport function ControlsLabel(props: ControlsLabelProps) {\n const styles = useStyles2(getStyles);\n const theme = useTheme2();\n const isVertical = props.layout === 'vertical';\n\n const loadingIndicator = Boolean(props.isLoading) ? (\n <div\n style={{ marginLeft: theme.spacing(1), marginTop: '-1px' }}\n aria-label={selectors.components.LoadingIndicator.icon}\n >\n <LoadingIndicator\n onCancel={(e) => {\n e.preventDefault();\n e.stopPropagation();\n props.onCancel?.();\n }}\n />\n </div>\n ) : null;\n\n let errorIndicator = null;\n if (props.error) {\n errorIndicator = (\n <Tooltip content={props.error} placement={'bottom'}>\n <Icon className={styles.errorIcon} name=\"exclamation-triangle\" />\n </Tooltip>\n );\n }\n\n let descriptionIndicator = null;\n if (props.description) {\n descriptionIndicator = (\n <Tooltip content={props.description} placement={isVertical ? 'top' : 'bottom'}>\n <Icon className={styles.normalIcon} name=\"info-circle\" />\n </Tooltip>\n );\n }\n\n const testId =\n typeof props.label === 'string' ? selectors.pages.Dashboard.SubMenu.submenuItemLabels(props.label) : '';\n let labelElement: JSX.Element;\n\n // The vertical layout has different css class and order of elements (label always first)\n\n if (isVertical) {\n labelElement = (\n <label className={styles.verticalLabel} data-testid={testId} htmlFor={props.htmlFor}>\n {props.label}\n {descriptionIndicator}\n {errorIndicator}\n {props.icon && <Icon name={props.icon} className={styles.normalIcon} />}\n {loadingIndicator}\n {props.onRemove && (\n <IconButton variant=\"secondary\" size=\"xs\" name=\"times\" onClick={props.onRemove} tooltip={'Remove'} />\n )}\n </label>\n );\n } else {\n labelElement = (\n <label className={styles.horizontalLabel} data-testid={testId} htmlFor={props.htmlFor}>\n {errorIndicator}\n {props.icon && <Icon name={props.icon} className={styles.normalIcon} />}\n {props.label}\n {descriptionIndicator}\n {loadingIndicator}\n </label>\n );\n }\n\n return labelElement;\n}\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n horizontalLabel: css({\n background: theme.isDark ? theme.colors.background.primary : theme.colors.background.secondary,\n display: `flex`,\n alignItems: 'center',\n padding: theme.spacing(0, 1),\n fontWeight: theme.typography.fontWeightMedium,\n fontSize: theme.typography.bodySmall.fontSize,\n height: theme.spacing(theme.components.height.md),\n lineHeight: theme.spacing(theme.components.height.md),\n borderRadius: `${theme.shape.radius.default} 0 0 ${theme.shape.radius.default}`,\n border: `1px solid ${theme.components.input.borderColor}`,\n position: 'relative',\n // To make the border line up with the input border\n right: -1,\n whiteSpace: 'nowrap',\n gap: theme.spacing(0.5),\n }),\n verticalLabel: css({\n display: `flex`,\n alignItems: 'center',\n fontWeight: theme.typography.fontWeightMedium,\n fontSize: theme.typography.bodySmall.fontSize,\n lineHeight: theme.typography.bodySmall.lineHeight,\n whiteSpace: 'nowrap',\n marginBottom: theme.spacing(0.5),\n gap: theme.spacing(1),\n }),\n errorIcon: css({\n color: theme.colors.error.text,\n }),\n normalIcon: css({\n color: theme.colors.text.secondary,\n }),\n});\n"],"names":[],"mappings":"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"}
|
|
@@ -65,7 +65,13 @@ function VariableLabel({ variable, layout, hideLabel }) {
|
|
|
65
65
|
description: (_a = state.description) != null ? _a : void 0
|
|
66
66
|
});
|
|
67
67
|
}
|
|
68
|
-
const containerStyle = css({
|
|
68
|
+
const containerStyle = css({
|
|
69
|
+
display: "flex",
|
|
70
|
+
"> :nth-child(2)": css({
|
|
71
|
+
borderTopLeftRadius: 0,
|
|
72
|
+
borderBottomLeftRadius: 0
|
|
73
|
+
})
|
|
74
|
+
});
|
|
69
75
|
const verticalContainer = css({ display: "flex", flexDirection: "column" });
|
|
70
76
|
|
|
71
77
|
export { VariableValueSelectWrapper, VariableValueSelectors };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VariableValueSelectors.js","sources":["../../../../src/variables/components/VariableValueSelectors.tsx"],"sourcesContent":["import React from 'react';\n\nimport { VariableHide } from '@grafana/data';\n\nimport { SceneObjectBase, useSceneObjectState } from '../../core/SceneObjectBase';\nimport { sceneGraph } from '../../core/sceneGraph';\nimport { ControlsLayout, SceneComponentProps, SceneObjectState } from '../../core/types';\nimport { SceneVariable, SceneVariableState } from '../types';\nimport { ControlsLabel } from '../../utils/ControlsLabel';\nimport { css } from '@emotion/css';\nimport { selectors } from '@grafana/e2e-selectors';\n\nexport interface VariableValueSelectorsState extends SceneObjectState {\n layout?: ControlsLayout;\n}\n\nexport class VariableValueSelectors extends SceneObjectBase<VariableValueSelectorsState> {\n public static Component = VariableValueSelectorsRenderer;\n}\n\nfunction VariableValueSelectorsRenderer({ model }: SceneComponentProps<VariableValueSelectors>) {\n const variables = sceneGraph.getVariables(model)!.useState();\n\n return (\n <>\n {variables.variables.map((variable) => (\n <VariableValueSelectWrapper key={variable.state.key} variable={variable} layout={model.state.layout} />\n ))}\n </>\n );\n}\n\ninterface VariableSelectProps {\n layout?: ControlsLayout;\n variable: SceneVariable;\n /** To override hide from VariableValueSelectByName */\n showAlways?: boolean;\n /** To provide an option to hide the label in the variable value selector */\n hideLabel?: boolean;\n}\n\nexport function VariableValueSelectWrapper({ variable, layout, showAlways, hideLabel }: VariableSelectProps) {\n const state = useSceneObjectState<SceneVariableState>(variable, { shouldActivateOrKeepAlive: true });\n\n if (state.hide === VariableHide.hideVariable && !showAlways) {\n return null;\n }\n\n if (layout === 'vertical') {\n return (\n <div className={verticalContainer} data-testid={selectors.pages.Dashboard.SubMenu.submenuItem}>\n <VariableLabel variable={variable} layout={layout} hideLabel={hideLabel} />\n <variable.Component model={variable} />\n </div>\n );\n }\n\n return (\n <div className={containerStyle} data-testid={selectors.pages.Dashboard.SubMenu.submenuItem}>\n <VariableLabel variable={variable} hideLabel={hideLabel} />\n <variable.Component model={variable} />\n </div>\n );\n}\n\nfunction VariableLabel({ variable, layout, hideLabel }: VariableSelectProps) {\n const { state } = variable;\n\n if (variable.state.hide === VariableHide.hideLabel || hideLabel) {\n return null;\n }\n\n const elementId = `var-${state.key}`;\n const labelOrName = state.label || state.name;\n\n return (\n <ControlsLabel\n htmlFor={elementId}\n isLoading={state.loading}\n onCancel={() => variable.onCancel?.()}\n label={labelOrName}\n error={state.error}\n layout={layout}\n description={state.description ?? undefined}\n />\n );\n}\n\nconst containerStyle = css({
|
|
1
|
+
{"version":3,"file":"VariableValueSelectors.js","sources":["../../../../src/variables/components/VariableValueSelectors.tsx"],"sourcesContent":["import React from 'react';\n\nimport { VariableHide } from '@grafana/data';\n\nimport { SceneObjectBase, useSceneObjectState } from '../../core/SceneObjectBase';\nimport { sceneGraph } from '../../core/sceneGraph';\nimport { ControlsLayout, SceneComponentProps, SceneObjectState } from '../../core/types';\nimport { SceneVariable, SceneVariableState } from '../types';\nimport { ControlsLabel } from '../../utils/ControlsLabel';\nimport { css } from '@emotion/css';\nimport { selectors } from '@grafana/e2e-selectors';\n\nexport interface VariableValueSelectorsState extends SceneObjectState {\n layout?: ControlsLayout;\n}\n\nexport class VariableValueSelectors extends SceneObjectBase<VariableValueSelectorsState> {\n public static Component = VariableValueSelectorsRenderer;\n}\n\nfunction VariableValueSelectorsRenderer({ model }: SceneComponentProps<VariableValueSelectors>) {\n const variables = sceneGraph.getVariables(model)!.useState();\n\n return (\n <>\n {variables.variables.map((variable) => (\n <VariableValueSelectWrapper key={variable.state.key} variable={variable} layout={model.state.layout} />\n ))}\n </>\n );\n}\n\ninterface VariableSelectProps {\n layout?: ControlsLayout;\n variable: SceneVariable;\n /** To override hide from VariableValueSelectByName */\n showAlways?: boolean;\n /** To provide an option to hide the label in the variable value selector */\n hideLabel?: boolean;\n}\n\nexport function VariableValueSelectWrapper({ variable, layout, showAlways, hideLabel }: VariableSelectProps) {\n const state = useSceneObjectState<SceneVariableState>(variable, { shouldActivateOrKeepAlive: true });\n\n if (state.hide === VariableHide.hideVariable && !showAlways) {\n return null;\n }\n\n if (layout === 'vertical') {\n return (\n <div className={verticalContainer} data-testid={selectors.pages.Dashboard.SubMenu.submenuItem}>\n <VariableLabel variable={variable} layout={layout} hideLabel={hideLabel} />\n <variable.Component model={variable} />\n </div>\n );\n }\n\n return (\n <div className={containerStyle} data-testid={selectors.pages.Dashboard.SubMenu.submenuItem}>\n <VariableLabel variable={variable} hideLabel={hideLabel} />\n <variable.Component model={variable} />\n </div>\n );\n}\n\nfunction VariableLabel({ variable, layout, hideLabel }: VariableSelectProps) {\n const { state } = variable;\n\n if (variable.state.hide === VariableHide.hideLabel || hideLabel) {\n return null;\n }\n\n const elementId = `var-${state.key}`;\n const labelOrName = state.label || state.name;\n\n return (\n <ControlsLabel\n htmlFor={elementId}\n isLoading={state.loading}\n onCancel={() => variable.onCancel?.()}\n label={labelOrName}\n error={state.error}\n layout={layout}\n description={state.description ?? undefined}\n />\n );\n}\n\nconst containerStyle = css({\n display: 'flex',\n // No border for second element (inputs) as label and input border is shared\n '> :nth-child(2)': css({\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0,\n }),\n});\n\nconst verticalContainer = css({ display: 'flex', flexDirection: 'column' });\n"],"names":["_a"],"mappings":"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"}
|
package/dist/index.js
CHANGED
|
@@ -3537,7 +3537,7 @@ const getStyles$g = (theme) => ({
|
|
|
3537
3537
|
fontSize: theme.typography.bodySmall.fontSize,
|
|
3538
3538
|
height: theme.spacing(theme.components.height.md),
|
|
3539
3539
|
lineHeight: theme.spacing(theme.components.height.md),
|
|
3540
|
-
borderRadius: theme.shape.
|
|
3540
|
+
borderRadius: `${theme.shape.radius.default} 0 0 ${theme.shape.radius.default}`,
|
|
3541
3541
|
border: `1px solid ${theme.components.input.borderColor}`,
|
|
3542
3542
|
position: "relative",
|
|
3543
3543
|
right: -1,
|
|
@@ -9401,7 +9401,13 @@ function VariableLabel({ variable, layout, hideLabel }) {
|
|
|
9401
9401
|
description: (_a = state.description) != null ? _a : void 0
|
|
9402
9402
|
});
|
|
9403
9403
|
}
|
|
9404
|
-
const containerStyle = css.css({
|
|
9404
|
+
const containerStyle = css.css({
|
|
9405
|
+
display: "flex",
|
|
9406
|
+
"> :nth-child(2)": css.css({
|
|
9407
|
+
borderTopLeftRadius: 0,
|
|
9408
|
+
borderBottomLeftRadius: 0
|
|
9409
|
+
})
|
|
9410
|
+
});
|
|
9405
9411
|
const verticalContainer = css.css({ display: "flex", flexDirection: "column" });
|
|
9406
9412
|
|
|
9407
9413
|
class VariableValueControl extends SceneObjectBase {
|