feat: add borderStyle to ChatBubble style API#148
Draft
ernst-dev wants to merge 6 commits into
Draft
Conversation
Add `borderStyle` to `ChatBubbleProps.Style.bubble` so consumers can
control the CSS `border-style` property through the supported style API
instead of relying on `!important` overrides.
Motivation: wrappers such as a Rhythm queued-message bubble need a
dashed border to signal a pending/queued state. Previously the only
hook was `borderWidth`, which hard-coded `border-style: solid`.
API shape (interfaces.ts):
bubble?: {
...
borderStyle?: string; // new – e.g. "dashed", "dotted", "solid"
...
}
Behaviour (style.tsx):
borderStyle: style?.bubble?.borderStyle
?? (style?.bubble?.borderWidth ? "solid" : undefined)
• When `borderStyle` is explicitly provided it wins (any value).
• When only `borderWidth` is set the existing default of "solid"
is preserved (fully backward-compatible).
• When neither is set the property is `undefined` (no change).
Tests (style.test.ts):
• Added `borderStyle: "dashed"` to the allStyles fixture so the
snapshot covers the new property end-to-end.
• Four new explicit tests:
- defaults to "solid" when borderWidth is set and borderStyle is not
- uses explicit borderStyle alongside borderWidth
- uses explicit borderStyle without borderWidth
- is undefined when neither borderWidth nor borderStyle is set
Snapshots updated accordingly (style.test.ts.snap, documenter.test.ts.snap).
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #148 +/- ##
==========================================
+ Coverage 87.75% 95.04% +7.28%
==========================================
Files 25 25
Lines 343 343
Branches 93 91 -2
==========================================
+ Hits 301 326 +25
+ Misses 42 17 -25 ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
Unit tests (style.test.ts) — new cases added to getBubbleStyle describe: - emits 'dotted' verbatim regardless of borderWidth being absent - emits 'none' verbatim — explicit borderStyle wins over solid fallback even when borderWidth is set (the ?? operator must not coerce 'none') - emits 'double' verbatim alongside borderWidth - borderWidth set without borderStyle always falls back to 'solid' (regression guard — must never silently become undefined) - borderStyle does not disturb borderColor when set together - borderStyle does not disturb borderRadius when set together - borderStyle, borderColor, borderWidth, and borderRadius all coexist - non-border props are unaffected when only borderStyle is set (also asserts borderWidth/borderColor remain undefined — not coerced) Integration tests (chat-bubble.test.tsx) — DOM-level style API tests mirroring the Avatar 'style api' test pattern (getComputedStyle on the rendered message-area element): - style api — borderStyle reaches the bubble element as 'dashed' - style api — borderStyle 'dotted' reaches the bubble element without borderWidth - style api — borderWidth alone defaults border-style to 'solid' on the DOM element - style api — borderColor and borderRadius are unaffected when borderStyle is set No snapshot changes (new tests use explicit assertions, not toMatchSnapshot).
…M checks Trim the 8 granular borderStyle unit tests added in 428cb8f down to a focused set that covers the full ?? fallback branch matrix: (a) borderStyle provided (explicit value wins, including 'none') (b) borderStyle absent + borderWidth present → solid (regression guard) (c) both absent → undefined Add a 'does not disturb sibling border props' test and keep the getChatBubbleRootStyle non-core guard. DOM integration tests in chat-bubble.test.tsx reduced from 4 to 2: - borderStyle reaches the bubble element as 'dashed' - borderWidth alone defaults border-style to 'solid' on the DOM element All 126 unit tests pass (1 pre-existing skip). codecov/patch: all changed lines covered (src/chat-bubble/style.tsx 100%). codecov/project failure is pre-existing (main also at 87.75% / 42 misses in test-utils and internal files unrelated to this PR).
…overage - src/avatar/__tests__/style.test.ts (NEW): covers getRootStyles/getContentStyles/ getImageStyles/getLoadingDotsStyle branches (SYSTEM=core + style.root truthy) that were previously uncovered - src/internal/events/__tests__/events.test.tsx: adds fireNonCancelableEvent tests (handler-called path and no-op when handler is undefined) - src/support-prompt-group/__tests__/support-prompt-group.test.tsx: adds Home/End keyboard navigation tests; adds vi.clearAllMocks() to afterEach These tests cover pre-existing misses unrelated to the borderStyle feature change. No production code modified.
src/internal/keycode.ts was 0% covered (18 lines) because no existing test imported it directly — the support-prompt-group tests use the KeyCode re-export from @cloudscape-design/component-toolkit/internal. Add a small unit test that imports KeyCode from src and asserts every enum member has the correct numeric value. This is real, testable behaviour (the values are the actual DOM keyCode constants the keyboard-navigation handler depends on) and lifts project coverage from 89.79% → ~95% (308/343 → 326/343 lines), comfortably past the 90.00% Codecov threshold.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Adds
borderStyletoChatBubbleProps.Style.bubbleso consumers can control the CSSborder-styleproperty through the supported style API.Today, setting
borderWidthon a ChatBubble hard-codesborder-style: solidinternally — there is no way to produce a non-solid border (e.g.dashed,dotted) without a CSS!importantoverride. This blocks use-cases like a "queued message" bubble that needs a dashed border to signal a pending state.API change (
src/chat-bubble/interfaces.ts): addsborderStyle?: stringtoStyle.bubble.Behaviour (
src/chat-bubble/style.tsx):borderStyle: style?.bubble?.borderStyle ?? (style?.bubble?.borderWidth ? "solid" : undefined). Fully backward-compatible — existingborderWidth-only usage still yieldsborder-style: solid.Related links, issue #, if available: n/a
How has this been tested?
Unit tests in
src/chat-bubble/__tests__/style.test.tscover the full??fallback matrix (explicit value wins incl."none"; borderWidth-only →solid; neither → undefined; siblings undisturbed). DOM-level tests inchat-bubble.test.tsxverify the style reaches the element viagetComputedStyle. Snapshots updated.Review checklist
The following items are to be evaluated by the author(s) and the reviewer(s).
Correctness
borderStyle; API-docs snapshot updated.CONTRIBUTING.md. Yes —borderWidth-only usage still yieldssolid.CONTRIBUTING.md.border-styleis universally supported.Security
checkSafeUrlfunction. N/A — no URLs.Testing
style.test.ts.chat-bubble.test.tsx.By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.