Skip to main content
P
perrybrus
Inspiring
June 24, 2020
Question

Hidden component states layers shows in code specs

  • June 24, 2020
  • 1 reply
  • 1384 views

When sharing for development the hidden component states like dropdown menu etc is included in the code specs. This is very annoying cause when you move the mouse around the area where the component is the hidden sublayers appears like invisable box frames, just blue borders. The developers constantly ask what this is cause it looks like an error in the design. The hidden layers from components with states shouldn't show in the code specs. Its confusing.

    This topic has been closed for replies.

    1 reply

    Spas K.
    Community Expert
    Spas K.Community Expert
    Community Expert
    June 24, 2020

    It depends on how you are "hiding" these elements between the different states. If you hide them using the eye icon in the layers panel, the component boundaries should only contain the visible elements and not expand to the hidden ones.

     

    If you use the opacity property to hide these elements on the default state, the component bounding box will include them and you will get the issue you are describing, if I understand correctly.

     

    Post a screenshot if you can so we can see what's happening.

    P
    perrybrusAuthor
    Inspiring
    June 24, 2020

    I'm unable to achive any functional states if I only use the eye icon in the layers palette to hide states, therefor I'm forced to do it the only way available by using the opacity slider. The latter action is including all the layers in the state interaction in the code specs. As you know there's no inteactive features in code specs as it only shows the markup of each element, so including the invisable layers from the states creates confusion for someone who can't see anything but static layout.

    Spas K.
    Community Expert
    Spas K.Community Expert
    Community Expert
    June 24, 2020

    Not sure what you mean, you don't hide the entire state, you just hide elements from the sub-states and show them when appropriate.

     

     

    You can see the bounding box changes to fit the shown elements.

    If you use opacity, it will not shrink and will display the ghost element, which is the problem:

     

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices