divriots / story-to-design

Keep your Figma libraries true-to-code in a single click.
https://story.to.design
29 stars 0 forks source link

Checkbox states aren't working #208

Closed katie-schmidt16 closed 1 month ago

katie-schmidt16 commented 1 month ago

I'm able to get the states to look correct for the empty checkbox but as soon as I add in the checked and indeterminate, all the states show as disabled.


Bug report identity: Please do not edit

Task path: hpPpNB3AXDmRHPrweEFJ/NIdTSBCUeUpHiiLbGcQJ/ey8iuxqu7w2v

muryoh commented 1 month ago

Indeed, that's because I misled you in another issue (https://github.com/divriots/story-to-design/issues/199#issuecomment-2425977405): other arguments within an advanced arg do not default to false. Sorry about that!

Here's the proper configuration that should work as expected:

{
  "initArgs": {},
  "variantProperties": [
    "size",
    "error",
    {
      "name": "feedback",
      "values": [
        {
          "name": "checked",
          "withArgs": {
            "checked": true,
            "indeterminate": false
          }
        },
        {
          "name": "unChecked"
        },
        {
          "name": "indeterminate",
          "withArgs": {
            "indeterminate": true,
            "checked": false
          }
        }
      ]
    },
    {
      "name": "state",
      "values": [
        {
          "name": "default"
        },
        {
          "name": "hover",
          "withArgs": {
            ":hover": true,
            ":focus": false,
            "disabled": false
          }
        },
        {
          "name": "focus",
          "withArgs": {
            ":hover": false,
            ":focus": true,
            "disabled": false
          }
        },
        {
          "name": "disabled",
          "withArgs": {
            ":hover": false,
            ":focus": false,
            "disabled": "true"
          }
        }
      ]
    }
  ]
}
katie-schmidt16 commented 1 month ago

Ok it's so close! I'm still getting a random few of the default states showing as disabled. Frame 2 { "initArgs": {}, "variantProperties": [ "size", "error", { "name": "feedback", "values": [ { "name": "checked", "withArgs": { "checked": true, "indeterminate": false, "unChecked": false } }, { "name": "unChecked", "withArgs": { "checked": false, "indeterminate": false, "unChecked": true } }, { "name": "indeterminate", "withArgs": { "indeterminate": true, "checked": false, "unChecked": false } } ] }, { "name": "state", "values": [ { "name": "default", "withArgs": { ":hover": false, ":focus": false, "disabled": false } }, { "name": "hover", "withArgs": { ":hover": true, ":focus": false, "disabled": false } }, { "name": "focus", "withArgs": { ":hover": false, ":focus": true, "disabled": false } }, { "name": "disabled", "withArgs": { ":hover": false, ":focus": false, "disabled": "true" } } ] } ] }

katie-schmidt16 commented 1 month ago

Nevermind, it's working correctly! Thank you!