Introduce extra large icon button.

Bug: b:335579688
Change-Id: Ib23d9a3722b32120f40acf296a488292394dae89
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5463586
Reviewed-by: Sean Kau <skau@chromium.org>
Commit-Queue: Istvan Nagy <iscsi@google.com>
Cr-Commit-Position: refs/heads/main@{#1289757}

ash/style/icon_button.cc

@@ -33,6 +33,7 @@ constexpr int kXSmallButtonSize = 20;
 constexpr int kSmallButtonSize = 24;
 constexpr int kMediumButtonSize = 32;
 constexpr int kLargeButtonSize = 36;
+constexpr int kXLargeButtonSize = 48;
 
 // Icon size of the small, medium and large size buttons.
 constexpr int kIconSize = 20;
@@ -70,6 +71,11 @@ int GetButtonSizeOnType(IconButton::Type type) {
     case IconButton::Type::kLargeFloating:
     case IconButton::Type::kLargeProminentFloating:
       return kLargeButtonSize;
+    case IconButton::Type::kXLarge:
+    case IconButton::Type::kXLargeProminent:
+    case IconButton::Type::kXLargeFloating:
+    case IconButton::Type::kXLargeProminentFloating:
+      return kXLargeButtonSize;
   }
 }
 
@@ -79,11 +85,13 @@ std::optional<ui::ColorId> GetDefaultBackgroundColorId(IconButton::Type type) {
     case IconButton::Type::kSmall:
     case IconButton::Type::kMedium:
     case IconButton::Type::kLarge:
+    case IconButton::Type::kXLarge:
       return cros_tokens::kCrosSysSystemOnBase;
     case IconButton::Type::kXSmallProminent:
     case IconButton::Type::kSmallProminent:
     case IconButton::Type::kMediumProminent:
     case IconButton::Type::kLargeProminent:
+    case IconButton::Type::kXLargeProminent:
       return cros_tokens::kCrosSysSystemPrimaryContainer;
     default:
       NOTREACHED() << "Floating type button does not have a background";
@@ -101,16 +109,20 @@ ui::ColorId GetDefaultIconColorId(IconButton::Type type, bool focused) {
     case IconButton::Type::kMediumFloating:
     case IconButton::Type::kLarge:
     case IconButton::Type::kLargeFloating:
+    case IconButton::Type::kXLarge:
+    case IconButton::Type::kXLargeFloating:
       return cros_tokens::kCrosSysOnSurface;
     case IconButton::Type::kXSmallProminent:
     case IconButton::Type::kSmallProminent:
     case IconButton::Type::kMediumProminent:
     case IconButton::Type::kLargeProminent:
+    case IconButton::Type::kXLargeProminent:
       return cros_tokens::kCrosSysSystemOnPrimaryContainer;
     case IconButton::Type::kXSmallProminentFloating:
     case IconButton::Type::kSmallProminentFloating:
     case IconButton::Type::kMediumProminentFloating:
     case IconButton::Type::kLargeProminentFloating:
+    case IconButton::Type::kXLargeProminentFloating:
       return focused ? cros_tokens::kCrosSysPrimary
                      : cros_tokens::kCrosSysSecondary;
   }
@@ -136,6 +148,8 @@ bool IsFloatingIconButton(IconButton::Type type) {
     case IconButton::Type::kMediumProminentFloating:
     case IconButton::Type::kLargeFloating:
     case IconButton::Type::kLargeProminentFloating:
+    case IconButton::Type::kXLargeFloating:
+    case IconButton::Type::kXLargeProminentFloating:
       return true;
     default:
       break;
@@ -150,6 +164,7 @@ bool IsProminentFloatingType(IconButton::Type type) {
     case IconButton::Type::kSmallProminentFloating:
     case IconButton::Type::kMediumProminentFloating:
     case IconButton::Type::kLargeProminentFloating:
+    case IconButton::Type::kXLargeProminentFloating:
       return true;
     default:
       break;

ash/style/icon_button.h

@@ -47,18 +47,22 @@ class ASH_EXPORT IconButton : public views::ImageButton {
     kSmall,
     kMedium,
     kLarge,
+    kXLarge,
     kXSmallProminent,
     kSmallProminent,
     kMediumProminent,
     kLargeProminent,
+    kXLargeProminent,
     kXSmallFloating,
     kSmallFloating,
     kMediumFloating,
     kLargeFloating,
+    kXLargeFloating,
     kXSmallProminentFloating,
     kSmallProminentFloating,
     kMediumProminentFloating,
     kLargeProminentFloating,
+    kXLargeProminentFloating,
   };
 
   // Used to determine how the button will behave when disabled.

ash/style/style_viewer/icon_button_instances_grid_view_factory.cc

@@ -51,6 +51,7 @@ CreateIconButtonInstancesGridView() {
        {u"Default Small", IconButton::Type::kSmall, false, true, nullptr},
        {u"Default Meduim", IconButton::Type::kMedium, false, true, nullptr},
        {u"Default Large", IconButton::Type::kLarge, false, true, nullptr},
+       {u"Default XLarge", IconButton::Type::kXLarge, false, true, nullptr},
 
        {u"Floating XSmall", IconButton::Type::kXSmallFloating, false, true,
         nullptr},
@@ -60,11 +61,14 @@ CreateIconButtonInstancesGridView() {
         nullptr},
        {u"Floating Large", IconButton::Type::kLargeFloating, false, true,
         nullptr},
+       {u"Floating XLarge", IconButton::Type::kXLargeFloating, false, true,
+        nullptr},
 
        {u"Toggled XSmall", IconButton::Type::kXSmall, true, true, nullptr},
        {u"Toggled Small", IconButton::Type::kSmall, true, true, nullptr},
        {u"Toggled Meduim", IconButton::Type::kMedium, true, true, nullptr},
        {u"Toggled Large", IconButton::Type::kLarge, true, true, nullptr},
+       {u"Toggled XLarge", IconButton::Type::kLarge, true, true, nullptr},
 
        {u"Prominent Floating XSmall",
         IconButton::Type::kXSmallProminentFloating, false, true, nullptr},
@@ -73,7 +77,9 @@ CreateIconButtonInstancesGridView() {
        {u"Prominent Floating Medium",
         IconButton::Type::kMediumProminentFloating, false, true, nullptr},
        {u"Prominent Floating Large", IconButton::Type::kLargeProminentFloating,
-        false, true, nullptr}},
+        false, true, nullptr},
+       {u"Prominent Floating XLarge",
+        IconButton::Type::kXLargeProminentFloating, false, true, nullptr}},
 
       {{u"Default XSmall With Background Image", IconButton::Type::kXSmall,
         false, true, image},
@@ -83,11 +89,14 @@ CreateIconButtonInstancesGridView() {
         false, true, image},
        {u"Default Large With Background Image", IconButton::Type::kLarge, false,
         true, image},
+       {u"Default XLarge With Background Image", IconButton::Type::kXLarge,
+        false, true, image},
 
        {u"Disabled XSmall", IconButton::Type::kXSmall, false, false, nullptr},
        {u"Disabled Small", IconButton::Type::kSmall, false, false, nullptr},
        {u"Disabled Meduim", IconButton::Type::kMedium, false, false, nullptr},
-       {u"Disabled Large", IconButton::Type::kLarge, false, false, nullptr}}};
+       {u"Disabled Large", IconButton::Type::kLarge, false, false, nullptr},
+       {u"Disabled XLarge", IconButton::Type::kXLarge, false, false, nullptr}}};
 
   // Insert the instance in grid view with column-primary order.
   for (auto types : type_groups) {