This is an automated email from the ASF dual-hosted git repository.
tiagobento pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/incubator-kie-tools.git
The following commit(s) were added to refs/heads/main by this push:
new 47d9eb913e8 kie-issues#944: On the DMN Editor, all buttons that have
no displayed text should have a title. (#2163)
47d9eb913e8 is described below
commit 47d9eb913e856f9929dd52310d82e0ce92e6aae3
Author: Tiago Bento <[email protected]>
AuthorDate: Wed Feb 21 09:47:14 2024 -0500
kie-issues#944: On the DMN Editor, all buttons that have no displayed text
should have a title. (#2163)
---
.../dmn-editor/src/autolayout/AutolayoutButton.tsx | 2 +-
.../src/boxedExpressions/BoxedExpression.tsx | 1 +
.../dmn-editor/src/dataTypes/ConstraintsEnum.tsx | 2 ++
packages/dmn-editor/src/dataTypes/DataTypes.tsx | 4 ++++
.../dmn-editor/src/dataTypes/ItemComponentsTable.tsx | 3 +++
.../dmn-editor/src/dataTypes/TypeRefSelector.tsx | 1 +
packages/dmn-editor/src/diagram/Diagram.tsx | 15 ++++++++++++---
packages/dmn-editor/src/diagram/DrdSelectorPanel.tsx | 1 +
packages/dmn-editor/src/diagram/DrgNodesPanel.tsx | 1 +
packages/dmn-editor/src/diagram/Palette.tsx | 20 ++++++++++----------
.../src/externalNodes/ExternalNodesPanel.tsx | 3 ++-
.../propertiesPanel/DocumentationLinksFormGroup.tsx | 6 +++++-
.../dmn-editor/src/propertiesPanel/FontOptions.tsx | 13 ++++++++-----
.../src/propertiesPanel/GlobalDiagramProperties.tsx | 2 ++
.../src/propertiesPanel/MultipleNodeProperties.tsx | 1 +
.../src/propertiesPanel/PropertiesPanelHeader.tsx | 1 +
.../src/propertiesPanel/SingleNodeProperties.tsx | 1 +
17 files changed, 56 insertions(+), 21 deletions(-)
diff --git a/packages/dmn-editor/src/autolayout/AutolayoutButton.tsx
b/packages/dmn-editor/src/autolayout/AutolayoutButton.tsx
index 4f706ff887d..17b4a44e0ea 100644
--- a/packages/dmn-editor/src/autolayout/AutolayoutButton.tsx
+++ b/packages/dmn-editor/src/autolayout/AutolayoutButton.tsx
@@ -510,7 +510,7 @@ export function AutolayoutButton() {
}, [dmnEditorStoreApi, externalModelsByNamespace,
isAlternativeInputDataShape]);
return (
- <button className={"kie-dmn-editor--autolayout-panel-toggle-button"}
onClick={onApply}>
+ <button className={"kie-dmn-editor--autolayout-panel-toggle-button"}
onClick={onApply} title={"Autolayout (beta)"}>
<OptimizeIcon />
</button>
);
diff --git a/packages/dmn-editor/src/boxedExpressions/BoxedExpression.tsx
b/packages/dmn-editor/src/boxedExpressions/BoxedExpression.tsx
index 56cda1420ea..1ebcf4cceec 100644
--- a/packages/dmn-editor/src/boxedExpressions/BoxedExpression.tsx
+++ b/packages/dmn-editor/src/boxedExpressions/BoxedExpression.tsx
@@ -321,6 +321,7 @@ export function BoxedExpression({ container }: { container:
React.RefObject<HTML
>
<button
className={"kie-dmn-editor--properties-panel-toggle-button"}
+ title={"Properties panel"}
onClick={() => {
dmnEditorStoreApi.setState((state) => {
state.boxedExpressionEditor.propertiesPanel.isOpen =
diff --git a/packages/dmn-editor/src/dataTypes/ConstraintsEnum.tsx
b/packages/dmn-editor/src/dataTypes/ConstraintsEnum.tsx
index 005dba3069e..da5d47baf35 100644
--- a/packages/dmn-editor/src/dataTypes/ConstraintsEnum.tsx
+++ b/packages/dmn-editor/src/dataTypes/ConstraintsEnum.tsx
@@ -164,6 +164,7 @@ export function ConstraintsEnum({
</div>
</div>
<Button
+ title={"Add enum value"}
onClick={() => onAdd()}
variant={ButtonVariant.link}
icon={<PlusCircleIcon />}
@@ -225,6 +226,7 @@ function EnumElement({
})}
<Button
+ title={"Remove enum value"}
ref={removeButtonRef}
style={{ opacity: hovered ? "100%" : "0" }}
className={"kie-dmn-editor--documentation-link--row-remove"}
diff --git a/packages/dmn-editor/src/dataTypes/DataTypes.tsx
b/packages/dmn-editor/src/dataTypes/DataTypes.tsx
index 575027f2b30..dbdf135e9f9 100644
--- a/packages/dmn-editor/src/dataTypes/DataTypes.tsx
+++ b/packages/dmn-editor/src/dataTypes/DataTypes.tsx
@@ -164,6 +164,9 @@ export function DataTypes() {
const [isAddDataTypeDropdownOpen, setAddDataTypeDropdownOpen] =
useState(false);
+ // Using this object because DropdownToggleAction's props doesn't accept a
'title'.
+ const extraPropsForDropdownToggleAction = { title: "New Data Type" };
+
return (
<>
{(dataTypesTree.length <= 0 && (
@@ -197,6 +200,7 @@ export function DataTypes() {
id="add-data-type-toggle"
splitButtonItems={[
<DropdownToggleAction
+ {...extraPropsForDropdownToggleAction}
key="add-data-type-action"
aria-label="Add Data Type"
onClick={() =>
diff --git a/packages/dmn-editor/src/dataTypes/ItemComponentsTable.tsx
b/packages/dmn-editor/src/dataTypes/ItemComponentsTable.tsx
index afb24f95c13..ee6c54296c3 100644
--- a/packages/dmn-editor/src/dataTypes/ItemComponentsTable.tsx
+++ b/packages/dmn-editor/src/dataTypes/ItemComponentsTable.tsx
@@ -154,6 +154,7 @@ export function ItemComponentsTable({
{`Properties in '${parent.itemDefinition["@_name"]}'`}
{!isReadonly && (
<Button
+ title={"Add item component (at the top)"}
variant={ButtonVariant.link}
onClick={() =>
addItemComponent(parent.itemDefinition["@_id"]!, "unshift", {
@@ -316,6 +317,7 @@ export function ItemComponentsTable({
>
{isStruct(dt.itemDefinition) && (
<Button
+ title={"Expand / collapse item component"}
variant={ButtonVariant.link}
style={{ padding: "0 8px 0 0" }}
onClick={(e) =>
@@ -340,6 +342,7 @@ export function ItemComponentsTable({
<div style={{ width:
`${addItemComponentButtonWidthInPxs}px` }}>
{!isReadonly && isStruct(dt.itemDefinition) && (
<Button
+ title={"Add item component"}
variant={ButtonVariant.link}
style={{ padding: "0 8px 0 0" }}
onClick={() => {
diff --git a/packages/dmn-editor/src/dataTypes/TypeRefSelector.tsx
b/packages/dmn-editor/src/dataTypes/TypeRefSelector.tsx
index 3a05689ec9d..4e01851dd71 100644
--- a/packages/dmn-editor/src/dataTypes/TypeRefSelector.tsx
+++ b/packages/dmn-editor/src/dataTypes/TypeRefSelector.tsx
@@ -115,6 +115,7 @@ export function TypeRefSelector({
{selectedDataType?.itemDefinition && (
<Tooltip content="Jump to definition" appendTo={() =>
document.getElementById(id)!}>
<Button
+ title={"Jump to definition"}
className={"kie-dmn-editor--data-type-jump-to-definition"}
variant={ButtonVariant.control}
onClick={(e) =>
diff --git a/packages/dmn-editor/src/diagram/Diagram.tsx
b/packages/dmn-editor/src/diagram/Diagram.tsx
index 129967d485c..dd84d70cc69 100644
--- a/packages/dmn-editor/src/diagram/Diagram.tsx
+++ b/packages/dmn-editor/src/diagram/Diagram.tsx
@@ -1190,6 +1190,7 @@ function DmnDiagramEmptyState({
>
<div className={"kie-dmn-editor--diagram-empty-state"}>
<Button
+ title={"Close"}
style={{
position: "absolute",
top: "8px",
@@ -1198,7 +1199,7 @@ function DmnDiagramEmptyState({
variant={ButtonVariant.plain}
icon={<TimesIcon />}
onClick={() => setShowEmptyState(false)}
- ></Button>
+ />
<EmptyState>
<EmptyStateIcon icon={MousePointerIcon} />
@@ -1383,14 +1384,22 @@ export function TopRightCornerPanels() {
isVisible={diagram.overlaysPanel.isOpen}
bodyContent={<OverlaysPanel />}
>
- <button className={"kie-dmn-editor--overlays-panel-toggle-button"}
onClick={toggleOverlaysPanel}>
+ <button
+ className={"kie-dmn-editor--overlays-panel-toggle-button"}
+ onClick={toggleOverlaysPanel}
+ title={"Overlays"}
+ >
<VirtualMachineIcon size={"sm"} />
</button>
</Popover>
</aside>
{!diagram.propertiesPanel.isOpen && (
<aside className={"kie-dmn-editor--properties-panel-toggle"}>
- <button
className={"kie-dmn-editor--properties-panel-toggle-button"}
onClick={togglePropertiesPanel}>
+ <button
+ className={"kie-dmn-editor--properties-panel-toggle-button"}
+ onClick={togglePropertiesPanel}
+ title={"Properties panel"}
+ >
<InfoIcon size={"sm"} />
</button>
</aside>
diff --git a/packages/dmn-editor/src/diagram/DrdSelectorPanel.tsx
b/packages/dmn-editor/src/diagram/DrdSelectorPanel.tsx
index 4b1627ee71b..000561984ce 100644
--- a/packages/dmn-editor/src/diagram/DrdSelectorPanel.tsx
+++ b/packages/dmn-editor/src/diagram/DrdSelectorPanel.tsx
@@ -64,6 +64,7 @@ export function DrdSelectorPanel() {
<Text component="h3">DRDs</Text>
</TextContent>
<Button
+ title={"New DRD"}
variant={ButtonVariant.link}
onClick={() => {
dmnEditorStoreApi.setState((state) => {
diff --git a/packages/dmn-editor/src/diagram/DrgNodesPanel.tsx
b/packages/dmn-editor/src/diagram/DrgNodesPanel.tsx
index 29d112f2fea..8efbed5fac1 100644
--- a/packages/dmn-editor/src/diagram/DrgNodesPanel.tsx
+++ b/packages/dmn-editor/src/diagram/DrgNodesPanel.tsx
@@ -87,6 +87,7 @@ export function DrgNodesPanel() {
<Text component="h3">DRG Nodes</Text>
</TextContent>
<Button
+ title={"Close"}
variant={ButtonVariant.plain}
onClick={() =>
dmnEditorStoreApi.setState((state) => {
diff --git a/packages/dmn-editor/src/diagram/Palette.tsx
b/packages/dmn-editor/src/diagram/Palette.tsx
index 02b2538f2dd..6d21a3a2313 100644
--- a/packages/dmn-editor/src/diagram/Palette.tsx
+++ b/packages/dmn-editor/src/diagram/Palette.tsx
@@ -136,7 +136,7 @@ export function Palette({ pulse }: { pulse: boolean }) {
bodyContent={<DrdSelectorPanel />}
/>
<button
- title="DRD selector"
+ title={"Select or edit DRD"}
onClick={() => {
dmnEditorStoreApi.setState((state) => {
state.diagram.openLhsPanel =
@@ -154,7 +154,7 @@ export function Palette({ pulse }: { pulse: boolean }) {
<div ref={nodesPalletePopoverRef} style={{ position: "absolute", left:
0, height: 0, zIndex: -1 }} />
<aside className={`kie-dmn-editor--palette ${pulse ? "pulse" : ""}`}>
<div
- title="Input Data"
+ title={"Input Data"}
className={"kie-dmn-editor--palette-button dndnode input-data"}
onDragStart={(event) => onDragStart(event, NODE_TYPES.inputData)}
draggable={true}
@@ -162,7 +162,7 @@ export function Palette({ pulse }: { pulse: boolean }) {
{isAlternativeInputDataShape ? <AlternativeInputDataIcon /> :
<InputDataIcon />}
</div>
<div
- title="Decision"
+ title={"Decision"}
className={"kie-dmn-editor--palette-button dndnode decision"}
onDragStart={(event) => onDragStart(event, NODE_TYPES.decision)}
draggable={true}
@@ -170,7 +170,7 @@ export function Palette({ pulse }: { pulse: boolean }) {
<DecisionIcon />
</div>
<div
- title="Business Knowledge Model"
+ title={"Business Knowledge Model"}
className={"kie-dmn-editor--palette-button dndnode bkm"}
onDragStart={(event) => onDragStart(event, NODE_TYPES.bkm)}
draggable={true}
@@ -178,7 +178,7 @@ export function Palette({ pulse }: { pulse: boolean }) {
<BkmIcon />
</div>
<div
- title="Knowledge Source"
+ title={"Knowledge Source"}
className={"kie-dmn-editor--palette-button dndnode
knowledge-source"}
onDragStart={(event) => onDragStart(event,
NODE_TYPES.knowledgeSource)}
draggable={true}
@@ -186,7 +186,7 @@ export function Palette({ pulse }: { pulse: boolean }) {
<KnowledgeSourceIcon />
</div>
<div
- title="Decision Service"
+ title={"Decision Service"}
className={"kie-dmn-editor--palette-button dndnode
decision-service"}
onDragStart={(event) => onDragStart(event,
NODE_TYPES.decisionService)}
draggable={true}
@@ -197,7 +197,7 @@ export function Palette({ pulse }: { pulse: boolean }) {
<br />
<aside className={`kie-dmn-editor--palette ${pulse ? "pulse" : ""}`}>
<div
- title="Group"
+ title={"Group"}
className={"kie-dmn-editor--palette-button dndnode group"}
onDragStart={(event) => onDragStart(event, NODE_TYPES.group)}
draggable={true}
@@ -206,7 +206,7 @@ export function Palette({ pulse }: { pulse: boolean }) {
<GroupIcon />
</div>
<div
- title="Text Annotation"
+ title={"Text Annotation"}
className={"kie-dmn-editor--palette-button dndnode
text-annotation"}
onDragStart={(event) => onDragStart(event,
NODE_TYPES.textAnnotation)}
draggable={true}
@@ -222,7 +222,7 @@ export function Palette({ pulse }: { pulse: boolean }) {
</div>
)}
<button
- title="DRG nodes"
+ title={"DRG nodes"}
className={`kie-dmn-editor--drg-panel-toggle-button ${
diagram.openLhsPanel === DiagramLhsPanel.DRG_NODES ? "active" :
""
}`}
@@ -247,7 +247,7 @@ export function Palette({ pulse }: { pulse: boolean }) {
)}
<button
- title="External nodes"
+ title={"External nodes"}
className={`kie-dmn-editor--external-nodes-panel-toggle-button ${
diagram.openLhsPanel === DiagramLhsPanel.EXTERNAL_NODES ?
"active" : ""
}`}
diff --git a/packages/dmn-editor/src/externalNodes/ExternalNodesPanel.tsx
b/packages/dmn-editor/src/externalNodes/ExternalNodesPanel.tsx
index 32c2a1e798c..659d4f7b43f 100644
--- a/packages/dmn-editor/src/externalNodes/ExternalNodesPanel.tsx
+++ b/packages/dmn-editor/src/externalNodes/ExternalNodesPanel.tsx
@@ -91,7 +91,7 @@ export function ExternalNodesPanel() {
})
}
>
- Included model...
+ Include model...
</Button>
</EmptyStatePrimary>
</EmptyState>
@@ -105,6 +105,7 @@ export function ExternalNodesPanel() {
<Text component="h3">External nodes</Text>
</TextContent>
<Button
+ title={"Close"}
variant={ButtonVariant.plain}
onClick={() =>
dmnEditorStoreApi.setState((state) => {
diff --git
a/packages/dmn-editor/src/propertiesPanel/DocumentationLinksFormGroup.tsx
b/packages/dmn-editor/src/propertiesPanel/DocumentationLinksFormGroup.tsx
index b0deae57865..c371201ac5c 100644
--- a/packages/dmn-editor/src/propertiesPanel/DocumentationLinksFormGroup.tsx
+++ b/packages/dmn-editor/src/propertiesPanel/DocumentationLinksFormGroup.tsx
@@ -202,7 +202,9 @@ export function DocumentationLinksFormGroup({
<label className={"pf-c-form__label"} style={{ flexGrow: 1, cursor:
"auto" }}>
<span className={"pf-c-form__label-text"}>Documentation
links</span>
</label>
- {!isReadonly && <Button variant={"plain"} icon={<PlusCircleIcon />}
onClick={onAdd} />}
+ {!isReadonly && (
+ <Button variant={"plain"} icon={<PlusCircleIcon />}
onClick={onAdd} title={"Add documentation link"} />
+ )}
</div>
}
>
@@ -333,6 +335,7 @@ function DocumentationLinksInput({
<React.Fragment>
<div className={"kie-dmn-editor--documentation-link--row"}>
<Button
+ title={"Expand / collapse documentation link"}
variant={ButtonVariant.plain}
className={"kie-dmn-editor--documentation-link--row-expand-toogle"}
onClick={() => toogleExpanded(title, url)}
@@ -417,6 +420,7 @@ function DocumentationLinksInput({
{hovered && (
<Tooltip content={removeTooltip}>
<Button
+ title={"Remove documentation link"}
className={"kie-dmn-editor--documentation-link--row-remove"}
variant={"plain"}
icon={<TimesIcon />}
diff --git a/packages/dmn-editor/src/propertiesPanel/FontOptions.tsx
b/packages/dmn-editor/src/propertiesPanel/FontOptions.tsx
index 0e9ba4418ee..7e0a9118291 100644
--- a/packages/dmn-editor/src/propertiesPanel/FontOptions.tsx
+++ b/packages/dmn-editor/src/propertiesPanel/FontOptions.tsx
@@ -275,11 +275,14 @@ export function FontOptions({ startExpanded, nodeIds }: {
startExpanded: boolean
toogleSectionExpanded={() => setStyleSectionExpanded((prev) => !prev)}
title={"Font"}
action={
- <Tooltip content={"Reset"}>
- <Button variant={ButtonVariant.plain} onClick={() => onReset()}
style={{ paddingBottom: 0, paddingTop: 0 }}>
- <UndoAltIcon />
- </Button>
- </Tooltip>
+ <Button
+ variant={ButtonVariant.plain}
+ onClick={() => onReset()}
+ style={{ paddingBottom: 0, paddingTop: 0 }}
+ title={"Reset font"}
+ >
+ <UndoAltIcon />
+ </Button>
}
/>
{isStyleSectionExpanded && (
diff --git
a/packages/dmn-editor/src/propertiesPanel/GlobalDiagramProperties.tsx
b/packages/dmn-editor/src/propertiesPanel/GlobalDiagramProperties.tsx
index cf12d52da12..0e3b7249508 100644
--- a/packages/dmn-editor/src/propertiesPanel/GlobalDiagramProperties.tsx
+++ b/packages/dmn-editor/src/propertiesPanel/GlobalDiagramProperties.tsx
@@ -55,6 +55,7 @@ export function GlobalDiagramProperties() {
title={"Global properties"}
action={
<Button
+ title={"Close"}
variant={ButtonVariant.plain}
onClick={() => {
dmnEditorStoreApi.setState((state) => {
@@ -134,6 +135,7 @@ export function GlobalDiagramProperties() {
title={"ID & Namespace"}
action={
<Button
+ title={"Re-generate ID & Namespace"}
variant={ButtonVariant.plain}
onClick={() => setRegenerateIdConfirmationModal(true)}
style={{ paddingBottom: 0, paddingTop: 0 }}
diff --git a/packages/dmn-editor/src/propertiesPanel/MultipleNodeProperties.tsx
b/packages/dmn-editor/src/propertiesPanel/MultipleNodeProperties.tsx
index 31815bc8aad..ffbc99caa27 100644
--- a/packages/dmn-editor/src/propertiesPanel/MultipleNodeProperties.tsx
+++ b/packages/dmn-editor/src/propertiesPanel/MultipleNodeProperties.tsx
@@ -57,6 +57,7 @@ export function MultipleNodeProperties({ nodeIds }: {
nodeIds: string[] }) {
}
action={
<Button
+ title={"Close"}
variant={ButtonVariant.plain}
onClick={() => {
dmnEditorStoreApi.setState((state) => {
diff --git a/packages/dmn-editor/src/propertiesPanel/PropertiesPanelHeader.tsx
b/packages/dmn-editor/src/propertiesPanel/PropertiesPanelHeader.tsx
index 7ab8de1754d..197658e1a5c 100644
--- a/packages/dmn-editor/src/propertiesPanel/PropertiesPanelHeader.tsx
+++ b/packages/dmn-editor/src/propertiesPanel/PropertiesPanelHeader.tsx
@@ -56,6 +56,7 @@ export function PropertiesPanelHeader(props: {
{props.expands && (
<div
className={"kie-dmn-editor--properties-panel-header-toogle-expanded"}>
<Button
+ title={"Expand / collapse documentation link"}
variant={ButtonVariant.plain}
className={"kie-dmn-editor--documentation-link--row-expand-toogle"}
onClick={() => props.toogleSectionExpanded?.()}
diff --git a/packages/dmn-editor/src/propertiesPanel/SingleNodeProperties.tsx
b/packages/dmn-editor/src/propertiesPanel/SingleNodeProperties.tsx
index 695efbea223..5c36c900ba6 100644
--- a/packages/dmn-editor/src/propertiesPanel/SingleNodeProperties.tsx
+++ b/packages/dmn-editor/src/propertiesPanel/SingleNodeProperties.tsx
@@ -109,6 +109,7 @@ export function SingleNodeProperties({ nodeId }: { nodeId:
string }) {
})()}
action={
<Button
+ title={"Close"}
variant={ButtonVariant.plain}
onClick={() => {
dmnEditorStoreApi.setState((state) => {
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
