fix(docsearch): rename DocSearch-Button CSS class

francoischalifour · Jul 22, 2020 · f3a5449 · f3a5449
1 parent cdc2879
commit f3a5449
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 28 deletions.
diff --git a/cypress/integration/search/actions.spec.js b/cypress/integration/search/actions.spec.js
@@ -6,7 +6,7 @@ context('Start', () => {
   });
 
   it('Open Modal on Search Button click', () => {
-    cy.get('.DocSearch-SearchButton').click();
+    cy.get('.DocSearch-Button').click();
     cy.get('.DocSearch-Modal').should('be.visible');
     cy.get('.DocSearch-Input').should('be.focus');
     cy.percySnapshot('modal-opened');
@@ -34,7 +34,7 @@ context('Start', () => {
 context('End', () => {
   beforeEach(() => {
     cy.visit(baseUrl);
-    cy.get('.DocSearch-SearchButton').click();
+    cy.get('.DocSearch-Button').click();
   });
 
   it('Close Modal with Esc key', () => {
@@ -62,7 +62,7 @@ context('End', () => {
 context('Search', () => {
   beforeEach(() => {
     cy.visit(baseUrl);
-    cy.get('.DocSearch-SearchButton').click();
+    cy.get('.DocSearch-Button').click();
   });
 
   it('Results are displayed after a Query', () => {
@@ -102,36 +102,36 @@ context('Search', () => {
 context('Recent and Favorites', () => {
   beforeEach(() => {
     cy.visit(baseUrl);
-    cy.get('.DocSearch-SearchButton').click();
+    cy.get('.DocSearch-Button').click();
     cy.get('.DocSearch-Input').type('get');
     cy.get('.DocSearch-Hits #docsearch-item-0 > a').click({ force: true });
   });
 
   it('Recent search is displayed after visiting a result', () => {
-    cy.get('.DocSearch-SearchButton').click();
+    cy.get('.DocSearch-Button').click();
     cy.contains('Recent').should('be.visible');
     cy.get('#docsearch-item-0').should('be.visible');
     cy.percySnapshot('recent-search');
   });
 
   it('Recent search can be deleted', () => {
-    cy.get('.DocSearch-SearchButton').click();
+    cy.get('.DocSearch-Button').click();
     cy.get('#docsearch-item-0')
       .find('[data-cy=remove-recent]')
       .trigger('click');
     cy.contains('No recent searches').should('be.visible');
   });
 
   it('Recent search can be favorited', () => {
-    cy.get('.DocSearch-SearchButton').click();
+    cy.get('.DocSearch-Button').click();
     cy.get('#docsearch-item-0').find('[data-cy=fav-recent]').trigger('click');
     cy.contains('Favorites').should('be.visible');
     cy.get('#docsearch-item-0').should('be.visible');
     cy.percySnapshot('favorite');
   });
 
   it('Favorite can be deleted', () => {
-    cy.get('.DocSearch-SearchButton').click();
+    cy.get('.DocSearch-Button').click();
     cy.get('#docsearch-item-0').find('[data-cy=fav-recent]').trigger('click');
     cy.wait(2000);
     cy.get('#docsearch-item-0').find('[data-cy=remove-fav]').trigger('click');

diff --git a/cypress/support/commands.js b/cypress/support/commands.js
@@ -6,7 +6,7 @@ Cypress.Commands.add('darkmode', () => {
 });
 
 Cypress.Commands.add('openModal', () => {
-  cy.get('.DocSearch-SearchButton').click();
+  cy.get('.DocSearch-Button').click();
 });
 
 Cypress.Commands.add('closeModal', () => {

diff --git a/packages/docsearch-css/src/button.css b/packages/docsearch-css/src/button.css
@@ -1,4 +1,4 @@
-.DocSearch-SearchButton {
+.DocSearch-Button {
   align-items: center;
   background: var(--docsearch-searchbox-background);
   border: 0;
@@ -14,9 +14,9 @@
   user-select: none;
 }
 
-.DocSearch-SearchButton:hover,
-.DocSearch-SearchButton:active,
-.DocSearch-SearchButton:focus {
+.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);
@@ -27,16 +27,16 @@
   stroke-width: 1.6;
 }
 
-.DocSearch-SearchButton .DocSearch-Search-Icon {
+.DocSearch-Button .DocSearch-Search-Icon {
   color: var(--docsearch-text-color);
 }
 
-.DocSearch-SearchButton-Placeholder {
+.DocSearch-Button-Placeholder {
   font-size: 1rem;
   padding: 0 12px 0 6px;
 }
 
-.DocSearch-SearchButton-Key {
+.DocSearch-Button-Key {
   align-items: center;
   background: var(--docsearch-key-gradient);
   border-radius: 3px;
@@ -53,12 +53,12 @@
 }
 
 @media (max-width: 750px) {
-  .DocSearch-SearchButton-KeySeparator,
-  .DocSearch-SearchButton-Key {
+  .DocSearch-Button-KeySeparator,
+  .DocSearch-Button-Key {
     display: none;
   }
 
-  .DocSearch-SearchButton-Placeholder {
+  .DocSearch-Button-Placeholder {
     display: none;
   }
 }
diff --git a/packages/docsearch-react/src/DocSearchButton.tsx b/packages/docsearch-react/src/DocSearchButton.tsx
@@ -32,19 +32,14 @@ export const DocSearchButton = React.forwardRef<
   }, []);
 
   return (
-    <button
-      type="button"
-      className="DocSearch-SearchButton"
-      {...props}
-      ref={ref}
-    >
+    <button type="button" className="DocSearch-Button" {...props} ref={ref}>
       <SearchIcon />
-      <span className="DocSearch-SearchButton-Placeholder">Search</span>
+      <span className="DocSearch-Button-Placeholder">Search</span>
 
-      <span className="DocSearch-SearchButton-Key">
+      <span className="DocSearch-Button-Key">
         {key === ACTION_KEY_DEFAULT ? <ControlKeyIcon /> : key}
       </span>
-      <span className="DocSearch-SearchButton-Key">K</span>
+      <span className="DocSearch-Button-Key">K</span>
     </button>
   );
 });