Skip to content

Commit b22398b

Browse files
MaheshSripadaMaheshSripada
authored
Merge pull request microsoft#354 from microsoft/beta
Subway Nav Component: Added ability to set individual nodes to any Fl…
2 parents 67eee9e + c8d1d77 commit b22398b

17 files changed

+278
-31
lines changed

‎SubwayNav/README.md

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,9 @@ The control accepts the following properties:
1717
- **Items** - The action items to render
1818
- **ItemKey** - The key to use to indicate which item/step is selected. The keys must be unique.
1919
- **ItemLabel** - Label for the step
20-
- **ItemState** - Specifying the state of the step. Here is the list of State available. Current|NotStarted|Completed|Unsaved|ViewedNotCompleted|Error|CurrentWithSubSteps|Skipped|WizardComplete
21-
20+
- **ItemState** - Specifying the state of the step. Here is the list of State available. Current|NotStarted|Completed|Unsaved|ViewedNotCompleted|Error|CurrentWithSubSteps|Skipped|WizardComplete|Custom
21+
- **ItemIcon** - Will not do anything if ItemState isn't set to Custom. If ItemState is set to Custom, you can input the string value of any FluentUI Icon and it will show up. If the ItemIcon name is invalid, blank or doesn't match any FluentUI Icon's, then it will be set to same Icon as when ItemState is equal to Current.
22+
- **ItemColor** - Will not do anything if ItemState isn't set to Custom. If ItemState is set to Custom, you can input most hexadecimal color codes and that will change the color of the Icon. If the input to this column is invalid, it will default to black. If the input to this column is blank, it will be set to the same color as when ItemState is equal to Current.
2223
- **SubwayNav state** - To mark the overall state of SubwayNav to Complete or Error.
2324

2425
### Style Properties
@@ -142,3 +143,17 @@ Set(varThemeBlueJSON,"{""palette"":{
142143
```
143144

144145
The Theme JSON string is passed to the component property, whilst the varTheme can be used to style other standard components such as buttons using the individual colors.
146+
147+
148+
149+
### Example using Custom Item State
150+
151+
Example of input collection value for Items property
152+
153+
```PowerFx
154+
Table({ItemKey:"1",ItemLabel:"Step 1",ItemState:"Current"},
155+
{ItemKey:"2",ItemLabel:"Step 2",ItemState:"Custom", ItemIcon:"Admin",ItemColor: "teal"},
156+
{ItemKey:"3",ItemLabel:"Step 3",ItemState:"Custom",ItemIcon:"AddTo",ItemColor: "#EE82EE"})
157+
```
158+
159+
You can use either the names of colors or the colors hexadecimal value. However, color hexadecimal value is recommended. If the color name isn't basic, it most likely won't work.

‎SubwayNav/SubwayNav/ControlManifest.Input.xml

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<?xml version="1.0" encoding="utf-8"?>
22
<manifest>
3-
<control namespace="PowerCAT" constructor="SubwayNav" version="1.0.25" display-name-key="SubwayNav" description-key="SubwayNav_Desc" control-type="virtual">
3+
<control namespace="PowerCAT" constructor="SubwayNav" version="1.0.26" display-name-key="SubwayNav" description-key="SubwayNav_Desc" control-type="virtual">
44
<!-- Style Properties -->
55
<property name="Theme" display-name-key="Theme" of-type="Multiple" usage="input" required="false" />
66
<property name="AccessibilityLabel" display-name-key="AccessibilityLabel" of-type="SingleLine.Text" usage="input" required="false" />
@@ -24,6 +24,8 @@
2424
<property-set name="ItemState" display-name-key="Item State" of-type="SingleLine.Text" usage="bound" required="true" />
2525
<property-set name="ItemDisabled" display-name-key="Item Disabled" of-type="TwoOptions" usage="bound" required="false" />
2626
<property-set name="ItemVisuallyDisabled" display-name-key="Item Visually Disabled" of-type="TwoOptions" usage="bound" required="false" />
27+
<property-set name="ItemIcon" display-name-key="Item Icon" of-type="SingleLine.Text" usage="bound" required="false" />
28+
<property-set name="ItemColor" display-name-key="Item Color" of-type="SingleLine.Text" usage="bound" required="false" />
2729
</data-set>
2830
<property name="Steps" display-name-key="Steps" of-type="Object" usage="output"/>
2931
<property name="StepsSchema" display-name-key="StepsSchema" of-type="SingleLine.Text" usage="bound" hidden="true"/>
@@ -37,4 +39,4 @@
3739
<platform-library name="Fluent" version="8.29.0" />
3840
</resources>
3941
</control>
40-
</manifest>
42+
</manifest>

‎SubwayNav/SubwayNav/ManifestConstants.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ export const enum ItemColumns {
88
State = 'ItemState',
99
Disabled = 'ItemDisabled',
1010
VisuallyDisabled = 'ItemVisuallyDisabled',
11+
ItemIcon = 'ItemIcon',
12+
ItemColor = 'ItemColor',
1113
ParentKey = 'ParentItemKey',
1214
}
1315

‎SubwayNav/SubwayNav/__mocks__/mock-datasets.ts

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,9 +29,7 @@ export class MockDataSet implements ComponentFramework.PropertyTypes.DataSet {
2929
linking: ComponentFramework.PropertyHelper.DataSetApi.Linking;
3030
loading: boolean;
3131
paging: ComponentFramework.PropertyHelper.DataSetApi.Paging;
32-
records: {
33-
[id: string]: ComponentFramework.PropertyHelper.DataSetApi.EntityRecord;
34-
};
32+
records: { [id: string]: ComponentFramework.PropertyHelper.DataSetApi.EntityRecord };
3533
sortedRecordIds: string[];
3634
sorting: ComponentFramework.PropertyHelper.DataSetApi.SortStatus[];
3735
clearSelectedRecordIds = jest.fn();

‎SubwayNav/SubwayNav/_test_/__snapshots__/datasetmapping.test.ts.snap

Lines changed: 70 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@ Array [
1414
},
1515
"disabled": undefined,
1616
"id": "1",
17+
"itemColor": undefined,
18+
"itemIcon": undefined,
1719
"key": "Item 1",
1820
"label": "item1",
1921
"parentId": undefined,
@@ -32,6 +34,8 @@ Array [
3234
},
3335
"disabled": undefined,
3436
"id": "2",
37+
"itemColor": undefined,
38+
"itemIcon": undefined,
3539
"key": "Item 2",
3640
"label": "item2",
3741
"parentId": undefined,
@@ -50,6 +54,8 @@ Array [
5054
},
5155
"disabled": undefined,
5256
"id": "3",
57+
"itemColor": undefined,
58+
"itemIcon": undefined,
5359
"key": "Item 3",
5460
"label": "item3",
5561
"parentId": undefined,
@@ -68,6 +74,8 @@ Array [
6874
},
6975
"disabled": undefined,
7076
"id": "4",
77+
"itemColor": undefined,
78+
"itemIcon": undefined,
7179
"key": "Item 4",
7280
"label": "item4",
7381
"parentId": undefined,
@@ -79,15 +87,17 @@ Array [
7987
"getNamedReference": [MockFunction],
8088
"id": "5",
8189
"values": Object {
82-
"ItemKey": "Item 4",
83-
"ItemLabel": "item4",
90+
"ItemKey": "Item 5",
91+
"ItemLabel": "item5",
8492
"ItemState": "Error",
8593
},
8694
},
8795
"disabled": undefined,
8896
"id": "5",
89-
"key": "Item 4",
90-
"label": "item4",
97+
"itemColor": undefined,
98+
"itemIcon": undefined,
99+
"key": "Item 5",
100+
"label": "item5",
91101
"parentId": undefined,
92102
"state": "Error",
93103
"visuallyDisabled": undefined,
@@ -97,15 +107,17 @@ Array [
97107
"getNamedReference": [MockFunction],
98108
"id": "6",
99109
"values": Object {
100-
"ItemKey": "Item 4",
101-
"ItemLabel": "item4",
110+
"ItemKey": "Item 6",
111+
"ItemLabel": "item6",
102112
"ItemState": "Skipped",
103113
},
104114
},
105115
"disabled": undefined,
106116
"id": "6",
107-
"key": "Item 4",
108-
"label": "item4",
117+
"itemColor": undefined,
118+
"itemIcon": undefined,
119+
"key": "Item 6",
120+
"label": "item6",
109121
"parentId": undefined,
110122
"state": "Skipped",
111123
"visuallyDisabled": undefined,
@@ -115,18 +127,64 @@ Array [
115127
"getNamedReference": [MockFunction],
116128
"id": "7",
117129
"values": Object {
118-
"ItemKey": "Item 4",
119-
"ItemLabel": "item4",
130+
"ItemKey": "Item 7",
131+
"ItemLabel": "item7",
120132
"ItemState": "Unsaved",
121133
},
122134
},
123135
"disabled": undefined,
124136
"id": "7",
125-
"key": "Item 4",
126-
"label": "item4",
137+
"itemColor": undefined,
138+
"itemIcon": undefined,
139+
"key": "Item 7",
140+
"label": "item7",
127141
"parentId": undefined,
128142
"state": "Unsaved",
129143
"visuallyDisabled": undefined,
130144
},
145+
Object {
146+
"data": MockEntityRecord {
147+
"getNamedReference": [MockFunction],
148+
"id": "8",
149+
"values": Object {
150+
"ItemColor": "#C8A2C8",
151+
"ItemIcon": "AddFriend",
152+
"ItemKey": "Item 8",
153+
"ItemLabel": "item8",
154+
"ItemState": "Custom",
155+
},
156+
},
157+
"disabled": undefined,
158+
"id": "8",
159+
"itemColor": "#C8A2C8",
160+
"itemIcon": "AddFriend",
161+
"key": "Item 8",
162+
"label": "item8",
163+
"parentId": undefined,
164+
"state": "Custom",
165+
"visuallyDisabled": undefined,
166+
},
167+
Object {
168+
"data": MockEntityRecord {
169+
"getNamedReference": [MockFunction],
170+
"id": "9",
171+
"values": Object {
172+
"ItemColor": "#EE82EE",
173+
"ItemIcon": "AddTo",
174+
"ItemKey": "Item 9",
175+
"ItemLabel": "item8",
176+
"ItemState": "Custom",
177+
},
178+
},
179+
"disabled": undefined,
180+
"id": "9",
181+
"itemColor": "#EE82EE",
182+
"itemIcon": "AddTo",
183+
"key": "Item 9",
184+
"label": "item8",
185+
"parentId": undefined,
186+
"state": "Custom",
187+
"visuallyDisabled": undefined,
188+
},
131189
]
132190
`;

‎SubwayNav/SubwayNav/_test_/__snapshots__/subwaynav-lifecycle.test.ts.snap

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,8 @@ exports[`SubwayNav renders 1`] = `
2020
},
2121
"disabled": undefined,
2222
"id": "1",
23+
"itemColor": undefined,
24+
"itemIcon": undefined,
2325
"key": "Item 1",
2426
"label": "item1",
2527
"parentId": undefined,
@@ -38,6 +40,8 @@ exports[`SubwayNav renders 1`] = `
3840
},
3941
"disabled": undefined,
4042
"id": "2",
43+
"itemColor": undefined,
44+
"itemIcon": undefined,
4145
"key": "Item 2",
4246
"label": "item2",
4347
"parentId": undefined,
@@ -56,6 +60,8 @@ exports[`SubwayNav renders 1`] = `
5660
},
5761
"disabled": undefined,
5862
"id": "3",
63+
"itemColor": undefined,
64+
"itemIcon": undefined,
5965
"key": "Item 3",
6066
"label": "item3",
6167
"parentId": undefined,
@@ -74,6 +80,8 @@ exports[`SubwayNav renders 1`] = `
7480
},
7581
"disabled": undefined,
7682
"id": "4",
83+
"itemColor": undefined,
84+
"itemIcon": undefined,
7785
"key": "Item 4",
7886
"label": "item4",
7987
"parentId": undefined,
@@ -92,6 +100,8 @@ exports[`SubwayNav renders 1`] = `
92100
},
93101
"disabled": undefined,
94102
"id": "5",
103+
"itemColor": undefined,
104+
"itemIcon": undefined,
95105
"key": "Item 4",
96106
"label": "item4",
97107
"parentId": undefined,
@@ -110,6 +120,8 @@ exports[`SubwayNav renders 1`] = `
110120
},
111121
"disabled": undefined,
112122
"id": "6",
123+
"itemColor": undefined,
124+
"itemIcon": undefined,
113125
"key": "Item 4",
114126
"label": "item4",
115127
"parentId": undefined,
@@ -128,12 +140,58 @@ exports[`SubwayNav renders 1`] = `
128140
},
129141
"disabled": undefined,
130142
"id": "7",
143+
"itemColor": undefined,
144+
"itemIcon": undefined,
131145
"key": "Item 4",
132146
"label": "item4",
133147
"parentId": undefined,
134148
"state": "Unsaved",
135149
"visuallyDisabled": undefined,
136150
},
151+
Object {
152+
"data": MockEntityRecord {
153+
"getNamedReference": [MockFunction],
154+
"id": "8",
155+
"values": Object {
156+
"ItemColor": "#C8A2C8",
157+
"ItemIcon": "AddFriend",
158+
"ItemKey": "Item 8",
159+
"ItemLabel": "item8",
160+
"ItemState": "Custom",
161+
},
162+
},
163+
"disabled": undefined,
164+
"id": "8",
165+
"itemColor": "#C8A2C8",
166+
"itemIcon": "AddFriend",
167+
"key": "Item 8",
168+
"label": "item8",
169+
"parentId": undefined,
170+
"state": "Custom",
171+
"visuallyDisabled": undefined,
172+
},
173+
Object {
174+
"data": MockEntityRecord {
175+
"getNamedReference": [MockFunction],
176+
"id": "9",
177+
"values": Object {
178+
"ItemColor": "#EE82EE",
179+
"ItemIcon": "AddTo",
180+
"ItemKey": "Item 9",
181+
"ItemLabel": "item8",
182+
"ItemState": "Custom",
183+
},
184+
},
185+
"disabled": undefined,
186+
"id": "9",
187+
"itemColor": "#EE82EE",
188+
"itemIcon": "AddTo",
189+
"key": "Item 9",
190+
"label": "item8",
191+
"parentId": undefined,
192+
"state": "Custom",
193+
"visuallyDisabled": undefined,
194+
},
137195
]
138196
}
139197
onSelected={[Function]}
@@ -155,27 +213,35 @@ exports[`SubwayNav renders dummy items when no items configured 1`] = `
155213
Array [
156214
Object {
157215
"id": "1",
216+
"itemColor": "",
217+
"itemIcon": "",
158218
"key": "1",
159219
"label": "Node 1",
160220
"parentId": undefined,
161221
"state": "Current",
162222
},
163223
Object {
164224
"id": "2",
225+
"itemColor": "",
226+
"itemIcon": "",
165227
"key": "2",
166228
"label": "Node 2",
167229
"parentId": undefined,
168230
"state": "Not Started",
169231
},
170232
Object {
171233
"id": "3",
234+
"itemColor": "",
235+
"itemIcon": "",
172236
"key": "3",
173237
"label": "Node 3",
174238
"parentId": undefined,
175239
"state": "Not Started",
176240
},
177241
Object {
178242
"id": "4",
243+
"itemColor": "",
244+
"itemIcon": "",
179245
"key": "4",
180246
"label": "Node 4",
181247
"parentId": undefined,

0 commit comments

Comments
 (0)