Update Components: Button, Chip and Tooltip

[daigof]

• Buttons: Update all buttons to have border radius: 4px.
• Chip: new styles, added default and secondary status. deprecated pending and closed status, but they will fallback to default styles if someone provides an incorrect status
• Tooltip: update styles. Fixed arrow center positioning (now the arrow wont get in way of letters and is perfect centered). New isSmall prop for smaller tooltips.

Other minor fixes

• Callout: fixed doc to use 48x48 glyph
• Indicator: refactored to use same technique as chip using display: inline-text instead of width:content-fit
• Edit Storybook build (webpack config) that makes images broken. Compare Avatar component in PROD the images are all broken, this fixes that.

Preview link

https://curology-radiance-pr-204.herokuapp.com/

[benkolde]

Minor thing, but for isSmall can we add vertical padding of 2px

For both, can we make the trigger have borderRadius: 1 and change the trigger width to 8px

[daigof]

Minor thing, but for isSmall can we add vertical padding of 2px

For both, can we make the trigger have borderRadius: 1 and change the trigger width to 8px

@benkolde What is the trigger? did you mean the arrow? I made the arrow 8px dimension now but I dont know how border radius would affect it

[benkolde]

Minor thing, but for isSmall can we add vertical padding of 2px
For both, can we make the trigger have borderRadius: 1 and change the trigger width to 8px

@benkolde What is the trigger? did you mean the arrow? I made the arrow 8px dimension now but I dont know how border radius would affect it

I just want the arrow to look like this

[daigof]

@benkolde @ida-strom this is ready for re-review. One thing I noticed is that the tooltip extends to the width of the Trigger element, if wrongly set or unchecked it can go very wide. I suggest putting a max-width: 327px

Unchecked can grow as:

With Max-width Fix:

[benkolde]

@benkolde @ida-strom this is ready for re-review. One thing I noticed is that the tooltip extends to the width of the Trigger element, if wrongly set or unchecked it can go very wide. I suggest putting a max-width: 327px

Unchecked can grow as:

With Max-width Fix:

Can this be a prop? @daigof I think having the option for it to expand would be great

[benkolde]

Can you build a new test environment for this?

[daigof]

@benkolde I added a new optional prop for restricted width (327px) with default false value so it doesn't impact existing implementations.

Deployed a review app here https://curology-radiance-pr-204.herokuapp.com/

[daigof]

@benkolde Updated the border radius of small tooltip to 4px.

https://curology-radiance-pr-204.herokuapp.com/?path=/story/tooltip--usage