Skip to content

Commit 47d9eb9

Browse files
tiagobentotiagobento
authored
kie-issues#944: On the DMN Editor, all buttons that have no displayed text should have a title. (#2163)
1 parent a93715f commit 47d9eb9

17 files changed

+56
-21
lines changed

‎packages/dmn-editor/src/autolayout/AutolayoutButton.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -510,7 +510,7 @@ export function AutolayoutButton() {
510510
}, [dmnEditorStoreApi, externalModelsByNamespace, isAlternativeInputDataShape]);
511511

512512
return (
513-
<button className={"kie-dmn-editor--autolayout-panel-toggle-button"} onClick={onApply}>
513+
<button className={"kie-dmn-editor--autolayout-panel-toggle-button"} onClick={onApply} title={"Autolayout (beta)"}>
514514
<OptimizeIcon />
515515
</button>
516516
);

‎packages/dmn-editor/src/boxedExpressions/BoxedExpression.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -321,6 +321,7 @@ export function BoxedExpression({ container }: { container: React.RefObject<HTML
321321
>
322322
<button
323323
className={"kie-dmn-editor--properties-panel-toggle-button"}
324+
title={"Properties panel"}
324325
onClick={() => {
325326
dmnEditorStoreApi.setState((state) => {
326327
state.boxedExpressionEditor.propertiesPanel.isOpen =

‎packages/dmn-editor/src/dataTypes/ConstraintsEnum.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -164,6 +164,7 @@ export function ConstraintsEnum({
164164
</div>
165165
</div>
166166
<Button
167+
title={"Add enum value"}
167168
onClick={() => onAdd()}
168169
variant={ButtonVariant.link}
169170
icon={<PlusCircleIcon />}
@@ -225,6 +226,7 @@ function EnumElement({
225226
})}
226227

227228
<Button
229+
title={"Remove enum value"}
228230
ref={removeButtonRef}
229231
style={{ opacity: hovered ? "100%" : "0" }}
230232
className={"kie-dmn-editor--documentation-link--row-remove"}

‎packages/dmn-editor/src/dataTypes/DataTypes.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -164,6 +164,9 @@ export function DataTypes() {
164164

165165
const [isAddDataTypeDropdownOpen, setAddDataTypeDropdownOpen] = useState(false);
166166

167+
// Using this object because DropdownToggleAction's props doesn't accept a 'title'.
168+
const extraPropsForDropdownToggleAction = { title: "New Data Type" };
169+
167170
return (
168171
<>
169172
{(dataTypesTree.length <= 0 && (
@@ -197,6 +200,7 @@ export function DataTypes() {
197200
id="add-data-type-toggle"
198201
splitButtonItems={[
199202
<DropdownToggleAction
203+
{...extraPropsForDropdownToggleAction}
200204
key="add-data-type-action"
201205
aria-label="Add Data Type"
202206
onClick={() =>

‎packages/dmn-editor/src/dataTypes/ItemComponentsTable.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -154,6 +154,7 @@ export function ItemComponentsTable({
154154
{`Properties in '${parent.itemDefinition["@_name"]}'`}
155155
{!isReadonly && (
156156
<Button
157+
title={"Add item component (at the top)"}
157158
variant={ButtonVariant.link}
158159
onClick={() =>
159160
addItemComponent(parent.itemDefinition["@_id"]!, "unshift", {
@@ -316,6 +317,7 @@ export function ItemComponentsTable({
316317
>
317318
{isStruct(dt.itemDefinition) && (
318319
<Button
320+
title={"Expand / collapse item component"}
319321
variant={ButtonVariant.link}
320322
style={{ padding: "0 8px 0 0" }}
321323
onClick={(e) =>
@@ -340,6 +342,7 @@ export function ItemComponentsTable({
340342
<div style={{ width: `${addItemComponentButtonWidthInPxs}px` }}>
341343
{!isReadonly && isStruct(dt.itemDefinition) && (
342344
<Button
345+
title={"Add item component"}
343346
variant={ButtonVariant.link}
344347
style={{ padding: "0 8px 0 0" }}
345348
onClick={() => {

‎packages/dmn-editor/src/dataTypes/TypeRefSelector.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -115,6 +115,7 @@ export function TypeRefSelector({
115115
{selectedDataType?.itemDefinition && (
116116
<Tooltip content="Jump to definition" appendTo={() => document.getElementById(id)!}>
117117
<Button
118+
title={"Jump to definition"}
118119
className={"kie-dmn-editor--data-type-jump-to-definition"}
119120
variant={ButtonVariant.control}
120121
onClick={(e) =>

‎packages/dmn-editor/src/diagram/Diagram.tsx

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1190,6 +1190,7 @@ function DmnDiagramEmptyState({
11901190
>
11911191
<div className={"kie-dmn-editor--diagram-empty-state"}>
11921192
<Button
1193+
title={"Close"}
11931194
style={{
11941195
position: "absolute",
11951196
top: "8px",
@@ -1198,7 +1199,7 @@ function DmnDiagramEmptyState({
11981199
variant={ButtonVariant.plain}
11991200
icon={<TimesIcon />}
12001201
onClick={() => setShowEmptyState(false)}
1201-
></Button>
1202+
/>
12021203

12031204
<EmptyState>
12041205
<EmptyStateIcon icon={MousePointerIcon} />
@@ -1383,14 +1384,22 @@ export function TopRightCornerPanels() {
13831384
isVisible={diagram.overlaysPanel.isOpen}
13841385
bodyContent={<OverlaysPanel />}
13851386
>
1386-
<button className={"kie-dmn-editor--overlays-panel-toggle-button"} onClick={toggleOverlaysPanel}>
1387+
<button
1388+
className={"kie-dmn-editor--overlays-panel-toggle-button"}
1389+
onClick={toggleOverlaysPanel}
1390+
title={"Overlays"}
1391+
>
13871392
<VirtualMachineIcon size={"sm"} />
13881393
</button>
13891394
</Popover>
13901395
</aside>
13911396
{!diagram.propertiesPanel.isOpen && (
13921397
<aside className={"kie-dmn-editor--properties-panel-toggle"}>
1393-
<button className={"kie-dmn-editor--properties-panel-toggle-button"} onClick={togglePropertiesPanel}>
1398+
<button
1399+
className={"kie-dmn-editor--properties-panel-toggle-button"}
1400+
onClick={togglePropertiesPanel}
1401+
title={"Properties panel"}
1402+
>
13941403
<InfoIcon size={"sm"} />
13951404
</button>
13961405
</aside>

‎packages/dmn-editor/src/diagram/DrdSelectorPanel.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@ export function DrdSelectorPanel() {
6464
<Text component="h3">DRDs</Text>
6565
</TextContent>
6666
<Button
67+
title={"New DRD"}
6768
variant={ButtonVariant.link}
6869
onClick={() => {
6970
dmnEditorStoreApi.setState((state) => {

‎packages/dmn-editor/src/diagram/DrgNodesPanel.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,7 @@ export function DrgNodesPanel() {
8787
<Text component="h3">DRG Nodes</Text>
8888
</TextContent>
8989
<Button
90+
title={"Close"}
9091
variant={ButtonVariant.plain}
9192
onClick={() =>
9293
dmnEditorStoreApi.setState((state) => {

‎packages/dmn-editor/src/diagram/Palette.tsx

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -136,7 +136,7 @@ export function Palette({ pulse }: { pulse: boolean }) {
136136
bodyContent={<DrdSelectorPanel />}
137137
/>
138138
<button
139-
title="DRD selector"
139+
title={"Select or edit DRD"}
140140
onClick={() => {
141141
dmnEditorStoreApi.setState((state) => {
142142
state.diagram.openLhsPanel =
@@ -154,39 +154,39 @@ export function Palette({ pulse }: { pulse: boolean }) {
154154
<div ref={nodesPalletePopoverRef} style={{ position: "absolute", left: 0, height: 0, zIndex: -1 }} />
155155
<aside className={`kie-dmn-editor--palette ${pulse ? "pulse" : ""}`}>
156156
<div
157-
title="Input Data"
157+
title={"Input Data"}
158158
className={"kie-dmn-editor--palette-button dndnode input-data"}
159159
onDragStart={(event) => onDragStart(event, NODE_TYPES.inputData)}
160160
draggable={true}
161161
>
162162
{isAlternativeInputDataShape ? <AlternativeInputDataIcon /> : <InputDataIcon />}
163163
</div>
164164
<div
165-
title="Decision"
165+
title={"Decision"}
166166
className={"kie-dmn-editor--palette-button dndnode decision"}
167167
onDragStart={(event) => onDragStart(event, NODE_TYPES.decision)}
168168
draggable={true}
169169
>
170170
<DecisionIcon />
171171
</div>
172172
<div
173-
title="Business Knowledge Model"
173+
title={"Business Knowledge Model"}
174174
className={"kie-dmn-editor--palette-button dndnode bkm"}
175175
onDragStart={(event) => onDragStart(event, NODE_TYPES.bkm)}
176176
draggable={true}
177177
>
178178
<BkmIcon />
179179
</div>
180180
<div
181-
title="Knowledge Source"
181+
title={"Knowledge Source"}
182182
className={"kie-dmn-editor--palette-button dndnode knowledge-source"}
183183
onDragStart={(event) => onDragStart(event, NODE_TYPES.knowledgeSource)}
184184
draggable={true}
185185
>
186186
<KnowledgeSourceIcon />
187187
</div>
188188
<div
189-
title="Decision Service"
189+
title={"Decision Service"}
190190
className={"kie-dmn-editor--palette-button dndnode decision-service"}
191191
onDragStart={(event) => onDragStart(event, NODE_TYPES.decisionService)}
192192
draggable={true}
@@ -197,7 +197,7 @@ export function Palette({ pulse }: { pulse: boolean }) {
197197
<br />
198198
<aside className={`kie-dmn-editor--palette ${pulse ? "pulse" : ""}`}>
199199
<div
200-
title="Group"
200+
title={"Group"}
201201
className={"kie-dmn-editor--palette-button dndnode group"}
202202
onDragStart={(event) => onDragStart(event, NODE_TYPES.group)}
203203
draggable={true}
@@ -206,7 +206,7 @@ export function Palette({ pulse }: { pulse: boolean }) {
206206
<GroupIcon />
207207
</div>
208208
<div
209-
title="Text Annotation"
209+
title={"Text Annotation"}
210210
className={"kie-dmn-editor--palette-button dndnode text-annotation"}
211211
onDragStart={(event) => onDragStart(event, NODE_TYPES.textAnnotation)}
212212
draggable={true}
@@ -222,7 +222,7 @@ export function Palette({ pulse }: { pulse: boolean }) {
222222
</div>
223223
)}
224224
<button
225-
title="DRG nodes"
225+
title={"DRG nodes"}
226226
className={`kie-dmn-editor--drg-panel-toggle-button ${
227227
diagram.openLhsPanel === DiagramLhsPanel.DRG_NODES ? "active" : ""
228228
}`}
@@ -247,7 +247,7 @@ export function Palette({ pulse }: { pulse: boolean }) {
247247
)}
248248

249249
<button
250-
title="External nodes"
250+
title={"External nodes"}
251251
className={`kie-dmn-editor--external-nodes-panel-toggle-button ${
252252
diagram.openLhsPanel === DiagramLhsPanel.EXTERNAL_NODES ? "active" : ""
253253
}`}

‎packages/dmn-editor/src/externalNodes/ExternalNodesPanel.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@ export function ExternalNodesPanel() {
9191
})
9292
}
9393
>
94-
Included model...
94+
Include model...
9595
</Button>
9696
</EmptyStatePrimary>
9797
</EmptyState>
@@ -105,6 +105,7 @@ export function ExternalNodesPanel() {
105105
<Text component="h3">External nodes</Text>
106106
</TextContent>
107107
<Button
108+
title={"Close"}
108109
variant={ButtonVariant.plain}
109110
onClick={() =>
110111
dmnEditorStoreApi.setState((state) => {

‎packages/dmn-editor/src/propertiesPanel/DocumentationLinksFormGroup.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -202,7 +202,9 @@ export function DocumentationLinksFormGroup({
202202
<label className={"pf-c-form__label"} style={{ flexGrow: 1, cursor: "auto" }}>
203203
<span className={"pf-c-form__label-text"}>Documentation links</span>
204204
</label>
205-
{!isReadonly && <Button variant={"plain"} icon={<PlusCircleIcon />} onClick={onAdd} />}
205+
{!isReadonly && (
206+
<Button variant={"plain"} icon={<PlusCircleIcon />} onClick={onAdd} title={"Add documentation link"} />
207+
)}
206208
</div>
207209
}
208210
>
@@ -333,6 +335,7 @@ function DocumentationLinksInput({
333335
<React.Fragment>
334336
<div className={"kie-dmn-editor--documentation-link--row"}>
335337
<Button
338+
title={"Expand / collapse documentation link"}
336339
variant={ButtonVariant.plain}
337340
className={"kie-dmn-editor--documentation-link--row-expand-toogle"}
338341
onClick={() => toogleExpanded(title, url)}
@@ -417,6 +420,7 @@ function DocumentationLinksInput({
417420
{hovered && (
418421
<Tooltip content={removeTooltip}>
419422
<Button
423+
title={"Remove documentation link"}
420424
className={"kie-dmn-editor--documentation-link--row-remove"}
421425
variant={"plain"}
422426
icon={<TimesIcon />}

‎packages/dmn-editor/src/propertiesPanel/FontOptions.tsx

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -275,11 +275,14 @@ export function FontOptions({ startExpanded, nodeIds }: { startExpanded: boolean
275275
toogleSectionExpanded={() => setStyleSectionExpanded((prev) => !prev)}
276276
title={"Font"}
277277
action={
278-
<Tooltip content={"Reset"}>
279-
<Button variant={ButtonVariant.plain} onClick={() => onReset()} style={{ paddingBottom: 0, paddingTop: 0 }}>
280-
<UndoAltIcon />
281-
</Button>
282-
</Tooltip>
278+
<Button
279+
variant={ButtonVariant.plain}
280+
onClick={() => onReset()}
281+
style={{ paddingBottom: 0, paddingTop: 0 }}
282+
title={"Reset font"}
283+
>
284+
<UndoAltIcon />
285+
</Button>
283286
}
284287
/>
285288
{isStyleSectionExpanded && (

‎packages/dmn-editor/src/propertiesPanel/GlobalDiagramProperties.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@ export function GlobalDiagramProperties() {
5555
title={"Global properties"}
5656
action={
5757
<Button
58+
title={"Close"}
5859
variant={ButtonVariant.plain}
5960
onClick={() => {
6061
dmnEditorStoreApi.setState((state) => {
@@ -134,6 +135,7 @@ export function GlobalDiagramProperties() {
134135
title={"ID & Namespace"}
135136
action={
136137
<Button
138+
title={"Re-generate ID & Namespace"}
137139
variant={ButtonVariant.plain}
138140
onClick={() => setRegenerateIdConfirmationModal(true)}
139141
style={{ paddingBottom: 0, paddingTop: 0 }}

‎packages/dmn-editor/src/propertiesPanel/MultipleNodeProperties.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@ export function MultipleNodeProperties({ nodeIds }: { nodeIds: string[] }) {
5757
}
5858
action={
5959
<Button
60+
title={"Close"}
6061
variant={ButtonVariant.plain}
6162
onClick={() => {
6263
dmnEditorStoreApi.setState((state) => {

‎packages/dmn-editor/src/propertiesPanel/PropertiesPanelHeader.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@ export function PropertiesPanelHeader(props: {
5656
{props.expands && (
5757
<div className={"kie-dmn-editor--properties-panel-header-toogle-expanded"}>
5858
<Button
59+
title={"Expand / collapse documentation link"}
5960
variant={ButtonVariant.plain}
6061
className={"kie-dmn-editor--documentation-link--row-expand-toogle"}
6162
onClick={() => props.toogleSectionExpanded?.()}

‎packages/dmn-editor/src/propertiesPanel/SingleNodeProperties.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -109,6 +109,7 @@ export function SingleNodeProperties({ nodeId }: { nodeId: string }) {
109109
})()}
110110
action={
111111
<Button
112+
title={"Close"}
112113
variant={ButtonVariant.plain}
113114
onClick={() => {
114115
dmnEditorStoreApi.setState((state) => {

0 commit comments

Comments
 (0)