Button disabled style not rendering

[yagudaev]

Description

Disabled style is not applied to button

CodeSandbox/Snack link

TBD

Steps to reproduce

Super simple little bug:

data-[disabled=true] is the wrong property, it needs t obe disabled:opacity-40.

It should fix it.

https://www.nativewind.dev/core-concepts/states#form-states-

Data selectors are web-only

gluestack-ui Version

@gluestack-ui/button 1.0.8

Platform

• [X] Expo
• [X] React Native CLI
• [ ] Next
• [ ] Web
• [X] Android
• [X] iOS

Other Platform

No response

Additional Information

No response

[Viraj-10]

Hey @yagudaev, Thanks for pointing out. We will send a PR to nativewind to update this. Nativewind v4.1 supports this. Feature, before that we used to have withStates HOC which used to take care of this functionality.

[stefan-schweiger]

@Viraj-10 Be careful when you replace those styles, when I switch over to active:/hover: and I longpress directly on the button text only the text changes to active styles instead of the whole button (also then suddenly I have to care about suppressHighlighting for whatever reason). That said with the current implementation the text does not apply styles at all for me..

[Viraj-10]

Hey @stefan-schweiger, Can you share your repo? Also using data-* is our way of styling and controlling button. But you can completely remove our styling and write it using active: / hover:

[stefan-schweiger]

@Viraj-10 here is my reproduction https://github.com/stefan-schweiger/gluestack-repro I have included once the latest version of button and once a "new" version of button with the data-* styles replaced with active:, hover:, etc.

When on iOS you press for example directly on the text of secondary+outline with the current implementation you will see only the border will change color (but text stays the same). With the "new" implementation only the text changes the color and the border stays the same, but when you press not directly on the text you get the old behavior of only the border changing color. Also if you try it on primary+solid you will notice the highlighting on iOS which can be disabled with suppressHighlighting.

Ideally both text and the border should change color as defined in the styles no matter where on the button you press.

Also another "bug" I noticed in the button component is this styling which uses primary for a secondary style:

{
  variant: 'outline',
  action: 'secondary',
  class:
    'text-primary-500 data-[hover=true]:text-primary-500 data-[active=true]:text-primary-500',
},

[Viraj-10]

Hey @stefan-schweiger, I have created a PR with newest updates. Reason behind you don't see any text change is because difference is minor. I replaced it with text-red-500 it is more noticeable now.

When you write hover: or active: nativewind automatically convert that component in pressable that's why you see when press on text in above case it only changes text.

To over come this and provide a better api we have introduced data-* attributes. So Component share one common state internally.

If you want to add more components use --alpha tag for now. We will be releasing stable version with changes tomorrow.

[jakejcheng]

Hi @Viraj-10, I've spent hours trying to debug why the buttons' styles don't change when it's being pressed and it seems to be the same issue. The "active" style (data-[active=true]) only works on browsers and it is not being applied in iOS simulator or on actual iPhone devices. If I change "data-[active=true]:" to "active:" in "ui/button/index.tsx", then it works in iOS simulator/device. So I guess the "data-*" attribute is not being applied correctly on iOS devices? Or how can I fix this?

[alexbaileyuk]

Same issue on web here. As someone new to the library, this feel pretty fundamental to be broken for over 6 months. disabled:opacity-40 works for us.