diff --git a/packages/grafana-ui/src/components/Select/getSelectStyles.ts b/packages/grafana-ui/src/components/Select/getSelectStyles.ts index f6cd0330fc6..b74b412eefe 100644 --- a/packages/grafana-ui/src/components/Select/getSelectStyles.ts +++ b/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; `,