Summary

Fix some display issues with the ListEditWidget.

Review Request #14462 — Created June 19, 2025 and submitted June 25, 2025, 3:38 p.m.

Information

Owner

david

Repository

Djblets

Branch

release-5.x

Bugs

Depends On

Reviewers

Groups

djblets

People

Description

This change fixes two things with the list edit widget, which is used

for the diffviewer syntax highlighting file type override configuration.


In the case that the widget is used within a ConfigForms page, the

   30em width for input fields was causing the widget to bust out of the

   60em width of the config forms page. ConfigForms is desperately in

   need of a comprehensive redesign, but for now I've added some style

   overrides to remove the 30em width and instead apply flex-grow: 1.


This change also swaps out the btn class for ink-c-button, giving

   us a better display when running in dark mode. While doing this, I've

   removed role="button" from the element, since that's implicit for

<button> tags.

Testing Done


Viewed the widget in the context of a ConfigForms page and saw that it

  was now fitting nicely into the width of its container, and the "Add

  item" button looked nice in both light and dark modes.
Ran js-tests.

Commits

Summary	ID
Fix some display issues with the ListEditWidget. This change fixes two things with the list edit widget, which is used for the diffviewer syntax highlighting file type override configuration. 1. In the case that the widget is used within a ConfigForms page, the 30em width for input fields was causing the widget to bust out of the 60em width of the config forms page. ConfigForms is desperately in need of a comprehensive redesign, but for now I've added some style overrides to remove the 30em width and instead apply `flex-grow: 1`. 2. This change also swaps out the `btn` class for `ink-c-button`, giving us a better display when running in dark mode. While doing this, I've removed `role="button"` from the element, since that's implicit for `<button>` tags. Testing Done: - Viewed the widget in the context of a ConfigForms page and saw that it was now fitting nicely into the width of its container, and the "Add item" button looked nice in both light and dark modes. - Ran js-tests.	74cf91dac2a05d300fb25a486e334ae40ee4dca7

Summary

Fix some display issues with the ListEditWidget.

This change fixes two things with the list edit widget, which is used for the diffviewer syntax highlighting file type override configuration. 1. In the case that the widget is used within a ConfigForms page, the 30em width for input fields was causing the widget to bust out of the 60em width of the config forms page. ConfigForms is desperately in need of a comprehensive redesign, but for now I've added some style overrides to remove the 30em width and instead apply `flex-grow: 1`. 2. This change also swaps out the `btn` class for `ink-c-button`, giving us a better display when running in dark mode. While doing this, I've removed `role="button"` from the element, since that's implicit for `<button>` tags. Testing Done: - Viewed the widget in the context of a ConfigForms page and saw that it was now fitting nicely into the width of its container, and the "Add item" button looked nice in both light and dark modes. - Ran js-tests.

74cf91dac2a05d300fb25a486e334ae40ee4dca7

Issues

Description	From	Last Updated
Typo in the description: "deseperately"	chipx86	June 20, 2025, 12:38 p.m.
If we're using ink-c-button, we need to update the inner elements to use the right structure for icons and text.	chipx86	June 20, 2025, 1:16 p.m.
Same comment about the structure. Also, the inner element needs to be indented 1.	chipx86	June 20, 2025, 1:16 p.m.
This is missing localization.	chipx86	June 25, 2025, 1:57 p.m.

flake8 passed.

JSHint passed.

Ship it!

```
Ship It!
```

The issue has been resolved. Show all issues
```
Typo in the description: "deseperately"
```

djblets/forms/templates/djblets_forms/list_edit_widget.html (Diff revision 1)

The issue has been resolved. Show all issues

If we're using ink-c-button, we need to update the inner elements to use the right structure for icons and text.

djblets/static/djblets/js/forms/views/tests/listEditViewTests.es6.js (Diff revision 1)

The issue has been resolved. Show all issues

Same comment about the structure.

Also, the inner element needs to be indented 1.

Description:

		This change fixes two things with the list edit widget, which is used
		for the diffviewer syntax highlighting file type override configuration.

~		In the case that the widget is used within a ConfigForms page, the 30em width for input fields was causing the widget to bust out of the 60em width of the config forms page. ConfigForms is deseperately in need of a comprehensive redesign, but for now I've added some style overrides to remove the 30em width and instead apply `flex-grow: 1`.
	~	In the case that the widget is used within a ConfigForms page, the 30em width for input fields was causing the widget to bust out of the 60em width of the config forms page. ConfigForms is desperately in need of a comprehensive redesign, but for now I've added some style overrides to remove the 30em width and instead apply `flex-grow: 1`.
		This change also swaps out the `btn` class for `ink-c-button`, giving us a better display when running in dark mode. While doing this, I've removed `role="button"` from the element, since that's implicit for `<button>` tags.

Commits:

	Summary	ID
	Fix some display issues with the ListEditWidget. This change fixes two things with the list edit widget, which is used for the diffviewer syntax highlighting file type override configuration. 1. In the case that the widget is used within a ConfigForms page, the 30em width for input fields was causing the widget to bust out of the 60em width of the config forms page. ConfigForms is deseperately in need of a comprehensive redesign, but for now I've added some style overrides to remove the 30em width and instead apply `flex-grow: 1`. 2. This change also swaps out the `btn` class for `ink-c-button`, giving us a better display when running in dark mode. While doing this, I've removed `role="button"` from the element, since that's implicit for `<button>` tags. Testing Done: - Viewed the widget in the context of a ConfigForms page and saw that it was now fitting nicely into the width of its container, and the "Add item" button looked nice in both light and dark modes. - Ran js-tests.	75c6089d4b538aa09155bf607fab64bc804d6872
	Fix some display issues with the ListEditWidget. This change fixes two things with the list edit widget, which is used for the diffviewer syntax highlighting file type override configuration. 1. In the case that the widget is used within a ConfigForms page, the 30em width for input fields was causing the widget to bust out of the 60em width of the config forms page. ConfigForms is desperately in need of a comprehensive redesign, but for now I've added some style overrides to remove the 30em width and instead apply `flex-grow: 1`. 2. This change also swaps out the `btn` class for `ink-c-button`, giving us a better display when running in dark mode. While doing this, I've removed `role="button"` from the element, since that's implicit for `<button>` tags. Testing Done: - Viewed the widget in the context of a ConfigForms page and saw that it was now fitting nicely into the width of its container, and the "Add item" button looked nice in both light and dark modes. - Ran js-tests.	74cf91dac2a05d300fb25a486e334ae40ee4dca7

Diff:

Revision 2 (+80 -58)

Show changes

	djblets/forms/templates/djblets_forms/list_edit_widget.html
	djblets/static/djblets/css/forms/list_edit.less
	djblets/static/djblets/js/forms/views/tests/listEditViewTests.es6.js

Checks run (2 succeeded)

flake8 passed.

JSHint passed.

Ship it!

djblets/static/djblets/js/forms/views/tests/listEditViewTests.es6.js (Diff revision 2)
The issue has been dropped. Show all issues
```
This is missing localization.
```
1. david June 25, 2025, 1:57 p.m.
  This is just mock data in a unit test.
2. chipx86 June 25, 2025, 1:57 p.m.
  Ah, right. Nevermind :)

Status:: Completed
Change Summary:: Pushed to release-5.x (2d38013)