fix(Inline): Problem with alignItems center

src/__private_stories__/inline-cases-story.tsx

@@ -66,7 +66,7 @@ export const Default: StoryComponent = () => {
                             <ButtonPrimary fake>{shortText}</ButtonPrimary>
                             <ButtonPrimary fake>{shortText}</ButtonPrimary>
                         </Inline>{' '}
-                        Inline text
+                        <Text3 regular>Inline text</Text3>
                     </>
                 </Stack>
 

src/inline.css.ts

@@ -11,6 +11,9 @@ const verticalSpaceMobile = createVar();
 const verticalSpaceTablet = createVar();
 const verticalSpaceDesktop = createVar();
 
+const childAlignItems = createVar();
+const childDisplay = createVar();
+
 export const vars = {
     space,
     spaceMobile,
@@ -20,6 +23,8 @@ export const vars = {
     verticalSpaceMobile,
     verticalSpaceTablet,
     verticalSpaceDesktop,
+    childAlignItems,
+    childDisplay,
 };
 
 export const marginInline = style({
@@ -81,10 +86,12 @@ export const fullWidth = style({
 export const wrap = style({
     display: 'inline-flex',
     flexWrap: 'wrap',
+    verticalAlign: 'bottom',
 });
 
 export const noFullWidth = style({
     display: ['inline-flex', 'inline-grid'],
+    verticalAlign: 'bottom',
 });
 
 export const stringSpace = style({
@@ -122,6 +129,10 @@ globalStyle(`${inline} > div`, {
             padding: 0, // restore
             // negative gap is not supported in flexbox, so we use negative margins instead
             margin: `0 0 0 calc(min(${space}, 0px))`,
+            // Propagate alignItems to wrapper divs so icon SVGs (inline elements) are
+            // correctly centered within each wrapper, not just the wrappers themselves.
+            display: fallbackVar(childDisplay, 'block'),
+            alignItems: fallbackVar(childAlignItems, 'stretch'),
         },
     },
 });

src/inline.tsx

@@ -22,7 +22,8 @@ const calcSpaceValue = (space: NumericSpace | FlexSpace) => {
 
 const calcInlineVars = (
     space: FlexSpace | ByBreakpoint<NumericSpace>,
-    verticalSpace?: ByBreakpoint<NumericSpace>
+    verticalSpace?: ByBreakpoint<NumericSpace>,
+    alignItems?: Props['alignItems']
 ) => {
     const calcSpaceVars = (
         space: FlexSpace | ByBreakpoint<NumericSpace>,
@@ -50,21 +51,28 @@ const calcInlineVars = (
         desktop: styles.vars.spaceDesktop,
     });
 
-    if (verticalSpace) {
-        const verticalSpaceVars = calcSpaceVars(verticalSpace, {
-            default: styles.vars.verticalSpace,
-            mobile: styles.vars.verticalSpaceMobile,
-            tablet: styles.vars.verticalSpaceTablet,
-            desktop: styles.vars.verticalSpaceDesktop,
-        });
+    const verticalSpaceVars = verticalSpace
+        ? calcSpaceVars(verticalSpace, {
+              default: styles.vars.verticalSpace,
+              mobile: styles.vars.verticalSpaceMobile,
+              tablet: styles.vars.verticalSpaceTablet,
+              desktop: styles.vars.verticalSpaceDesktop,
+          })
+        : {};
 
-        return {
-            ...spaceVars,
-            ...verticalSpaceVars,
-        };
-    }
+    const alignItemsVars =
+        alignItems !== undefined && alignItems !== 'stretch'
+            ? {
+                  [styles.vars.childDisplay]: 'flex',
+                  [styles.vars.childAlignItems]: alignItems,
+              }
+            : {};
 
-    return spaceVars;
+    return {
+        ...spaceVars,
+        ...verticalSpaceVars,
+        ...alignItemsVars,
+    };
 };
 
 type Props = {
@@ -131,7 +139,10 @@ const Inline = ({
                     : styles.marginInline,
                 shouldExpand && styles.expand
             )}
-            style={{...applyCssVars(calcInlineVars(space, verticalSpace)), alignItems}}
+            style={{
+                ...applyCssVars(calcInlineVars(space, verticalSpace, alignItems)),
+                alignItems,
+            }}
             role={role}
             aria-label={ariaLabel}
             aria-labelledby={ariaLabel ? undefined : ariaLabelledBy}

src/switch-component.css.ts

@@ -118,6 +118,8 @@ export const container = style([
     containerBase,
     {
         cursor: 'pointer',
+        display: 'flex',
+        flexDirection: 'column',
     },
 ]);
 export const containerDisabled = style([