diff --git a/bundlesize.config.json b/bundlesize.config.json index 3d00a781..4dfafeec 100644 --- a/bundlesize.config.json +++ b/bundlesize.config.json @@ -2,7 +2,7 @@ "files": [ { "path": "packages/docsearch-css/dist/style.css", - "maxSize": "3.25 kB" + "maxSize": "3.50 kB" }, { "path": "packages/docsearch-react/dist/umd/index.js", diff --git a/cypress/e2e/search/actions.spec.ts b/cypress/e2e/search/actions.spec.ts index a3057fb6..ccfea032 100644 --- a/cypress/e2e/search/actions.spec.ts +++ b/cypress/e2e/search/actions.spec.ts @@ -12,7 +12,7 @@ describe('Start', () => { // check that the scrollbar offset is compensated cy.get('body').should('have.css', 'overflow', 'hidden'); - cy.get('body').should('have.css', 'margin-right', '15px'); + cy.get('.DocSearch-Modal').should('be.visible'); }); it('Open modal with key shortcut on Windows/Linux', () => { @@ -53,7 +53,7 @@ describe('End', () => { }); it('Close modal by clicking outside its container', () => { - cy.get('.DocSearch-Container').click(); + cy.get('body').click(0, 0); cy.modalIsNotVisible(); }); @@ -81,7 +81,7 @@ describe('Search', () => { it('Query can be cleared', () => { cy.typeQueryMatching(); - cy.get('.DocSearch-Reset').click(); + cy.get('.DocSearch-Clear').click(); cy.get('.DocSearch-Hits').should('not.exist'); cy.contains('No recent searches').should('be.visible'); }); @@ -101,7 +101,9 @@ describe('Search', () => { const currentURL = cy.url(); cy.typeQueryMatching(); - cy.get('.DocSearch-Hits #docsearch-hits0-item-1 > a').click({ force: true }); + cy.get('.DocSearch-Hits #docsearch-hits0-item-1 > a').click({ + force: true, + }); cy.on('url:changed', (newUrl) => { expect(newUrl).not.equal(currentURL); }); diff --git a/examples/demo-react-18/index.html b/examples/demo-react-18/index.html index 59d9baf4..ad3c153e 100644 --- a/examples/demo-react-18/index.html +++ b/examples/demo-react-18/index.html @@ -1,16 +1,14 @@ + + + + + DocSearch v4 - React + - - - - - DocSearch v3 - React - - - -
- - - + +
+ + diff --git a/examples/demo-react-18/src/App.tsx b/examples/demo-react-18/src/App.tsx index 31830ec3..b2026742 100644 --- a/examples/demo-react-18/src/App.tsx +++ b/examples/demo-react-18/src/App.tsx @@ -6,7 +6,7 @@ import '@docsearch/css/dist/style.css'; function App(): React.JSX.Element { return (
-

DocSearch v3 - React - 18

+

DocSearch v4 - React - 18

); diff --git a/examples/demo/index.html b/examples/demo/index.html index 59d9baf4..ad3c153e 100644 --- a/examples/demo/index.html +++ b/examples/demo/index.html @@ -1,16 +1,14 @@ + + + + + DocSearch v4 - React + - - - - - DocSearch v3 - React - - - -
- - - + +
+ + diff --git a/examples/demo/src/App.tsx b/examples/demo/src/App.tsx index 24ec11ce..b062ade1 100644 --- a/examples/demo/src/App.tsx +++ b/examples/demo/src/App.tsx @@ -6,7 +6,7 @@ import '@docsearch/css/dist/style.css'; function App(): JSX.Element { return (
-

DocSearch v3 - React

+

DocSearch v4 - React

); diff --git a/packages/docsearch-css/src/_variables.css b/packages/docsearch-css/src/_variables.css index 8d96bebe..ce6d17a1 100644 --- a/packages/docsearch-css/src/_variables.css +++ b/packages/docsearch-css/src/_variables.css @@ -1,17 +1,23 @@ /* Variables */ :root { - --docsearch-primary-color: rgb(84, 104, 255); - --docsearch-text-color: rgb(28, 30, 33); + --docsearch-primary-color: rgb(0, 61, 255); + --docsearch-subtle-color: rgb(214, 214, 231); + --docsearch-text-color: rgba(35, 38, 59, 1); + --docsearch-secondary-text-color: rgba(90, 94, 154, 1); + --docsearch-background-color: rgb(245, 245, 250); --docsearch-spacing: 12px; --docsearch-icon-stroke-width: 1.4; - --docsearch-highlight-color: var(--docsearch-primary-color); - --docsearch-muted-color: rgb(150, 159, 175); + --docsearch-focus-color: rgb(0, 95, 204); + --docsearch-highlight-color: rgb(0, 61, 255); + --docsearch-muted-color: rgba(150, 152, 195, 1); + --docsearch-muted-color-darker: rgba(120, 122, 165, 0.25); + --docsearch-icon-color: rgba(90, 94, 154, 1); --docsearch-container-background: rgba(101, 108, 133, 0.8); - --docsearch-logo-color: rgba(84, 104, 255); + --docsearch-logo-color: rgba(0, 61, 255, 1); /* modal */ - --docsearch-modal-width: 560px; + --docsearch-modal-width: 800px; --docsearch-modal-height: 600px; --docsearch-modal-background: rgb(245, 246, 247); --docsearch-modal-shadow: inset 1px 1px 0 0 rgba(255, 255, 255, 0.5), @@ -19,30 +25,24 @@ /* searchbox */ --docsearch-searchbox-height: 56px; - --docsearch-searchbox-background: rgb(235, 237, 240); + --docsearch-searchbox-background: #fff; --docsearch-searchbox-focus-background: #fff; - --docsearch-searchbox-shadow: inset 0 0 0 2px var(--docsearch-primary-color); + --docsearch-actions-width: 99px; + --docsearch-actions-height: 44px; /* hit */ --docsearch-hit-height: 56px; --docsearch-hit-color: rgb(68, 73, 80); - --docsearch-hit-active-color: #fff; + --docsearch-hit-highlight-color: rgba(0, 61, 255, 0.1); --docsearch-hit-background: #fff; - --docsearch-hit-shadow: 0 1px 3px 0 rgb(212, 217, 225); /* key */ - --docsearch-key-gradient: linear-gradient( - -225deg, - rgb(213, 219, 228) 0%, - rgb(248, 248, 248) 100% - ); - --docsearch-key-shadow: inset 0 -2px 0 0 rgb(205, 205, 230), - inset 0 0 1px 1px #fff, 0 1px 2px 1px rgba(30, 35, 90, 0.4); - --docsearch-key-pressed-shadow: inset 0 -2px 0 0 #cdcde6, - inset 0 0 1px 1px #fff, 0 1px 1px 0 rgba(30, 35, 90, 0.4); + --docsearch-key-background: rgb(245, 245, 250); + --docsearch-key-color: rgba(90, 94, 154, 1); + --docsearch-key-pressed-shadow: inset 0 2px 4px rgba(120, 122, 165, 0.25); /* footer */ - --docsearch-footer-height: 44px; + --docsearch-footer-height: 52px; --docsearch-footer-background: #fff; --docsearch-footer-shadow: 0 -1px 0 0 rgb(224, 227, 232), 0 -3px 6px 0 rgba(69, 98, 155, 0.12); @@ -51,7 +51,13 @@ /* Darkmode */ html[data-theme='dark'] { - --docsearch-text-color: rgb(245, 246, 247); + --docsearch-text-color: rgba(196, 199, 220, 1); + --docsearch-secondary-text-color: rgba(182, 183, 213, 1); + --docsearch-subtle-color: rgba(33, 33, 57, 1); + --docsearch-highlight-color: rgba(69, 122, 255, 1); + --docsearch-focus-color: rgb(154, 200, 255); + --docsearch-background-color: rgba(54, 57, 90, 1); + --docsearch-icon-color: rgba(182, 183, 213, 1); --docsearch-container-background: rgba(9, 10, 17, 0.8); --docsearch-modal-background: rgb(21, 23, 42); --docsearch-modal-shadow: inset 1px 1px 0 0 rgb(44, 46, 64), @@ -61,16 +67,10 @@ html[data-theme='dark'] { --docsearch-hit-color: rgb(190, 195, 201); --docsearch-hit-shadow: none; --docsearch-hit-background: rgb(9, 10, 17); - --docsearch-key-gradient: linear-gradient( - -26.5deg, - rgb(86, 88, 114) 0%, - rgb(49, 53, 91) 100% - ); - --docsearch-key-shadow: inset 0 -2px 0 0 rgb(40, 45, 85), - inset 0 0 1px 1px rgb(81, 87, 125), 0 2px 2px 0 rgba(3, 4, 9, 0.3); - --docsearch-key-pressed-shadow: inset 0 -2px 0 0 #282d55, - inset 0 0 1px 1px #51577d, 0 1px 1px 0 #0304094d; - --docsearch-footer-background: rgb(30, 33, 54); + --docsearch-key-background: rgba(54, 57, 90, 1); + --docsearch-key-color: rgba(182, 183, 213, 1); + --docsearch-key-pressed-shadow: inset 0 2px 4px rgba(12, 13, 20, 0.4); + --docsearch-footer-background: rgba(13, 13, 13, 1); --docsearch-footer-shadow: inset 0 1px 0 0 rgba(73, 76, 106, 0.5), 0 -4px 8px 0 rgba(0, 0, 0, 0.2); --docsearch-logo-color: rgb(255, 255, 255); diff --git a/packages/docsearch-css/src/button.css b/packages/docsearch-css/src/button.css index 08722016..fe03fdca 100644 --- a/packages/docsearch-css/src/button.css +++ b/packages/docsearch-css/src/button.css @@ -1,12 +1,13 @@ .DocSearch-Button { align-items: center; - background: var(--docsearch-searchbox-background); - border: 0; - border-radius: 40px; + border: 1px solid var(--docsearch-subtle-color); + border-radius: 4px; + background-color: var(--docsearch-searchbox-background); color: var(--docsearch-muted-color); cursor: pointer; display: flex; - font-weight: 500; + font-weight: 300; + width: 286px; height: 36px; justify-content: space-between; margin: 0 0 0 16px; @@ -14,31 +15,27 @@ user-select: none; } -.DocSearch-Button:hover, -.DocSearch-Button:active, -.DocSearch-Button:focus { - background: var(--docsearch-searchbox-focus-background); - box-shadow: var(--docsearch-searchbox-shadow); - color: var(--docsearch-text-color); - outline: none; -} - .DocSearch-Button-Container { + height: 100%; align-items: center; display: flex; } +.DocSearch-Button-Container svg { + color: var(--docsearch-highlight-color); +} + .DocSearch-Search-Icon { + color: var(--docsearch-highlight-color); stroke-width: 1.6; } -.DocSearch-Button .DocSearch-Search-Icon { - color: var(--docsearch-text-color); -} - .DocSearch-Button-Placeholder { - font-size: 1rem; - padding: 0 12px 0 6px; + font-size: 1.25rem; + font-weight: 300; + padding: 0 12px 0 8px; + display: inline-block; + line-height: normal; } .DocSearch-Button-Keys { @@ -48,36 +45,42 @@ .DocSearch-Button-Key { align-items: center; - background: var(--docsearch-key-gradient); - border-radius: 3px; - box-shadow: var(--docsearch-key-shadow); - color: var(--docsearch-muted-color); + background: var(--docsearch-key-background); + border-radius: 2px; + color: var(--docsearch-key-color); + box-shadow: none !important; display: flex; - height: 18px; + height: 24px; + font-size: 20px; justify-content: center; - margin-right: 0.4em; position: relative; - padding: 0 0 2px; border: 0; - top: -1px; - width: 20px; + width: 24px; transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 100ms; } -@media (prefers-reduced-motion) { +.DocSearch-Button-Key:first-child { + margin-right: 0.4em; +} + +@media (prefers-reduced-motion) { .DocSearch-Button-Key { transition: none; } } .DocSearch-Button-Key--pressed { - transform: translate3d(0, 1px, 0); - box-shadow: var(--docsearch-key-pressed-shadow); + transform: translateY(1px); + box-shadow: var(--docsearch-key-pressed-shadow) !important; } @media (max-width: 768px) { + .DocSearch-Button { + width: auto; + } + .DocSearch-Button-Keys, .DocSearch-Button-Placeholder { display: none; diff --git a/packages/docsearch-css/src/modal.css b/packages/docsearch-css/src/modal.css index e4208564..47a92ccb 100644 --- a/packages/docsearch-css/src/modal.css +++ b/packages/docsearch-css/src/modal.css @@ -42,7 +42,7 @@ .DocSearch-Modal { background: var(--docsearch-modal-background); - border-radius: 6px; + border-radius: 4px; box-shadow: var(--docsearch-modal-shadow); flex-direction: column; margin: 60px auto auto; @@ -54,18 +54,21 @@ .DocSearch-SearchBar { display: flex; - padding: var(--docsearch-spacing) var(--docsearch-spacing) 0; +} + +.DocSearch-SearchBar-Magnifier { + color: var(--docsearch-highlight-color); } .DocSearch-Form { align-items: center; background: var(--docsearch-searchbox-focus-background); - border-radius: 4px; - box-shadow: var(--docsearch-searchbox-shadow); + border-bottom: 1px solid var(--docsearch-subtle-color); + border-radius: 4px 4px 0 0; display: flex; height: var(--docsearch-searchbox-height); margin: 0; - padding: 0 var(--docsearch-spacing); + padding: var(--docsearch-spacing) 16px; position: relative; width: 100%; } @@ -78,6 +81,7 @@ flex: 1; font: inherit; font-size: 1.2em; + font-weight: 300; height: 100%; outline: none; padding: 0 0 0 8px; @@ -96,17 +100,32 @@ display: none; } +.DocSearch-Actions { + width: var(--docsearch-actions-width); + height: var(--docsearch-actions-height); + display: flex; + align-items: center; + justify-content: flex-end; + padding: 0 2px; + gap: 16px; +} + +.DocSearch-Divider { + height: 24px; + border-left: 1px solid var(--docsearch-subtle-color); +} + .DocSearch-LoadingIndicator, .DocSearch-MagnifierLabel, -.DocSearch-Reset { +.DocSearch-Close { margin: 0; padding: 0; } .DocSearch-MagnifierLabel, -.DocSearch-Reset { +.DocSearch-Close { align-items: center; - color: var(--docsearch-highlight-color); + color: var(--docsearch-highlight-color) !important; display: flex; justify-content: center; } @@ -127,7 +146,7 @@ } @media screen and (prefers-reduced-motion: reduce) { - .DocSearch-Reset { + .DocSearch-Close { animation: none; appearance: none; background: none; @@ -140,7 +159,7 @@ } } -.DocSearch-Reset { +.DocSearch-Close { animation: fade-in 0.1s ease-in forwards; appearance: none; background: none; @@ -153,28 +172,51 @@ stroke-width: var(--docsearch-icon-stroke-width); } -.DocSearch-Reset[hidden] { +.DocSearch-Close[hidden] { display: none; } -.DocSearch-Reset:hover { +.DocSearch-Close:hover { color: var(--docsearch-highlight-color); } .DocSearch-LoadingIndicator svg, .DocSearch-MagnifierLabel svg { + color: var(--docsearch-highlight-color) !important; height: 24px; width: 24px; } -.DocSearch-Cancel { - display: none; +.DocSearch-Clear { + appearance: none; + background: none; + border: 0; + color: var(--docsearch-highlight-color); + cursor: pointer; + flex: none; + font: inherit; + font-size: 0.9em; + font-weight: 300; + height: 28px; + margin-left: var(--docsearch-spacing); + outline: none; + overflow: hidden; + padding: 0; + user-select: none; + white-space: nowrap; +} + +.DocSearch-Close:focus-visible, +.DocSearch-Clear:focus-visible { + outline: 2px solid var(--docsearch-focus-color); + outline-offset: 1px; + border-radius: 4px; } /* Modal Dropdown */ .DocSearch-Dropdown { - max-height: calc( + height: calc( var(--docsearch-modal-height) - var(--docsearch-searchbox-height) - var(--docsearch-spacing) - var(--docsearch-footer-height) ); @@ -208,20 +250,40 @@ } .DocSearch-Label { - color: var(--docsearch-muted-color); - font-size: 0.75em; + color: var(--docsearch-secondary-text-color); + font-size: 0.875em; line-height: 1.6em; + font-weight: 300; +} + +.DocSearch-NoResults-Help { + color: var(--docsearch-secondary-text-color); + font-size: 0.8em; + margin: 0; + user-select: none; + line-height: 1.5em; + font-weight: 300; } .DocSearch-Help { - color: var(--docsearch-muted-color); - font-size: 0.9em; + color: var(--docsearch-secondary-text-color); + font-size: 0.8em; margin: 0; user-select: none; + line-height: 1.5em; + font-weight: 300; } .DocSearch-Title { - font-size: 1.2em; + color: var(--docsearch-text-color); + vertical-align: middle; + font-size: 1.1em; + line-height: 0.5em; + font-weight: 300; +} + +.DocSearch-Title strong { + font-weight: 500; } .DocSearch-Logo a { @@ -293,7 +355,6 @@ .DocSearch-Hit a { background: var(--docsearch-hit-background); border-radius: 4px; - box-shadow: var(--docsearch-hit-shadow); display: block; padding-left: var(--docsearch-spacing); width: 100%; @@ -301,12 +362,12 @@ .DocSearch-Hit-source { background: var(--docsearch-modal-background); - color: var(--docsearch-highlight-color); - font-size: 0.85em; + color: var(--docsearch-text-color); + font-size: 0.9em; font-weight: 600; line-height: 32px; margin: 0 -4px; - padding: 8px 4px 0; + padding: 8px 4px 4px; position: sticky; top: 0; z-index: 10; @@ -321,16 +382,17 @@ } .DocSearch-Hit[aria-selected='true'] a { - background-color: var(--docsearch-highlight-color); + background-color: var(--docsearch-hit-highlight-color) !important; } -.DocSearch-Hit[aria-selected='true'] mark { +.DocSearch-Hit mark { + color: var(--docsearch-highlight-color); text-decoration: underline; } .DocSearch-Hit-Container { align-items: center; - color: var(--docsearch-hit-color); + color: var(--docsearch-text-color); display: flex; flex-direction: row; height: var(--docsearch-hit-height); @@ -338,7 +400,7 @@ } .DocSearch-Hit-icon { - color: var(--docsearch-muted-color); + color: var(--docsearch-secondary-text-color); height: 20px; stroke-width: var(--docsearch-icon-stroke-width); width: 20px; @@ -395,13 +457,6 @@ svg.DocSearch-Hit-Select-Icon { transition: background-color 0.1s ease-in; } -@media screen and (prefers-reduced-motion: reduce) { - .DocSearch-Hit-action-button:hover, - .DocSearch-Hit-action-button:focus { - transition: none; - } -} - .DocSearch-Hit-action-button:hover path, .DocSearch-Hit-action-button:focus path { fill: #fff; @@ -420,6 +475,7 @@ svg.DocSearch-Hit-Select-Icon { text-overflow: ellipsis; white-space: nowrap; width: 80%; + gap: 4px; } .DocSearch-Hit-title { @@ -427,18 +483,20 @@ svg.DocSearch-Hit-Select-Icon { } .DocSearch-Hit-path { - color: var(--docsearch-muted-color); + color: var(--docsearch-secondary-text-color); font-size: 0.75em; } .DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-title, -.DocSearch-Hit[aria-selected='true'] mark, .DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-text, -.DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-path, -.DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-icon, -.DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-action, .DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-Tree { - color: var(--docsearch-hit-active-color) !important; + color: var(--docsearch-text-color) !important; +} + +.DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-action, +.DocSearch-Hit[aria-selected='true'] mark, +.DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-icon { + color: var(--docsearch-highlight-color) !important; } @media screen and (prefers-reduced-motion: reduce) { @@ -454,32 +512,64 @@ svg.DocSearch-Hit-Select-Icon { .DocSearch-NoResults, .DocSearch-StartScreen, .DocSearch-ErrorScreen { - font-size: 0.9em; + font-size: 1.25em; + font-weight: 400; margin: 0 auto; - padding: 36px 0; + color: var(--docsearch-secondary-text-color); text-align: center; width: 80%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.DocSearch-NoResults, +.DocSearch-ErrorScreen { + height: 80%; +} + +.DocSearch-StartScreen { + height: 100%; +} + +.DocSearch-NoResults { + gap: 24px; +} + +.DocSearch-StartScreen, +.DocSearch-ErrorScreen { + gap: 24px; +} + +.DocSearch-StartScreen-Icon { + width: 64px; + height: 64px; + stroke: var(--docsearch-icon-color); } .DocSearch-Screen-Icon { - color: var(--docsearch-muted-color); - padding-bottom: 12px; + color: var(--docsearch-icon-color); } .DocSearch-NoResults-Prefill-List { - display: inline-block; - padding-bottom: 24px; - text-align: left; + display: flex; + flex-direction: column; + gap: 8px; + text-align: center; } .DocSearch-NoResults-Prefill-List ul { - display: inline-block; + display: flex; + flex-direction: column; + gap: 8px; + height: 40px; padding: 8px 0 0; } .DocSearch-NoResults-Prefill-List li { - list-style-position: inside; - list-style-type: '» '; + display: flex; + align-items: center; } .DocSearch-Prefill { @@ -489,10 +579,13 @@ svg.DocSearch-Hit-Select-Icon { border-radius: 1em; color: var(--docsearch-highlight-color); cursor: pointer; - display: inline-block; - font-size: 1em; - font-weight: 700; - padding: 0; + display: inline-flex; + align-items: center; + gap: 4px; + height: 40px; + font-size: 0.8em; + font-weight: 300; + padding: 0 4px; } .DocSearch-Prefill:hover, @@ -506,8 +599,8 @@ svg.DocSearch-Hit-Select-Icon { .DocSearch-Footer { align-items: center; background: var(--docsearch-footer-background); - border-radius: 0 0 8px 8px; - box-shadow: var(--docsearch-footer-shadow); + border-top: 1px solid var(--docsearch-subtle-color); + border-radius: 0 0 4px 4px; display: flex; flex-direction: row-reverse; flex-shrink: 0; @@ -526,6 +619,7 @@ svg.DocSearch-Hit-Select-Icon { list-style: none; margin: 0; padding: 0; + gap: 16px; } .DocSearch-Commands li { @@ -533,23 +627,31 @@ svg.DocSearch-Hit-Select-Icon { display: flex; } -.DocSearch-Commands li:not(:last-of-type) { - margin-right: 0.8em; -} - .DocSearch-Commands-Key { align-items: center; - background: var(--docsearch-key-gradient); border-radius: 2px; - box-shadow: var(--docsearch-key-shadow); + background-color: var(--docsearch-background-color); display: flex; - height: 18px; + height: 24px; justify-content: center; - margin-right: 0.4em; - padding: 0 0 1px; - color: var(--docsearch-muted-color); + margin-right: 4px; + color: var(--docsearch-icon-color); border: 0; - width: 20px; + width: 24px; + box-shadow: none !important; +} + +.DocSearch-Commands-Key:last-of-type { + margin-right: 8px; +} + +.DocSearch-Escape-Key { + font-weight: 300; + font-size: 10px; + line-height: 16px; + letter-spacing: normal; + text-align: center; + text-transform: uppercase; } /* Hide element accessibly, so that it is still accessible to @@ -568,7 +670,7 @@ assistive tech users */ @media (max-width: 768px) { :root { --docsearch-spacing: 10px; - --docsearch-footer-height: 40px; + --docsearch-footer-height: 48px; } .DocSearch-Dropdown { @@ -612,25 +714,6 @@ assistive tech users */ ); } - .DocSearch-Cancel { - appearance: none; - background: none; - border: 0; - color: var(--docsearch-highlight-color); - cursor: pointer; - display: inline-block; - flex: none; - font: inherit; - font-size: 1em; - font-weight: 500; - margin-left: var(--docsearch-spacing); - outline: none; - overflow: hidden; - padding: 0; - user-select: none; - white-space: nowrap; - } - .DocSearch-Commands { display: none; } diff --git a/packages/docsearch-react/src/AlgoliaLogo.tsx b/packages/docsearch-react/src/AlgoliaLogo.tsx index c81b4579..a3d1b949 100644 --- a/packages/docsearch-react/src/AlgoliaLogo.tsx +++ b/packages/docsearch-react/src/AlgoliaLogo.tsx @@ -1,7 +1,7 @@ import React, { type JSX } from 'react'; type AlgoliaLogoTranslations = Partial<{ - searchByText: string; + poweredByText: string; }>; type AlgoliaLogoProps = { @@ -9,7 +9,7 @@ type AlgoliaLogoProps = { }; export function AlgoliaLogo({ translations = {} }: AlgoliaLogoProps): JSX.Element { - const { searchByText = 'Search by' } = translations; + const { poweredByText = 'Powered by' } = translations; return ( - {searchByText} + {poweredByText} ] as const) - : (['Meta', 'Command', key] as const); + : // eslint-disable-next-line react/jsx-key + (['Meta', 'Command', ] as const); return ( - +
+ - +
+ + +
+ ); } diff --git a/packages/docsearch-react/src/StartScreen.tsx b/packages/docsearch-react/src/StartScreen.tsx index a43d7134..ec73865c 100644 --- a/packages/docsearch-react/src/StartScreen.tsx +++ b/packages/docsearch-react/src/StartScreen.tsx @@ -1,6 +1,6 @@ import React, { type JSX } from 'react'; -import { RecentIcon, ResetIcon, StarIcon } from './icons'; +import { RecentIcon, CloseIcon, StarIcon, SearchIcon } from './icons'; import { Results } from './Results'; import type { ScreenStateProps } from './ScreenState'; import type { InternalDocSearchHit } from './types'; @@ -22,7 +22,7 @@ type StartScreenProps = Omit, 'translatio export function StartScreen({ translations = {}, ...props }: StartScreenProps): JSX.Element | null { const { recentSearchesTitle = 'Recent', - noRecentSearchesText = 'No recent searches', + noRecentSearchesText = 'Make a search to see results', saveRecentSearchButtonTitle = 'Save this search', removeRecentSearchButtonTitle = 'Remove this search from history', favoriteSearchesTitle = 'Favorite', @@ -35,6 +35,9 @@ export function StartScreen({ translations = {}, ...props }: StartScreenProps): return (
+
+ +

{noRecentSearchesText}

); @@ -89,7 +92,7 @@ export function StartScreen({ translations = {}, ...props }: StartScreenProps): }); }} > - +
@@ -120,7 +123,7 @@ export function StartScreen({ translations = {}, ...props }: StartScreenProps): }); }} > - + )} diff --git a/packages/docsearch-react/src/__tests__/api.test.tsx b/packages/docsearch-react/src/__tests__/api.test.tsx index a2ea317b..d10371db 100644 --- a/packages/docsearch-react/src/__tests__/api.test.tsx +++ b/packages/docsearch-react/src/__tests__/api.test.tsx @@ -134,10 +134,10 @@ describe('api', () => { translations={{ modal: { searchBox: { - resetButtonTitle: 'Effacer', - resetButtonAriaLabel: 'Effacer', - cancelButtonText: 'Annuler', - cancelButtonAriaLabel: 'Annuler', + clearButtonTitle: 'Effacer', + clearButtonAriaLabel: 'Effacer', + closeButtonText: 'Fermer', + closeButtonAriaLabel: 'Fermer', searchInputLabel: 'Recherche', }, }, @@ -153,10 +153,10 @@ describe('api', () => { expect(document.querySelector(docSearchSelector)).toBeInTheDocument(); - expect(document.querySelector('.DocSearch-Cancel')?.innerHTML).toBe('Annuler'); - expect(document.querySelector('.DocSearch-Cancel')?.getAttribute('aria-label')).toBe('Annuler'); - expect(document.querySelector('.DocSearch-Reset')?.getAttribute('title')).toBe('Effacer'); - expect(document.querySelector('.DocSearch-Reset')?.getAttribute('aria-label')).toBe('Effacer'); + expect(document.querySelector('.DocSearch-Clear')?.innerHTML).toBe('Effacer'); + expect(document.querySelector('.DocSearch-Clear')?.getAttribute('aria-label')).toBe('Effacer'); + expect(document.querySelector('.DocSearch-Close')?.getAttribute('title')).toBe('Fermer'); + expect(document.querySelector('.DocSearch-Close')?.getAttribute('aria-label')).toBe('Fermer'); expect(searchInputLabel?.textContent).toBe('Recherche'); }); @@ -170,9 +170,9 @@ describe('api', () => { closeKeyAriaLabel: "Touche d'échappement", navigateText: 'Pour naviguer', navigateUpKeyAriaLabel: 'Flèche vers le haut', - navigateDownKeyAriaLabel: 'Flèche le bas', - searchByText: 'Recherche par', - selectText: 'Pour selectionner', + navigateDownKeyAriaLabel: 'Flèche vers le bas', + poweredByText: 'Propulsé par', + selectText: 'Pour sélectionner', selectKeyAriaLabel: "Touche d'entrée", }, }, @@ -186,17 +186,18 @@ describe('api', () => { fireEvent.click(await screen.findByText('Search')); }); - expect(screen.getByText('Recherche par')).toBeInTheDocument(); - expect(screen.getByText('Pour fermer')).toBeInTheDocument(); - expect(screen.getByText('Pour naviguer')).toBeInTheDocument(); - expect(screen.getByText('Pour selectionner')).toBeInTheDocument(); - expect( - document.querySelector('.DocSearch-Commands-Key > svg[aria-label="Touche d\'échappement"]'), - ).toBeInTheDocument(); + await screen.findByText('Propulsé par'); + await screen.findByText('Pour fermer'); + await screen.findByText('Pour naviguer'); + await screen.findByText('Pour sélectionner'); + + expect(screen.getByLabelText("Touche d'échappement")).toBeInTheDocument(); expect( document.querySelector('.DocSearch-Commands-Key > svg[aria-label="Flèche vers le haut"]'), ).toBeInTheDocument(); - expect(document.querySelector('.DocSearch-Commands-Key > svg[aria-label="Flèche le bas"]')).toBeInTheDocument(); + expect( + document.querySelector('.DocSearch-Commands-Key > svg[aria-label="Flèche vers le bas"]'), + ).toBeInTheDocument(); expect( document.querySelector('.DocSearch-Commands-Key > svg[aria-label="Touche d\'entrée"]'), ).toBeInTheDocument(); @@ -228,7 +229,7 @@ describe('api', () => { }); }); - expect(screen.getByText(/No results for/)).toBeInTheDocument(); + expect(screen.getByText(/No results found for/)).toBeInTheDocument(); expect(document.querySelector('.DocSearch-Help a')).not.toBeInTheDocument(); }); @@ -255,7 +256,7 @@ describe('api', () => { }); }); - expect(screen.getByText(/No results for/)).toBeInTheDocument(); + expect(screen.getByText(/No results found for/)).toBeInTheDocument(); const link = document.querySelector('.DocSearch-Help a'); expect(link).toBeInTheDocument(); expect(link?.getAttribute('href')).toBe('https://github.com/algolia/docsearch/issues/new?title=q'); diff --git a/packages/docsearch-react/src/icons/ResetIcon.tsx b/packages/docsearch-react/src/icons/CloseIcon.tsx similarity index 89% rename from packages/docsearch-react/src/icons/ResetIcon.tsx rename to packages/docsearch-react/src/icons/CloseIcon.tsx index 7f0beb0d..8c8c173a 100644 --- a/packages/docsearch-react/src/icons/ResetIcon.tsx +++ b/packages/docsearch-react/src/icons/CloseIcon.tsx @@ -1,6 +1,6 @@ import React, { type JSX } from 'react'; -export function ResetIcon(): JSX.Element { +export function CloseIcon(): JSX.Element { return ( + + + ); +} diff --git a/packages/docsearch-react/src/icons/NoResultsIcon.tsx b/packages/docsearch-react/src/icons/NoResultsIcon.tsx index 2da34d62..df74e920 100644 --- a/packages/docsearch-react/src/icons/NoResultsIcon.tsx +++ b/packages/docsearch-react/src/icons/NoResultsIcon.tsx @@ -3,16 +3,20 @@ import React, { type JSX } from 'react'; export function NoResultsIcon(): JSX.Element { return ( - + + + + ); } diff --git a/packages/docsearch-react/src/icons/SearchIcon.tsx b/packages/docsearch-react/src/icons/SearchIcon.tsx index 0572031d..d9a89ec1 100644 --- a/packages/docsearch-react/src/icons/SearchIcon.tsx +++ b/packages/docsearch-react/src/icons/SearchIcon.tsx @@ -1,16 +1,15 @@ import React, { type JSX } from 'react'; -export function SearchIcon(): JSX.Element { +interface SearchIconProps { + size?: number; + color?: string; +} + +export function SearchIcon({ size = 20, color = 'currentColor' }: SearchIconProps): JSX.Element { return ( -
- No results screen with informative message + No results screen with informative message
## `resultsFooterComponent`