allow testids in settings sections

Author: Kerry Archibald

res/css/components/views/settings/shared/_SettingsSubsection.pcss

@@ -46,4 +46,8 @@ limitations under the License.
             margin-bottom: $spacing-8;
         }
     }
+
+    &.mx_SettingsSubsection_contentStretch {
+        justify-items: stretch;
+    }
 }

res/css/views/elements/_SettingsFlag.pcss

@@ -20,6 +20,7 @@ limitations under the License.
     align-items: flex-start;
     justify-content: space-between;
     margin-bottom: 4px;
+    width: 100%;
 
     .mx_ToggleSwitch {
         flex: 0 0 auto;

res/css/views/settings/tabs/_SettingsTab.pcss

@@ -15,7 +15,6 @@ limitations under the License.
 */
 
 .mx_SettingsTab {
-    --SettingsTab_section-margin-bottom-preferences-labs: 30px;
     --SettingsTab_heading_nth_child-margin-top: 30px; /* TODO: Use a spacing variable */
     --SettingsTab_fullWidthField-margin-inline-end: 100px;
     --SettingsTab_tooltip-max-width: 120px; /* So it fits in the space provided by the page */

src/components/views/settings/shared/SettingsSubsection.tsx

@@ -14,6 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import classNames from "classnames";
 import React, { HTMLAttributes } from "react";
 
 import { SettingsSubsectionHeading } from "./SettingsSubsectionHeading";
@@ -22,6 +23,8 @@ export interface SettingsSubsectionProps extends HTMLAttributes<HTMLDivElement>
     heading: string | React.ReactNode;
     description?: string | React.ReactNode;
     children?: React.ReactNode;
+    // when true content will be justify-items: stretch
+    stretchContent?: boolean;
 }
 
 export const SettingsSubsectionText: React.FC<HTMLAttributes<HTMLDivElement>> = ({ children, ...rest }) => (
@@ -30,15 +33,27 @@ export const SettingsSubsectionText: React.FC<HTMLAttributes<HTMLDivElement>> =
     </div>
 );
 
-export const SettingsSubsection: React.FC<SettingsSubsectionProps> = ({ heading, description, children, ...rest }) => (
+export const SettingsSubsection: React.FC<SettingsSubsectionProps> = ({
+    heading,
+    description,
+    children,
+    stretchContent,
+    ...rest
+}) => (
     <div {...rest} className="mx_SettingsSubsection">
         {typeof heading === "string" ? <SettingsSubsectionHeading heading={heading} /> : <>{heading}</>}
         {!!description && (
             <div className="mx_SettingsSubsection_description">
                 <SettingsSubsectionText>{description}</SettingsSubsectionText>
             </div>
         )}
-        <div className="mx_SettingsSubsection_content">{children}</div>
+        <div
+            className={classNames("mx_SettingsSubsection_content", {
+                mx_SettingsSubsection_contentStretch: stretchContent,
+            })}
+        >
+            {children}
+        </div>
     </div>
 );
 

src/components/views/settings/tabs/SettingsTab.tsx

@@ -13,9 +13,9 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
-import React from "react";
+import React, { HTMLAttributes } from "react";
 
-export interface SettingsTabProps {
+export interface SettingsTabProps extends Omit<HTMLAttributes<HTMLDivElement>, "className"> {
     children?: React.ReactNode;
 }
 
@@ -37,8 +37,8 @@ export interface SettingsTabProps {
  * </SettingsTab>
  * ```
  */
-const SettingsTab: React.FC<SettingsTabProps> = ({ children }) => (
-    <div className="mx_SettingsTab">
+const SettingsTab: React.FC<SettingsTabProps> = ({ children, ...rest }) => (
+    <div {...rest} className="mx_SettingsTab">
         <div className="mx_SettingsTab_sections">{children}</div>
     </div>
 );