[cm6] use tooltips on disabled toolbar buttons (#13678)

* [cm6] use tooltips on disabled toolbar buttons

* not-allowed cursor

* prettier

* fix css selector

GitOrigin-RevId: f9c61fdabb1141daa2bde76aa4e3cd4da60e029e
This commit is contained in:
Domagoj Kriskovic 2023-07-10 15:31:26 +02:00 committed by Copybot
parent b0d994575d
commit 7487f37bc1
2 changed files with 6 additions and 5 deletions

View file

@ -53,10 +53,10 @@ export const ToolbarButton = memo<{
className={classnames('ol-cm-toolbar-button', className, { hidden })}
aria-label={label}
onMouseDown={handleMouseDown}
onClick={handleClick}
onClick={!disabled ? handleClick : undefined}
bsStyle={null}
active={active}
disabled={disabled}
aria-disabled={disabled}
type="button"
>
{textIcon ? icon : <Icon type={icon} fw accessibilityLabel={label} />}

View file

@ -125,15 +125,16 @@ export const toolbarPanel = () => [
backgroundColor: 'rgba(125, 125, 125, 0.1)',
color: 'inherit',
boxShadow: 'none',
'&[disabled]': {
'&[aria-disabled="true"]': {
opacity: '0.2',
},
},
'&.active, &:active': {
backgroundColor: 'rgba(125, 125, 125, 0.2)',
},
'&[disabled]': {
'&[aria-disabled="true"]': {
opacity: '0.2',
cursor: 'not-allowed',
},
'.overflow-hidden &': {
display: 'none',
@ -152,7 +153,7 @@ export const toolbarPanel = () => [
'&.active, &:active': {
backgroundColor: 'rgba(125, 125, 125, 0.4)',
},
'&[disabled]': {
'&[aria-disabled="true"]': {
opacity: 0.2,
},
},