fix: css: scope normalize css reset to octuple components

EightfoldAI · Aug 2, 2022 · db9cc2e · db9cc2e
1 parent 2ef7609
commit db9cc2e
Show file tree

Hide file tree

Showing 41 changed files with 666 additions and 813 deletions.
diff --git a/src/components/Button/BaseButton.tsx b/src/components/Button/BaseButton.tsx
@@ -61,6 +61,7 @@ export const BaseButton: FC<InternalButtonProps> = React.forwardRef(
 
         const buttonBaseSharedClassNames: string = mergeClasses([
             classNames,
+            styles.button,
             {
                 [styles.buttonSmall]:
                     size === ButtonSize.Flex && largeScreenActive,

diff --git a/src/components/Button/button.module.scss b/src/components/Button/button.module.scss
@@ -1,4 +1,6 @@
 .button {
+    @include button-reset();
+
     --button-counter-default-background-color: var(--grey-color-20);
     --button-counter-hover-background-color: var(--primary-color-20);
     --button-counter-checked-background-color: var(--primary-color-10);

diff --git a/src/components/CheckBox/checkbox.module.scss b/src/components/CheckBox/checkbox.module.scss
@@ -1,4 +1,6 @@
 .selector {
+    @include selector-reset();
+
     display: flex;
     position: relative;
     width: fit-content;

diff --git a/src/components/DateTimePicker/DatePicker/datepicker.module.scss b/src/components/DateTimePicker/DatePicker/datepicker.module.scss
@@ -3,6 +3,8 @@
 
 .picker {
     @include reset-component();
+    @include input-reset();
+
     @include picker-padding(
         $picker-input-height-m,
         $picker-font-size-m,

diff --git a/src/components/DateTimePicker/Internal/Tests/__snapshots__/partial.rtl.shot b/src/components/DateTimePicker/Internal/Tests/__snapshots__/partial.rtl.shot
@@ -21,7 +21,7 @@ LoadedCheerio {
               Node {
                 "attribs": Object {
                   "aria-disabled": "false",
-                  "class": "picker-header-super-prev-btn button button-neutral button-small pill-shape icon-left",
+                  "class": "picker-header-super-prev-btn button button-neutral button button-small pill-shape icon-left",
                 },
                 "children": Array [
                   Node {
@@ -106,7 +106,7 @@ LoadedCheerio {
                     Node {
                       "attribs": Object {
                         "aria-disabled": "false",
-                        "class": "picker-year-btn button button-neutral button-small pill-shape",
+                        "class": "picker-year-btn button button-neutral button button-small pill-shape",
                       },
                       "children": Array [
                         Node {
@@ -157,7 +157,7 @@ LoadedCheerio {
                   "next": Node {
                     "attribs": Object {
                       "aria-disabled": "false",
-                      "class": "picker-header-super-next-btn button button-neutral button-small pill-shape icon-left",
+                      "class": "picker-header-super-next-btn button button-neutral button button-small pill-shape icon-left",
                     },
                     "children": Array [
                       Node {
@@ -277,7 +277,7 @@ LoadedCheerio {
                   Node {
                     "attribs": Object {
                       "aria-disabled": "false",
-                      "class": "picker-year-btn button button-neutral button-small pill-shape",
+                      "class": "picker-year-btn button button-neutral button button-small pill-shape",
                     },
                     "children": Array [
                       Node {
@@ -328,7 +328,7 @@ LoadedCheerio {
                 "next": Node {
                   "attribs": Object {
                     "aria-disabled": "false",
-                    "class": "picker-header-super-next-btn button button-neutral button-small pill-shape icon-left",
+                    "class": "picker-header-super-next-btn button button-neutral button button-small pill-shape icon-left",
                   },
                   "children": Array [
                     Node {
@@ -422,7 +422,7 @@ LoadedCheerio {
                 "prev": Node {
                   "attribs": Object {
                     "aria-disabled": "false",
-                    "class": "picker-header-super-prev-btn button button-neutral button-small pill-shape icon-left",
+                    "class": "picker-header-super-prev-btn button button-neutral button button-small pill-shape icon-left",
                   },
                   "children": Array [
                     Node {
@@ -523,7 +523,7 @@ LoadedCheerio {
               Node {
                 "attribs": Object {
                   "aria-disabled": "false",
-                  "class": "picker-header-super-next-btn button button-neutral button-small pill-shape icon-left",
+                  "class": "picker-header-super-next-btn button button-neutral button button-small pill-shape icon-left",
                 },
                 "children": Array [
                   Node {
@@ -610,7 +610,7 @@ LoadedCheerio {
                     Node {
                       "attribs": Object {
                         "aria-disabled": "false",
-                        "class": "picker-year-btn button button-neutral button-small pill-shape",
+                        "class": "picker-year-btn button button-neutral button button-small pill-shape",
                       },
                       "children": Array [
                         Node {
@@ -663,7 +663,7 @@ LoadedCheerio {
                   "prev": Node {
                     "attribs": Object {
                       "aria-disabled": "false",
-                      "class": "picker-header-super-prev-btn button button-neutral button-small pill-shape icon-left",
+                      "class": "picker-header-super-prev-btn button button-neutral button button-small pill-shape icon-left",
                     },
                     "children": Array [
                       Node {
@@ -14909,7 +14909,7 @@ LoadedCheerio {
                 Node {
                   "attribs": Object {
                     "aria-disabled": "false",
-                    "class": "picker-header-super-prev-btn button button-neutral button-small pill-shape icon-left",
+                    "class": "picker-header-super-prev-btn button button-neutral button button-small pill-shape icon-left",
                   },
                   "children": Array [
                     Node {
@@ -14994,7 +14994,7 @@ LoadedCheerio {
                       Node {
                         "attribs": Object {
                           "aria-disabled": "false",
-                          "class": "picker-year-btn button button-neutral button-small pill-shape",
+                          "class": "picker-year-btn button button-neutral button button-small pill-shape",
                         },
                         "children": Array [
                           Node {
@@ -15045,7 +15045,7 @@ LoadedCheerio {
                     "next": Node {
                       "attribs": Object {
                         "aria-disabled": "false",
-                        "class": "picker-header-super-next-btn button button-neutral button-small pill-shape icon-left",
+                        "class": "picker-header-super-next-btn button button-neutral button button-small pill-shape icon-left",
                       },
                       "children": Array [
                         Node {
@@ -15165,7 +15165,7 @@ LoadedCheerio {
                     Node {
                       "attribs": Object {
                         "aria-disabled": "false",
-                        "class": "picker-year-btn button button-neutral button-small pill-shape",
+                        "class": "picker-year-btn button button-neutral button button-small pill-shape",
                       },
                       "children": Array [
                         Node {
@@ -15216,7 +15216,7 @@ LoadedCheerio {
                   "next": Node {
                     "attribs": Object {
                       "aria-disabled": "false",
-                      "class": "picker-header-super-next-btn button button-neutral button-small pill-shape icon-left",
+                      "class": "picker-header-super-next-btn button button-neutral button button-small pill-shape icon-left",
                     },
                     "children": Array [
                       Node {
@@ -15310,7 +15310,7 @@ LoadedCheerio {
                   "prev": Node {
                     "attribs": Object {
                       "aria-disabled": "false",
-                      "class": "picker-header-super-prev-btn button button-neutral button-small pill-shape icon-left",
+                      "class": "picker-header-super-prev-btn button button-neutral button button-small pill-shape icon-left",
                     },
                     "children": Array [
                       Node {
@@ -15411,7 +15411,7 @@ LoadedCheerio {
                 Node {
                   "attribs": Object {
                     "aria-disabled": "false",
-                    "class": "picker-header-super-next-btn button button-neutral button-small pill-shape icon-left",
+                    "class": "picker-header-super-next-btn button button-neutral button button-small pill-shape icon-left",
                   },
                   "children": Array [
                     Node {
@@ -15498,7 +15498,7 @@ LoadedCheerio {
                       Node {
                         "attribs": Object {
                           "aria-disabled": "false",
-                          "class": "picker-year-btn button button-neutral button-small pill-shape",
+                          "class": "picker-year-btn button button-neutral button button-small pill-shape",
                         },
                         "children": Array [
                           Node {
@@ -15551,7 +15551,7 @@ LoadedCheerio {
                     "prev": Node {
                       "attribs": Object {
                         "aria-disabled": "false",
-                        "class": "picker-header-super-prev-btn button button-neutral button-small pill-shape icon-left",
+                        "class": "picker-header-super-prev-btn button button-neutral button button-small pill-shape icon-left",
                       },
                       "children": Array [
                         Node {

diff --git a/src/components/DateTimePicker/Internal/ocpicker.module.scss b/src/components/DateTimePicker/Internal/ocpicker.module.scss
@@ -1,6 +1,8 @@
 @import '../DatePicker/Styles/mixins';
 
 .picker {
+    @include input-reset();
+
     border: $picker-border;
     border-radius: $picker-border-radius;
     display: inline-flex;

diff --git a/src/components/Dropdown/Dropdown.stories.tsx b/src/components/Dropdown/Dropdown.stories.tsx
@@ -127,6 +127,9 @@ const Overlay = () => (
                 iconProps={{
                     path: item.icon,
                 }}
+                style={{
+                    margin: '4px 0',
+                }}
             />
         )}
     />

diff --git a/src/components/Empty/empty.module.scss b/src/components/Empty/empty.module.scss
@@ -9,6 +9,7 @@
         margin-bottom: 8px;
 
         img {
+            border-style: none;
             height: 100%;
         }
 

diff --git a/src/components/Inputs/input.module.scss b/src/components/Inputs/input.module.scss
@@ -1,4 +1,7 @@
 .input-wrapper {
+    @include input-reset();
+    @include textarea-reset();
+
     position: relative;
     width: fit-content;
 

diff --git a/src/components/Link/link.module.scss b/src/components/Link/link.module.scss
@@ -1,5 +1,6 @@
 .link-style {
     align-items: center;
+    background-color: transparent;
     cursor: pointer;
     display: flex;
     flex-direction: row;

diff --git a/src/components/Menu/MenuItem/menuItem.module.scss b/src/components/Menu/MenuItem/menuItem.module.scss
@@ -1,4 +1,6 @@
 .menu-item {
+    @include button-reset();
+
     --background: transparent;
     background-color: var(--background);
     color: var(--label);
@@ -9,6 +11,7 @@
     cursor: pointer;
     font-weight: $text-font-weight-semibold;
     transition: all $motion-duration-extra-fast $motion-easing-easeinout 0s;
+    margin: 4px 0;
 
     &.large {
         height: 44px;

diff --git a/src/components/RadioButton/radio.module.scss b/src/components/RadioButton/radio.module.scss
@@ -1,4 +1,6 @@
 .selector {
+    @include selector-reset();
+
     display: flex;
     position: relative;
     width: fit-content;

diff --git a/src/components/Select/select.module.scss b/src/components/Select/select.module.scss
@@ -1,4 +1,6 @@
 .select-wrapper {
+    @include select-reset();
+
     position: relative;
     width: 100%;
 

diff --git a/src/components/Table/Tests/__snapshots__/Table.expand.test.tsx.snap b/src/components/Table/Tests/__snapshots__/Table.expand.test.tsx.snap
@@ -1898,7 +1898,7 @@ LoadedCheerio {
                           "aria-checked": "true",
                           "aria-disabled": "false",
                           "aria-pressed": "true",
-                          "class": "pagination-button active button button-neutral button-medium",
+                          "class": "pagination-button active button button-neutral button button-medium",
                         },
                         "children": Array [
                           Node {
@@ -1990,7 +1990,7 @@ LoadedCheerio {
                         "aria-checked": "true",
                         "aria-disabled": "false",
                         "aria-pressed": "true",
-                        "class": "pagination-button active button button-neutral button-medium",
+                        "class": "pagination-button active button button-neutral button button-medium",
                       },
                       "children": Array [
                         Node {
@@ -2121,7 +2121,7 @@ LoadedCheerio {
                         "aria-checked": "true",
                         "aria-disabled": "false",
                         "aria-pressed": "true",
-                        "class": "pagination-button active button button-neutral button-medium",
+                        "class": "pagination-button active button button-neutral button button-medium",
                       },
                       "children": Array [
                         Node {
@@ -2213,7 +2213,7 @@ LoadedCheerio {
                       "aria-checked": "true",
                       "aria-disabled": "false",
                       "aria-pressed": "true",
-                      "class": "pagination-button active button button-neutral button-medium",
+                      "class": "pagination-button active button button-neutral button button-medium",
                     },
                     "children": Array [
                       Node {
-Original file line number
+Diff line change
@@ Expand Up / @@ -9,6 +9,7 @@ @@
             margin-bottom: 8px;
             img {
+                border-style: none;
                 height: 100%;
             }
@@ Expand Down @@