diff options
| author | Viktor Vorona <viktor.vorona@sonarsource.com> | 2024-09-20 15:35:59 +0200 |
|---|---|---|
| committer | sonartech <sonartech@sonarsource.com> | 2024-09-20 20:02:37 +0000 |
| commit | b99c9cc72ff8889936251795275f6326c597e79a (patch) | |
| tree | 5e3610239eeaf4a7469914281e6976a32aac2e4e /server | |
| parent | 13bddcd687120ceb3989ce155a657262b77463aa (diff) | |
| download | sonarqube-b99c9cc72ff8889936251795275f6326c597e79a.tar.gz sonarqube-b99c9cc72ff8889936251795275f6326c597e79a.zip | |
SONAR-23034 Pill hover, focus state
Diffstat (limited to 'server')
3 files changed, 25 insertions, 1 deletions
diff --git a/server/sonar-web/design-system/src/components/Pill.tsx b/server/sonar-web/design-system/src/components/Pill.tsx index c2eb3fb56c5..63deaf24560 100644 --- a/server/sonar-web/design-system/src/components/Pill.tsx +++ b/server/sonar-web/design-system/src/components/Pill.tsx @@ -51,6 +51,15 @@ const variantThemeBorderColors: Record<PillVariant, ThemeColors> = { [PillVariant.Accent]: 'pillAccentBorder', }; +const variantThemeHoverColors: Record<PillVariant, ThemeColors> = { + [PillVariant.Critical]: 'pillCriticalHover', + [PillVariant.Danger]: 'pillDangerHover', + [PillVariant.Warning]: 'pillWarningHover', + [PillVariant.Caution]: 'pillCautionHover', + [PillVariant.Info]: 'pillInfoHover', + [PillVariant.Accent]: 'pillAccentHover', +}; + interface PillProps { ['aria-label']?: string; children: ReactNode; @@ -110,4 +119,13 @@ const StyledPillButton = styled.button<{ border-color: ${({ variant }) => themeColor(variantThemeBorderColors[variant])}; cursor: pointer; + + &:hover { + background-color: ${({ variant }) => themeColor(variantThemeHoverColors[variant])}; + } + + &:focus { + outline: var(--echoes-color-focus-default) solid var(--echoes-focus-border-width-default); + outline-offset: var(--echoes-focus-border-offset-default); + } `; diff --git a/server/sonar-web/design-system/src/theme/light.ts b/server/sonar-web/design-system/src/theme/light.ts index 77301732b64..77a4f2920dc 100644 --- a/server/sonar-web/design-system/src/theme/light.ts +++ b/server/sonar-web/design-system/src/theme/light.ts @@ -343,16 +343,22 @@ export const lightTheme = { // pills pillCritical: COLORS.red[100], pillCriticalBorder: COLORS.red[800], + pillCriticalHover: COLORS.red[300], pillDanger: COLORS.red[50], pillDangerBorder: COLORS.red[600], + pillDangerHover: COLORS.red[200], pillWarning: COLORS.orange[50], pillWarningBorder: COLORS.orange[300], + pillWarningHover: COLORS.orange[200], pillCaution: COLORS.yellow[50], pillCautionBorder: COLORS.yellow[300], + pillCautionHover: COLORS.yellow[200], pillInfo: COLORS.blue[50], pillInfoBorder: COLORS.blue[300], + pillInfoHover: COLORS.blue[200], pillAccent: COLORS.indigo[50], pillAccentBorder: 'transparent', + pillAccentHover: COLORS.indigo[100], // input select selectOptionSelected: secondary.light, diff --git a/server/sonar-web/src/main/js/app/components/ChangeInCalculationPill.tsx b/server/sonar-web/src/main/js/app/components/ChangeInCalculationPill.tsx index 14bbb967625..b5c520e172d 100644 --- a/server/sonar-web/src/main/js/app/components/ChangeInCalculationPill.tsx +++ b/server/sonar-web/src/main/js/app/components/ChangeInCalculationPill.tsx @@ -49,7 +49,7 @@ export default function ChangeInCalculation({ qualifier }: Readonly<Props>) { } > <Pill - variant={PillVariant.Accent} + variant={PillVariant.Info} className="sw-ml-2" onClick={() => setIsPopoverOpen(!isPopoverOpen)} > |