Highlighted

Component States - No Border Radius or Shadow Support?

Community Beginner ,
Jul 20, 2020

Copy link to clipboard

Copied

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?

TOPICS
Design, Missing feature

Views

58

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Component States - No Border Radius or Shadow Support?

Community Beginner ,
Jul 20, 2020

Copy link to clipboard

Copied

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?

TOPICS
Design, Missing feature

Views

59

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jul 20, 2020 0
Adobe Employee ,
Jul 22, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 22, 2020 0
Community Beginner ,
Jul 27, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 27, 2020 0