fix: avoid global styles / Garden styles clash

zendesk · May 6, 2024 · b5b33c1 · b5b33c1
1 parent 2fa52ab
commit b5b33c1
Show file tree

Hide file tree

Showing 11 changed files with 81 additions and 102 deletions.
diff --git a/assets/new-request-form-bundle.js b/assets/new-request-form-bundle.js
diff --git a/src/modules/new-request-form/fields/CreditCard.tsx b/src/modules/new-request-form/fields/CreditCard.tsx
@@ -27,13 +27,6 @@ function getLastDigits(value: string): string {
   return value ? value.replaceAll("X", "") : "";
 }
 
-// override CPH default style. Can be removed once global styles are removed
-const StyledMediaInput = styled(MediaInput)`
-  &:focus {
-    border: none !important;
-  }
-`;
-
 const DigitsHintSpan = styled(Span)`
   margin-left: ${(props) => props.theme.space.xxs};
 `;
@@ -55,7 +48,7 @@ export function CreditCard({ field, onChange }: CreditCardProps): JSX.Element {
       {description && (
         <Hint dangerouslySetInnerHTML={{ __html: description }} />
       )}
-      <StyledMediaInput
+      <MediaInput
         start={<CreditCardIcon />}
         name={name}
         type="text"

diff --git a/src/modules/new-request-form/fields/cc-field/CcField.tsx b/src/modules/new-request-form/fields/cc-field/CcField.tsx
@@ -71,11 +71,6 @@ const StyledInput = styled(Input)`
   left: 0;
   height: var(--line-height);
   line-height: var(--line-height);
-
-  // override CPH default style. Can be removed once global styles are removed
-  &:focus {
-    border: none !important;
-  }
 `;
 
 const AnnouncementMessage = styled.span`

diff --git a/style.css b/style.css
diff --git a/styles/_base.scss b/styles/_base.scss
@@ -60,64 +60,68 @@ a {
   }
 }
 
-input,
-textarea {
-  color: #000;
-  font-size: $input-font-size;
-}
-
-input {
-  max-width: 100%;
-  box-sizing: border-box;
-  transition: $input-transition;
-
-  &:not([type="checkbox"]) {
+.hbs-form, .search {
+  input,
+  textarea {
+    color: #000;
+    font-size: $input-font-size;
+  }
+
+  input {
+    max-width: 100%;
+    box-sizing: border-box;
+    transition: $input-transition;
+
+    /* We use the :where selector to not increase the specificity of the selector */
+    &:where(:not([type="checkbox"])) {
+      outline: none;
+
+      &:focus {
+        border: 1px solid $brand_color;
+      }
+    }
+  }
+
+  input[disabled] {
+    background-color: #ddd;
+  }
+
+  select {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23CCC' d='M0 0h10L5 6 0 0z'/%3E%3C/svg%3E%0A")
+      no-repeat #fff;
+    background-position: right 10px center;
+    border: 1px solid $high-contrast-border-color;
+    border-radius: 4px;
+    padding: 8px 30px 8px 10px;
     outline: none;
-
+    color: $field-text-focus-color;
+    width: 100%;
+
     &:focus {
       border: 1px solid $brand_color;
     }
+
+    &::-ms-expand {
+      display: none;
+    }
   }
-}
-
-input[disabled] {
-  background-color: #ddd;
-}
-
-select {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23CCC' d='M0 0h10L5 6 0 0z'/%3E%3C/svg%3E%0A")
-    no-repeat #fff;
-  background-position: right 10px center;
-  border: 1px solid $high-contrast-border-color;
-  border-radius: 4px;
-  padding: 8px 30px 8px 10px;
-  outline: none;
-  color: $field-text-focus-color;
-  width: 100%;
-
-  &:focus {
-    border: 1px solid $brand_color;
-  }
-
-  &::-ms-expand {
-    display: none;
+
+  textarea {
+    border: 1px solid $high-contrast-border-color;
+    border-radius: 2px;
+    resize: vertical;
+    width: 100%;
+    outline: none;
+    padding: 10px;
+
+    &:focus {
+      border: 1px solid $brand_color;
+    }
   }
 }
 
-textarea {
-  border: 1px solid $high-contrast-border-color;
-  border-radius: 2px;
-  resize: vertical;
-  width: 100%;
-  outline: none;
-  padding: 10px;
-
-  &:focus {
-    border: 1px solid $brand_color;
-  }
-}
 
 .container {
   @include max-width-container;

diff --git a/styles/_buttons.scss b/styles/_buttons.scss
@@ -46,7 +46,7 @@
   }
 }
 
-.button-large, input[type="submit"] {
+.button-large, .hbs-form input[type="submit"] {
   @include tablet {
     width: auto;
   }

diff --git a/templates/article_page.hbs b/templates/article_page.hbs
@@ -308,7 +308,7 @@
 
             {{pagination}}
 
-            {{#form 'comment' class='comment-form'}}
+            {{#form 'comment' class='comment-form hbs-form'}}
               <div class="avatar comment-avatar">
                 {{user_avatar class='user-avatar'}}
               </div>

diff --git a/templates/community_post_page.hbs b/templates/community_post_page.hbs
@@ -303,7 +303,7 @@
       {{pagination}}
 
       <section class="post-comments">
-        {{#form 'comment' class='comment-form'}}
+        {{#form 'comment' class='comment-form hbs-form'}}
           <div class="avatar comment-avatar">
             {{user_avatar class='user-avatar'}}
           </div>

diff --git a/templates/new_community_post_page.hbs b/templates/new_community_post_page.hbs
@@ -16,7 +16,7 @@
   </h1>
 
   <div id="main-content" class="form">
-    {{#form 'post' class='new_community_post'}}
+    {{#form 'post' class='new_community_post hbs-form'}}
       <div class="form-field">
         {{#required 'title'}}
           {{label 'title'}}

diff --git a/templates/request_page.hbs b/templates/request_page.hbs
@@ -64,7 +64,7 @@
         {{comment_callout}}
       </div>
 
-      {{#form 'comment' class='comment-form'}}
+      {{#form 'comment' class='comment-form hbs-form'}}
         <div class="avatar comment-avatar">
           {{user_avatar class='user-avatar'}}
         </div>
@@ -160,7 +160,7 @@
           <dt>{{t 'id'}}</dt>
           <dd>#{{request.id}}</dd>
 
-          {{#form 'organization' id='request-organization'}}
+          {{#form 'organization' id='request-organization' class='hbs-form'}}
             <dt>{{t 'organization'}}</dt>
             <dd>{{select 'organization'}}</dd>
           {{/form}}

diff --git a/templates/requests_page.hbs b/templates/requests_page.hbs
@@ -36,7 +36,7 @@
       </div>
     </header>
 
-    {{#form 'requests_filter' id="main-content" class='requests-table-toolbar'}}
+    {{#form 'requests_filter' id="main-content" class='requests-table-toolbar hbs-form'}}
       <div class="search">
         <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" focusable="false" viewBox="0 0 12 12" class="search-icon" aria-hidden="true">
           <circle cx="4.5" cy="4.5" r="4" fill="none" stroke="currentColor"/>