From e4c77a5f65eeaaf6b69007f0bb7bf9ed145f4c2b Mon Sep 17 00:00:00 2001 From: vermarjun Date: Sat, 8 Aug 2026 15:59:30 +0530 Subject: [PATCH 1/2] [Button] Fix Next/Previous buttons staying in clicked state The base ButtonStyle rule paints both :hover and :focus with the dark activeColor (#3c494f), but the $primary, $secondary and $outlined variant blocks only re-declare :hover. A mouse click leaves the button focused, so the base :focus rule wins and the button stays dark until the user clicks somewhere else. Scope that base rule to :focus-visible. A mouse click no longer triggers it, and keyboard focus keeps its visible indicator. Fixes #7940 Signed-off-by: vermarjun --- src/reusecore/Button/btn.style.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/reusecore/Button/btn.style.js b/src/reusecore/Button/btn.style.js index ce5c981a88e96b..26170015fb66cf 100644 --- a/src/reusecore/Button/btn.style.js +++ b/src/reusecore/Button/btn.style.js @@ -19,7 +19,7 @@ const ButtonStyle = styled.button` background-color: #00B39F; z-index: 999; &:hover, - &:focus { + &:focus-visible { color: white; background: ${props => props.theme.activeColor}; box-shadow: 0 2px 10px ${props => props.theme.whiteFourToBlackFour}; From cff87617d2ceaf1d65e4ddd56fa8317ad1afd05e Mon Sep 17 00:00:00 2001 From: vermarjun Date: Fri, 14 Aug 2026 17:33:38 +0530 Subject: [PATCH 2/2] chore(button): apply prettier formatting to btn.style.js The file was not prettier formatted on master, so the lint-staged hook rewrites it wholesale. Landing that as its own commit keeps the :focus-visible fix in e4c77a5 reviewable at one line. No behavior change. Signed-off-by: vermarjun --- src/reusecore/Button/btn.style.js | 152 +++++++++++++++--------------- 1 file changed, 78 insertions(+), 74 deletions(-) diff --git a/src/reusecore/Button/btn.style.js b/src/reusecore/Button/btn.style.js index 26170015fb66cf..897d5b51e11bc9 100644 --- a/src/reusecore/Button/btn.style.js +++ b/src/reusecore/Button/btn.style.js @@ -1,85 +1,89 @@ import styled, { css } from "styled-components"; -const ButtonStyle = styled.button` - cursor: pointer; - display: inline-flex; - align-items: center; - justify-content: center; - font-family: inherit; - font-size: 16px; - text-decoration: none; - text-transform: capitalize; - border: 0; - min-width: 170px; - padding: 14px; - border-radius: 5px; - -webkit-transition: 450ms all; - transition: 450ms all; - position: relative; - color: ${props => props.theme.white }; - background-color: #00B39F; - z-index: 999; - &:hover, - &:focus-visible { - color: white; - background: ${props => props.theme.activeColor}; - box-shadow: 0 2px 10px ${props => props.theme.whiteFourToBlackFour}; - } - &:active{ - box-shadow: 0 2px 10px ${props => props.theme.blackFourToWhiteFour}; - transform: scale(0.98); - } - .icon-left{ - margin-right: 8px; - } - .icon-right{ - margin-left: 8px; - } +const ButtonStyle = styled.button` + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + font-family: inherit; + font-size: 16px; + text-decoration: none; + text-transform: capitalize; + border: 0; + min-width: 170px; + padding: 14px; + border-radius: 5px; + -webkit-transition: 450ms all; + transition: 450ms all; + position: relative; + color: ${(props) => props.theme.white}; + background-color: #00b39f; + z-index: 999; + &:hover, + &:focus-visible { + color: white; + background: ${(props) => props.theme.activeColor}; + box-shadow: 0 2px 10px ${(props) => props.theme.whiteFourToBlackFour}; + } + &:active { + box-shadow: 0 2px 10px ${(props) => props.theme.blackFourToWhiteFour}; + transform: scale(0.98); + } + .icon-left { + margin-right: 8px; + } + .icon-right { + margin-left: 8px; + } - ${props => props.$outlined && css` - background: transparent; - border: 2px solid ${props => props.theme.whiteToBlack}; - color: ${props => props.theme.whiteToBlack}; - &:hover{ - box-shadow: 0 2px 10px ${props.theme.whiteFourToBlackFour}; - } - &:active{ - background: ${props => props.theme.lightGrey}; - box-shadow: 0 2px 10px ${props.theme.blackFourToWhiteFour}; - transform: scale(0.98); - } + ${(props) => + props.$outlined && + css` + background: transparent; + border: 2px solid ${(props) => props.theme.whiteToBlack}; + color: ${(props) => props.theme.whiteToBlack}; + &:hover { + box-shadow: 0 2px 10px ${props.theme.whiteFourToBlackFour}; + } + &:active { + background: ${(props) => props.theme.lightGrey}; + box-shadow: 0 2px 10px ${props.theme.blackFourToWhiteFour}; + transform: scale(0.98); + } `} + ${(props) => + props.$primary && + css` + color: ${(props) => props.theme.black}; + background: ${(props) => props.theme.highlightColor}; - ${props => props.$primary && css` - color: ${props => props.theme.black}; - background: ${props => props.theme.highlightColor}; - - &:hover{ - color: ${props.theme.black}; - background: ${props.theme.highlightColor}; - box-shadow: 0 2px 10px ${props.theme.whiteFourToBlackFour}; - } - &:active{ - background: ${props => props.theme.saffronColor}; - box-shadow: 0 2px 10px ${props.theme.blackFourToWhiteFour}; - transform: scale(0.98); - } - + &:hover { + color: ${props.theme.black}; + background: ${props.theme.highlightColor}; + box-shadow: 0 2px 10px ${props.theme.whiteFourToBlackFour}; + } + &:active { + background: ${(props) => props.theme.saffronColor}; + box-shadow: 0 2px 10px ${props.theme.blackFourToWhiteFour}; + transform: scale(0.98); + } `} - ${props => props.$secondary && css` - color: white; - background: ${props.theme.secondaryColor}; - &:hover{ - background: ${props.theme.caribbeanGreenColor}; - box-shadow: 0 2px 10px ${props.theme.whiteFourToBlackFour}; + ${(props) => + props.$secondary && + css` + color: white; + background: ${props.theme.secondaryColor}; + &:hover { + background: ${props.theme.caribbeanGreenColor}; + box-shadow: 0 2px 10px ${props.theme.whiteFourToBlackFour}; } - &:active{ - color: #326d62; - background: ${props.theme.secondaryColor}; - box-shadow: 0 2px 10px ${props.theme.blackFourToWhiteFour}; - transform: scale(0.98); + &:active { + color: #326d62; + background: ${props.theme.secondaryColor}; + box-shadow: 0 2px 10px ${props.theme.blackFourToWhiteFour}; + transform: scale(0.98); } - `} + `} `; ButtonStyle.displayName = "ButtonStyle";