Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: pass down disabled prop in the rowComp Hoc #431

Merged
merged 2 commits into from Apr 11, 2024

Conversation

kyoyadmoon
Copy link
Member

@kyoyadmoon kyoyadmoon commented Apr 8, 2024

Purpose

最近在寫測試的時後發現 gypcrete 的 TextInput disabled 狀態不會有 disabled attribute,導致有點難驗證欄位是否停用。
查了一下原因是在 rowComp 這個 HOC 把 disabled prop 劫持後沒有往下傳,看起來應該是不小心漏掉,後續發現可能是為了避免樣式上對停用元素加上 opacity 導致和 .gyp-state__disabled 的 opacity 樣式疊加,導致 input 顏色被刷淡兩次才攔截的。

另外讓 input element 會標上 disabled html attribute 的正規作法也是有其必要的,這讓 input element 可以真正有 disabled 效果,原本會由 rowComp HOC 在 input 外層的 wrapper 加上 gyp-state__disabled class,透過 pointer-events: none 阻擋游標互動來模擬停用的效果,但是這樣會有一些漏洞,例如透過鍵盤 tab 仍然可以選取到停用的 input、e2e 測試如果直接選取到 input element 進行互動也可以繞過樣式的阻擋。

Changes

  • rowComp 會將 disabled prop 往下傳
  • TextInput 在停用狀態的 font-weight 會從 700 → 400
    原本停用狀態的 TextInput font-weight 就應該要是 400,只是原先 disabled prop 被 rowComp HOC 攔截,導致 disabled 一直以來都沒有正確傳到 TextInput 上,所以看到的一直是粗體
  • 移除套用在 disabled attribute 的透明度樣式,避免外層和內層的透明度疊加,造成 Input 的顏色變得更淡
  • 加上確保會代傳 disabled prop 的測試

Risk

會讓以下各個 Form Input 元件 都開始會收到 disabled prop

  • Button
  • Checkbox
  • Radio
  • SearchInput
  • Switch
  • TextInput
  • TextLabel

在這次調整中為了避免透明度疊加導致非預期樣式的情況,取消了對停用的元件加上透明度的樣式,有可能在某些地方停用元件顏色變淡的樣式會消失,不過發生的機率不高

@kyoyadmoon kyoyadmoon marked this pull request as ready for review April 8, 2024 08:30
Copy link
Contributor

@a26620236 a26620236 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@kyoyadmoon 這 PR 還會調整對嗎?

@kyoyadmoon
Copy link
Member Author

@kyoyadmoon 這 PR 還會調整對嗎?

@a26620236 對 因為發現 disabled 會影響到樣式,我還會做一些調整

@kyoyadmoon kyoyadmoon force-pushed the fix/rowComp-pass-disabled-prop branch from a32d4c1 to c96eb64 Compare April 10, 2024 06:01
Copy link

sonarcloud bot commented Apr 10, 2024

Quality Gate Passed Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
No data about Coverage
0.0% Duplication on New Code

See analysis details on SonarCloud

@kyoyadmoon
Copy link
Member Author

@tz5514 @a26620236 後續有再更新了 scss 解決透明度疊加導致 input 非預期變淡的問題
可以看這個 commit c96eb64

@kyoyadmoon kyoyadmoon merged commit bf37148 into develop Apr 11, 2024
6 checks passed
@kyoyadmoon kyoyadmoon deleted the fix/rowComp-pass-disabled-prop branch April 11, 2024 04:36
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants