NO BUG: Can't remove class from main Component

Browser: Chrome Version 137.0.7151.104
OS: macOS

I have a button which is a component. For some reason, I cannot remove a global class from it(.confetti-effect), if I remove the class, save and reload, the class is still attached.

Here’s the JSON:

{
  "components": [
    {
      "id": "uemazk",
      "category": "Buttons",
      "desc": "Primary CTA Button",
      "elements": [
        {
          "id": "uemazk",
          "name": "button",
          "parent": 0,
          "children": [],
          "settings": {
            "_cssGlobalClasses": [
              "btn--primary",
              "cn96hu",
              "nqnnex"
            ],
            "icon": {
              "library": "fontawesomeRegular",
              "icon": "fa fa-calendar-days"
            },
            "iconPosition": "left",
            "iconTypography": {
              "font-size": "1em",
              "color": {
                "id": "acss_import_white-trans-80",
                "name": "white-trans-80",
                "raw": "var(--white-trans-80)"
              }
            },
            "tag": "button"
          },
          "label": "CTA Button"
        }
      ],
      "properties": [
        {
          "label": "Label",
          "type": "text",
          "default": "CTA text",
          "id": "dnamxp",
          "connections": {
            "uemazk": [
              "text"
            ]
          },
          "group": "rghzib"
        },
        {
          "label": "Link",
          "type": "link",
          "id": "uaiosw",
          "connections": {
            "uemazk": [
              "link"
            ]
          },
          "group": "usqjwe"
        },
        {
          "label": "Icon",
          "type": "icon",
          "id": "attvsy",
          "connections": {
            "uemazk": [
              "icon"
            ]
          },
          "group": "fsqbdr",
          "default": {
            "library": "ionicons",
            "icon": "ion-ios-arrow-round-forward"
          }
        },
        {
          "label": "Icon position",
          "type": "select",
          "id": "ulleza",
          "connections": {
            "uemazk": [
              "iconPosition"
            ]
          },
          "default": "right",
          "group": "fsqbdr"
        },
        {
          "label": "Button type",
          "type": "class",
          "options": [
            {
              "id": "fuofrp",
              "label": "Primary",
              "value": [
                "acss_import_btn--primary"
              ]
            },
            {
              "id": "fdaopj",
              "label": "Secondary",
              "value": [
                "acss_import_btn--secondary"
              ]
            },
            {
              "id": "mbuxgh",
              "label": "Outline",
              "value": [
                "acss_import_btn--outline"
              ]
            }
          ],
          "default": [
            "fuofrp"
          ],
          "id": "uuxesw",
          "connections": {
            "uemazk": [
              "_cssGlobalClasses"
            ]
          },
          "group": "lybhki"
        },
        {
          "label": "Button Size",
          "type": "class",
          "group": "lybhki",
          "options": [
            {
              "id": "kpqsux",
              "label": "Small",
              "value": [
                "acss_import_btn--s"
              ]
            },
            {
              "id": "icakqr",
              "label": "Medium",
              "value": [
                "acss_import_btn--m"
              ]
            },
            {
              "id": "abmfle",
              "label": "Large",
              "value": [
                "acss_import_btn--l"
              ]
            },
            {
              "id": "hrlugb",
              "label": "X Large",
              "value": [
                "acss_import_btn--xl"
              ]
            }
          ],
          "default": [
            "abmfle"
          ],
          "id": "rdcrgv",
          "connections": {
            "uemazk": [
              "_cssGlobalClasses"
            ]
          }
        }
      ],
      "_created": 1748171008,
      "_user_id": 2,
      "_version": "2.0-beta",
      "propertyGroups": [
        {
          "id": "rghzib",
          "name": "Text"
        },
        {
          "id": "usqjwe",
          "name": "Link"
        },
        {
          "id": "fsqbdr",
          "name": "Icon"
        },
        {
          "id": "lybhki",
          "name": "Style"
        }
      ]
    }
  ],
  "globalClasses": [
    {
      "id": "nqnnex",
      "name": "confetti-effect",
      "settings": [],
      "modified": 1751150042,
      "user_id": 2
    }
  ]
}

Hi Brendan,
Thanks again for your report!

Unfortunately, I cannot reproduce the issue. Would you be so kind as to provide a live link and a screencast using https://jam.dev showing and explaining what’s happening?

Best regards,
timmse

Hmm, I seemed to sort itself today when I went to replicate it, I’ll keep an eye on it and if it resurfaces I’ll re-open this. Thanks!

1 Like

I’m getting this today on a component in Bricks 2.0.2. If I remove the classes from it, they are not visually removed in the preview and reloading the page just adds them back again. How did you fix it @Codebee?

I’m not sure to be honest. Sorry! It just seemed to resolve itself when I went to record a video of it happening the next day.

1 Like

Funnily enough, I resolved it too but not exactly sure how. Some sort of combination of copying/deleting/pasting the elements again.