feat: Update version to 1.0.5, remove people count label, and enhance toggle icons in Organization Chart

README.md

@@ -14,6 +14,7 @@ SPFx-1.4.1-WebPart für SharePoint Server Subscription Edition. Es erstellt aus
 - Verlinkung auf die SharePoint-Profilseite
 - kurzzeitiger In-Memory-Profilcache zur Reduzierung wiederholter REST-Aufrufe
 - responsive Baumdarstellung mit SharePoint-Themefarben
+- durchgehende Verbindungslinien und SharePoint-Chevrons zum Auf- und Zuklappen
 
 ## Datenquelle und Voraussetzungen
 

config/package-solution.json

@@ -4,7 +4,7 @@
     "name": "organization-chart-webpart",
     "title": "organization-chart-webpart",
     "id": "b2f88ea8-f7da-4d0e-a945-6973bf1acd1e",
-    "version": "1.0.4.0",
+    "version": "1.0.5.0",
     "includeClientSideAssets": true,
     "skipFeatureDeployment": true
   },

package.json

@@ -1,6 +1,6 @@
 {
   "name": "organization-chart-webpart",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "private": true,
   "main": "lib/index.js",
   "engines": { "node": ">=6.9.0 <9.0.0" },

src/webparts/organizationChart/OrganizationChartWebPart.ts

@@ -64,8 +64,7 @@ export default class OrganizationChartWebPart extends BaseClientSideWebPart<IOrg
         reportsLabel: strings.ReportsLabel,
         collapseLabel: strings.CollapseLabel,
         expandLabel: strings.ExpandLabel,
-        truncatedLabel: strings.TruncatedLabel,
+        truncatedLabel: strings.TruncatedLabel
-        peopleCountLabel: strings.PeopleCountLabel
       });
       const contentHost: HTMLDivElement = this.prepareSurface(data.root.profile.displayName);
       ReactDom.render(element, contentHost);

src/webparts/organizationChart/components/IOrganizationChartProps.ts

@@ -9,5 +9,4 @@ export interface IOrganizationChartProps {
   collapseLabel: string;
   expandLabel: string;
   truncatedLabel: string;
-  peopleCountLabel: string;
 }

src/webparts/organizationChart/components/OrganizationChart.module.scss

@@ -9,7 +9,6 @@
 .pickerDescription { color: "[theme:neutralSecondary, default:#605e5c]"; font-size: 12px; line-height: 17px; margin-top: 6px; }
 .header { align-items: baseline; display: flex; justify-content: space-between; margin-bottom: 12px; }
 .heading { font-size: 24px; font-weight: 300; line-height: 32px; margin: 0; }
-.count { color: "[theme:neutralSecondary, default:#605e5c]"; font-size: 12px; }
 .notice { background: "[theme:neutralLighter, default:#f3f2f1]"; border-left: 3px solid "[theme:themePrimary, default:#0078d4]"; margin-bottom: 12px; padding: 8px 12px; }
 .viewport { overflow: auto; padding: 4px 4px 24px; }
 .tree { display: table; margin: 0 auto; min-width: max-content; }
@@ -20,7 +19,7 @@
 .tree li::before, .tree li::after { border-top: 1px solid "[theme:neutralTertiary, default:#a19f9d]"; content: ''; height: 22px; position: absolute; right: 50%; top: 0; width: 50%; }
 .tree li::after { border-left: 1px solid "[theme:neutralTertiary, default:#a19f9d]"; left: 50%; right: auto; }
 .tree li:only-child::before, .tree li:only-child::after { display: none; }
-.tree li:only-child { padding-top: 22px; }
+.tree li:only-child { padding-top: 0; }
 .tree > ul > li:only-child { padding-top: 0; }
 .tree li:first-child::before, .tree li:last-child::after { border: 0; }
 .tree li:last-child::before { border-right: 1px solid "[theme:neutralTertiary, default:#a19f9d]"; border-radius: 0 4px 0 0; }
@@ -49,8 +48,10 @@
 .jobTitle, .department, .email, .location { color: "[theme:neutralSecondary, default:#605e5c]"; display: block; font-size: 12px; line-height: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .email { color: "[theme:themePrimary, default:#0078d4]"; }
 .reportCount { bottom: 8px; color: "[theme:neutralSecondary, default:#605e5c]"; font-size: 11px; position: absolute; right: 10px; }
-.toggle { background: "[theme:white, default:#ffffff]"; border: 1px solid "[theme:neutralTertiary, default:#a19f9d]"; border-radius: 50%; bottom: -11px; color: "[theme:themePrimary, default:#0078d4]"; cursor: pointer; font-size: 16px; height: 23px; left: calc(50% - 11px); line-height: 18px; padding: 0; position: absolute; width: 23px; z-index: 2; }
+.toggle { align-items: center; background: "[theme:white, default:#ffffff]"; border: 1px solid "[theme:neutralTertiary, default:#a19f9d]"; border-radius: 50%; bottom: -14px; color: "[theme:themePrimary, default:#0078d4]"; cursor: pointer; display: flex; height: 28px; justify-content: center; left: calc(50% - 14px); padding: 0; position: absolute; width: 28px; z-index: 2; }
 .toggle:hover, .toggle:focus { background: "[theme:neutralLighter, default:#f3f2f1]"; outline: none; }
+.toggle:focus { box-shadow: 0 0 0 2px "[theme:focusBorder, default:#605e5c]"; }
+.toggleIcon { font-family: 'FabricMDL2Icons'; font-size: 12px; line-height: 1; }
 .status { color: "[theme:bodyText, default:#323130]"; padding: 16px; }
 .error { color: "[theme:errorText, default:#a80000]"; padding: 16px; }
 
@@ -61,5 +62,5 @@
   .tree li::before, .tree li::after, .tree ul ul::before { display: none; }
   .tree > ul > li, .tree li:only-child { padding-top: 0; }
   .personCard { max-width: 100%; width: 260px; }
-  .toggle { bottom: auto; left: -11px; top: 36px; }
+  .toggle { bottom: auto; left: -14px; top: 34px; }
 }

src/webparts/organizationChart/components/OrganizationChart.tsx

@@ -18,9 +18,6 @@ export default class OrganizationChart extends React.Component<IOrganizationChar
       <section className={styles.organizationChart} aria-label={this.props.title}>
         <div className={styles.header}>
           {this.props.title && <h2 className={styles.heading}>{this.props.title}</h2>}
-          <span className={styles.count}>
-            {this.props.peopleCountLabel.replace('{0}', String(this.props.data.peopleCount))}
-          </span>
         </div>
         {this.props.data.truncated && <div className={styles.notice} role='status'>{this.props.truncatedLabel}</div>}
         <div className={styles.viewport}>
@@ -46,7 +43,9 @@ export default class OrganizationChart extends React.Component<IOrganizationChar
             title={collapsed ? this.props.expandLabel : this.props.collapseLabel}
             aria-label={(collapsed ? this.props.expandLabel : this.props.collapseLabel) + ': ' + profile.displayName}
             aria-expanded={!collapsed} onClick={(): void => this.toggle(key)}>
-            {collapsed ? '+' : '−'}
+            {collapsed
+              ? <span className={styles.toggleIcon} aria-hidden='true'>&#xE70D;</span>
+              : <span className={styles.toggleIcon} aria-hidden='true'>&#xE70E;</span>}
           </button>}
         </div>
         {hasChildren && !collapsed &&

tests/validate-project.js

@@ -43,6 +43,10 @@ assert(component.indexOf("role='tree'") >= 0 && component.indexOf("role='treeite
   'Accessible tree semantics are missing.');
 assert(component.indexOf('aria-expanded') >= 0 && component.indexOf('aria-selected={false}') >= 0,
   'Accessible tree state is missing.');
+assert(component.indexOf('peopleCountLabel') < 0 && component.indexOf('&#xE70D;') >= 0 &&
+  component.indexOf('&#xE70E;') >= 0, 'Header count removal or modern toggle icons are missing.');
+assert(styles.indexOf('.tree li:only-child { padding-top: 0; }') >= 0,
+  'Single-child connector spacing must remain continuous.');
 assert(component.indexOf("role='presentation'") >= 0, 'Decorative profile images must be hidden from assistive technology.');
 ['bodyText', 'neutralSecondary', 'neutralLighter', 'themePrimary', 'neutralTertiary', 'white', 'neutralLight', 'focusBorder', 'errorText']
   .forEach(function(slot) {