style(app,protocol-designer,labware-library,opentrons-ai-client): update stylelint #19993

koji · 2025-10-31T17:32:38Z

Overview

update stylelint to the latest v16.25.0

this will improve our CSS code since lint can catch the following case that the version we use couldn't and we can avoid using deprecated CSS properties and invalid CSS property values.

padding: -var(--spacing-2);

The changes I needed are in this doc.

close AUTH-2455

Test Plan and Hands on Testing

Changelog

Review requests

Risk assessment

…ate stylelint to the latest update stylelint to the latest v16.25.0 close AUTH-2455

codecov · 2025-10-31T17:35:11Z

Codecov Report

❌ Patch coverage is 0% with 34 lines in your changes missing coverage. Please review.
✅ Project coverage is 56.87%. Comparing base (6358d6d) to head (798ba39).

Files with missing lines	Patch %	Lines
.stylelintrc.js	0.00%	34 Missing ⚠️

Additional details and impacted files

@@             Coverage Diff             @@
##             edge   #19993       +/-   ##
===========================================
+ Coverage   25.09%   56.87%   +31.77%     
===========================================
  Files        3549     3549               
  Lines      296873   297015      +142     
  Branches    42169    42400      +231     
===========================================
+ Hits        74513   168924    +94411     
+ Misses     222337   127818    -94519     
- Partials       23      273      +250

Flag	Coverage Δ
app	`46.19% <0.00%> (+45.03%)`	⬆️
protocol-designer	`19.18% <0.00%> (-0.01%)`	⬇️
step-generation	`5.46% <0.00%> (-0.01%)`	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines	Coverage Δ
.stylelintrc.js	`0.00% <0.00%> (ø)`

... and 1831 files with indirect coverage changes

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

SyntaxColoring

Thank you thank you!

I noticed a handful of weird things.

SyntaxColoring · 2025-10-31T17:47:11Z

app/src/organisms/Desktop/ProtocolVisualization/Controls/controls.module.css

+  container-name: controls-container;
+  container-type: inline-size;


What does this do?

this is to use container-query for protocol visualization.
initially i started working with this branch for protocol viz but stylelint showed errors to those lines because the version we use doesn't support new CSS properties and noticed that the last update was 6 years ago.
i switched the purpose of this branch.

components/src/atoms/StepMeter/stepmeter.module.css

SyntaxColoring · 2025-10-31T17:55:25Z

components/src/buttons/buttons.module.css

-      /* from legacy --button-disabled */
-      font-weight: normal;
+    /* from legacy --button-disabled */
+    cursor: default;


All of the nesting changes in this file are kind of weird, aren't they? What's going on here?

Especially with the redundant lines:

background-color: color-mod(var(--c-bg-dark) tint(10%)); background-color: color-mod(var(--c-bg-dark) tint(5%));

color: var(--c-font-light); color: var(--c-font-disabled);

SyntaxColoring · 2025-10-31T17:57:44Z

labware-library/src/components/LabwareDetails/styles.module.css


  .well_group_title {
-    margin-left: -var(--spacing-5);
+    margin-left: var(--spacing-5);


Nice catch.

SyntaxColoring · 2025-10-31T17:58:18Z

labware-library/src/components/LabwareList/styles.module.css

+  --link-btn: {;;;
+
+    display: block;;;;
+    width: 100%;;;;
+    padding: 1rem;;;;
+    border-radius: 3px;;;;
+    margin: 1.5rem 0 0.5rem;;;;
+    cursor: pointer;;;;
+    font-family: AkkoPro-Regular, 'Ropa Sans', 'Open Sans', "sans-serif;"";"";";
+    font-size: var(--fs-body-2);;;;
+    text-align: center;;;;


What's going on with all the semicolons here?

they were added by format-css.
i'll remove them.

SyntaxColoring · 2025-10-31T18:00:02Z

labware-library/src/labware-creator/styles.module.css

+      &:hover {
+        background-color: var(--c-blue);
+        background-color: #00f;
+      }
    }

-    &:hover {
-      background-color: #00f;
-    }
+    color: white;
+    color: white;


Same question as before. Weird nesting, and redundant property assignments.

SyntaxColoring · 2025-10-31T18:02:55Z

labware-library/src/styles/spacing.module.css

    position: relative;
+    position: absolute;


Redundant property assignments again.

In this case, can --aspect be deleted entirely? It looks like --aspect-4-3, --aspect-1-1, and --aspect-item were deleted because nothing used them, but I can't find anything that uses --aspect, either.

SyntaxColoring · 2025-10-31T18:03:06Z

labware-library/src/styles/spacing.module.css

+  inset: 0;
 }
+
+/* padding-bottom: 100%; */


Leftover comment?

SyntaxColoring · 2025-10-31T18:05:07Z

.stylelintrc.js

+          'container-name',
+          'container-type',


Nit: Can we add an empty line to separate these from the group above, so it's clear that the // TODO(mc, 2018-02-09) comment doesn't apply to these?

Suggested change

'container-name',

'container-type',

'container-name',

'container-type',

koji · 2025-10-31T19:32:08Z

@SyntaxColoring
thank you for reviewing. i think i trust format-css too much. i'll check labware-library again.

Closes EXEC-2021, EXEC-1954, EXEC-1762, and EXEC-1605

…19978) This PR updates JSON step generation for manual tip selection, which is required for proper state tracking and error handling in the PD application before export. Closes AUTH-2433, Closes AUTH-2443

#19986) Closes EXEC-1993

…EPS actions (#19976) ## Overview This simplifies some of Protocol Designer's code for deleting steps. Goes towards EXEC-2024. ## Details Depending on how you delete a step in Protocol Designer, it either happens through the `DELETE_STEP` Redux action or the `DELETE_MULTIPLE_STEPS` Redux action. The two actions have grown a small inconsistency between them, having to do with how they update the *selected* step. [`DELETE_MULTIPLE_STEPS` tries to automatically select a new step to replace it](https://github.com/Opentrons/opentrons/blob/4cd4ab98bd7fca0f8912f6d66aa31a0736ea67e1/protocol-designer/src/steplist/actions/actions.ts#L73), whereas [`DELETE_STEP` simply clears the selection](https://github.com/Opentrons/opentrons/blob/58619d35ebf4b59f2e69a4d7503d9ead001b3e42/protocol-designer/src/ui/steps/reducers.ts#L86). The algorithm for automatically selecting a new step would get more complicated with the feature of concurrent module actions, so I'm not sure whether we'll choose to preserve that behavior, or the simpler behavior of clearing the selection. But regardless of which behavior we choose, it's nicer if we don't have to keep two actions in sync with each other. So, this removes the `DELETE_STEP` action. Instead, you can just dispatch `DELETE_MULTIPLE_STEPS` with a 1-element list.

…stream on OT-2 (#19975) Covers RQA-4800, RQA-4801 The OT-2 does not have the live stream service, so don't allow it to interface with the service.

Closes EXEC-1606

Closes EXEC-2028

…19990)

* fix(app): fix unnecessary rendering issue on slideouts

# Overview Having more info about Flex log files in the manual is helpful. Also, and perhaps more important, having this in the Flex manual allows us to get rid of another bad Help Center article ([How to download the logs on Opentrons Flex](https://support.opentrons.com/s/article/How-to-download-the-logs-on-Opentrons-Flex)). For this article, we'll repurpose the intro and file download instructions from the Flex service manual, but without all the extra details used by the service techs. See also RTC-824 Sandbox docs: - Top-level section re-org: https://sandbox.docs.opentrons.com/docs-download-log-files/flex/advanced-operation/ - Log files: https://sandbox.docs.opentrons.com/docs-download-log-files/flex/advanced-operation/log-files/ ## Test Plan and Hands on Testing - Work through the instructions to make sure the steps are correct. - Check to ensure images render. ## Changelog On the surface, a simple change or PR: add steps on log file download. I'd recommend some reorganization. This belongs with the other "advanced" operations articles. I'd like to: - Break up the content in `advanced-operations.md` - Make this section a multi-doc section to now include: - An intro: `advanced-operations/index.md` to summarize the sections. - Make the command line / SSH piece a separate file. - Make the Jupyter Notebook a separate file - Add this log file as a separate file ## Review requests Consider the reorg. Is there another place to put this _without_ changing the structure? ## Risk assessment Low, docs changes only. --------- Co-authored-by: Ed Cormany <[email protected]>

… on the camera tab (#19995)

OT-2 utilizes the `eq` equalizer filter fields instead of the `lut` Look-up-table fields of the Flex

#19999) Closes EXEC-2030

…#19996) closes AUTH-2389

### 8.8 release notes placeholder A little something so we can tell in the app we are upgrading on the 8.8 alpha until the actual notes are ready.

### Fix GitHub Actions Slack notification syntax error Problem: GitHub Actions workflows were failing with syntax errors when using the simple-build-alert action: Root Cause: Custom GitHub Actions cannot directly access the secrets context. They must receive secrets as input parameters. Solution: Updated simple-build-alert action to accept webhook_url as an input parameter Updated all 6 workflows that use this action to pass the webhook URL: app-test-build-deploy.yaml ll-test-build-deploy.yaml opentrons-ai-production-deploy.yaml components-test-build-deploy.yaml pd-test-build-deploy.yaml shared-data-test-lint-deploy.yaml Changes: Added webhook_url input parameter to .github/actions/simple-build-alert/action.yml Updated all workflow files to pass webhook_url: ${{ secrets.OT_APP_RELEASE_SLACK_NOTIFICATION_WEBHOOK_URL }} to the action Result: Slack notifications for build success/failure/cancellation now work properly across all deployment workflows.

* update form-data package

# Overview Adds an output of the robots WiFi and Ethernet MAC addresses to the Robot diagnostics QC script. Customers have requested the ability to know the MAC address of their robot before they receive it or set it up. By logging the MAC address in the output of the diagnostic scripts we can now look up the MAC address of a robot based on it's serial number in our production database. ## Test Plan and Hands on Testing Ran the test script on a Flex in the office. Checked that the MAC addresses were contained in the output CSV. ## Changelog Modifies the connectivity section of the flex diagnostics QC script in hardware testing to add wifi and ethernet mac address outputs. ## Review requests ## Risk assessment Minimal only impacts hardware testing code Co-authored-by: Ryan Howard <[email protected]>

# Overview reworking the "what's new on Flex" section > "Flex-exclusive features" for a few reasons: - the OT-2 and Flex comparison is no longer what's most important in the introduction. here, I've walked back the comparison text (but still include a small section to do so). - this section can be useful to us to describe what's different/exclusive to Flex without comparison. This can also be a soft landing place for new features that aren't ready for an entire section, but will be one day (like LLD. After 8.8, this could very well get its own section). -also sprinkling throughout: LLD, liquid classes, a mention of liquid classes in QT. Trying to bridge the gap before some of these features get more new shiny things added to them and can have their own section (LLD mostly).  ## Test Plan and Hands on Testing  ## Changelog  ## Review requests  ## Risk assessment

* fix(app-shell): fix protocol file read function issue

Copilot

Pull Request Overview

This PR updates stylelint from version 11.0.0 to 16.25.0 and stylelint-config-standard from 19.0.0 to 39.0.1. The update enables better CSS validation, including detection of invalid CSS property values and deprecated properties that the older version couldn't catch.

Key changes include:

Updating deprecated CSS properties (e.g., grid-gap → gap, word-wrap → overflow-wrap)
Converting color values from rgba() to modern rgb() with alpha notation
Replacing deprecated positioning properties with the inset shorthand
Standardizing @import statements to use url() syntax

Reviewed Changes

Copilot reviewed 72 out of 74 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
package.json	Updates stylelint dependencies to latest versions
.stylelintrc.js	Adds expanded ignore patterns and precision configuration
Various CSS files across components, app, labware-library, protocol-designer, opentrons-ai-client	Fixes CSS syntax to comply with updated stylelint rules
docs/flex/docs/introduction.md	Formatting improvements to markdown table and list structure
app-shell/package.json	Updates form-data dependency version

Comments suppressed due to low confidence (1)

components/src/molecules/WizardHeader/wizardheader.module.css:1

The perspective value should include a unit. Changed from 1000 to 1000px which is correct.

/* WizardHeader CSS Module */

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

labware-library/src/components/labware-ui/styles.module.css

labware-library/src/components/LabwareDetails/styles.module.css

app/src/organisms/ODD/RunningProtocol/RunFailedModal/runfailedmodal.module.css

...organisms/ODD/RunningProtocol/CurrentRunningProtocolCommand/currentrunningcommand.module.css

app/src/atoms/CodeBlock/codeblock.module.css

….com/Opentrons/opentrons into style_update-stylelint-to-the-latest

Copilot

Pull Request Overview

Copilot reviewed 72 out of 74 changed files in this pull request and generated 3 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2025-11-04T17:10:10Z

labware-library/src/labware-creator/styles.module.css

      background-color: #00f;
    }
-  }
+  };


CSS custom properties (CSS variables) should end with a semicolon, not a closing brace with semicolon. The syntax --link-btn-blue: { ... }; is non-standard CSS. This appears to be attempting to use CSS-in-JS or a preprocessor syntax that may not be valid in standard CSS.

Copilot · 2025-11-04T17:10:10Z

labware-library/src/components/website-navigation/styles.module.css

  --spacing-link: 1.75rem;
  --spacing-mobile-heading: 4.5rem;
-
  --font-menu-title: {


CSS custom properties cannot contain object-like values with braces. The syntax --font-menu-title: { ... } is invalid in standard CSS. Consider using separate CSS custom properties for each font property or using a CSS preprocessor if this syntax is required.

Copilot · 2025-11-04T17:10:10Z

app/src/organisms/Desktop/ProtocolVisualization/Controls/controls.module.css

+  container-name: controls-container;
+  container-type: inline-size;


The container query properties were added but there's no visible usage of corresponding @container queries in the diff. Ensure that container queries are actually implemented elsewhere in the codebase to make use of these properties.

style(app,protocol-designer,labware-library,opentrons-ai-client): upd…

12aaab3

…ate stylelint to the latest update stylelint to the latest v16.25.0 close AUTH-2455

koji requested review from Elyorcv, SyntaxColoring, TamarZanzouri, jerader, mjhuff, ncdiehl11, sfoster1 and smb2268 October 31, 2025 17:32

koji marked this pull request as ready for review October 31, 2025 17:33

koji requested a review from a team as a code owner October 31, 2025 17:33

SyntaxColoring reviewed Oct 31, 2025

View reviewed changes

remove properties from ignore list

71216d1

mjhuff and others added 15 commits November 3, 2025 14:29

refactor(app): Wire up run setup camera preferences (#19985)

93c2b37

Closes EXEC-2021, EXEC-1954, EXEC-1762, and EXEC-1605

feat(step-generation): wire up tip selection in JSON step generation (#…

15eeb78

…19978) This PR updates JSON step generation for manual tip selection, which is required for proper state tracking and error handling in the PD application before export. Closes AUTH-2433, Closes AUTH-2443

feat(app): view error details associated with an error-generated image (

7bdc0c5

#19986) Closes EXEC-1993

fix(api, robot-server): Do not attempt to utilize the opentrons live …

db1d21b

…stream on OT-2 (#19975) Covers RQA-4800, RQA-4801 The OT-2 does not have the live stream service, so don't allow it to interface with the service.

feat(app): add no images available view on the odd (#19991)

36d2ab3

refactor(app): Add camera usage settings to redux (#19987)

af7bfdc

Closes EXEC-1606

feat(app): Add info toasts on images generated during an error (#19992)

c52307c

Closes EXEC-2028

refactor(app): Block robot settings: camera settings if run exists (#…

afb7cf4

…19990)

app(refactor): Adjust camera feature flags (#19988)

6c86557

fix(app): fix unnecessary rendering issue on slideouts (#19982)

a0a1695

* fix(app): fix unnecessary rendering issue on slideouts

refactor(app): when resuming a run, do not navigate to the run log if…

8438398

… on the camera tab (#19995)

refactor(app): Hide livestream UI conditionally (#19994)

6c3fdc4

feat(api): Ensure image capture and filters work on OT-2 (#19997)

c372585

OT-2 utilizes the `eq` equalizer filter fields instead of the `lut` Look-up-table fields of the Flex

mjhuff and others added 11 commits November 3, 2025 14:29

refactor(app): update "app settings" styling to match "robot settings" (

bd29374

#19999) Closes EXEC-2030

refactor(protocol-designer): keep track of allowedTips in local state (…

f2115e2

…#19996) closes AUTH-2389

chore(release): 8.8 release notes placeholder (#20003)

3effa81

### 8.8 release notes placeholder A little something so we can tell in the app we are upgrading on the 8.8 alpha until the actual notes are ready.

update form-data package (#20008)

4615b77

* update form-data package

fix(app-shell): fix protocol file read function issue (#19868)

317003f

* fix(app-shell): fix protocol file read function issue

keep the original CSS files

03102f9

fix lint-css errors

b438994

fix lint-css errors

0c7603b

koji requested review from SyntaxColoring November 3, 2025 20:03

Merge branch 'edge' into style_update-stylelint-to-the-latest

7e251b0

koji requested a review from Copilot November 3, 2025 20:24

Copilot AI reviewed Nov 3, 2025

View reviewed changes

koji added 3 commits November 4, 2025 12:02

address feedback

5109b8e

Merge branch 'style_update-stylelint-to-the-latest' of https://github…

aa6cc78

….com/Opentrons/opentrons into style_update-stylelint-to-the-latest

address feedback

be818fa

koji requested a review from Copilot November 4, 2025 17:09

Copilot AI reviewed Nov 4, 2025

View reviewed changes

koji added 3 commits November 5, 2025 14:41

Merge branch 'edge' into style_update-stylelint-to-the-latest

a5d865c

Update controls.module.css

88ac37d

Merge branch 'edge' into style_update-stylelint-to-the-latest

798ba39

		container-name: controls-container;
		container-type: inline-size;

style(app,protocol-designer,labware-library,opentrons-ai-client): update stylelint #19993

Are you sure you want to change the base?

style(app,protocol-designer,labware-library,opentrons-ai-client): update stylelint #19993

Uh oh!

Conversation

koji commented Oct 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Overview

Test Plan and Hands on Testing

Changelog

Review requests

Risk assessment

Uh oh!

codecov bot commented Oct 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

SyntaxColoring left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

koji commented Oct 31, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Uh oh!

Copilot AI Nov 4, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 4, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 4, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

11 participants

koji commented Oct 31, 2025 •

edited

Loading

codecov bot commented Oct 31, 2025 •

edited

Loading