@grafana/scenes 8.13.5 → 8.13.6
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
CHANGED
|
@@ -1,3 +1,15 @@
|
|
|
1
|
+
# v8.13.6 (Fri Jul 31 2026)
|
|
2
|
+
|
|
3
|
+
#### 🐛 Bug Fix
|
|
4
|
+
|
|
5
|
+
- AdHocFiltersCombobox: Show more pill text before truncating [#1592](https://github.com/grafana/scenes/pull/1592) ([@samjewell](https://github.com/samjewell))
|
|
6
|
+
|
|
7
|
+
#### Authors: 1
|
|
8
|
+
|
|
9
|
+
- Sam Jewell ([@samjewell](https://github.com/samjewell))
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
1
13
|
# v8.13.5 (Wed Jul 29 2026)
|
|
2
14
|
|
|
3
15
|
#### 🐛 Bug Fix
|
|
@@ -4,7 +4,7 @@ import React, { forwardRef } from 'react';
|
|
|
4
4
|
import { t } from '@grafana/i18n';
|
|
5
5
|
import { getNonApplicablePillStyles } from '../../utils.js';
|
|
6
6
|
|
|
7
|
-
const LABEL_MAX_VISIBLE_LENGTH =
|
|
7
|
+
const LABEL_MAX_VISIBLE_LENGTH = 28;
|
|
8
8
|
const BasePill = forwardRef(function BasePill2({
|
|
9
9
|
label,
|
|
10
10
|
onRemove,
|
|
@@ -102,12 +102,15 @@ const getBasePillStyles = (theme) => ({
|
|
|
102
102
|
}
|
|
103
103
|
}),
|
|
104
104
|
pillText: css({
|
|
105
|
-
maxWidth: "
|
|
105
|
+
maxWidth: "280px",
|
|
106
106
|
width: "100%",
|
|
107
107
|
textOverflow: "ellipsis",
|
|
108
108
|
overflow: "hidden"
|
|
109
109
|
}),
|
|
110
110
|
tooltipText: css({
|
|
111
|
+
// Match pillText's maxWidth: a wider tooltip gets pushed off-centre by the
|
|
112
|
+
// viewport-edge shift logic when the pill is near the edge of the screen
|
|
113
|
+
maxWidth: "280px",
|
|
111
114
|
textAlign: "center"
|
|
112
115
|
}),
|
|
113
116
|
disabledPillIcon: css({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BasePill.js","sources":["../../../../../src/variables/adhoc/AdHocFiltersCombobox/BasePill.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { useStyles2, IconButton, Tooltip } from '@grafana/ui';\nimport React, { forwardRef, ReactNode } from 'react';\nimport { t } from '@grafana/i18n';\nimport { getNonApplicablePillStyles } from '../../utils';\n\nconst LABEL_MAX_VISIBLE_LENGTH =
|
|
1
|
+
{"version":3,"file":"BasePill.js","sources":["../../../../../src/variables/adhoc/AdHocFiltersCombobox/BasePill.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { useStyles2, IconButton, Tooltip } from '@grafana/ui';\nimport React, { forwardRef, ReactNode } from 'react';\nimport { t } from '@grafana/i18n';\nimport { getNonApplicablePillStyles } from '../../utils';\n\n// Tooltip threshold, roughly matching how many characters fit in pillText's maxWidth\nconst LABEL_MAX_VISIBLE_LENGTH = 28;\n\nexport interface BasePillProps {\n label: string;\n removable?: boolean;\n onRemove?: () => void;\n onClick?: (e: React.MouseEvent) => void;\n onKeyDown?: (e: React.KeyboardEvent) => void;\n readOnly?: boolean;\n disabled?: boolean;\n isFilterReadOnly?: boolean;\n strikethrough?: boolean;\n ariaLabel?: string;\n removeAriaLabel?: string;\n additionalIcons?: ReactNode;\n}\n\nexport const BasePill = forwardRef<HTMLDivElement, BasePillProps>(function BasePill(\n {\n label,\n onRemove,\n removable = !!onRemove,\n onClick,\n onKeyDown,\n readOnly,\n disabled,\n isFilterReadOnly,\n strikethrough,\n ariaLabel,\n removeAriaLabel,\n additionalIcons,\n },\n ref\n) {\n const styles = useStyles2(getStyles);\n\n const pillText = <span className={cx(styles.pillText, strikethrough && styles.strikethrough)}>{label}</span>;\n\n return (\n <div\n className={cx(\n styles.combinedFilterPill,\n readOnly && styles.readOnlyCombinedFilter,\n disabled && styles.disabledPill,\n isFilterReadOnly && styles.filterReadOnly\n )}\n onClick={onClick}\n onKeyDown={onKeyDown}\n role={readOnly ? undefined : 'button'}\n aria-label={ariaLabel}\n tabIndex={0}\n ref={ref}\n >\n {label.length < LABEL_MAX_VISIBLE_LENGTH ? (\n pillText\n ) : (\n <Tooltip content={<div className={styles.tooltipText}>{label}</div>} placement=\"top\">\n {pillText}\n </Tooltip>\n )}\n\n {removable && onRemove && (\n <IconButton\n onClick={(e) => {\n e.stopPropagation();\n onRemove();\n }}\n onKeyDownCapture={(e) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n e.stopPropagation();\n onRemove();\n }\n }}\n name=\"times\"\n size=\"md\"\n className={cx(styles.pillIcon, disabled && styles.disabledPillIcon)}\n tooltip={removeAriaLabel ?? t('grafana-scenes.components.base-pill.remove', 'Remove {{label}}', { label })}\n />\n )}\n\n {additionalIcons}\n </div>\n );\n});\n\nexport const getBasePillStyles = (theme: GrafanaTheme2) => ({\n combinedFilterPill: css({\n display: 'flex',\n alignItems: 'center',\n background: theme.colors.action.selected,\n borderRadius: theme.shape.radius.default,\n border: `1px solid ${theme.colors.border.weak}`,\n padding: theme.spacing(0.125, 0, 0.125, 1),\n color: theme.colors.text.primary,\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n minHeight: theme.spacing(2.75),\n ...theme.typography.bodySmall,\n fontWeight: theme.typography.fontWeightBold,\n cursor: 'pointer',\n\n '&:hover': {\n background: theme.colors.action.hover,\n },\n }),\n readOnlyCombinedFilter: css({\n paddingRight: theme.spacing(1),\n cursor: 'text',\n '&:hover': {\n background: theme.colors.action.selected,\n },\n }),\n filterReadOnly: css({\n background: theme.colors.background.canvas,\n cursor: 'text',\n '&:hover': {\n background: theme.colors.background.canvas,\n },\n }),\n pillIcon: css({\n marginInline: theme.spacing(0.5),\n cursor: 'pointer',\n '&:hover': {\n color: theme.colors.text.primary,\n },\n }),\n pillText: css({\n maxWidth: '280px',\n width: '100%',\n textOverflow: 'ellipsis',\n overflow: 'hidden',\n }),\n tooltipText: css({\n // Match pillText's maxWidth: a wider tooltip gets pushed off-centre by the\n // viewport-edge shift logic when the pill is near the edge of the screen\n maxWidth: '280px',\n textAlign: 'center',\n }),\n disabledPillIcon: css({\n marginInline: theme.spacing(0.5),\n cursor: 'pointer',\n color: theme.colors.text.disabled,\n '&:hover': {\n color: theme.colors.text.disabled,\n },\n }),\n ...getNonApplicablePillStyles(theme),\n});\n\nconst getStyles = getBasePillStyles;\n"],"names":["BasePill","getStyles"],"mappings":"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"}
|
package/dist/index.js
CHANGED
|
@@ -7797,7 +7797,7 @@ const getStyles$g = (theme) => ({
|
|
|
7797
7797
|
})
|
|
7798
7798
|
});
|
|
7799
7799
|
|
|
7800
|
-
const LABEL_MAX_VISIBLE_LENGTH =
|
|
7800
|
+
const LABEL_MAX_VISIBLE_LENGTH = 28;
|
|
7801
7801
|
const BasePill = React.forwardRef(function BasePill2({
|
|
7802
7802
|
label,
|
|
7803
7803
|
onRemove,
|
|
@@ -7895,12 +7895,15 @@ const getBasePillStyles = (theme) => ({
|
|
|
7895
7895
|
}
|
|
7896
7896
|
}),
|
|
7897
7897
|
pillText: css.css({
|
|
7898
|
-
maxWidth: "
|
|
7898
|
+
maxWidth: "280px",
|
|
7899
7899
|
width: "100%",
|
|
7900
7900
|
textOverflow: "ellipsis",
|
|
7901
7901
|
overflow: "hidden"
|
|
7902
7902
|
}),
|
|
7903
7903
|
tooltipText: css.css({
|
|
7904
|
+
// Match pillText's maxWidth: a wider tooltip gets pushed off-centre by the
|
|
7905
|
+
// viewport-edge shift logic when the pill is near the edge of the screen
|
|
7906
|
+
maxWidth: "280px",
|
|
7904
7907
|
textAlign: "center"
|
|
7905
7908
|
}),
|
|
7906
7909
|
disabledPillIcon: css.css({
|