feat(bootstrap4): alert (for TACC project pages redesign) by wesleyboar · Pull Request #642 · TACC/Core-Styles

wesleyboar · 2026-06-01T15:55:03Z

Overview

Skins Django CMS Bootstrap 4 Alert plugin output using x-message.

Changes

added Bootstrap 4 alert component

Testing

npm run build:css
npm start
Open the Bootstrap 4 Alerts demo.
Review styles.
Compare to C Message demo.

UI

Alerts	Primary Alert = Global Message

Primary.Alert.Global.Message.mov

Ship Bootstrap alert + c-message bridge and o-sortable-table for manual Research/Software CMS listing pages. Dist built for jsDelivr gh tags. Co-authored-by: Cursor <cursoragent@cursor.com>

qodo-code-review · 2026-06-01T15:55:20Z

Review Summary by Qodo

(Agentic_describe updated until commit `5a0aaa7`)

Add Bootstrap 4 alert component styling with x-message integration

✨ Enhancement

Walkthroughs

Description

• Add Bootstrap 4 alert component styling with x-message mixins
• Map alert variants to section message color schemes
• Support dismissible alerts with proper padding alignment
• Include alert heading and link styling overrides

Diagram

flowchart LR
  A["Bootstrap Alert"] -->|"x-message mixins"| B["Alert Variants"]
  B -->|"color mapping"| C["Info/Success/Warning/Error"]
  D["Dismissible Alert"] -->|"padding calc"| E["Close Button"]
  F["Expanded Message"] -->|"padding override"| G["Alert Spacing"]

File Changes

1. src/lib/_imports/bootstrap4/components/alert.css ✨ Enhancement +76/-0

Bootstrap alert styles with x-message mixins

src/lib/_imports/bootstrap4/components/alert.css

2. src/lib/_imports/components/c-message--expanded.css ✨ Enhancement +8/-1

Extend expanded padding to alerts

src/lib/_imports/components/c-message--expanded.css

3. src/lib/_imports/core-styles.bootstrap4.css ⚙️ Configuration changes +1/-0

Import new alert component stylesheet

src/lib/_imports/core-styles.bootstrap4.css

View more (9)

4. src/lib/_imports/bootstrap4/components/alert/alert.hbs 📝 Documentation +36/-0

Handlebars template for alert demo

src/lib/_imports/bootstrap4/components/alert/alert.hbs

5. src/lib/_imports/bootstrap4/components/alert/config.yml 📝 Documentation +29/-0

Alert component configuration and variants

src/lib/_imports/bootstrap4/components/alert/config.yml

6. src/lib/_imports/bootstrap4/components/alert/demo.css 📝 Documentation +5/-0

Demo-only spacing styles for alerts

src/lib/_imports/bootstrap4/components/alert/demo.css

7. src/lib/_imports/bootstrap4/components/alert/readme.md 📝 Documentation +1/-0

Alert component documentation

src/lib/_imports/bootstrap4/components/alert/readme.md

8. dist/core-styles.bootstrap4.css Dependencies +1/-1

Compiled alert styles in main bundle

dist/core-styles.bootstrap4.css

9. dist/bootstrap4/components/alert.css Dependencies +1/-0

Compiled standalone alert stylesheet

dist/bootstrap4/components/alert.css

10. dist/bootstrap4/components/alert/demo.css Dependencies +1/-0

Compiled alert demo styles

dist/bootstrap4/components/alert/demo.css

11. dist/components/c-message--expanded.css Dependencies +1/-1

Compiled expanded message with alert support

dist/components/c-message--expanded.css

12. dist/core-styles.cms.css Additional files +1/-1

...

dist/core-styles.cms.css

qodo-code-review · 2026-06-01T15:55:21Z

Code Review by Qodo

🐞 Bugs (1) 📘 Rule violations (0) 📎 Requirement gaps (0) 🎨 UX issues (0)

1. ~~c-message styles overridden~~ ✓ Resolved 🐞 Bug ≡ Correctness

Description

src/lib/_imports/bootstrap4/components/alert.css unsets border and background-color on
.alert.c-message, which overrides c-message--scope-section / c-message--type-* styles and
breaks the intended c-message chrome on CMS alerts using those modifiers.

Code

src/lib/_imports/bootstrap4/components/alert.css[R4-9]

Evidence
c-message scope/type mixins explicitly set border/background for section messages, but the new
.alert.c-message rule unsets those properties and appears later in the built Bootstrap 4
aggregate, so it overrides the intended c-message rendering.
src/lib/_imports/bootstrap4/components/alert.css[1-9]
src/lib/_imports/tools/x-message.css[56-74]
dist/core-styles.bootstrap4.css[1-2]
src/lib/_imports/bootstrap4/components/alert/config.yml[29-34]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
The rule `.alert.c-message { border: unset; background-color: unset; ... }` is emitted after the imported `c-message` rules, so it wins in the cascade and removes the background/border that `c-message--type-*` + `c-message--scope-section` are supposed to apply.
## Issue Context
This is directly exercised by the pattern config that applies `c-message c-message--scope-section c-message--type-warning` to a Bootstrap alert.
## Fix Focus Areas
- src/lib/_imports/bootstrap4/components/alert.css[1-30]
Suggested direction (any equivalent is fine):
- Remove `border: unset`, `background-color: unset`, and `color: unset` from `.alert.c-message` so `c-message` modifiers can control these properties.
- If you still need to neutralize Bootstrap alert visuals, do it in a way that does not override `c-message` (e.g., only reset properties `c-message` does not set, or add more targeted selectors).

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

2. ~~Dismissible close overlaps text~~ ✓ Resolved 🐞 Bug ≡ Correctness

Description

.alert.c-message.alert-dismissible unsets padding-right while positioning .close absolutely at
the top-right, which will intrude into the content area (c-message only provides small inline
padding) and cause overlap for dismissible CMS alerts.

Code

src/lib/_imports/bootstrap4/components/alert.css[R20-29]

Evidence
The new CSS removes right padding and uses an absolutely positioned close button; existing
c-message section padding is only 12px inline, so the close button’s box will extend into the text
area.
src/lib/_imports/bootstrap4/components/alert.css[20-30]
src/lib/_imports/tools/x-message.css[56-62]
src/lib/_imports/bootstrap4/components/alert/config.yml[24-34]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
`padding-right: unset` on `.alert.c-message.alert-dismissible` removes the space that normally prevents the absolutely positioned close button from overlapping the alert content.
## Issue Context
`c-message--scope-section` uses `padding-inline: 12px`, and the close button is positioned `right: 0; top: 0;` with substantial padding, so without extra right padding on the container the close button sits on top of text.
## Fix Focus Areas
- src/lib/_imports/bootstrap4/components/alert.css[20-30]
- src/lib/_imports/tools/x-message.css[56-62]
Suggested direction:
- Remove the `padding-right: unset` override, OR set an explicit `padding-right` large enough to accommodate the close button.
- Consider limiting changes to `.close` to only what’s needed for `c-message` (e.g., `color: inherit`) and letting Bootstrap handle the dismissible layout mechanics.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

3. Global alert padding override 🐞 Bug ≡ Correctness

Description

src/lib/_imports/components/c-message--expanded.css now applies expanded padding to plain
.alert/.alert-dismissible, so core-styles.cms.css changes Bootstrap alerts even when the
Bootstrap4 alert skin is not loaded. This creates hidden coupling between core-styles.cms.css and
core-styles.bootstrap4.css, and can yield partially-styled or mis-spaced dismissible alerts
depending on which bundles a consumer includes.

Code

src/lib/_imports/components/c-message--expanded.css[R3-14]

Evidence
The CMS bundle always includes c-message--expanded.css, and that file now targets
.alert/.alert-dismissible directly; meanwhile the Bootstrap4 alert skin is only pulled in via
the Bootstrap4 bundle. The preview template shows CMS and Bootstrap loading are independent, so
consumers can end up with the CMS alert padding overrides without the alert skin present.
src/lib/_imports/components/c-message--expanded.css[3-14]
src/lib/_imports/core-styles.cms.css[44-46]
src/lib/_imports/core-styles.bootstrap4.css[1-8]
src/lib/_imports/_preview.hbs[22-48]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
`core-styles.cms.css` always imports `components/c-message--expanded.css`, which now globally targets `.alert` and `.alert-dismissible`. That means CMS consumers can accidentally get Bootstrap alert padding overrides without also having the Bootstrap4 alert skin (`bootstrap4/components/alert.css`) loaded, creating an implicit dependency and potentially inconsistent alert layout.
## Issue Context
- The alert skin lives in the Bootstrap4 bundle (`core-styles.bootstrap4.css` imports `bootstrap4/components/alert.css`).
- The expanded sizing lives in the CMS bundle (`core-styles.cms.css` imports `components/c-message--expanded.css`).
- In the pattern preview template, `shouldLoadBootstrap` and `shouldLoadCMS` are independent toggles, demonstrating that these bundles can be loaded separately.
## Fix Focus Areas
- src/lib/_imports/components/c-message--expanded.css[3-14]
- src/lib/_imports/core-styles.cms.css[44-46]
- src/lib/_imports/core-styles.bootstrap4.css[1-8]
- src/lib/_imports/_preview.hbs[22-48]
## Suggested fix directions (choose one)
1) **Move the `.alert` / `.alert-dismissible` expanded-padding overrides out of `c-message--expanded.css`** into a Bootstrap4-alert-specific file (e.g. `bootstrap4/components/alert--expanded.cms.css`) and ensure it is only included in builds/contexts where the Bootstrap4 alert skin is also included.
2) **If CMS is expected to always support Bootstrap alerts**, import the alert skin (or a CMS-safe subset) from `core-styles.cms.css` so that any `.alert` overrides in the CMS bundle always ship together with the base alert styling.
3) **Scope the CMS-expanded rules to a CMS-specific wrapper or modifier class** that is only present when using the skinned alerts (e.g. `.cms .alert` or a plugin wrapper), to avoid affecting unrelated `.alert` usage.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

Sort UI is coupled to sortableTable.js via table.is-sortable. Co-authored-by: Cursor <cursoragent@cursor.com>

Map Bootstrap alert variants to section message styles without c-message classes. Undo Bootstrap chrome with selectors aligned to BS4 where practical. Co-authored-by: Cursor <cursoragent@cursor.com>

Apply CMS section message inset to Bootstrap alerts and align dismissible padding-right with expanded inline spacing. Co-authored-by: Cursor <cursoragent@cursor.com>

qodo-code-review · 2026-06-02T00:06:53Z

Code review by qodo was updated up to the latest commit 5a0aaa7

## Overview Missing commit of #642. --------- Co-authored-by: Cursor <cursoragent@cursor.com>

## Overview Sort tables on CMS pages. > [!IMPORTANT] > Reconsider using [tristen/tablesort](https://github.com/tristen/tablesort). It may not use button, but it is still accessible, and maintained, and clean. ## Related - [RT #42216](https://tickets.tacc.utexas.edu/Ticket/Display.html?id=42216) - pairs with TACC/Core-Styles#642 - required by TACC/tup-ui#558 ## Changes - **added** sortable table script - **updated** delayed page assets to run it on main content ## Testing 1. Listing table: Name column A→Z by default; Description does not sort. 2. Other columns sort on header click. ## UI https://github.com/user-attachments/assets/363997f8-d8fd-4119-a7c7-9de2d85d5f73 <img width="900" height="470" alt="markup" src="https://github.com/user-attachments/assets/543c75fe-4cf8-4151-9d0e-14ba0c709109" /> --------- Co-authored-by: Cursor <cursoragent@cursor.com>

feat(bootstrap4): add alert bridge and sortable table object

31e62d5

Ship Bootstrap alert + c-message bridge and o-sortable-table for manual Research/Software CMS listing pages. Dist built for jsDelivr gh tags. Co-authored-by: Cursor <cursoragent@cursor.com>

wesleyboar mentioned this pull request Jun 1, 2026

feat(cms): snippet (for TACC project pages redesign) TACC/tup-ui#558

Draft

qodo-code-review Bot reviewed Jun 1, 2026

View reviewed changes

Comment thread src/lib/_imports/bootstrap4/components/alert.css Outdated

Comment thread src/lib/_imports/bootstrap4/components/alert.css Outdated

wesleyboar marked this pull request as draft June 1, 2026 20:05

wesleyboar mentioned this pull request Jun 1, 2026

feat(cms): sortable table (for TACC project pages redesign) TACC/Core-CMS#1167

Merged

wesleyboar and others added 2 commits June 1, 2026 17:37

chore: drop o-sortable-table object (styles live in Core-CMS)

6af5136

Sort UI is coupled to sortableTable.js via table.is-sortable. Co-authored-by: Cursor <cursoragent@cursor.com>

feat(bootstrap4): skin alerts with x-message mixins

62a3e0a

Map Bootstrap alert variants to section message styles without c-message classes. Undo Bootstrap chrome with selectors aligned to BS4 where practical. Co-authored-by: Cursor <cursoragent@cursor.com>

wesleyboar changed the title ~~feat(bootstrap4): alert bridge and sortable table for Research CMS~~ feat(bootstrap4): x-message alert styles for Research CMS Jun 1, 2026

wesleyboar and others added 4 commits June 1, 2026 18:41

feat(cms): expand alert padding with c-message--expanded

e18e87d

Apply CMS section message inset to Bootstrap alerts and align dismissible padding-right with expanded inline spacing. Co-authored-by: Cursor <cursoragent@cursor.com>

fix: demo should not assume CMS styles

5e7716f

feat: .alert-heading

1c2cf6b

refactor: DRY-er code

5a0aaa7

wesleyboar marked this pull request as ready for review June 2, 2026 00:06

wesleyboar changed the title ~~feat(bootstrap4): x-message alert styles for Research CMS~~ feat(bootstrap4): alert component Jun 2, 2026

wesleyboar changed the title ~~feat(bootstrap4): alert component~~ feat(bootstrap4): alert component (for TACC project pages redesign) Jun 2, 2026

wesleyboar changed the title ~~feat(bootstrap4): alert component (for TACC project pages redesign)~~ feat(bootstrap4): alert (for TACC project pages redesign) Jun 2, 2026

wesleyboar merged commit 79d232d into main Jun 2, 2026

wesleyboar deleted the feat/research-software-cms-phase-b branch June 2, 2026 19:40

wesleyboar mentioned this pull request Jun 2, 2026

feat(bootstrap4): alert component — missing commit #643

Merged

wesleyboar added a commit that referenced this pull request Jun 2, 2026

feat(bootstrap4): alert component — missing commit (#643)

70dab27

## Overview Missing commit of #642. --------- Co-authored-by: Cursor <cursoragent@cursor.com>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(bootstrap4): alert (for TACC project pages redesign)#642

feat(bootstrap4): alert (for TACC project pages redesign)#642
wesleyboar merged 7 commits into
mainfrom
feat/research-software-cms-phase-b

wesleyboar commented Jun 1, 2026 •

edited

Loading

Uh oh!

qodo-code-review Bot commented Jun 1, 2026 •

edited

Loading

Uh oh!

qodo-code-review Bot commented Jun 1, 2026 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

qodo-code-review Bot commented Jun 2, 2026 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

wesleyboar commented Jun 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Overview

Related

Changes

Testing

UI

Uh oh!

qodo-code-review Bot commented Jun 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review Summary by Qodo

(Agentic_describe updated until commit 5a0aaa7)

Walkthroughs

File Changes

Uh oh!

qodo-code-review Bot commented Jun 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Code Review by Qodo

Uh oh!

Uh oh!

Uh oh!

qodo-code-review Bot commented Jun 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

wesleyboar commented Jun 1, 2026 •

edited

Loading

qodo-code-review Bot commented Jun 1, 2026 •

edited

Loading

(Agentic_describe updated until commit `5a0aaa7`)

qodo-code-review Bot commented Jun 1, 2026 •

edited

Loading

qodo-code-review Bot commented Jun 2, 2026 •

edited

Loading