Replace some Bootstrap components/classes with Ant analogues #4588
Conversation
kravets-levko
force-pushed
the
replace-bootstrap-components
branch
from
dce7040
to
a420933
Compare
| @@ -250,6 +250,31 @@ | |||
| } | |||
| } | |||
|
|
|||
| .@{list-prefix-cls}-bordered.@{list-prefix-cls}-sm { | |||
There was a problem hiding this comment.
The actual change, other is from Prettier
|
|
||
| // set some defaults for badge | ||
| .@{badge-prefix-cls} { | ||
| &-count { |
There was a problem hiding this comment.
The actual change, other is from Prettier
There was a problem hiding this comment.
Another weird thing I noticed is that the flakyness in the Percy snapshot for TimeAgo is reintroduced, it is supposed to be fixed after #4365. I haven't found its cause yet, but saying in case something pops in your mind.
|
|
||
| .parameter-block[data-editable] & { | ||
| min-width: calc(100% - 27px); // make room for settings button | ||
| max-width: 195px - 27px; |
There was a problem hiding this comment.
It may be trickier to reach the same Label behavior for parameters:
Before
After
The idea is to keep it with a flexible width, if the label itself has more text and the width is not in it's limit, the whole parameter can take up more space 🙂. You couldn't get it to work with the previous css or you just wanted to move it to flex?
There was a problem hiding this comment.
I wanted to make it flex (and get rid of calc). Thank you for pointing, I'll check this once more 👍
|
@kravets-levko , thanks for the PR! We've updated a lot of things now that we're Community-driven so - if you're still interested in getting this merged - would you mind rebasing off master to re-run the CI, as well as updating merge conflicts? We're trying to clean up our PR todo list, so if you're not interested, that's fine - we'll close the PR in about a week if we don't hear back. If you're interested in reopening the PR afterwards, we would also very much welcome that. |
What type of PR is this? (check all applicable)
Description
What's changed:
.list-groupwith Antd<List>(QuerySelectorcomponent andHomepage);.form-group,.form-control);.badgewith Antd<Badge>(System Status page);.btn-favourite + .fa-starwith<FavoritesControl>component (and added a readonly mode to it) - for consistency;.btn) - with<Button>inParameterscomponent (see screenshot) and Query List page's empty state block (looks almost the same). There was also usage in VisualizationWidget component but it didn't really need that.btnstyles (most were overridden) - so I just simplified a markup and removed classes at all.What's left (will be fixed in this PR only after discussion if we decide so):
m-*,p-*,bg-*,c-*,f-*,text-*,w-*,h-*, display (d-*) and flex markup. They are actually not a part of Bootstrap (maybe just some oftext-*ones) - so probably they should be collected into a single file (or few files) and kept apart from our custom Bootstrap theme;.table-responsive,.table-bordered- there are few usages, need to check what could be used as a replacement;.hidden-*,.visible-*- same as for table classes above;.container,.row,.col-*- not that much usages, may be replaced as a part of this PR (after discussing);.label-*classes: part of Bootstrap, but currently used only as tags labels. May be replaced as a part of this PR (after discussing).Also, Bootstrap defines some styles for plain tags (e.g. headers, typography, etc.) - need to check if Ant has something similar and how it fits.
Mobile & Desktop Screenshots/Recordings (if there are UI changes)
Parameters components with updated button:
