scottyaslan opened a new pull request, #11412: URL: https://github.com/apache/nifi/pull/11412
<!-- Licensed to the Apache Software Foundation (ASF) under one or more --> <!-- contributor license agreements. See the NOTICE file distributed with --> <!-- this work for additional information regarding copyright ownership. --> <!-- The ASF licenses this file to You under the Apache License, Version 2.0 --> <!-- (the "License"); you may not use this file except in compliance with --> <!-- the License. You may obtain a copy of the License at --> <!-- http://www.apache.org/licenses/LICENSE-2.0 --> <!-- Unless required by applicable law or agreed to in writing, software --> <!-- distributed under the License is distributed on an "AS IS" BASIS, --> <!-- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. --> <!-- See the License for the specific language governing permissions and --> <!-- limitations under the License. --> ## Summary Adds `nifi-frontend/src/main/frontend/DESIGN.md` — a machine-readable and human-readable design system reference for the NiFi frontend, following the [google-labs-code/design.md open standard](https://github.com/google-labs-code/design.md). This file gives AI coding agents (Cursor, Copilot, Claude Code, etc.) a single source of truth for NiFi's visual identity and Angular implementation patterns, so they produce correct, consistent UI code without needing to grep through SCSS files or guess from prior context. ## What is DESIGN.md? The [design.md specification](https://github.com/google-labs-code/design.md) defines a standard file format that combines: - **YAML front matter** — machine-readable design tokens (colors, typography, spacing, border radii, component states) with token references between entries - **Markdown body** — human-readable rationale, usage rules, and implementation patterns AI tools that understand this format can read it as a first step before generating any UI code, ensuring all output respects the project's actual design language. ## What the file documents **YAML tokens** (sourced directly from `material.scss` and `_*.scss` component overrides): | Section | Contents | |---------|----------| | `colors` | Full MD3 palette (light mode hex values from `--md-ref-palette-*`), NiFi-specific `--nf-*` canvas and status colors, dark mode overrides | | `typography` | Inter font family, 5 MD3 type scale entries (body-sm → headline) | | `spacing` | 6-step Tailwind-mapped spacing scale (4px → 32px) | | `rounded` | 3 border radius values traced to source SCSS: buttons (4px, `_button.scss`), dialogs (6px, `_dialog.scss`), cards (12px, MD3 default) | | `components` | `button`, `form-field`, `dialog`, `card`, `canvas` with token references (`{colors.primary}`, `{rounded.sm}`) | **Markdown sections:** - **Colors** — MD3 system token mapping table, NiFi-specific `--nf-*` token table, dark mode override values, CodeMirror 6 syntax highlighting tokens - **Typography** — MD3 type scale with NiFi-specific usage notes - **Layout** — Tailwind v4 spacing guide, host element layout rules, `flex-1 min-h-0` fill-height pattern - **Shapes** — Border radius table with source file citations for each value - **Components** — Angular Material button directives, Font Awesome 4.7 icon usage, `NifiSpinnerDirective`, outline form fields with `--nf-*`/`--mat-sys-*` theming pattern - **Implementation Notes** — Technology stack table, key file locations, import alias (`@nifi/shared`), SCSS theming pattern, no-hardcoded-colors rule ## Approach All values are sourced from the actual implementation — no invented or theoretical tokens: - Color hex values read from `libs/shared/src/assets/themes/material.scss` - Border radius values traced to specific overrides in `libs/shared/src/assets/themes/components/_button.scss`, `_dialog.scss` - Where no SCSS override exists, the MD3 default is noted explicitly (e.g., "MD3 default extra-small, no override in `_form-field.scss`") ## Testing Documentation-only change. No runtime code is modified. [NIFI-16096](https://issues.apache.org/jira/browse/NIFI-16096) # Tracking Please complete the following tracking steps prior to pull request creation. ### Issue Tracking - [Apache NiFi Jira](https://issues.apache.org/jira/browse/NIFI) issue created ### Pull Request Tracking - Pull Request title starts with Apache NiFi Jira issue number, such as `NIFI-16096` - Pull Request commit message starts with Apache NiFi Jira issue number, as such `NIFI-16096` - Pull request contains [commits signed](https://docs.github.com/en/authentication/managing-commit-signature-verification/signing-commits) with a registered key indicating `Verified` status ### Pull Request Formatting - Pull Request based on current revision of the `main` branch - Pull Request refers to a feature branch with one commit containing changes # Verification Please indicate the verification steps performed prior to pull request creation. ### Build - [ ] Build completed using `./mvnw clean install -P contrib-check` - [ ] JDK 21 - [ ] JDK 25 ### Licensing - [ ] New dependencies are compatible with the [Apache License 2.0](https://apache.org/licenses/LICENSE-2.0) according to the [License Policy](https://www.apache.org/legal/resolved.html) - [ ] New dependencies are documented in applicable `LICENSE` and `NOTICE` files ### Documentation - [ ] Documentation formatting appears as expected in rendered files -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected]
