chore: clean up css around clearable text field - Githubissues

influxdata / clockface

UI Kit for building Chronograf

https://influxdata.github.io/clockface

MIT License

44 stars 18 forks source link

chore: clean up css around clearable text field #676

Closed daviddkkim closed 2 years ago

daviddkkim commented 2 years ago

Closes #

Changes

// Describe what you changed

Cleaned up hardcode into design tokens.

Changed up color

fixed icon sizing.

We should refactor this to use squareButton like the visibilityInput does when we have clockface 3.0. Currently, it is not going to work because the IconFont.Remove is not centered but once with the new iconset from clockface 3.0 we should be able to reduce the bulk of the css by simply swapping the dismissButton with the squareButton.

Screenshots

// Add screenshots here if relevant

Default State Medium Screen Shot 2021-10-13 at 11 35 04 PM

Hover State Medium Screen Shot 2021-10-13 at 11 35 07 PM

Default State Large Screen Shot 2021-10-13 at 11 46 46 PM

Hover State Large Screen Shot 2021-10-13 at 11 46 49 PM

Checklist

Check all that apply

[ ] Updated documentation to reflect changes
[ ] Added entry to top of Changelog with link to PR (not issue)
[ ] Tests pass
[ ] Peer reviewed and approved
[ ] Signed CLA (if not already signed)

jrenee42 commented 2 years ago

ok; don't know how you do it without the positioning; but if it works it works.