Pseudo variants properties not working

andreeeabb commented 2 months ago

Describe the problem

Bug report identity: Please do not edit

Task path: WRqbNjeh3JQJI2q3UWHJ/2y0Lg6UBhOeKch64Kys9/7ky1g318bi4ep

muryoh commented 2 months ago

Hi @andreeeabb,

Thanks for the report 🙏

I noticed you used advanced variants to specify

{
  "initArgs": {
    ":actionSelector": ".ids-accordion-item__btn:tap"
  },
  "variantProperties": []
}

The reason this is failing is because there is no element matching that selector, .ids-accordion-item__btn:tap

This is actually probably closer to what you were looking to do:

{
  "initArgs": {
    ":actionSelector": ".ids-accordion-item__btn"
  },
  "variantProperties": [
    ":tap"
  ]
}

This tells story.to.design to:

interact with the element with class ids-accordion-item when generating pseudo variants (ie click on that element when needed) - this is the ":actionSelector": ".ids-accordion-item" part
generate 2 variants, one with :tap, one without. This is specified by the following part:
```
"variantProperties": [
":tap"
]
```

Now in the case of your component I do not think you need to use the :actionSelector configuration, because by default story.to.design tries to look for elements it can interact with such as buttons, which your component does contain, so it should use it by default I believe

This should actually completely remove the need to use advanced variants at all - you should be able to just do (unless you had another reason to use advanced variants):

Can you help me understand your use case? Don't hesitate to reach out on Discord if you prefer 👍 (my login is remy.masson, on https://story.to.design/chat)

andreeeabb commented 2 months ago

Hello, I have for example also design for whole pages, for example product detail page. I have also there some accordions and want to show them open. (issue 165) If I choose from variants tap true it does not happen anything, so I suppose I have to use the advanced variants?

Best regards, Andreea

@.***https://www.spar-ics.com/

Andreea BOGDAN, BSc Product Engineer <http://>

Mobile: +43 664 88971212 E-Mail: @.**@.>

SPAR Business Services GmbH Information & Communication Services Europastrasse 3, 5015 Salzburg, Austria

<http://>

            ***@***.***

From: Remy @.> Date: Wednesday, 10. April 2024 at 21:10 To: divriots/story-to-design @.> Cc: BOGDAN Andreea (ICS480-ECI) @.>, Mention @.> Subject: {EXT} Re: [divriots/story-to-design] Pseudo variants properties not working (Issue #164)

Hi @andreeeabbhttps://github.com/andreeeabb,

Thanks for the report 🙏

I noticed you used advanced variants to specify

{

"initArgs": {

":actionSelector": ".ids-accordion-item__btn:tap"

},

"variantProperties": []

}

The reason this is failing is because there is no element matching that selector, .ids-accordion-item__btn:tap

This is actually probably closer to what you were looking to do:

{

"initArgs": {

":actionSelector": ".ids-accordion-item__btn"

},

"variantProperties": [

":tap"

]

}

This tells story.to.design to:

interact with the element with class ids-accordion-item when generating pseudo variants (ie click on that element when needed) - this is the ":actionSelector": ".ids-accordion-item" part
generate 2 variants, one with :tap, one without. This is specified by the following part:

"variantProperties": [

":tap"

]

Now in the case of your component I do not think you need to use the :actionSelector configuration, because by default story.to.design tries to look for elements it can interact with such as buttons, which your component does contain, so it should use it by default I believe

This should actually completely remove the need to use advanced variants at all - you should be able to just do (unless you had another reason to use advanced variants):

image.png (view on web)https://github.com/divriots/story-to-design/assets/1789748/1085af2e-7ba5-4fbe-b001-dfe0b01800d5

Can you help me understand your use case? Don't hesitate to reach out on Discord if you prefer 👍 (my login is remy.masson, on https://story.to.design/chat)

— Reply to this email directly, view it on GitHubhttps://github.com/divriots/story-to-design/issues/164#issuecomment-2048261961, or unsubscribehttps://github.com/notifications/unsubscribe-auth/BHJXSYNYVU7WL2WDCWF3JNDY4WFCLAVCNFSM6AAAAABGATOKZSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDANBYGI3DCOJWGE. You are receiving this because you were mentioned.Message ID: @.***>

muryoh commented 2 months ago

Hi @andreeeabb,

I replied in #165 as it seemed specific to this one. Let me know if there is still something I can help with for that specific component (which is not full page but just an accordion)

Best regards Remy

divriots / story-to-design

Pseudo variants properties not working #164

Describe the problem