feat(details): updated styling

[agliga]

Fixes #2036

• This PR contains CSS changes
• This PR does not contain CSS changes

Description

• Updated details visual style
• Fixed icon layout (for old icon it should still align)

Notes

• Design wants width to be fixed to item. For now, I left it as is and have the width span the whole content of the button. This is in order to prevent possible layout shift if we have things on the left/right of it
  This is what it looks like if we remove width 100% (current not in this change)

With width 100%

Screenshots

Old icon (12px)

New Icon (16px)

Checklist

• I verify the build is in a non-broken state

• I verify all changes are within scope of the linked issue

• I regenerated all CSS files under dist folder

• I tested the UI in all supported browsers

• I did a visual regression check of the components impacted by doing a Percy build and approved the build

• I tested the UI in dark mode and RTL mode

• I added/updated/removed Storybook coverage as appropriate

[changeset-bot]

🦋 Changeset detected

Latest commit: d12df97

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@ebay/skin	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[agliga]

Removed with:100.
Only kept it for centered version (its needed otherwise it wont center it)
Also I have changed the inline-block to be inline flex. This properly centers the chevron and the text.

[ArtBlue]

Looks great!

Maybe there was some discussion to ditch the styling for states, but the issue currently has those styles with no comment about not using them. Shouldn't the component have those implemented?

[agliga]

Looks great!

Maybe there was some discussion to ditch the styling for states, but the issue currently has those styles with no comment about not using them. Shouldn't the component have those implemented?

I don't see these in the figma link which is why I didnt implement them.

[agliga]

@ArtBlue I updated the state layer. The only one that was not present in figma was disabled, so I left that one out.
Let me know if you think this is good.

[ianmcburnie]

Given that we are removing the 100% width on the button/summary, does this centered variant make sense anymore?

I would say that this modifier is no longer just centering the button text anymore, it is now centering and making the button fluid: https://github.com/eBay/skin/pull/2403/files#diff-df3ce4e1c4141c74932c4e28e5175bb81d45973c23a752a8ec55e5d7bd11d540R43

[agliga]

Given that we are removing the 100% width on the button/summary, does this centered variant make sense anymore?

I would say that this modifier is no longer just centering the button text anymore, it is now centering and making the button fluid: https://github.com/eBay/skin/pull/2403/files#diff-df3ce4e1c4141c74932c4e28e5175bb81d45973c23a752a8ec55e5d7bd11d540R43

Its not! I think design removed it. We can remove it from docs, but I kept it in for now until we get clarification.
However, changing this would be breaking.

[ArtBlue]

LGTM!

@agliga , the only thing is that I think the component version should probably match that of the component in Figma. Not seeing that diff here.

[ianmcburnie]

Its not! I think design removed it. We can remove it from docs, but I kept it in for now until we get clarification.
However, changing this would be breaking.

Ok. Let's remove from docs and add a deprecated comment in the code.