Pseudo variants properties not working

[andreeeabb]

Describe the problem

---

Bug report identity: Please do not edit

Task path: WRqbNjeh3JQJI2q3UWHJ/2y0Lg6UBhOeKch64Kys9/7ky1g318bi4ep

[muryoh]

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]

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 @andreeeabb<https://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 GitHub<#164 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/BHJXSYNYVU7WL2WDCWF3JNDY4WFCLAVCNFSM6AAAAABGATOKZSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDANBYGI3DCOJWGE>. You are receiving this because you were mentioned.Message ID: ***@***.***>

[muryoh]

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