fixed heading, fixed when more options expands out in the wrong direction and initally disabled custom button is now initially enabled instead (#5128)

packages/storybook8/stories/Examples/CustomButtonInjection/CustomButtonInjection.story.tsx

@@ -89,22 +89,24 @@ const CustomButtonInjectionStory = (args: any): JSX.Element => {
   ];
 
   return (
-    <CallComposite
-      adapter={adapter}
-      formFactor={args.formFactor}
-      options={{
-        callControls: {
-          raiseHandButton: false,
-          screenShareButton: false,
-          peopleButton: false,
-          onFetchCustomButtonProps: args.allowRawObjectInput
-            ? args.options
-            : args.injectMaximumNumberOfButtons
-              ? maxCustomButtonsForInjection
-              : customButtonArray
-        }
-      }}
-    />
+    <div style={{ width: '100wh', height: '100vh' }}>
+      <CallComposite
+        adapter={adapter}
+        formFactor={args.formFactor}
+        options={{
+          callControls: {
+            raiseHandButton: false,
+            screenShareButton: false,
+            peopleButton: false,
+            onFetchCustomButtonProps: args.allowRawObjectInput
+              ? args.options
+              : args.injectMaximumNumberOfButtons
+                ? maxCustomButtonsForInjection
+                : customButtonArray
+          }
+        }}
+      />
+    </div>
   );
 };
 

packages/storybook8/stories/Examples/CustomButtonInjection/Docs.mdx

@@ -23,7 +23,7 @@ Custom Button Injection in our Composite experiences allows users to add their o
 options to build out their own custom experiences like components, we want to make sure injecting customer's own
 features is simple and achievable.
 
-# Examples
+## Examples
 
 There are multiple areas, `primary`, `secondary`, and `overflow`, that you can inject buttons into. Depending on
 which area, only a max number of custom injected buttons will be displayed. This also varies if you are mobile
@@ -32,7 +32,7 @@ or desktop.
 In all the examples below we use a mock adapter to quickly showcase custom button injection in our Call
 Composite. Please ensure you replace the mock adapter with your own adapter.
 
-## Desktop: Primary Main Bar
+### Desktop: Primary Main Bar
 
 Max number of buttons: '3'
 
@@ -42,7 +42,7 @@ Max number of buttons: '3'
   layout='centered'
 />
 
-## Desktop: Secondary Main Bar
+### Desktop: Secondary Main Bar
 
 Max number of buttons: '2'
 
@@ -52,7 +52,7 @@ Max number of buttons: '2'
   layout='centered'
 />
 
-## Desktop: Overflow More Button
+### Desktop: Overflow More Button
 
 Max number of buttons: '∞'
 
@@ -62,7 +62,7 @@ Max number of buttons: '∞'
   layout='centered'
 />
 
-## Mobile: Primary and Overflow Contextual Menu
+### Mobile: Primary and Overflow Contextual Menu
 
 Max number of buttons in primary: '1' Max number of buttons in Contextual Menu: '∞'
 
@@ -72,7 +72,7 @@ Max number of buttons in primary: '1' Max number of buttons in Contextual Menu:
   layout='centered'
 />
 
-## Custom Button With State
+### Custom Button With State
 
 <Canvas
   of={CustomButtonInjectionStories.CustomButtonWithStateDocsOnly}
@@ -80,7 +80,7 @@ Max number of buttons in primary: '1' Max number of buttons in Contextual Menu:
   layout='centered'
 />
 
-## Custom Button With Async loading State
+### Custom Button With Async loading State
 
 <Canvas
   of={CustomButtonInjectionStories.CustomButtonWithAsyncStateDocsOnly}
@@ -88,7 +88,7 @@ Max number of buttons in primary: '1' Max number of buttons in Contextual Menu:
   layout='centered'
 />
 
-## Legacy Control Bar Custom Button Injection
+### Legacy Control Bar Custom Button Injection
 
 <Canvas
   of={CustomButtonInjectionStories.LegacyControlBarCustomButtonInjectionDocsOnly}

packages/storybook8/stories/Examples/CustomButtonInjection/index.stories.tsx

@@ -86,7 +86,7 @@ const meta: Meta = {
     label: controlsToAdd.customButtonInjectionControls.label.defaultValue,
     icon: controlsToAdd.customButtonInjectionControls.icon.defaultValue,
     injectMaximumNumberOfButtons: controlsToAdd.customButtonInjectionControls.injectMaximumNumberOfButtons.defaultValue,
-    disabled: controlsToAdd.customButtonInjectionControls.disabled.defaultValue
+    disabled: false
     // Storybook object parsing is causing function consts to convert to string. This causes them to be null and not usable
     // Need to resolve this issue before enabling these args
     // allowRawObjectInput: controlsToAdd.customButtonInjectionControls.allowRawObjectInput.defaultValue,

packages/storybook8/stories/Examples/CustomButtonInjection/snippets/CustomButtonInjectionTypes.tsx

@@ -2,7 +2,8 @@ import { CustomCallControlButtonPlacement, CustomCallControlButtonStrings } from
 import React from 'react';
 
 export const compositeCanvasContainerStyles = {
-  height: '22rem'
+  height: '100vh',
+  width: '100wh'
 };
 
 /**