diff --git a/.loki/reference/chrome.laptop/Phones/PhoneField_Basic.png b/.loki/reference/chrome.laptop/Phones/PhoneField_Basic.png index 01359ae14..b3ac8bfff 100644 Binary files a/.loki/reference/chrome.laptop/Phones/PhoneField_Basic.png and b/.loki/reference/chrome.laptop/Phones/PhoneField_Basic.png differ diff --git a/.loki/reference/chrome.laptop/Surfaces/AppBar_Basic.png b/.loki/reference/chrome.laptop/Surfaces/AppBar_Basic.png index bca7fbb00..59b44924c 100644 Binary files a/.loki/reference/chrome.laptop/Surfaces/AppBar_Basic.png and b/.loki/reference/chrome.laptop/Surfaces/AppBar_Basic.png differ diff --git a/.loki/reference/chrome.laptop/Surfaces/AppBar_Dense.png b/.loki/reference/chrome.laptop/Surfaces/AppBar_Dense.png index e1ce74808..3f727e27d 100644 Binary files a/.loki/reference/chrome.laptop/Surfaces/AppBar_Dense.png and b/.loki/reference/chrome.laptop/Surfaces/AppBar_Dense.png differ diff --git a/packages/ui/src/app-bar/AppBarOverrides.ts b/packages/ui/src/app-bar/AppBarOverrides.ts index ee3e51cda..9e2ab74ca 100644 --- a/packages/ui/src/app-bar/AppBarOverrides.ts +++ b/packages/ui/src/app-bar/AppBarOverrides.ts @@ -1,3 +1,4 @@ +import { ColorDynamic } from '../theme/Color'; import { SuperDispatchTheme } from '../theme/SuperDispatchTheme'; export function overrideAppBar(theme: SuperDispatchTheme): void { @@ -6,4 +7,13 @@ export function overrideAppBar(theme: SuperDispatchTheme): void { color: 'inherit', position: 'static', }; + + theme.overrides.MuiAppBar = { + root: { + '&.MuiPaper-elevation0': { + border: 'none', + borderBottom: `1px solid ${ColorDynamic.Silver400}`, + }, + }, + }; } diff --git a/packages/ui/src/app-bar/__tests__/AppBar.spec.tsx b/packages/ui/src/app-bar/__tests__/AppBar.spec.tsx index a0ca54c06..78deb88a7 100644 --- a/packages/ui/src/app-bar/__tests__/AppBar.spec.tsx +++ b/packages/ui/src/app-bar/__tests__/AppBar.spec.tsx @@ -13,6 +13,15 @@ it('checks default props', () => { `); }); +it('renders a bottom border instead of the inherited full box border', () => { + // eslint-disable-next-line testing-library/render-result-naming-convention -- renderCSS returns a CSS string, not an RTL render result + const css = renderCSS(, ['MuiAppBar']); + + expect(css).toContain('.MuiAppBar-root.MuiPaper-elevation0'); + expect(css).toContain('border: none'); + expect(css).toContain('border-bottom: 1px solid ColorDynamic.Silver400'); +}); + it('checks component css', () => { expect(renderCSS(, ['MuiAppBar'])).toMatchInlineSnapshot(` .MuiAppBar-root { @@ -24,6 +33,11 @@ it('checks component css', () => { flex-direction: column; } + .MuiAppBar-root.MuiPaper-elevation0 { + border: none; + border-bottom: 1px solid ColorDynamic.Silver400; + } + .MuiAppBar-positionFixed { top: 0; left: auto; diff --git a/packages/ui/src/drawer/DrawerActions.tsx b/packages/ui/src/drawer/DrawerActions.tsx index 83e7bba8a..20bac6483 100644 --- a/packages/ui/src/drawer/DrawerActions.tsx +++ b/packages/ui/src/drawer/DrawerActions.tsx @@ -12,6 +12,7 @@ const useStyles = makeStyles( '&&': { bottom: 0, top: 'auto', + borderTop: `1px solid ${ColorDynamic.Silver400}`, borderLeft: 'none', borderRight: 'none', borderBottom: 'none', diff --git a/packages/ui/src/drawer/__tests__/Drawer.spec.tsx b/packages/ui/src/drawer/__tests__/Drawer.spec.tsx index bc4eacb5e..8948e2487 100644 --- a/packages/ui/src/drawer/__tests__/Drawer.spec.tsx +++ b/packages/ui/src/drawer/__tests__/Drawer.spec.tsx @@ -15,6 +15,15 @@ it('checks default props', () => { `); }); +it('DrawerActions declares its own top border rather than the inherited box border', () => { + // eslint-disable-next-line testing-library/render-result-naming-convention -- renderCSS returns a CSS string, not an RTL render result + const css = renderCSS(, ['SD-DrawerActions']); + + // AppBar no longer ships a full box border, so the action bar must own its + // top divider explicitly (width + style), toggling only the color on sticky. + expect(css).toContain('border-top: 1px solid ColorDynamic.Silver400'); +}); + it('checks component css', () => { expect( renderCSS( @@ -106,6 +115,7 @@ it('checks component css', () => { .SD-DrawerActions-appBar.SD-DrawerActions-appBar { top: auto; bottom: 0; + border-top: 1px solid ColorDynamic.Silver400; transition: border-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; border-left: none; border-right: none;