What’s New in Guideline Version 1.124

<div> <div>Topic</div> <div>Update</div> <div>Topic Link</div> </div> <div> <div><strong>AI Design Roadmap</strong></div> <div>Roadmap updates for Q2/Q3 2024.</div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Ffoundations%2Fai-and-joule-design%2Foverview%2Fai-design-roadmap">AI Design Roadmap</a></div> </div> <div> <div><strong>AI Notice</strong></div> <div> <p>The AI notice text has been simplified. There are now only two variants for indicating AI involvement:</p> <ul> <li>Hosted by SAP: <strong>Created with AI</strong></li> <li>Embedded third-party AI services: <strong>Created with <…> AI</strong></li> </ul> <p>The AI notice text will no longer reference the AI experience (Joule digital assistant or embedded AI features).</p> </div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fai-notice%2F">AI Notice</a></div> </div> <div> <div><strong>AI UI Text</strong></div> <div>Specific guidelines for texts used in AI interactions, including descriptions, explanations, instructions, and error messages.</div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Ffoundations%2Fwriting-and-wording%2Fux-writing%2Fai-ui-text">AI UI Text</a></div> </div> <div> <div><strong>Contact Us</strong></div> <div>Please submit any feedback for improvements via Jira.<br><a href="https%3A%2F%2Fsap.sharepoint.com%2Fsites%2F204212%2FSitePages%2F02%2520Overview%2520-%2520Design%2520System%2520Services.aspx">Jira Requests</a></div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Ffoundations%2Fai-and-joule-design%2Fai-design-contact-us">Contact Us</a></div> </div> <div> <div><strong>Recommendations</strong></div> <div>We are no longer using confidence levels for recommendations.</div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Ffoundations%2Fai-and-joule-design%2Fguidelines%2Frecommendations">Recommendations</a></div> </div>

<div> <div>Topic</div> <div>Update</div> <div>Topic Link</div> </div> <div> <div><strong>Recommendations</strong></div> <div>We are no longer using confidence levels for recommendations.</div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Ffoundations%2Fai-and-joule-design%2Fguidelines%2Frecommendations">Recommendations</a></div> </div>

<div> <div>Topic</div> <div>Update</div> <div>Topic Link</div> </div> <div> <div> <p><strong>List</strong></p> <p><strong>Planning Calendar</strong></p> <p><strong>Single Planning Calendar</strong></p> <p><strong>Tree</strong></p> </div> <div><strong>Drag and Drop</strong>: To comply with the new <a href="https%3A%2F%2Fwww.w3.org%2FTR%2FWCAG22%2F">WCAG 2.2</a> accessibility standard, these controls must offer an alternative to the drag and drop feature.</div> <div> <p><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Flist-overview%2F%23drag-and-drop1">List</a></p> <p><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fplanning-calendar%2F%23drag-and-drop">Planning Calendar</a></p> <p><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fsingle-planning-calendar%2F%23drag-and-drop">Single Planning Calendar</a></p> <p><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Ftree%2F%23drag-and-drop1">Tree</a></p> </div> </div> <div> <div><strong>Object Display Components</strong></div> <div><strong>Spacing</strong>: If the display component is interactive, ensure minimum spacing of 24 x 24 px around the display component. This space should not overlap or intersect with the target areas of any other components. The minimum target size is required to comply with the <a href="https%3A%2F%2Fwww.w3.org%2FTR%2FWCAG22%2F%23target-size-enhanced">WCAG 2.2</a> accessibility standard.</div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fobject-display-elements%2F">Object Display Components</a></div> </div>

<div> <div>Topic</div> <div>Update</div> <div>Topic Link</div> </div> <div> <div><strong>Color Picker <em>NEW</em></strong></div> <div>Guideline for the web component implementation of the color picker.</div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fcolor-picker-web-component%2F">Color Picker</a></div> </div> <div> <div><strong>States <em>NEW</em></strong></div> <div> <p>We’ve added interaction design foundation guidelines for the following states:</p> <ul> <li>Component states</li> <li>Focus states</li> <li>Interaction states</li> <li>Selection states</li> </ul> <p>In addition, there’s a new article on how states can be combined.</p> <p>You can access all the guidelines on states via the <em>States</em> overview topic, including the existing <em>Value States</em> guideline.</p> </div> <div> <p><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Ffoundations%2Finteraction%2Finteraction-design-foundations-states">States</a></p> <p>(overview)</p> <p><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Ffoundations%2Finteraction%2Fstates%2Finteraction-foundations-component-states">Component States</a><br><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Ffoundations%2Finteraction%2Fstates%2Finteraction-foundations-focus-states">Focus States</a><br><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Ffoundations%2Finteraction%2Fstates%2Finteraction-foundations-interaction-states">Interaction States</a><br><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Ffoundations%2Finteraction%2Fstates%2Finteraction-foundations-selection-states">Selection States</a></p> <p><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Ffoundations%2Finteraction%2Fstates%2Finteraction-foundations-state-combinations">State Combinations</a></p> </div> </div> <div> <div><strong>Text <em>NEW</em></strong></div> <div> <p>Guideline for the web component implementation of the text component.</p> <p>Note: The guideline describes the <strong>target design</strong>. The web component doesn’t yet offer all the specified features.</p> </div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Ftext-web-component%2F">Text</a></div> </div>

<div> <div>Topic</div> <div>Update</div> <div>Topic Link</div> </div> <div> <div><strong>Table Features</strong></div> <div> <p>A generic context menu is activated by default and cannot be deactivated for:</p> <ul> <li>All table types with SAP Fiori elements for OData V2</li> <li>All table types <strong>except</strong> the tree table, with SAP Fiori elements for OData V4</li> </ul> <p>The generic context menu generally behaves like the standard context menu described in the articles for each table type.</p> <p>The context of the menu can be a single row or multiple selected rows.</p> <p>The following action types are available on the generic context menu:</p> <ul> <li><strong>All toolbar actions that become active only if rows are selected</strong></li> </ul> <p>Developers call them “bounded toolbar actions” or “context-dependent actions.”</p> <ul> <li><strong>The “Open in New Tab or Window” action</strong></li> </ul> <p>It allows up to 10 items to be opened in separate tabs or windows depending on the user’s browser settings.</p> <p>Similar to the standard context menu, if a control inside a row is the “click target”, and the control also provides a context menu, the control menu “wins”.</p> </div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fdiscover%2Fframeworks%2Fsap-fiori-elements%2Ftables-and-lists%2Ftable-features-sap-fiori-elements%23generic-context-menu">Table Features (SAP Fiori Elements) – Generic Context Menu</a></div> </div>

<div> <div>Topic</div> <div>Update</div> <div>Topic Link</div> </div> <div> <div><strong>Download Fonts</strong></div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-124%2Fresources%2Flibraries%2Fdownloads%23download-icon-font">SAP icon font</a>: Download files were updated to version <strong>5.8</strong> (Horizon theme) and <strong>4.20</strong> (Quartz theme).</div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fresources%2Flibraries%2Fdownloads">Download Fonts</a></div> </div> <div> <div><strong>SAP Web UI Kit</strong></div> <div>You can see the latest updates to the SAP Web UI Kit in the <a href="https%3A%2F%2Fwww.figma.com%2Fdesign%2FSILcWzK5uFghKun9jx6D7c%2FSAP-Web-UI-Kit%3Fnode-id%3D158498-23264%26t%3DGnuJJnHupKCtabCg-11">change log</a>.</div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fresources%2Flibraries%2Fsap-web-ui-kit">SAP Web UI Kit</a></div> </div> <div> <div><strong>SAP S/4HANNA Web UI Kit</strong></div> <div>The SAP S/4HANA Web UI Kit is now published via the <a href="https%3A%2F%2Fwww.figma.com%2F%40sap">Figma Community</a>. The kit includes both cozy and compact form factors.</div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fresources%2Flibraries%2Fcloud-erp%2Fdesign-stencils-for-figma">SAP S/4HANA Web UI Kit</a></div> </div> <div> <div><strong>Core Design Services – Overview</strong></div> <div>Going forward, all design-related requirements will by handled through the <a href="https%3A%2F%2Fsap.sharepoint.com%2F%3Au%3A%2Fr%2Fsites%2F204212%2FSitePages%2FHome.aspx%3Fcsf%3D1%26web%3D1%26e%3DSaiFlb">SAP Design System InnerSource process for Web</a> and a dedicated set of <a href="https%3A%2F%2Fsap.sharepoint.com%2Fsites%2F204212%2FSitePages%2F02%2520Overview%2520-%2520Design%2520System%2520Services.aspx">services</a>.</div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fsupport%2Fcore-design-services%2Fcore-design-services">Core Design Services</a></div> </div> <div> <div><strong>Supported Components</strong></div> <div>You can now see which common components are supported by the Core Design Services team in the <a href="https%3A%2F%2Fsap.sharepoint.com%2Fsites%2F204212%2FLists%2FInventory%2520Design%2520System%2FAllItems.aspx">SAP Design System Inventory</a> (Classification: “Common”, Owner: “Core Design System”).</div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fsupport%2Fcore-design-services%2Fsupported-components">Supported Components</a></div> </div>

<div> <div>Topic</div> <div>Update</div> <div>Topic Link</div> </div> <div> <div><strong>Download Fonts</strong></div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-124%2Fresources%2Flibraries%2Fdownloads%23download-icon-font">SAP icon font</a>: Download files were updated to version <strong>5.8</strong> (Horizon theme) and <strong>4.20</strong> (Quartz theme).</div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fresources%2Flibraries%2Fdownloads">Download Fonts</a></div> </div> <div> <div><strong>SAP S/4HANNA Web UI Kit</strong></div> <div>The SAP S/4HANA Web UI Kit is now published via the <a href="https%3A%2F%2Fwww.figma.com%2F%40sap">Figma Community</a>. The kit includes both cozy and compact form factors.</div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fresources%2Flibraries%2Fcloud-erp%2Fdesign-stencils-for-figma">SAP S/4HANA Web UI Kit</a></div> </div>