[iOS] Move SettingsDetailItem to Legacy

This CL moves the existing SettingsDetailItem to Legacy and creates a
new SettingsDetailItem which is now a subclass of the TableViewItem.
The new SettingsDetailItem now support Dynamic Type.

Bug: 894791
Cq-Include-Trybots: luci.chromium.try:ios-simulator-cronet;luci.chromium.try:ios-simulator-full-configs
Change-Id: Ia001bf2bdd59bb71a81d228ebf7f905f5600eebf
Reviewed-on: https://chromium-review.googlesource.com/c/1251625Reviewed-by: Sergio Collazos <sczs@chromium.org>
Commit-Queue: Gauthier Ambard <gambard@chromium.org>
Cr-Commit-Position: refs/heads/master@{#599943}

ios/chrome/browser/ui/settings/bandwidth_management_collection_view_controller.mm

@@ -13,7 +13,7 @@
 #import "ios/chrome/browser/ui/collection_view/cells/MDCCollectionViewCell+Chrome.h"
 #import "ios/chrome/browser/ui/collection_view/cells/collection_view_footer_item.h"
 #import "ios/chrome/browser/ui/collection_view/collection_view_model.h"
-#import "ios/chrome/browser/ui/settings/cells/settings_detail_item.h"
+#import "ios/chrome/browser/ui/settings/cells/legacy/legacy_settings_detail_item.h"
 #import "ios/chrome/browser/ui/settings/dataplan_usage_collection_view_controller.h"
 #import "ios/chrome/browser/ui/settings/settings_utils.h"
 #include "ios/chrome/grit/ios_chromium_strings.h"
@@ -52,7 +52,7 @@ typedef NS_ENUM(NSInteger, ItemType) {
   PrefChangeRegistrar _prefChangeRegistrarApplicationContext;
 
   // Updatable Items
-  SettingsDetailItem* _preloadWebpagesDetailItem;
+  LegacySettingsDetailItem* _preloadWebpagesDetailItem;
 }
 
 // Helpers to create collection view items.
@@ -110,7 +110,7 @@ typedef NS_ENUM(NSInteger, ItemType) {
                        basePref:prefs::kNetworkPredictionEnabled
                        wifiPref:prefs::kNetworkPredictionWifiOnly];
   _preloadWebpagesDetailItem =
-      [[SettingsDetailItem alloc] initWithType:ItemTypePreload];
+      [[LegacySettingsDetailItem alloc] initWithType:ItemTypePreload];
 
   _preloadWebpagesDetailItem.text =
       l10n_util::GetNSString(IDS_IOS_OPTIONS_PRELOAD_WEBPAGES);

ios/chrome/browser/ui/settings/cells/BUILD.gn

@@ -63,6 +63,10 @@ source_set("cells") {
     "//ui/base",
   ]
 
+  public_deps = [
+    "//ios/chrome/browser/ui/settings/cells/legacy",
+  ]
+
   configs += [ "//build/config/compiler:enable_arc" ]
 }
 

ios/chrome/browser/ui/settings/cells/import_data_multiline_detail_item.h

@@ -29,7 +29,7 @@
 // subclass containing two text labels: a "main" label and a "detail" label.
 // The two labels are laid out on top of each other. The detail text can span
 // multiple lines.
-// This is to be used with a SettingsDetailItem.
+// This is to be used with a ImportDataMultilineDetailItem.
 @interface ImportDataMultilineDetailCell : MDCCollectionViewCell
 
 // UILabels corresponding to |text| and |detailText| from the item.

ios/chrome/browser/ui/settings/cells/legacy/BUILD.gn

+# Copyright 2018 The Chromium Authors. All rights reserved.
+# Use of this source code is governed by a BSD-style license that can be
+# found in the LICENSE file.
+
+source_set("legacy") {
+  sources = [
+    "legacy_settings_detail_item.h",
+    "legacy_settings_detail_item.mm",
+  ]
+
+  deps = [
+    "//components/strings",
+    "//ios/chrome/app/strings",
+    "//ios/chrome/browser/ui",
+    "//ios/chrome/browser/ui/collection_view/cells",
+    "//ios/chrome/browser/ui/colors",
+    "//ios/chrome/browser/ui/icons",
+    "//ios/third_party/material_roboto_font_loader_ios",
+    "//ui/base",
+  ]
+
+  configs += [ "//build/config/compiler:enable_arc" ]
+}

ios/chrome/browser/ui/settings/cells/legacy/legacy_settings_detail_item.h

+// Copyright 2018 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+#ifndef IOS_CHROME_BROWSER_UI_SETTINGS_CELLS_LEGACY_LEGACY_SETTINGS_DETAIL_ITEM_H_
+#define IOS_CHROME_BROWSER_UI_SETTINGS_CELLS_LEGACY_LEGACY_SETTINGS_DETAIL_ITEM_H_
+
+#import <UIKit/UIKit.h>
+
+#import "ios/chrome/browser/ui/collection_view/cells/collection_view_item.h"
+#import "ios/third_party/material_components_ios/src/components/CollectionCells/src/MaterialCollectionCells.h"
+
+// LegacySettingsDetailItem is a model class that uses LegacySettingsDetailCell.
+@interface LegacySettingsDetailItem : CollectionViewItem
+
+// The filename for the leading icon.  If empty, no icon will be shown.
+@property(nonatomic, copy) NSString* iconImageName;
+
+// The accessory type to display on the trailing edge of the cell.
+@property(nonatomic) MDCCollectionViewCellAccessoryType accessoryType;
+
+// The main text string.
+@property(nonatomic, copy) NSString* text;
+
+// The detail text string.
+@property(nonatomic, copy) NSString* detailText;
+
+@end
+
+// LegacySettingsDetailCell implements an MDCCollectionViewCell subclass
+// containing an optional leading icon and two text labels: a "main" label and a
+// "detail" label. The two labels are laid out side-by-side and fill the full
+// width of the cell. Labels are truncated as needed to fit in the cell.
+@interface LegacySettingsDetailCell : MDCCollectionViewCell
+
+// UILabels corresponding to |text| and |detailText| from the item.
+@property(nonatomic, readonly, strong) UILabel* textLabel;
+@property(nonatomic, readonly, strong) UILabel* detailTextLabel;
+
+// Sets the image that should be displayed at the leading edge of the cell. If
+// set to nil, the icon will be hidden and the text labels will expand to fill
+// the full width of the cell.
+- (void)setIconImage:(UIImage*)image;
+
+// The amount of horizontal space to provide to each of the labels. These values
+// are determined with the following logic:
+//
+// - If there is sufficient room (after accounting for margins) for the full
+//   width of each label, use the current width of each label.
+// - If not, use the current width of the main label and a clipped width for the
+//   detail label.
+// - Unless the main label wants more than 75% of the available width and the
+//   detail label wants 25% or less of the available width, in which case use a
+//   clipped width for the main label and the current width of the detail label.
+// - If both labels want more width than their guaranteed minimums (75% and
+//   25%), use the guaranteed minimum amount for each.
+//
+// Exposed for testing.
+@property(nonatomic, readonly) CGFloat textLabelTargetWidth;
+@property(nonatomic, readonly) CGFloat detailTextLabelTargetWidth;
+
+@end
+
+#endif  // IOS_CHROME_BROWSER_UI_SETTINGS_CELLS_LEGACY_LEGACY_SETTINGS_DETAIL_ITEM_H_

ios/chrome/browser/ui/settings/cells/legacy/legacy_settings_detail_item.mm

+// Copyright 2018 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+#import "ios/chrome/browser/ui/settings/cells/legacy/legacy_settings_detail_item.h"
+
+#include <algorithm>
+
+#import "ios/chrome/browser/ui/collection_view/cells/MDCCollectionViewCell+Chrome.h"
+#include "ios/chrome/browser/ui/collection_view/cells/collection_view_cell_constants.h"
+#import "ios/chrome/browser/ui/uikit_ui_util.h"
+#import "ios/chrome/common/ui_util/constraints_ui_util.h"
+#import "ios/third_party/material_components_ios/src/components/Palettes/src/MaterialPalettes.h"
+#import "ios/third_party/material_components_ios/src/components/Typography/src/MaterialTypography.h"
+
+#if !defined(__has_feature) || !__has_feature(objc_arc)
+#error "This file requires ARC support."
+#endif
+
+namespace {
+
+// Padding used on the leading and trailing edges of the cell and between the
+// two labels.
+const CGFloat kHorizontalPadding = 16;
+
+// Padding used between the icon and the text labels.
+const CGFloat kIconTrailingPadding = 12;
+
+// Padding used on the top and bottom edges of the cell.
+const CGFloat kVerticalPadding = 16;
+
+// Size of the icon image.
+const CGFloat kIconImageSize = 28;
+
+// Minimum proportion of the available width to guarantee to the main and detail
+// labels.
+const CGFloat kMinTextWidthRatio = 0.75f;
+const CGFloat kMinDetailTextWidthRatio = 0.25f;
+}  // namespace
+
+@implementation LegacySettingsDetailItem
+
+@synthesize accessoryType = _accessoryType;
+@synthesize iconImageName = _iconImageName;
+@synthesize text = _text;
+@synthesize detailText = _detailText;
+
+- (instancetype)initWithType:(NSInteger)type {
+  self = [super initWithType:type];
+  if (self) {
+    self.cellClass = [LegacySettingsDetailCell class];
+  }
+  return self;
+}
+
+#pragma mark CollectionViewItem
+
+- (void)configureCell:(LegacySettingsDetailCell*)cell {
+  [super configureCell:cell];
+  [cell cr_setAccessoryType:self.accessoryType];
+  cell.textLabel.text = self.text;
+  cell.detailTextLabel.text = self.detailText;
+
+  // Update the icon image, if one is present.
+  UIImage* iconImage = nil;
+  if ([self.iconImageName length]) {
+    iconImage = [UIImage imageNamed:self.iconImageName];
+  }
+  [cell setIconImage:iconImage];
+}
+
+@end
+
+@implementation LegacySettingsDetailCell {
+  UIImageView* _iconImageView;
+  UILayoutGuide* _labelContainerGuide;
+  NSLayoutConstraint* _iconHiddenConstraint;
+  NSLayoutConstraint* _iconVisibleConstraint;
+  NSLayoutConstraint* _textLabelWidthConstraint;
+  NSLayoutConstraint* _detailTextLabelWidthConstraint;
+}
+
+@synthesize detailTextLabel = _detailTextLabel;
+@synthesize textLabel = _textLabel;
+
+- (instancetype)initWithFrame:(CGRect)frame {
+  self = [super initWithFrame:frame];
+  if (self) {
+    self.isAccessibilityElement = YES;
+    UIView* contentView = self.contentView;
+
+    _iconImageView = [[UIImageView alloc] init];
+    _iconImageView.translatesAutoresizingMaskIntoConstraints = NO;
+    _iconImageView.hidden = YES;
+    [contentView addSubview:_iconImageView];
+
+    // Constrain the labels inside a container view, to make width computations
+    // easier.
+    _labelContainerGuide = [[UILayoutGuide alloc] init];
+    [contentView addLayoutGuide:_labelContainerGuide];
+
+    _textLabel = [[UILabel alloc] init];
+    _textLabel.translatesAutoresizingMaskIntoConstraints = NO;
+    _textLabel.font = [UIFont systemFontOfSize:kUIKitMainFontSize];
+    _textLabel.textColor = UIColorFromRGB(kUIKitMainTextColor);
+    _textLabel.backgroundColor = [UIColor clearColor];
+    [contentView addSubview:_textLabel];
+
+    _detailTextLabel = [[UILabel alloc] init];
+    _detailTextLabel.translatesAutoresizingMaskIntoConstraints = NO;
+    _detailTextLabel.font = [UIFont systemFontOfSize:kUIKitDetailFontSize];
+    _detailTextLabel.textColor = UIColorFromRGB(kUIKitDetailTextColor);
+    _detailTextLabel.backgroundColor = [UIColor clearColor];
+    [contentView addSubview:_detailTextLabel];
+
+    // Set up the width constraints. They are activated here and updated in
+    // layoutSubviews.
+    _textLabelWidthConstraint =
+        [_textLabel.widthAnchor constraintEqualToConstant:0];
+    _detailTextLabelWidthConstraint =
+        [_detailTextLabel.widthAnchor constraintEqualToConstant:0];
+
+    // Set up the constraints for when the icon is visible and hidden.  One of
+    // these will be active at a time, defaulting to hidden.
+    _iconHiddenConstraint = [_labelContainerGuide.leadingAnchor
+        constraintEqualToAnchor:contentView.leadingAnchor
+                       constant:kHorizontalPadding];
+    _iconVisibleConstraint = [_labelContainerGuide.leadingAnchor
+        constraintEqualToAnchor:_iconImageView.trailingAnchor
+                       constant:kIconTrailingPadding];
+
+    [NSLayoutConstraint activateConstraints:@[
+      [_iconImageView.leadingAnchor
+          constraintEqualToAnchor:contentView.leadingAnchor
+                         constant:kHorizontalPadding],
+      [_iconImageView.widthAnchor constraintEqualToConstant:kIconImageSize],
+      [_iconImageView.heightAnchor constraintEqualToConstant:kIconImageSize],
+
+      // Fix the edges of the text labels.
+      [_textLabel.leadingAnchor
+          constraintEqualToAnchor:_labelContainerGuide.leadingAnchor],
+      [_detailTextLabel.trailingAnchor
+          constraintEqualToAnchor:_labelContainerGuide.trailingAnchor],
+      [_labelContainerGuide.trailingAnchor
+          constraintEqualToAnchor:contentView.trailingAnchor
+                         constant:-kHorizontalPadding],
+
+      // Set up the vertical constraints and align the baselines of the two text
+      // labels.
+      [_iconImageView.centerYAnchor
+          constraintEqualToAnchor:contentView.centerYAnchor],
+      [_textLabel.centerYAnchor
+          constraintEqualToAnchor:contentView.centerYAnchor],
+      [_detailTextLabel.firstBaselineAnchor
+          constraintEqualToAnchor:_textLabel.firstBaselineAnchor],
+
+      _textLabelWidthConstraint,
+      _detailTextLabelWidthConstraint,
+      _iconHiddenConstraint,
+    ]];
+
+    AddOptionalVerticalPadding(contentView, _textLabel, kVerticalPadding);
+  }
+  return self;
+}
+
+- (void)setIconImage:(UIImage*)image {
+  BOOL hidden = (image == nil);
+  if (hidden == _iconImageView.hidden) {
+    return;
+  }
+
+  _iconImageView.image = image;
+  _iconImageView.hidden = hidden;
+  if (hidden) {
+    _iconVisibleConstraint.active = NO;
+    _iconHiddenConstraint.active = YES;
+  } else {
+    _iconHiddenConstraint.active = NO;
+    _iconVisibleConstraint.active = YES;
+  }
+}
+
+// Updates the layout constraints of the text labels and then calls the
+// superclass's implementation of layoutSubviews which can then take account of
+// the new constraints.
+- (void)layoutSubviews {
+  [super layoutSubviews];
+
+  // Size the labels in order to determine how much width they want.
+  [self.textLabel sizeToFit];
+  [self.detailTextLabel sizeToFit];
+
+  // Update the width constraints.
+  _textLabelWidthConstraint.constant = self.textLabelTargetWidth;
+  _detailTextLabelWidthConstraint.constant = self.detailTextLabelTargetWidth;
+
+  // Now invoke the layout.
+  [super layoutSubviews];
+}
+
+- (void)prepareForReuse {
+  [super prepareForReuse];
+
+  [self setIconImage:nil];
+}
+
+- (CGFloat)textLabelTargetWidth {
+  CGFloat availableWidth =
+      CGRectGetWidth(_labelContainerGuide.layoutFrame) - kHorizontalPadding;
+  CGFloat textLabelWidth = self.textLabel.frame.size.width;
+  CGFloat detailTextLabelWidth = self.detailTextLabel.frame.size.width;
+
+  if (textLabelWidth + detailTextLabelWidth <= availableWidth)
+    return textLabelWidth;
+
+  return std::max(
+      availableWidth - detailTextLabelWidth,
+      std::min(availableWidth * kMinTextWidthRatio, textLabelWidth));
+}
+
+- (CGFloat)detailTextLabelTargetWidth {
+  CGFloat availableWidth =
+      CGRectGetWidth(_labelContainerGuide.layoutFrame) - kHorizontalPadding;
+  CGFloat textLabelWidth = self.textLabel.frame.size.width;
+  CGFloat detailTextLabelWidth = self.detailTextLabel.frame.size.width;
+
+  if (textLabelWidth + detailTextLabelWidth <= availableWidth)
+    return detailTextLabelWidth;
+
+  return std::max(availableWidth - textLabelWidth,
+                  std::min(availableWidth * kMinDetailTextWidthRatio,
+                           detailTextLabelWidth));
+}
+
+- (NSString*)accessibilityLabel {
+  return self.textLabel.text;
+}
+
+- (NSString*)accessibilityValue {
+  return self.detailTextLabel.text;
+}
+
+@end

ios/chrome/browser/ui/settings/cells/settings_detail_item.h

@@ -7,17 +7,19 @@
 
 #import <UIKit/UIKit.h>
 
-#import "ios/chrome/browser/ui/collection_view/cells/collection_view_item.h"
-#import "ios/third_party/material_components_ios/src/components/CollectionCells/src/MaterialCollectionCells.h"
+#import "ios/chrome/browser/ui/table_view/cells/table_view_item.h"
 
-// SettingsDetailItem is a model class that uses CollectionViewDetailCell.
-@interface SettingsDetailItem : CollectionViewItem
+// SettingsDetailItem is a model class that uses SettingsDetailCell.
+@interface SettingsDetailItem : TableViewItem
 
 // The filename for the leading icon.  If empty, no icon will be shown.
 @property(nonatomic, copy) NSString* iconImageName;
 
+// The background color of the cell.
+@property(nonatomic, strong) UIColor* cellBackgroundColor;
+
 // The accessory type to display on the trailing edge of the cell.
-@property(nonatomic) MDCCollectionViewCellAccessoryType accessoryType;
+@property(nonatomic) UITableViewCellAccessoryType accessoryType;
 
 // The main text string.
 @property(nonatomic, copy) NSString* text;
@@ -27,11 +29,11 @@
 
 @end
 
-// SettingsDetailCell implements an MDCCollectionViewCell subclass containing an
+// SettingsDetailCell implements an UITableViewCell subclass containing an
 // optional leading icon and two text labels: a "main" label and a "detail"
 // label. The two labels are laid out side-by-side and fill the full width of
 // the cell. Labels are truncated as needed to fit in the cell.
-@interface SettingsDetailCell : MDCCollectionViewCell
+@interface SettingsDetailCell : UITableViewCell
 
 // UILabels corresponding to |text| and |detailText| from the item.
 @property(nonatomic, readonly, strong) UILabel* textLabel;
@@ -42,8 +44,10 @@
 // the full width of the cell.
 - (void)setIconImage:(UIImage*)image;
 
-// The amount of horizontal space to provide to each of the labels. These values
-// are determined with the following logic:
+// The amount of horizontal space to provide to each of the labels, Exposed for
+// testing. When the preferred ContentSize category chosen by the user isn't one
+// of the accessibility categories, these values are determined with the
+// following logic:
 //
 // - If there is sufficient room (after accounting for margins) for the full
 //   width of each label, use the current width of each label.
@@ -55,7 +59,9 @@
 // - If both labels want more width than their guaranteed minimums (75% and
 //   25%), use the guaranteed minimum amount for each.
 //
-// Exposed for testing.
+// If the PreferredContentSizeCategory is an Accessibility category, those
+// values aren't used. The content is displayed on two labels, one above the
+// other, without limitation on the number of lines used by the labels.
 @property(nonatomic, readonly) CGFloat textLabelTargetWidth;
 @property(nonatomic, readonly) CGFloat detailTextLabelTargetWidth;
 

ios/chrome/browser/ui/settings/cells/settings_detail_item.mm

@@ -6,12 +6,9 @@
 
 #include <algorithm>
 
-#import "ios/chrome/browser/ui/collection_view/cells/MDCCollectionViewCell+Chrome.h"
-#include "ios/chrome/browser/ui/collection_view/cells/collection_view_cell_constants.h"
+#import "ios/chrome/browser/ui/table_view/chrome_table_view_styler.h"
 #import "ios/chrome/browser/ui/uikit_ui_util.h"
 #import "ios/chrome/common/ui_util/constraints_ui_util.h"
-#import "ios/third_party/material_components_ios/src/components/Palettes/src/MaterialPalettes.h"
-#import "ios/third_party/material_components_ios/src/components/Typography/src/MaterialTypography.h"
 
 #if !defined(__has_feature) || !__has_feature(objc_arc)
 #error "This file requires ARC support."
@@ -32,11 +29,13 @@ const CGFloat kVerticalPadding = 16;
 // Size of the icon image.
 const CGFloat kIconImageSize = 28;
 
+const int kDetailTextColor = 0x767676;
+
 // Minimum proportion of the available width to guarantee to the main and detail
 // labels.
 const CGFloat kMinTextWidthRatio = 0.75f;
 const CGFloat kMinDetailTextWidthRatio = 0.25f;
-}
+}  // namespace
 
 @implementation SettingsDetailItem
 
@@ -53,13 +52,15 @@ const CGFloat kMinDetailTextWidthRatio = 0.25f;
   return self;
 }
 
-#pragma mark CollectionViewItem
+#pragma mark TableViewItem
 
-- (void)configureCell:(SettingsDetailCell*)cell {
-  [super configureCell:cell];
-  [cell cr_setAccessoryType:self.accessoryType];
+- (void)configureCell:(SettingsDetailCell*)cell
+           withStyler:(ChromeTableViewStyler*)styler {
+  [super configureCell:cell withStyler:styler];
+  cell.accessoryType = self.accessoryType;
   cell.textLabel.text = self.text;
   cell.detailTextLabel.text = self.detailText;
+  cell.backgroundColor = self.cellBackgroundColor;
 
   // Update the icon image, if one is present.
   UIImage* iconImage = nil;
@@ -71,6 +72,20 @@ const CGFloat kMinDetailTextWidthRatio = 0.25f;
 
 @end
 
+#pragma mark - SettingsDetailCell
+
+@interface SettingsDetailCell ()
+
+// When they are activated, the labels are on one line.
+// They conflict with the accessibilityConstraints.
+@property(nonatomic, strong) NSArray<NSLayoutConstraint*>* standardConstraints;
+// When they are activated, each label is on its own line, with no line number
+// limit. They conflict with the standardConstraints.
+@property(nonatomic, strong)
+    NSArray<NSLayoutConstraint*>* accessibilityConstraints;
+
+@end
+
 @implementation SettingsDetailCell {
   UIImageView* _iconImageView;
   UILayoutGuide* _labelContainerGuide;
@@ -83,8 +98,9 @@ const CGFloat kMinDetailTextWidthRatio = 0.25f;
 @synthesize detailTextLabel = _detailTextLabel;
 @synthesize textLabel = _textLabel;
 
-- (instancetype)initWithFrame:(CGRect)frame {
-  self = [super initWithFrame:frame];
+- (instancetype)initWithStyle:(UITableViewCellStyle)style
+              reuseIdentifier:(NSString*)reuseIdentifier {
+  self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
   if (self) {
     self.isAccessibilityElement = YES;
     UIView* contentView = self.contentView;
@@ -101,15 +117,18 @@ const CGFloat kMinDetailTextWidthRatio = 0.25f;
 
     _textLabel = [[UILabel alloc] init];
     _textLabel.translatesAutoresizingMaskIntoConstraints = NO;
-    _textLabel.font = [UIFont systemFontOfSize:kUIKitMainFontSize];
-    _textLabel.textColor = UIColorFromRGB(kUIKitMainTextColor);
+    _textLabel.font = [UIFont preferredFontForTextStyle:UIFontTextStyleBody];
+    _textLabel.adjustsFontForContentSizeCategory = YES;
+    _textLabel.textColor = [UIColor blackColor];
     _textLabel.backgroundColor = [UIColor clearColor];
     [contentView addSubview:_textLabel];
 
     _detailTextLabel = [[UILabel alloc] init];
     _detailTextLabel.translatesAutoresizingMaskIntoConstraints = NO;
-    _detailTextLabel.font = [UIFont systemFontOfSize:kUIKitDetailFontSize];
-    _detailTextLabel.textColor = UIColorFromRGB(kUIKitDetailTextColor);
+    _detailTextLabel.font =
+        [UIFont preferredFontForTextStyle:UIFontTextStyleBody];
+    _detailTextLabel.adjustsFontForContentSizeCategory = YES;
+    _detailTextLabel.textColor = UIColorFromRGB(kDetailTextColor);
     _detailTextLabel.backgroundColor = [UIColor clearColor];
     [contentView addSubview:_detailTextLabel];
 
@@ -129,6 +148,39 @@ const CGFloat kMinDetailTextWidthRatio = 0.25f;
         constraintEqualToAnchor:_iconImageView.trailingAnchor
                        constant:kIconTrailingPadding];
 
+    _standardConstraints = @[
+      _textLabelWidthConstraint,
+      _detailTextLabelWidthConstraint,
+      // Set up the vertical constraints and align the baselines of the two text
+      // labels.
+      [_textLabel.centerYAnchor
+          constraintEqualToAnchor:contentView.centerYAnchor],
+      [_detailTextLabel.firstBaselineAnchor
+          constraintEqualToAnchor:_textLabel.firstBaselineAnchor],
+      [_detailTextLabel.trailingAnchor
+          constraintEqualToAnchor:_labelContainerGuide.trailingAnchor],
+    ];
+
+    _accessibilityConstraints = @[
+      [_textLabel.topAnchor constraintEqualToAnchor:self.contentView.topAnchor
+                                           constant:kVerticalPadding],
+      [_detailTextLabel.bottomAnchor
+          constraintEqualToAnchor:self.contentView.bottomAnchor
+                         constant:-kVerticalPadding],
+      [_textLabel.bottomAnchor
+          constraintEqualToAnchor:_detailTextLabel.topAnchor
+                         constant:-kVerticalPadding],
+      [_textLabel.trailingAnchor
+          constraintLessThanOrEqualToAnchor:self.contentView.trailingAnchor
+                                   constant:-kHorizontalPadding],
+      [_detailTextLabel.leadingAnchor
+          constraintEqualToAnchor:self.contentView.leadingAnchor
+                         constant:kHorizontalPadding],
+      [_detailTextLabel.trailingAnchor
+          constraintLessThanOrEqualToAnchor:_labelContainerGuide.trailingAnchor
+                                   constant:-kHorizontalPadding],
+    ];
+
     [NSLayoutConstraint activateConstraints:@[
       [_iconImageView.leadingAnchor
           constraintEqualToAnchor:contentView.leadingAnchor
@@ -139,27 +191,20 @@ const CGFloat kMinDetailTextWidthRatio = 0.25f;
       // Fix the edges of the text labels.
       [_textLabel.leadingAnchor
           constraintEqualToAnchor:_labelContainerGuide.leadingAnchor],
-      [_detailTextLabel.trailingAnchor
-          constraintEqualToAnchor:_labelContainerGuide.trailingAnchor],
       [_labelContainerGuide.trailingAnchor
           constraintEqualToAnchor:contentView.trailingAnchor
                          constant:-kHorizontalPadding],
 
-      // Set up the vertical constraints and align the baselines of the two text
-      // labels.
       [_iconImageView.centerYAnchor
           constraintEqualToAnchor:contentView.centerYAnchor],
-      [_textLabel.centerYAnchor
-          constraintEqualToAnchor:contentView.centerYAnchor],
-      [_detailTextLabel.firstBaselineAnchor
-          constraintEqualToAnchor:_textLabel.firstBaselineAnchor],
-
-      _textLabelWidthConstraint,
-      _detailTextLabelWidthConstraint,
       _iconHiddenConstraint,
     ]];
 
     AddOptionalVerticalPadding(contentView, _textLabel, kVerticalPadding);
+
+    [self updateForAccessibilityContentSizeCategory:
+              ContentSizeCategoryIsAccessibilityCategory(
+                  self.traitCollection.preferredContentSizeCategory)];
   }
   return self;
 }
@@ -181,6 +226,21 @@ const CGFloat kMinDetailTextWidthRatio = 0.25f;
   }
 }
 
+#pragma mark - UIView
+
+- (void)traitCollectionDidChange:(UITraitCollection*)previousTraitCollection {
+  [super traitCollectionDidChange:previousTraitCollection];
+  BOOL isCurrentCategoryAccessibility =
+      ContentSizeCategoryIsAccessibilityCategory(
+          self.traitCollection.preferredContentSizeCategory);
+  if (isCurrentCategoryAccessibility !=
+      ContentSizeCategoryIsAccessibilityCategory(
+          previousTraitCollection.preferredContentSizeCategory)) {
+    [self updateForAccessibilityContentSizeCategory:
+              isCurrentCategoryAccessibility];
+  }
+}
+
 // Updates the layout constraints of the text labels and then calls the
 // superclass's implementation of layoutSubviews which can then take account of
 // the new constraints.
@@ -199,12 +259,34 @@ const CGFloat kMinDetailTextWidthRatio = 0.25f;
   [super layoutSubviews];
 }
 
+#pragma mark - UITableViewCell
+
 - (void)prepareForReuse {
   [super prepareForReuse];
 
   [self setIconImage:nil];
 }
 
+#pragma mark - Private
+
+// Updates the cell such as it is layouted correctly with regard to the
+// preferred content size category, if it is an
+// |accessibilityContentSizeCategory| or not.
+- (void)updateForAccessibilityContentSizeCategory:
+    (BOOL)accessibilityContentSizeCategory {
+  if (accessibilityContentSizeCategory) {
+    [NSLayoutConstraint deactivateConstraints:_standardConstraints];
+    [NSLayoutConstraint activateConstraints:_accessibilityConstraints];
+    _detailTextLabel.numberOfLines = 0;
+    _textLabel.numberOfLines = 0;
+  } else {
+    [NSLayoutConstraint deactivateConstraints:_accessibilityConstraints];
+    [NSLayoutConstraint activateConstraints:_standardConstraints];
+    _detailTextLabel.numberOfLines = 1;
+    _textLabel.numberOfLines = 1;
+  }
+}
+
 - (CGFloat)textLabelTargetWidth {
   CGFloat availableWidth =
       CGRectGetWidth(_labelContainerGuide.layoutFrame) - kHorizontalPadding;

ios/chrome/browser/ui/settings/clear_browsing_data_manager.mm

@@ -38,7 +38,7 @@
 #import "ios/chrome/browser/ui/list_model/list_model.h"
 #import "ios/chrome/browser/ui/settings/cells/clear_browsing_data_constants.h"
 #import "ios/chrome/browser/ui/settings/cells/clear_browsing_data_item.h"
-#import "ios/chrome/browser/ui/settings/cells/settings_detail_item.h"
+#import "ios/chrome/browser/ui/settings/cells/legacy/legacy_settings_detail_item.h"
 #import "ios/chrome/browser/ui/settings/cells/table_view_clear_browsing_data_item.h"
 #import "ios/chrome/browser/ui/settings/clear_browsing_data_ui_constants.h"
 #import "ios/chrome/browser/ui/table_view/cells/table_view_text_button_item.h"
@@ -503,8 +503,8 @@ actionSheetCoordinatorWithDataTypesToRemove:
 - (ListItem*)timeRangeItem {
   ListItem* timeRangeItem;
   if (self.listType == ClearBrowsingDataListType::kListTypeCollectionView) {
-    SettingsDetailItem* collectionTimeRangeItem =
-        [[SettingsDetailItem alloc] initWithType:ItemTypeTimeRange];
+    LegacySettingsDetailItem* collectionTimeRangeItem =
+        [[LegacySettingsDetailItem alloc] initWithType:ItemTypeTimeRange];
     collectionTimeRangeItem.text = l10n_util::GetNSString(
         IDS_IOS_CLEAR_BROWSING_DATA_TIME_RANGE_SELECTOR_TITLE);
     NSString* detailText = [TimeRangeSelectorCollectionViewController

ios/chrome/browser/ui/settings/content_settings_collection_view_controller.mm

@@ -19,7 +19,7 @@
 #include "ios/chrome/browser/mailto/features.h"
 #import "ios/chrome/browser/ui/collection_view/collection_view_model.h"
 #import "ios/chrome/browser/ui/settings/block_popups_collection_view_controller.h"
-#import "ios/chrome/browser/ui/settings/cells/settings_detail_item.h"
+#import "ios/chrome/browser/ui/settings/cells/legacy/legacy_settings_detail_item.h"
 #import "ios/chrome/browser/ui/settings/compose_email_handler_collection_view_controller.h"
 #import "ios/chrome/browser/ui/settings/settings_navigation_controller.h"
 #import "ios/chrome/browser/ui/settings/translate_collection_view_controller.h"
@@ -66,9 +66,9 @@ typedef NS_ENUM(NSInteger, ItemType) {
   MailtoHandlerManager* _mailtoHandlerManager;
 
   // Updatable Items
-  SettingsDetailItem* _blockPopupsDetailItem;
-  SettingsDetailItem* _translateDetailItem;
-  SettingsDetailItem* _composeEmailDetailItem;
+  LegacySettingsDetailItem* _blockPopupsDetailItem;
+  LegacySettingsDetailItem* _translateDetailItem;
+  LegacySettingsDetailItem* _composeEmailDetailItem;
 }
 
 // Returns the value for the default setting with ID |settingID|.
@@ -147,8 +147,8 @@ typedef NS_ENUM(NSInteger, ItemType) {
 }
 
 - (CollectionViewItem*)blockPopupsItem {
-  _blockPopupsDetailItem =
-      [[SettingsDetailItem alloc] initWithType:ItemTypeSettingsBlockPopups];
+  _blockPopupsDetailItem = [[LegacySettingsDetailItem alloc]
+      initWithType:ItemTypeSettingsBlockPopups];
   NSString* subtitle = [_disablePopupsSetting value]
                            ? l10n_util::GetNSString(IDS_IOS_SETTING_ON)
                            : l10n_util::GetNSString(IDS_IOS_SETTING_OFF);
@@ -162,7 +162,7 @@ typedef NS_ENUM(NSInteger, ItemType) {
 
 - (CollectionViewItem*)translateItem {
   _translateDetailItem =
-      [[SettingsDetailItem alloc] initWithType:ItemTypeSettingsTranslate];
+      [[LegacySettingsDetailItem alloc] initWithType:ItemTypeSettingsTranslate];
   BOOL enabled =
       browserState_->GetPrefs()->GetBoolean(prefs::kOfferTranslateEnabled);
   NSString* subtitle = enabled ? l10n_util::GetNSString(IDS_IOS_SETTING_ON)
@@ -176,8 +176,8 @@ typedef NS_ENUM(NSInteger, ItemType) {
 }
 
 - (CollectionViewItem*)composeEmailItem {
-  _composeEmailDetailItem =
-      [[SettingsDetailItem alloc] initWithType:ItemTypeSettingsComposeEmail];
+  _composeEmailDetailItem = [[LegacySettingsDetailItem alloc]
+      initWithType:ItemTypeSettingsComposeEmail];
   if (base::FeatureList::IsEnabled(kMailtoHandledWithGoogleUI)) {
     // Use the handler's preferred title string for the compose email item.
     MailtoHandlerProvider* provider =

ios/chrome/browser/ui/settings/content_settings_collection_view_controller_unittest.mm

@@ -8,7 +8,7 @@
 #include "ios/chrome/browser/browser_state/test_chrome_browser_state.h"
 #include "ios/chrome/browser/mailto/features.h"
 #import "ios/chrome/browser/ui/collection_view/collection_view_controller_test.h"
-#import "ios/chrome/browser/ui/settings/cells/settings_detail_item.h"
+#import "ios/chrome/browser/ui/settings/cells/legacy/legacy_settings_detail_item.h"
 #include "ios/chrome/grit/ios_strings.h"
 #include "ios/web/public/test/test_web_thread_bundle.h"
 #include "testing/gtest_mac.h"
@@ -75,7 +75,7 @@ TEST_F(ContentSettingsCollectionViewControllerTest,
   CheckDetailItemTextWithIds(IDS_IOS_BLOCK_POPUPS, IDS_IOS_SETTING_ON, 0, 0);
   CheckDetailItemTextWithIds(IDS_IOS_TRANSLATE_SETTING, IDS_IOS_SETTING_ON, 0,
                              1);
-  SettingsDetailItem* item = GetCollectionViewItem(0, 2);
+  LegacySettingsDetailItem* item = GetCollectionViewItem(0, 2);
   EXPECT_NSEQ(l10n_util::GetNSString(IDS_IOS_COMPOSE_EMAIL_SETTING), item.text);
 }
 

ios/chrome/browser/ui/settings/material_cell_catalog_view_controller.mm

@@ -36,9 +36,9 @@
 #import "ios/chrome/browser/ui/settings/cells/copied_to_chrome_item.h"
 #import "ios/chrome/browser/ui/settings/cells/encryption_item.h"
 #import "ios/chrome/browser/ui/settings/cells/import_data_multiline_detail_item.h"
+#import "ios/chrome/browser/ui/settings/cells/legacy/legacy_settings_detail_item.h"
 #import "ios/chrome/browser/ui/settings/cells/passphrase_error_item.h"
 #import "ios/chrome/browser/ui/settings/cells/password_details_item.h"
-#import "ios/chrome/browser/ui/settings/cells/settings_detail_item.h"
 #import "ios/chrome/browser/ui/settings/cells/settings_image_detail_text_item.h"
 #import "ios/chrome/browser/ui/settings/cells/settings_search_item.h"
 #import "ios/chrome/browser/ui/settings/cells/settings_switch_item.h"
@@ -187,27 +187,27 @@ const CGFloat kCardIssuerNetworkIconDimension = 25.0;
 
   // Detail cells.
   [model addSectionWithIdentifier:SectionIdentifierDetailCell];
-  SettingsDetailItem* detailBasic =
-      [[SettingsDetailItem alloc] initWithType:ItemTypeDetailBasic];
+  LegacySettingsDetailItem* detailBasic =
+      [[LegacySettingsDetailItem alloc] initWithType:ItemTypeDetailBasic];
   detailBasic.text = @"Preload Webpages";
   detailBasic.detailText = @"Only on Wi-Fi";
   detailBasic.accessoryType = MDCCollectionViewCellAccessoryDisclosureIndicator;
   [model addItem:detailBasic
       toSectionWithIdentifier:SectionIdentifierDetailCell];
-  SettingsDetailItem* detailMediumLeft =
-      [[SettingsDetailItem alloc] initWithType:ItemTypeDetailLeftMedium];
+  LegacySettingsDetailItem* detailMediumLeft =
+      [[LegacySettingsDetailItem alloc] initWithType:ItemTypeDetailLeftMedium];
   detailMediumLeft.text = @"A long string but it should fit";
   detailMediumLeft.detailText = @"Detail";
   [model addItem:detailMediumLeft
       toSectionWithIdentifier:SectionIdentifierDetailCell];
-  SettingsDetailItem* detailMediumRight =
-      [[SettingsDetailItem alloc] initWithType:ItemTypeDetailRightMedium];
+  LegacySettingsDetailItem* detailMediumRight =
+      [[LegacySettingsDetailItem alloc] initWithType:ItemTypeDetailRightMedium];
   detailMediumRight.text = @"Main";
   detailMediumRight.detailText = @"A long string but it should fit";
   [model addItem:detailMediumRight
       toSectionWithIdentifier:SectionIdentifierDetailCell];
-  SettingsDetailItem* detailLongLeft =
-      [[SettingsDetailItem alloc] initWithType:ItemTypeDetailLeftLong];
+  LegacySettingsDetailItem* detailLongLeft =
+      [[LegacySettingsDetailItem alloc] initWithType:ItemTypeDetailLeftLong];
   detailLongLeft.text =
       @"This is a very long main text that is intended to overflow "
       @"except maybe on landscape but now it's longer so it won't fit.";
@@ -215,8 +215,8 @@ const CGFloat kCardIssuerNetworkIconDimension = 25.0;
   detailLongLeft.iconImageName = @"ntp_history_icon";
   [model addItem:detailLongLeft
       toSectionWithIdentifier:SectionIdentifierDetailCell];
-  SettingsDetailItem* detailLongRight =
-      [[SettingsDetailItem alloc] initWithType:ItemTypeDetailRightLong];
+  LegacySettingsDetailItem* detailLongRight =
+      [[LegacySettingsDetailItem alloc] initWithType:ItemTypeDetailRightLong];
   detailLongRight.text = @"Main Text";
   detailLongRight.detailText =
       @"This is a very long detail text that is intended to overflow "
@@ -224,8 +224,8 @@ const CGFloat kCardIssuerNetworkIconDimension = 25.0;
   detailLongRight.iconImageName = @"ntp_history_icon";
   [model addItem:detailLongRight
       toSectionWithIdentifier:SectionIdentifierDetailCell];
-  SettingsDetailItem* detailLongBoth =
-      [[SettingsDetailItem alloc] initWithType:ItemTypeDetailBothLong];
+  LegacySettingsDetailItem* detailLongBoth =
+      [[LegacySettingsDetailItem alloc] initWithType:ItemTypeDetailBothLong];
   detailLongBoth.text =
       @"This is a very long main text that is intended to overflow "
       @"except maybe on landscape but now it's longer so it won't fit.";

ios/chrome/browser/ui/settings/privacy_collection_view_controller.mm

@@ -27,7 +27,7 @@
 #import "ios/chrome/browser/ui/collection_view/cells/collection_view_footer_item.h"
 #import "ios/chrome/browser/ui/collection_view/collection_view_model.h"
 #import "ios/chrome/browser/ui/settings/accounts_collection_view_controller.h"
-#import "ios/chrome/browser/ui/settings/cells/settings_detail_item.h"
+#import "ios/chrome/browser/ui/settings/cells/legacy/legacy_settings_detail_item.h"
 #import "ios/chrome/browser/ui/settings/cells/settings_switch_item.h"
 #import "ios/chrome/browser/ui/settings/cells/settings_text_item.h"
 #import "ios/chrome/browser/ui/settings/clear_browsing_data_collection_view_controller.h"
@@ -87,8 +87,8 @@ typedef NS_ENUM(NSInteger, ItemType) {
   PrefChangeRegistrar _prefChangeRegistrarApplicationContext;
 
   // Updatable Items
-  SettingsDetailItem* _handoffDetailItem;
-  SettingsDetailItem* _sendUsageDetailItem;
+  LegacySettingsDetailItem* _handoffDetailItem;
+  LegacySettingsDetailItem* _sendUsageDetailItem;
 }
 
 // Initialization methods for various model items.
@@ -281,11 +281,11 @@ typedef NS_ENUM(NSInteger, ItemType) {
   return _sendUsageDetailItem;
 }
 
-- (SettingsDetailItem*)detailItemWithType:(NSInteger)type
-                                  titleId:(NSInteger)titleId
-                               detailText:(NSString*)detailText {
-  SettingsDetailItem* detailItem =
-      [[SettingsDetailItem alloc] initWithType:type];
+- (LegacySettingsDetailItem*)detailItemWithType:(NSInteger)type
+                                        titleId:(NSInteger)titleId
+                                     detailText:(NSString*)detailText {
+  LegacySettingsDetailItem* detailItem =
+      [[LegacySettingsDetailItem alloc] initWithType:type];
   detailItem.text = l10n_util::GetNSString(titleId);
   detailItem.detailText = detailText;
   detailItem.accessoryType = MDCCollectionViewCellAccessoryDisclosureIndicator;

ios/chrome/browser/ui/settings/settings_collection_view_controller.mm

@@ -48,7 +48,7 @@
 #import "ios/chrome/browser/ui/settings/autofill_profile_collection_view_controller.h"
 #import "ios/chrome/browser/ui/settings/bandwidth_management_collection_view_controller.h"
 #import "ios/chrome/browser/ui/settings/cells/account_signin_item.h"
-#import "ios/chrome/browser/ui/settings/cells/settings_detail_item.h"
+#import "ios/chrome/browser/ui/settings/cells/legacy/legacy_settings_detail_item.h"
 #import "ios/chrome/browser/ui/settings/cells/settings_switch_item.h"
 #import "ios/chrome/browser/ui/settings/cells/settings_text_item.h"
 #import "ios/chrome/browser/ui/settings/content_settings_collection_view_controller.h"
@@ -240,11 +240,11 @@ void IdentityObserverBridge::OnPrimaryAccountCleared(
   PrefChangeRegistrar _prefChangeRegistrar;
 
   // Updatable Items.
-  SettingsDetailItem* _voiceSearchDetailItem;
-  SettingsDetailItem* _defaultSearchEngineItem;
-  SettingsDetailItem* _savePasswordsDetailItem;
-  SettingsDetailItem* _autoFillProfileDetailItem;
-  SettingsDetailItem* _autoFillCreditCardDetailItem;
+  LegacySettingsDetailItem* _voiceSearchDetailItem;
+  LegacySettingsDetailItem* _defaultSearchEngineItem;
+  LegacySettingsDetailItem* _savePasswordsDetailItem;
+  LegacySettingsDetailItem* _autoFillProfileDetailItem;
+  LegacySettingsDetailItem* _autoFillCreditCardDetailItem;
 
   // YES if the user used at least once the sign-in promo view buttons.
   BOOL _signinStarted;
@@ -670,14 +670,14 @@ void IdentityObserverBridge::OnPrimaryAccountCleared(
                   withDefaultsKey:kLogJavascriptKey];
 }
 
-- (SettingsDetailItem*)collectionViewCatalogDetailItem {
+- (LegacySettingsDetailItem*)collectionViewCatalogDetailItem {
   return [self detailItemWithType:ItemTypeCollectionCellCatalog
                              text:@"Collection Cell Catalog"
                        detailText:nil
                     iconImageName:kSettingsDebugImageName];
 }
 
-- (SettingsDetailItem*)tableViewCatalogDetailItem {
+- (LegacySettingsDetailItem*)tableViewCatalogDetailItem {
   return [self detailItemWithType:ItemTypeTableCellCatalog
                              text:@"TableView Cell Catalog"
                        detailText:nil
@@ -698,12 +698,12 @@ void IdentityObserverBridge::OnPrimaryAccountCleared(
 
 #pragma mark Item Constructors
 
-- (SettingsDetailItem*)detailItemWithType:(NSInteger)type
-                                     text:(NSString*)text
-                               detailText:(NSString*)detailText
-                            iconImageName:(NSString*)iconImageName {
-  SettingsDetailItem* detailItem =
-      [[SettingsDetailItem alloc] initWithType:type];
+- (LegacySettingsDetailItem*)detailItemWithType:(NSInteger)type
+                                           text:(NSString*)text
+                                     detailText:(NSString*)detailText
+                                  iconImageName:(NSString*)iconImageName {
+  LegacySettingsDetailItem* detailItem =
+      [[LegacySettingsDetailItem alloc] initWithType:type];
   detailItem.text = text;
   detailItem.detailText = detailText;
   detailItem.accessoryType = MDCCollectionViewCellAccessoryDisclosureIndicator;
@@ -738,9 +738,9 @@ void IdentityObserverBridge::OnPrimaryAccountCleared(
   NSInteger itemType =
       [self.collectionViewModel itemTypeForIndexPath:indexPath];
 
-  if ([cell isKindOfClass:[SettingsDetailCell class]]) {
-    SettingsDetailCell* detailCell =
-        base::mac::ObjCCastStrict<SettingsDetailCell>(cell);
+  if ([cell isKindOfClass:[LegacySettingsDetailCell class]]) {
+    LegacySettingsDetailCell* detailCell =
+        base::mac::ObjCCastStrict<LegacySettingsDetailCell>(cell);
     if (itemType == ItemTypeSavedPasswords) {
       scoped_refptr<password_manager::PasswordStore> passwordStore =
           IOSChromePasswordStoreFactory::GetForBrowserState(

ios/chrome/browser/ui/settings/sync_settings_collection_view_controller.mm

@@ -38,7 +38,7 @@
 #import "ios/chrome/browser/ui/commands/application_commands.h"
 #import "ios/chrome/browser/ui/commands/open_new_tab_command.h"
 #import "ios/chrome/browser/ui/commands/show_signin_command.h"
-#import "ios/chrome/browser/ui/settings/cells/settings_detail_item.h"
+#import "ios/chrome/browser/ui/settings/cells/legacy/legacy_settings_detail_item.h"
 #import "ios/chrome/browser/ui/settings/cells/settings_text_item.h"
 #import "ios/chrome/browser/ui/settings/cells/sync_switch_item.h"
 #import "ios/chrome/browser/ui/settings/cells/text_and_error_item.h"

ios/chrome/browser/ui/settings/table_cell_catalog_view_controller.mm

@@ -4,6 +4,7 @@
 
 #import "ios/chrome/browser/ui/settings/table_cell_catalog_view_controller.h"
 
+#import "ios/chrome/browser/ui/settings/cells/settings_detail_item.h"
 #import "ios/chrome/browser/ui/table_view/cells/table_view_accessory_item.h"
 #import "ios/chrome/browser/ui/table_view/cells/table_view_text_button_item.h"
 #import "ios/chrome/browser/ui/table_view/cells/table_view_text_header_footer_item.h"
@@ -35,6 +36,7 @@ typedef NS_ENUM(NSInteger, ItemType) {
   ItemTypeURLWithSize,
   ItemTypeURLWithSupplementalText,
   ItemTypeURLWithBadgeImage,
+  ItemTypeTextSettingsDetail,
 };
 }
 
@@ -111,6 +113,20 @@ typedef NS_ENUM(NSInteger, ItemType) {
   [model addItem:textActionButtonItem
       toSectionWithIdentifier:SectionIdentifierText];
 
+  SettingsDetailItem* settingsDetailItem =
+      [[SettingsDetailItem alloc] initWithType:ItemTypeTextSettingsDetail];
+  settingsDetailItem.text = @"Short text";
+  settingsDetailItem.detailText = @"Short";
+  [model addItem:settingsDetailItem
+      toSectionWithIdentifier:SectionIdentifierText];
+
+  SettingsDetailItem* settingsDetailItemLong =
+      [[SettingsDetailItem alloc] initWithType:ItemTypeTextSettingsDetail];
+  settingsDetailItemLong.text = @"Very long text eating the other detail label";
+  settingsDetailItemLong.detailText = @"A bit less short";
+  [model addItem:settingsDetailItemLong
+      toSectionWithIdentifier:SectionIdentifierText];
+
   // SectionIdentifierURL.
   TableViewURLItem* item =
       [[TableViewURLItem alloc] initWithType:ItemTypeURLNoMetadata];