PF3-PF4 migration: TopologyView and Toolbar


I’m working on migrating AtlasMap to PF4. It uses TopologyView and right now I’m trying to reduce the padding-top/padding-bottom of both toolbar. Here is a draft PR with screenshots.

I found that Toolbar uses --pf-global-spacer-md for padding-top/padding-bottom and changing --pf-global-spacer-md impacts everything. Is there any way to reduce toolbar padding top/bottom, or is there any other component that works better for a thin toolbar?


Hi @igarashitm! You can change that padding by setting --pf-c-toolbar--PaddingTop and --pf-c-toolbar--PaddingBottom on that element, or globally via .pf-c-toolbar { --pf-c-toolbar--PaddingTop: 0; --pf-c-toolbar--PaddingBottom: 0; } if you want it to apply to all toolbars.

I would be happy to help you review the usage and see if maybe the extra space can be fixed somewhere else, but I’m not sure if the space you’re trying to remove is in the screenshots in the atlasmap issue. If you’d also like help with that, can you point out the excess padding, or include a screenshot?

Thanks for the reply @mcoker ! sorry I forgot to update here, Today I gave up using TopologyView so that we can add --pf-c-toolbar--PaddingTop: 0 !important onto Toolbar directly, as PF4 TopologyView already has Toolbar inside it unlike it’s fed from outside in PF3. The updated screenshot on that PR already got those paddings removed.