Select: Adds labels to select styles (#27698)

packages/grafana-ui/src/components/Select/getSelectStyles.ts

@@ -11,6 +11,7 @@ export const getSelectStyles = stylesFactory((theme: GrafanaTheme) => {
 
   return {
     menu: css`
+      label: grafana-select-menu;
       background: ${bgColor};
       box-shadow: 0px 4px 4px ${menuShadowColor};
       position: relative;
@@ -18,6 +19,7 @@ export const getSelectStyles = stylesFactory((theme: GrafanaTheme) => {
       z-index: 1;
     `,
     option: css`
+      label: grafana-select-option;
       padding: 8px;
       display: flex;
       align-items: center;
@@ -31,22 +33,26 @@ export const getSelectStyles = stylesFactory((theme: GrafanaTheme) => {
       }
     `,
     optionImage: css`
+      label: grafana-select-option-image;
       width: 16px;
       margin-right: 10px;
     `,
     optionDescription: css`
+      label: grafana-select-option-description;
       font-weight: normal;
       font-size: ${theme.typography.size.sm};
       color: ${theme.colors.textWeak};
       white-space: normal;
     `,
     optionBody: css`
+      label: grafana-select-option-body;
       display: flex;
       font-weight: ${theme.typography.weight.semibold};
       flex-direction: column;
       flex-grow: 1;
     `,
     optionFocused: css`
+      label: grafana-select-option-focused;
       background: ${optionBgHover};
       border-image: linear-gradient(#f05a28 30%, #fbca0a 99%);
       border-image-slice: 1;
@@ -57,6 +63,7 @@ export const getSelectStyles = stylesFactory((theme: GrafanaTheme) => {
       border-left-width: 2px;
     `,
     singleValue: css`
+      label: grafana-select-single-value;
       color: ${theme.colors.formInputText};
       white-space: nowrap;
       overflow: hidden;
@@ -65,6 +72,7 @@ export const getSelectStyles = stylesFactory((theme: GrafanaTheme) => {
       max-width: 100%;
     `,
     valueContainer: css`
+      label: grafana-select-value-container;
       align-items: center;
       display: flex;
       position: relative;
@@ -74,14 +82,17 @@ export const getSelectStyles = stylesFactory((theme: GrafanaTheme) => {
       overflow: hidden;
     `,
     valueContainerMulti: css`
+      label: grafana-select-value-container-multi;
       flex-wrap: wrap;
     `,
     loadingMessage: css`
+      label: grafana-select-loading-message;
       padding: ${theme.spacing.sm};
       text-align: center;
       width: 100%;
     `,
     multiValueContainer: css`
+      label: grafana-select-multi-value-container;
       display: flex;
       align-items: center;
       line-height: 1;
@@ -93,6 +104,7 @@ export const getSelectStyles = stylesFactory((theme: GrafanaTheme) => {
       font-size: ${theme.typography.size.sm};
     `,
     multiValueRemove: css`
+      label: grafana-select-multi-value-remove;
       margin: 0 ${theme.spacing.xs};
       cursor: pointer;
     `,