Skip to main content
J
jonoyoung
Participant
July 20, 2020
Question

Component States - No Border Radius or Shadow Support?

  • July 20, 2020
  • 1 reply
  • 354 views

I am working on a design system, specifically form elements, where text fields have a few different States:

  • inactive (empty) - black500 border
  • focus - blue border + shadow
  • Inactive (filled) - black600 border
  • hover - black66 border
  • error - red border
  • disabled - black300 border

 

PROBLEM: The new states do not allow for shadow or border radius?

  1. I create a component for Inactive
  2. Then, I try to use the Compnent > State > Focus.
  3. I can apply the blue border, but I do not see an option to add/adjust a shadow. The border radius also resets from 2 (inactive) to 0, and there is no way to apply border radius to a state.

 

Do states support border radius or shadow? Seems like a massive overight if not.

 

Can we not do things like adjust shadow depth on :hover or :focus?

This topic has been closed for replies.

1 reply

HARSHIKA_VERMA
Community Manager
HARSHIKA_VERMACommunity Manager
Community Manager
July 22, 2020

Hi there,

 

Thank you for reaching out. In order to apply shadows and border to the state shape, you need to make sure to double click into the state and select the shape to apply the shadow and border-radius to. You can verify what is selected in the layers panel.

 

Let me know if that helps.

 

Thanks,

Harshika

J
jonoyoungAuthor
Participant
July 27, 2020

I ended up starting over with a new shape, and it appears to be working. I think I was trying to add a state to an existing component, and when doing so, there was no ability to Paste Layer Style to a new state and no ability to set border radius.

 

Not sure why that was the case?

 

Now that I started with a new rectangle, I can apply border radius, etc. and copy/paste layer styles after double-clicking on the current state's shape layer.

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