diff --git a/src/toolbar/ActionButton.tsx b/src/toolbar/ActionButton.tsx index 1e8660df..fa716374 100644 --- a/src/toolbar/ActionButton.tsx +++ b/src/toolbar/ActionButton.tsx @@ -110,7 +110,10 @@ const ActionButton: React.VoidFunctionComponent = ({ aria-label={label} elementRef={tooltipTargetRef as React.Ref} {...mergeProps(tooltipTargetProps, { - className: classNames(enabled === false && Classes.DISABLED), + className: classNames( + 'pb-toolbar-action-button', + enabled === false && Classes.DISABLED, + ), })} intent={Intent.PRIMARY} onClick={handleClick} diff --git a/src/toolbar/toolbar.scss b/src/toolbar/toolbar.scss index 37f9bc6b..81f09f72 100644 --- a/src/toolbar/toolbar.scss +++ b/src/toolbar/toolbar.scss @@ -19,18 +19,24 @@ padding: 5px; } } -} -.pb-toolbar * { - box-shadow: unset !important; -} - -.pb-toolbar-group { - &.pb-align-left { - margin-right: bp.$pt-grid-size * 2; + // override blueprint.js style + & * { + box-shadow: unset !important; } - &.pb-align-right { - margin-left: auto; + &-group { + &.pb-align-left { + margin-right: bp.$pt-grid-size * 2; + } + + &.pb-align-right { + margin-left: auto; + } + } + + &-action-button:focus-visible:not(.pb-focus-managed) { + // to get contrast since button background and focus ring are both blue + outline-offset: 4px; } }