@grafana/scenes 5.41.3 → 5.42.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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 {
|