**What is this feature?**
Replaces deprecated UI element and do not grow pare…nt container in the Add field from calculation transformation so the elements wrap.
Also fixes it in the Labels to fields transformation by adding the shrink property.
Before:
<img width="1023" alt="Screenshot 2025-04-16 at 7 36 33 PM" src="https://github.com/user-attachments/assets/ff9468c7-6006-47db-9a84-f9210bc294c1" />
After:
<img width="1019" alt="Screenshot 2025-04-16 at 7 35 23 PM" src="https://github.com/user-attachments/assets/e8f4c3fa-f169-495d-9b13-f65f39a5db45" />
**Which issue(s) does this PR fix?**:
Fixes #80130
**Special notes for your reviewer:**
<details><summary>Example dashboard</summary>
```json
{
"annotations": {
"list": [
{
"builtIn": 1,
"datasource": {
"type": "grafana",
"uid": "-- Grafana --"
},
"enable": true,
"hide": true,
"iconColor": "rgba(0, 211, 255, 1)",
"name": "Annotations & Alerts",
"type": "dashboard"
}
]
},
"editable": true,
"fiscalYearStartMonth": 0,
"graphTooltip": 0,
"id": 352,
"links": [],
"panels": [
{
"datasource": {
"type": "grafana-testdata-datasource",
"uid": "PD8C576611E62080A"
},
"fieldConfig": {
"defaults": {
"color": {
"mode": "palette-classic"
},
"custom": {
"axisBorderShow": false,
"axisCenteredZero": false,
"axisColorMode": "text",
"axisLabel": "",
"axisPlacement": "auto",
"barAlignment": 0,
"barWidthFactor": 0.6,
"drawStyle": "line",
"fillOpacity": 0,
"gradientMode": "none",
"hideFrom": {
"legend": false,
"tooltip": false,
"viz": false
},
"insertNulls": false,
"lineInterpolation": "linear",
"lineWidth": 1,
"pointSize": 5,
"scaleDistribution": {
"type": "linear"
},
"showPoints": "auto",
"spanNulls": false,
"stacking": {
"group": "A",
"mode": "none"
},
"thresholdsStyle": {
"mode": "off"
}
},
"mappings": [],
"thresholds": {
"mode": "absolute",
"steps": [
{
"color": "green"
},
{
"color": "red",
"value": 80
}
]
}
},
"overrides": []
},
"gridPos": {
"h": 8,
"w": 12,
"x": 0,
"y": 0
},
"id": 1,
"options": {
"legend": {
"calcs": [],
"displayMode": "list",
"placement": "bottom",
"showLegend": true
},
"tooltip": {
"hideZeros": false,
"mode": "single",
"sort": "none"
}
},
"pluginVersion": "12.0.0-pre",
"targets": [
{
"datasource": {
"type": "grafana-testdata-datasource",
"uid": "PD8C576611E62080A"
},
"refId": "A",
"scenarioId": "random_walk",
"seriesCount": 20
}
],
"title": "Add field from calc example",
"transformations": [
{
"id": "joinByField",
"options": {}
},
{
"id": "calculateField",
"options": {
"binary": {
"left": {
"fixed": ""
},
"right": {
"fixed": ""
}
},
"mode": "reduceRow",
"reduce": {
"reducer": "sum"
}
}
}
],
"type": "timeseries"
},
{
"datasource": {
"type": "grafana-mock-datasource",
"uid": "mock-correlations"
},
"fieldConfig": {
"defaults": {
"color": {
"mode": "palette-classic"
},
"custom": {
"axisBorderShow": false,
"axisCenteredZero": false,
"axisColorMode": "text",
"axisLabel": "",
"axisPlacement": "auto",
"barAlignment": 0,
"barWidthFactor": 0.6,
"drawStyle": "line",
"fillOpacity": 0,
"gradientMode": "none",
"hideFrom": {
"legend": false,
"tooltip": false,
"viz": false
},
"insertNulls": false,
"lineInterpolation": "linear",
"lineWidth": 1,
"pointSize": 5,
"scaleDistribution": {
"type": "linear"
},
"showPoints": "auto",
"spanNulls": false,
"stacking": {
"group": "A",
"mode": "none"
},
"thresholdsStyle": {
"mode": "off"
}
},
"mappings": [],
"thresholds": {
"mode": "absolute",
"steps": [
{
"color": "green"
},
{
"color": "red",
"value": 80
}
]
}
},
"overrides": []
},
"gridPos": {
"h": 8,
"w": 12,
"x": 0,
"y": 8
},
"id": 2,
"options": {
"legend": {
"calcs": [],
"displayMode": "list",
"placement": "bottom",
"showLegend": true
},
"tooltip": {
"hideZeros": false,
"mode": "single",
"sort": "none"
}
},
"pluginVersion": "12.0.0-pre",
"targets": [
{
"datasource": {
"type": "grafana-mock-datasource",
"uid": "mock-correlations"
},
"frames": [
{
"count": 60,
"disabled": false,
"fields": [
{
"disabled": false,
"name": "timestamp",
"type": "timestamp-auto"
},
{
"disabled": false,
"labels": "foo=bar,foo2=bar,foo3=bar,foo4=bar5,foo=bar,foo6=bar,foo7=bar,foo8=bar,foo9=bar,foo10=bar,foo11=bar,foo12=bar13,foo=bar,foo14=bar,foo15=bar,foo16=bar",
"name": "value",
"type": "nullable-float64",
"value": "1,2,3,2"
}
],
"frameInputType": "timeseries",
"name": "New Frame",
"source": "count"
}
],
"queryType": "frames_builder",
"refId": "A"
}
],
"title": "Labels to fields example",
"transformations": [
{
"id": "labelsToFields",
"options": {}
}
],
"type": "timeseries"
}
],
"preload": false,
"schemaVersion": 41,
"tags": [],
"templating": {
"list": []
},
"time": {
"from": "now-6h",
"to": "now"
},
"timepicker": {},
"timezone": "browser",
"title": "Calc field reduce demo",
"uid": "8c4de8b6-c558-458c-8054-76a261299609",
"version": 5
}
```
</details>
Please check that:
- [ ] It works as expected from a user's perspective.
- [ ] If this is a pre-GA feature, it is behind a feature toggle.
- [ ] The docs are updated, and if this is a [notable improvement](https://grafana.com/docs/writers-toolkit/contribute/release-notes/#how-to-determine-if-content-belongs-in-whats-new), it's added to our [What's New](https://grafana.com/docs/writers-toolkit/contribute/release-notes/) doc.
