FieldLabel style changes for the recolouring theme (#2756)

* chore: separate infoButton based on themes

* chore: changeset

* chore: add secondary-icon-button dependency

.changeset/calm-emus-warn.md

@@ -0,0 +1,5 @@
+---
+'@commercetools-uikit/field-label': patch
+---
+
+Separate which `InfoButton` is shown in the `FieldLabel` component based on the theme.

packages/components/field-label/package.json

@@ -26,6 +26,7 @@
     "@commercetools-uikit/icon-button": "18.5.0",
     "@commercetools-uikit/icons": "18.5.0",
     "@commercetools-uikit/label": "18.5.0",
+    "@commercetools-uikit/secondary-icon-button": "18.5.0",
     "@commercetools-uikit/spacings-inline": "18.5.0",
     "@commercetools-uikit/spacings-stack": "18.5.0",
     "@commercetools-uikit/text": "18.5.0",

packages/components/field-label/src/field-label.tsx

@@ -9,12 +9,13 @@ import { warning } from '@commercetools-uikit/utils';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import IconButton from '@commercetools-uikit/icon-button';
-import { InformationIcon } from '@commercetools-uikit/icons';
+import SecondaryIconButton from '@commercetools-uikit/secondary-icon-button';
+import { InformationIcon, InfoIcon } from '@commercetools-uikit/icons';
 import Text from '@commercetools-uikit/text';
 import Constraints from '@commercetools-uikit/constraints';
 import Inline from '@commercetools-uikit/spacings-inline';
 import Label from '@commercetools-uikit/label';
-import { designTokens } from '@commercetools-uikit/design-system';
+import { designTokens, useTheme } from '@commercetools-uikit/design-system';
 
 export type TFieldLabelProps = {
   /**
@@ -104,6 +105,8 @@ const LabelRowWrapper = styled.div`
 `;
 
 const FieldLabel = (props: TFieldLabelProps) => {
+  const { themedValue } = useTheme();
+
   if (props.hintIcon) {
     warning(
       props.hintIcon.props.size === undefined,
@@ -129,14 +132,22 @@ const FieldLabel = (props: TFieldLabelProps) => {
             {props.title}
           </Label>
         </Text.Wrap>
-        {props.onInfoButtonClick && (
-          <IconButton
-            label="More Info"
-            icon={<InformationIcon />}
-            size="small"
-            onClick={props.onInfoButtonClick}
-          />
-        )}
+        {props.onInfoButtonClick &&
+          themedValue(
+            <IconButton
+              label="More Info"
+              icon={<InformationIcon />}
+              size="small"
+              onClick={props.onInfoButtonClick}
+            />,
+            <SecondaryIconButton
+              label="More Info"
+              icon={<InfoIcon />}
+              size="medium"
+              color="info"
+              onClick={props.onInfoButtonClick}
+            />
+          )}
       </Inline>
 
       {props.hint && (

yarn.lock

@@ -2854,6 +2854,7 @@ __metadata:
     "@commercetools-uikit/icon-button": 18.5.0
     "@commercetools-uikit/icons": 18.5.0
     "@commercetools-uikit/label": 18.5.0
+    "@commercetools-uikit/secondary-icon-button": 18.5.0
     "@commercetools-uikit/spacings-inline": 18.5.0
     "@commercetools-uikit/spacings-stack": 18.5.0
     "@commercetools-uikit/text": 18.5.0