We should take a look for other styles like this, but here are a couple I noticed. Ideally these would be scoped to their function in the component. As in the button is in a .pf-c-[component]__close (for the close button specifically) or __action[.pf-m-close] (if this is more of a generic action style that we may have more of) container and the styles are scoped there so they don't conflict with uses users may have or we have/support later as the component changes.
Also we style the close button's visibility when it's editable, but we don't render the close button when the label is editable, so that should be able to be removed. cc @thatblindgeye
|
.pf-c-button { |
|
visibility: hidden; // use visibility hidden to retain positioning |
|
} |
|
} |
|
|
|
.pf-c-button { |
|
--pf-c-button--FontSize: var(--pf-c-label__c-button--FontSize); |
|
--pf-c-button--PaddingTop: var(--pf-c-label__c-button--PaddingTop); |
|
--pf-c-button--PaddingRight: var(--pf-c-label__c-button--PaddingRight); |
|
--pf-c-button--PaddingBottom: var(--pf-c-label__c-button--PaddingBottom); |
|
--pf-c-button--PaddingLeft: var(--pf-c-label__c-button--PaddingLeft); |
|
|
|
margin-top: var(--pf-c-label__c-button--MarginTop); |
|
margin-right: var(--pf-c-label__c-button--MarginRight); |
|
margin-bottom: var(--pf-c-label__c-button--MarginBottom); |
|
margin-left: var(--pf-c-label__c-button--MarginLeft); |
|
} |
Same
|
// Button |
|
.pf-c-button { |
|
--pf-c-button--PaddingTop: var(--pf-c-chip__c-button--PaddingTop); |
|
--pf-c-button--PaddingRight: var(--pf-c-chip__c-button--PaddingRight); |
|
--pf-c-button--PaddingBottom: var(--pf-c-chip__c-button--PaddingBottom); |
|
--pf-c-button--PaddingLeft: var(--pf-c-chip__c-button--PaddingLeft); |
|
--pf-c-button--FontSize: var(--pf-c-chip__c-button--FontSize); |
|
|
|
margin-top: var(--pf-c-chip__c-button--MarginTop); |
|
margin-right: var(--pf-c-chip__c-button--MarginRight); |
|
margin-bottom: var(--pf-c-chip__c-button--MarginBottom); |
|
} |
|
|
|
// badge |
|
.pf-c-badge { |
|
margin-left: var(--pf-c-chip__c-badge--MarginLeft); |
|
} |
