feat(FlexItem): allow custom values as size (#2313)

* accept direct value in styles

* augmenting the types in FlexItem

* changelog

Author: silviuaavram

CHANGELOG.md

@@ -46,6 +46,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Add `useTelemetry()` hook for adding telemetry information for the Fluent components and improve return types for the `useStyles` and `useStateManager` hooks @mnajdova ([#2257](https://github.com/microsoft/fluent-ui-react/pull/2257))
 - Add `target` prop to `EventListener` component and `useEventListener()` hook @layershifter ([#2287](https://github.com/microsoft/fluent-ui-react/pull/2287))
 - Add `disabled` prop accordion title @jurokapsiar ([#2290](https://github.com/microsoft/fluent-ui-react/pull/2290))
+- Allow custom values for `size` in `FlexItem` @silviuavram ([#2313](https://github.com/microsoft/fluent-ui-react/pull/2313))
 
 ### Documentation
 - Add per-component performance charts @miroslavstastny ([#2240](https://github.com/microsoft/fluent-ui-react/pull/2240))

packages/react/src/components/Flex/FlexItem.tsx

@@ -23,7 +23,7 @@ export interface FlexItemProps extends UIComponentProps, ChildrenComponentProps<
   align?: 'auto' | 'start' | 'end' | 'center' | 'baseline' | 'stretch'
 
   /** Defines size of the item. */
-  size?: 'size.half' | 'size.quarter' | 'size.small' | 'size.medium' | 'size.large'
+  size?: 'size.half' | 'size.quarter' | 'size.small' | 'size.medium' | 'size.large' | string
 
   /**
    * Item can fill remaining space of the container.
@@ -65,7 +65,14 @@ class FlexItem extends UIComponent<FlexItemProps> {
     children: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
 
     align: PropTypes.oneOf(['auto', 'start', 'end', 'center', 'baseline', 'stretch']),
-    size: PropTypes.oneOf(['size.half', 'size.quarter', 'size.small', 'size.medium', 'size.large']),
+    size: PropTypes.oneOf([
+      'size.half',
+      'size.quarter',
+      'size.small',
+      'size.medium',
+      'size.large',
+      PropTypes.string,
+    ]),
 
     stretch: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
     shrink: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),

packages/react/src/themes/teams/components/Flex/flexItemStyles.ts

@@ -9,7 +9,7 @@ const flexItemStyles: ComponentSlotStylesPrepared<FlexItemProps, FlexItemVariabl
     return {
       ...(p.align && { alignSelf: toFlexAlignment(p.align) }),
 
-      ...(p.size && toFlexItemSizeValues(v[p.size])),
+      ...(p.size && toFlexItemSizeValues(v.hasOwnProperty(p.size) ? v[p.size] : p.size)),
 
       ...(typeof p.shrink === 'number' && { flexShrink: p.shrink }),
       ...(p.shrink === false && { flexShrink: 0 }),