fix: Icon refactor pre-patches (#2030)

Patches minor issues found during icon refactor

* Rationalize icon position a bi
* Snapshot updates (#2031)
* Mitigate dependency on icon display="inline-flex"
* Remove unneeded flex params on Icon

packages/components/src/Form/Inputs/InputDateRange/InputDateRange.tsx

@@ -508,6 +508,7 @@ const InputTextGroupWrapper = styled.div<InputTextGroupWrapperProps>`
   ${inputCSS}
   align-items: center;
   display: grid;
+  font-family: ${({ theme }) => theme.fonts.body};
   grid-gap: ${({ theme }) => theme.space.xsmall};
   grid-template-columns: auto auto auto 1fr;
   padding: 0 ${({ theme: { space } }) => space.small};

packages/components/src/Icon/Icon.tsx

@@ -113,14 +113,12 @@ const IconLayout = forwardRef(
 IconLayout.displayName = 'IconLayout'
 
 export const Icon = styled(IconLayout).attrs<IconProps>(
-  ({ display = 'inline-flex', size = 'medium' }) => ({
-    display,
+  ({ size = 'medium' }) => ({
     size,
   })
 )<IconProps>`
   ${sizeSimpleLayoutCSS}
   ${color}
-  align-items: center;
   flex-shrink: 0;
 
   svg {

packages/components/src/Icon/__snapshots__/Icon.test.tsx.snap

@@ -5,14 +5,6 @@ exports[`Icon Default 1`] = `
   font-family: Roboto,'Noto Sans','Noto Sans JP','Noto Sans CJK KR','Noto Sans Arabic UI','Noto Sans Devanagari UI','Noto Sans Hebrew','Noto Sans Thai UI',Helvetica,Arial,sans-serif;
   width: 1.5rem;
   height: 1.5rem;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -48,14 +40,6 @@ exports[`Icon Explicit size - integer as pixels 1`] = `
   font-family: Roboto,'Noto Sans','Noto Sans JP','Noto Sans CJK KR','Noto Sans Arabic UI','Noto Sans Devanagari UI','Noto Sans Hebrew','Noto Sans Thai UI',Helvetica,Arial,sans-serif;
   width: 12px;
   height: 12px;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -91,14 +75,6 @@ exports[`Icon Explicit size - string 1`] = `
   font-family: Roboto,'Noto Sans','Noto Sans JP','Noto Sans CJK KR','Noto Sans Arabic UI','Noto Sans Devanagari UI','Noto Sans Hebrew','Noto Sans Thai UI',Helvetica,Arial,sans-serif;
   width: 1rem;
   height: 1rem;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -134,14 +110,6 @@ exports[`Icon Styled system size 1`] = `
   font-family: Roboto,'Noto Sans','Noto Sans JP','Noto Sans CJK KR','Noto Sans Arabic UI','Noto Sans Devanagari UI','Noto Sans Hebrew','Noto Sans Thai UI',Helvetica,Arial,sans-serif;
   width: 2rem;
   height: 2rem;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;

packages/components/src/Layout/Box/Box.story.tsx

@@ -52,7 +52,7 @@ const responsiveArgs: BoxStoryProps = {
   borderRadius: 'medium',
   children: (
     <>
-      <Icon name="LogoRings" size="medium" /> Looker
+      <Icon display="inline-flex" name="LogoRings" size="medium" /> Looker
     </>
   ),
   color: 'key',

packages/components/src/List/ListItem.story.tsx

@@ -44,6 +44,28 @@ Icon.args = {
   icon: 'User',
 }
 
+export const IconColor = Template.bind({})
+IconColor.args = {
+  ...Basic.args,
+  color: 'warn',
+  icon: 'User',
+}
+
+export const IconCustomColor = Template.bind({})
+IconCustomColor.args = {
+  ...Basic.args,
+  color: '#cc00cc',
+  icon: 'User',
+}
+
+export const IconColorDisabled = Template.bind({})
+IconColorDisabled.args = {
+  ...Basic.args,
+  color: 'warn',
+  disabled: true,
+  icon: 'User',
+}
+
 export const Detail = Template.bind({})
 Detail.args = {
   ...Basic.args,

packages/components/src/Status/Status.story.tsx

@@ -79,12 +79,6 @@ Large.args = {
   size: 'large',
 }
 
-export const XLarge = Template.bind({})
-XLarge.args = {
-  ...Inform.args,
-  size: 'xlarge',
-}
-
 export default {
   component: Status,
   title: 'Status',

packages/components/src/Status/__snapshots__/Status.test.tsx.snap

@@ -5,15 +5,7 @@ exports[`critical Status 1`] = `
   font-family: Roboto,'Noto Sans','Noto Sans JP','Noto Sans CJK KR','Noto Sans Arabic UI','Noto Sans Devanagari UI','Noto Sans Hebrew','Noto Sans Thai UI',Helvetica,Arial,sans-serif;
   width: 1.5rem;
   height: 1.5rem;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
   color: #CC1F36;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -58,15 +50,7 @@ exports[`inform Status 1`] = `
   font-family: Roboto,'Noto Sans','Noto Sans JP','Noto Sans CJK KR','Noto Sans Arabic UI','Noto Sans Devanagari UI','Noto Sans Hebrew','Noto Sans Thai UI',Helvetica,Arial,sans-serif;
   width: 1.5rem;
   height: 1.5rem;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
   color: #0087e1;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -111,15 +95,7 @@ exports[`neutral status 1`] = `
   font-family: Roboto,'Noto Sans','Noto Sans JP','Noto Sans CJK KR','Noto Sans Arabic UI','Noto Sans Devanagari UI','Noto Sans Hebrew','Noto Sans Thai UI',Helvetica,Arial,sans-serif;
   width: 1.5rem;
   height: 1.5rem;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
   color: #71767a;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -161,15 +137,7 @@ exports[`positive Status 1`] = `
   font-family: Roboto,'Noto Sans','Noto Sans JP','Noto Sans CJK KR','Noto Sans Arabic UI','Noto Sans Devanagari UI','Noto Sans Hebrew','Noto Sans Thai UI',Helvetica,Arial,sans-serif;
   width: 1.5rem;
   height: 1.5rem;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
   color: #24b25f;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -214,15 +182,7 @@ exports[`warn Status 1`] = `
   font-family: Roboto,'Noto Sans','Noto Sans JP','Noto Sans CJK KR','Noto Sans Arabic UI','Noto Sans Devanagari UI','Noto Sans Hebrew','Noto Sans Thai UI',Helvetica,Arial,sans-serif;
   width: 1.5rem;
   height: 1.5rem;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
   color: #FFA800;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;