fix(imagecard): fixing button styles inside the form

carbon-design-system · Dec 3, 2020 · 81a1413 · 81a1413
1 parent 1d4078d
commit 81a1413
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 5 deletions.
diff --git a/...nts/CardEditor/CardEditForm/CardEditFormItems/ImageCardFormItems/ImageCardFormContent.jsx b/...nts/CardEditor/CardEditForm/CardEditFormItems/ImageCardFormItems/ImageCardFormContent.jsx
@@ -62,6 +62,7 @@ const ImageCardFormItems = ({ cardConfig, i18n, onChange }) => {
           <Button
             kind="ghost"
             renderIcon={Close16}
+            size="field"
             iconDescription={mergedI18n.close}
             className={`${baseClassName}--form-section ${baseClassName}--form-section-image-clear-button`}
             onClick={() =>

diff --git a/src/components/CardEditor/CardEditForm/_card-edit-form.scss b/src/components/CardEditor/CardEditForm/_card-edit-form.scss
@@ -167,11 +167,10 @@
   }
   &-clear-button {
     position: absolute;
-    right: $spacing-05;
-    margin-bottom: 0;
-    padding: 0 $spacing-02;
-    bottom: $spacing-04;
+    right: 0;
+    top: 1.25rem;
     color: $ui-05;
+    background-color: $ui-02;
     &:hover,
     &:active {
       color: $ui-05;

diff --git a/src/components/CardEditor/__snapshots__/CardEditor.story.storyshot b/src/components/CardEditor/__snapshots__/CardEditor.story.storyshot
@@ -1129,7 +1129,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT Exper
                     value="munich_image"
                   />
                   <button
-                    className="iot--card-edit-form--form-section iot--card-edit-form--form-section-image-clear-button bx--btn bx--btn--ghost"
+                    className="iot--card-edit-form--form-section iot--card-edit-form--form-section-image-clear-button bx--btn bx--btn--field bx--btn--ghost"
                     disabled={false}
                     onClick={[Function]}
                     tabIndex={0}