Rename inline layout to flow layout

__tests__/html/suggestedActions.layout.html

@@ -129,8 +129,8 @@
 
       const STYLE_OPTIONS_PRESETS = {
         carousel: { suggestedActionLayout: 'carousel' },
-        inline: { suggestedActionLayout: 'inline' },
-        'inline-maxheight': { suggestedActionLayout: 'inline', suggestedActionsInlineMaxHeight: 120 },
+        flow: { suggestedActionLayout: 'flow' },
+        'flow-maxheight': { suggestedActionLayout: 'flow', suggestedActionsFlowMaxHeight: 120 },
         stacked: { suggestedActionLayout: 'stacked' },
         'stacked-maxheight': { suggestedActionLayout: 'stacked', suggestedActionsStackedHeight: 120 }
       };
@@ -170,12 +170,12 @@
                   label="Carousel"
                   value="carousel"
                 />
-                <RadioRow checked={preset === 'inline'} onChange={handlePresetChange} label="Inline" value="inline" />
+                <RadioRow checked={preset === 'flow'} onChange={handlePresetChange} label="Flow" value="flow" />
                 <RadioRow
-                  checked={preset === 'inline-maxheight'}
+                  checked={preset === 'flow-maxheight'}
                   onChange={handlePresetChange}
-                  label="Inline with maxHeight"
-                  value="inline-maxheight"
+                  label="Flow with maxHeight"
+                  value="flow-maxheight"
                 />
                 <RadioRow
                   checked={preset === 'stacked'}

__tests__/html/suggestedActions.layout.js

@@ -9,8 +9,8 @@ describe('suggested actions', () => {
   ])('in %s', (_, dir) => {
     describe.each([
       ['carousel layout', 'carousel'],
-      ['inline layout', 'inline'],
-      ['inline layout with maxHeight', 'inline-maxheight'],
+      ['flow layout', 'flow'],
+      ['flow layout with maxHeight', 'flow-maxheight'],
       ['stacked layout', 'stacked'],
       ['stacked layout with height', 'stacked-maxheight']
     ])('using %s', (_, preset) => {

packages/api/src/defaultStyleOptions.js

@@ -112,16 +112,16 @@ const DEFAULT_OPTIONS = {
   suggestedActionDisabledTextColor: undefined, // defaults to subtle
   suggestedActionHeight: 40,
   suggestedActionImageHeight: 20,
-  suggestedActionLayout: 'carousel', // Either "carousel", "inline", or "stacked"
+  suggestedActionLayout: 'carousel', // Either "carousel", "flow", or "stacked"
   suggestedActionTextColor: null,
 
   // Suggested actions carousel layout
   suggestedActionsCarouselFlipperCursor: null, // Cursor when mouse over on flipper
   suggestedActionsCarouselFlipperBoxWidth: 40, // Flipper bounding box size
   suggestedActionsCarouselFlipperSize: 20, // Flipper visible size
 
-  // Suggested actions inline layout
-  suggestedActionsInlineMaxHeight: undefined, // Defaults to "auto".
+  // Suggested actions flow layout
+  suggestedActionsFlowMaxHeight: undefined, // Defaults to "auto".
 
   // Suggested actions stacked layout
   suggestedActionsStackedHeight: undefined, // sets the container's max height. defaults to 'auto'

packages/component/src/SendBox/SuggestedActions.js

@@ -20,7 +20,7 @@ const { useDirection, useLocalizer, useStyleOptions } = hooks;
 
 const ROOT_STYLE = {
   '&.webchat__suggested-actions': {
-    '&.webchat__suggested-actions--inline-layout': {
+    '&.webchat__suggested-actions--flow-layout': {
       display: 'flex',
       flexWrap: 'wrap'
     },
@@ -127,7 +127,7 @@ SuggestedActionCarouselContainer.propTypes = {
   screenReaderText: PropTypes.string.isRequired
 };
 
-const SuggestedActionInlineContainer = ({ children, className, screenReaderText }) => {
+const SuggestedActionFlowContainer = ({ children, className, screenReaderText }) => {
   const [{ suggestedActions: suggestedActionsStyleSet }] = useStyleSet();
   const ariaLabelId = useUniqueId('webchat__suggested-actions');
   const rootClassName = useStyleToEmotionObject()(ROOT_STYLE) + '';
@@ -138,7 +138,7 @@ const SuggestedActionInlineContainer = ({ children, className, screenReaderText
       aria-live="polite"
       className={classNames(
         'webchat__suggested-actions',
-        'webchat__suggested-actions--inline-layout',
+        'webchat__suggested-actions--flow-layout',
         rootClassName,
         suggestedActionsStyleSet + '',
         (className || '') + ''
@@ -153,12 +153,12 @@ const SuggestedActionInlineContainer = ({ children, className, screenReaderText
   );
 };
 
-SuggestedActionInlineContainer.defaultProps = {
+SuggestedActionFlowContainer.defaultProps = {
   children: undefined,
   className: undefined
 };
 
-SuggestedActionInlineContainer.propTypes = {
+SuggestedActionFlowContainer.propTypes = {
   children: PropTypes.any,
   className: PropTypes.string,
   screenReaderText: PropTypes.string.isRequired
@@ -231,11 +231,11 @@ const SuggestedActions = ({ className, suggestedActions = [] }) => {
     />
   ));
 
-  if (suggestedActionLayout === 'inline') {
+  if (suggestedActionLayout === 'flow') {
     return (
-      <SuggestedActionInlineContainer className={className} screenReaderText={screenReaderText}>
+      <SuggestedActionFlowContainer className={className} screenReaderText={screenReaderText}>
         {children}
-      </SuggestedActionInlineContainer>
+      </SuggestedActionFlowContainer>
     );
   } else if (suggestedActionLayout === 'stacked') {
     return (

packages/component/src/Styles/StyleSet/SuggestedActions.js

@@ -3,7 +3,7 @@
 
 export default function createSuggestedActionsStyle({
   paddingRegular,
-  suggestedActionsInlineMaxHeight,
+  suggestedActionsFlowMaxHeight,
   suggestedActionsStackedHeight,
   suggestedActionsStackedOverflow,
   transcriptOverlayButtonBackground,
@@ -70,8 +70,8 @@ export default function createSuggestedActionsStyle({
         }
       },
 
-      '&.webchat__suggested-actions--inline-layout': {
-        maxHeight: suggestedActionsInlineMaxHeight,
+      '&.webchat__suggested-actions--flow-layout': {
+        maxHeight: suggestedActionsFlowMaxHeight,
         overflowY: 'auto',
         paddingBottom: paddingRegular / 2,
         paddingLeft: paddingRegular / 2,