Grafana-UI: BarGauge docs (#27188)

* Grafana-UI: Add mdx file

* Grafana-UI: remove _BarGauge.scss

* Grafana-UI: Update snapshot

* Grafana-UI: Fix tests

* Grafana-UI: Use selector

e2e/suite1/specs/bar-gauge.spec.ts

@@ -1,8 +1,9 @@
 import { e2e } from '@grafana/e2e';
+import { selectors } from '@grafana/e2e-selectors';
 
 e2e.scenario({
   describeName: 'Bar Gauge Panel',
-  itName: 'Bar Guage rendering e2e tests',
+  itName: 'Bar Gauge rendering e2e tests',
   addScenarioDataSource: false,
   addScenarioDashBoard: false,
   skipScenario: false,
@@ -11,7 +12,7 @@ e2e.scenario({
     e2e.flows.openDashboard({ uid: 'O6f11TZWk' });
 
     e2e()
-      .get('#panel-6 .bar-gauge__value')
+      .get(`#panel-6 [aria-label^="${selectors.components.Panels.Visualization.BarGauge.value}"]`)
       .should('have.css', 'color', 'rgb(242, 73, 92)')
       .contains('100');
   },