stuff

tgui/docs/component-reference.md

@@ -727,6 +727,8 @@ systems for rendering. Modules are automatically centered within themselves.
 **Props:**
 
 - See inherited props: [Box](#box)
+- `id` - the ID of the module, as per from within BYOND
+- `section` - override props for the <Section> that the module renders in.
 
 ### `NoticeBox`
 
@@ -1210,6 +1212,7 @@ Known bugs:
 
 **Props:**
 
-- See inherited props: [Window](#window)
 - `direct: InfernoNode` - Child elements that are rendered directly inside the window
 when in standalone mode, and at the same level as other child elements when in embedded mode.
+- `window: WindowProps` - Props from [Window][#window] to use in standalone mode.
+- `section: SectionProps` - Props from [Section][#section] to use when in embedded mode. Overridden by the <Module>'s `section` entry.

tgui/packages/tgui/backend.ts

@@ -13,6 +13,7 @@
 
 import { perf } from 'common/perf';
 import { createAction } from 'common/redux';
+import { SectionProps } from './components/Section';
 import { setupDrag } from './drag';
 import { globalEvents } from './events';
 import { focusMap } from './focus';
@@ -437,7 +438,10 @@ export const useSharedState = <T>(
 //* TGUI Module Backend
 
 export interface ModuleProps {
-  id: string, // module id, this lets it autoload from context
+  // module id, this lets it autoload from context
+  id: string;
+  // override props for rendering its external <Section>
+  section: SectionProps;
 }
 
 export interface ModuleData {

tgui/packages/tgui/components/Module.tsx

@@ -34,6 +34,7 @@ export class Module<T extends ModuleProps> extends Component<T, {}> {
     return {
       ...this.context,
       is_module: true,
+      m_section: this.props.section,
       m_id: id,
       m_ref: ref,
       m_tgui: ui_name,

tgui/packages/tgui/layouts/Modular.tsx

@@ -24,7 +24,11 @@ export interface ModularProps {
  * If not rendering directly, it will act like a <Section>.
  */
 export const Modular = (props: ModularProps, context: any) => {
-  const { is_module } = context;
+  const { is_module, m_section } = context;
+  let sectionProps = {
+    ...props.section,
+    ...m_section,
+  };
   return (
     !is_module? (
       <Window {...props.window}>
@@ -34,7 +38,9 @@ export const Modular = (props: ModularProps, context: any) => {
         </Window.Content>
       </Window>
     ) : (
-      <Section {...props.section}>
+      <Section
+        {...props.section}
+        {...sectionProps}>
         {props.direct}
         {props.children}
       </Section>