Add deprecated css to clickable property name

[keremnalbant]

What/Why/How?

What: ClickablePropertyName styled component doesn't pass the deprecated css to its child <span class='property-name'> and because of that property name doesn't get line-through style.

Solved it by adding the missing css code.

Reference

-

Tests

No tests needed

Screenshots (optional)

Before:

After:

Check yourself

• [x] Code is linted
• [X] Tested
• [X] All new/updated code is covered with tests

[keremnalbant]

Hi @keremnalbant, thank you for the contribution. I am not 100% sure about adding deprecated CSS to non-primitive property. The reason is nested properties. In that case, should we use the same style for them? It can confuse if count of properties is a lot.

Hey @AlexVarchuk thanks for consideration. To me as a user it looked like a bug since it doesn't look consistent with the other deprecated properties.

If we approach the problem with a UI POV, it's not a really good practice to have different stylings for deprecated properties depending on their type.

For nested properties, thanks for raising it up. IMO, I don't think we should apply the same for them, deprecated flag and regarding styling only should be applied at root level.

In the API spec I tested against, It didn't have nested properties, let me see check that case and push another commit for that if needed.

[AlexVarchuk]

@lornajane any thoughts?

[AlexVarchuk]

@keremnalbant Also check tests. Seems, we need to update snapshots.

[keremnalbant]

@AlexVarchuk Current implementation doesn't cover the nested properties, and I think that this way it's better because deprecated stylings should be applied at root level.

Also since this is my first contribution I couldn't get what you mean by checking the tests. I already run npm run test, npm run test:update-snapshot scripts in my local before committing.

[lornajane]

I think it makes sense to apply the visual label where the deprecated property is applied, regardless of type.