[Compound] Implement components (Button) (#1021)

* Create `CompoundButton`

* Some fixes

* Lint fixes

* Start replacing existing `Button` usages

* Replace button usages

* Remove previous Button composable

* Rename `CompoundButton` to `Button`

* Fix emphasized button being displayed as Text

* Fix cancel button in `WaitListView`

* Update screenshots

* Add shorthand functions for `OutlinedButton` and `TextButton`

* Add changelog

* Fix wrong size used for emphasized button in dialog

* Create a private `ButtonInternal` implementation with the shared logic.

- Make `ButtonStyle` private.
- Rename `title` to `text`.
- Rename `buttonStyle` and `buttonSize` to just `style` and `size`.

* Fix several warnings and lint issues.

* Update screenshots

---------

Co-authored-by: ElementBot <benoitm+elementbot@element.io>

features/login/impl/src/main/kotlin/io/element/android/features/login/impl/dialogs/SlidingSyncNotSupportedDialog.kt

@@ -35,7 +35,6 @@ internal fun SlidingSyncNotSupportedDialog(
         submitText = stringResource(CommonStrings.action_learn_more),
         onSubmitClicked = onLearnMoreClicked,
         onCancelClicked = onDismiss,
-        emphasizeSubmitButton = true,
         title = stringResource(CommonStrings.dialog_title_error),
         content = stringResource(R.string.screen_change_server_error_no_sliding_sync_message),
     )

features/login/impl/src/main/kotlin/io/element/android/features/login/impl/screens/confirmaccountprovider/ConfirmAccountProviderView.kt

@@ -36,11 +36,10 @@ import io.element.android.libraries.architecture.Async
 import io.element.android.libraries.designsystem.atomic.molecules.ButtonColumnMolecule
 import io.element.android.libraries.designsystem.atomic.molecules.IconTitleSubtitleMolecule
 import io.element.android.libraries.designsystem.atomic.pages.HeaderFooterPage
-import io.element.android.libraries.designsystem.components.button.ButtonWithProgress
 import io.element.android.libraries.designsystem.components.dialogs.ErrorDialog
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
 import io.element.android.libraries.designsystem.preview.ElementPreviewLight
-import io.element.android.libraries.designsystem.theme.components.Text
+import io.element.android.libraries.designsystem.theme.components.Button
 import io.element.android.libraries.designsystem.theme.components.TextButton
 import io.element.android.libraries.matrix.api.auth.OidcDetails
 import io.element.android.libraries.testtags.TestTags
@@ -87,7 +86,7 @@ fun ConfirmAccountProviderView(
         },
         footer = {
             ButtonColumnMolecule {
-                ButtonWithProgress(
+                Button(
                     text = stringResource(id = R.string.screen_account_provider_continue),
                     showProgress = isLoading,
                     onClick = { eventSink.invoke(ConfirmAccountProviderEvents.Continue) },
@@ -97,14 +96,13 @@ fun ConfirmAccountProviderView(
                         .testTag(TestTags.loginContinue)
                 )
                 TextButton(
+                    text = stringResource(id = R.string.screen_account_provider_change),
                     onClick = onChange,
                     enabled = true,
                     modifier = Modifier
                         .fillMaxWidth()
                         .testTag(TestTags.loginChangeServer)
-                ) {
-                    Text(text = stringResource(id = R.string.screen_account_provider_change))
-                }
+                )
             }
         }
     ) {

features/login/impl/src/main/kotlin/io/element/android/features/login/impl/screens/loginpassword/LoginPasswordView.kt

@@ -60,11 +60,11 @@ import io.element.android.features.login.impl.error.loginError
 import io.element.android.libraries.architecture.Async
 import io.element.android.libraries.designsystem.atomic.molecules.IconTitleSubtitleMolecule
 import io.element.android.libraries.designsystem.components.button.BackButton
-import io.element.android.libraries.designsystem.components.button.ButtonWithProgress
 import io.element.android.libraries.designsystem.components.dialogs.ErrorDialog
 import io.element.android.libraries.designsystem.components.form.textFieldState
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
 import io.element.android.libraries.designsystem.preview.ElementPreviewLight
+import io.element.android.libraries.designsystem.theme.components.Button
 import io.element.android.libraries.designsystem.theme.components.Icon
 import io.element.android.libraries.designsystem.theme.components.IconButton
 import io.element.android.libraries.designsystem.theme.components.OutlinedTextField
@@ -141,7 +141,7 @@ fun LoginPasswordView(
             // Flexible spacing to keep the submit button at the bottom
             Spacer(modifier = Modifier.weight(1f))
             // Submit
-            ButtonWithProgress(
+            Button(
                 text = stringResource(R.string.screen_login_submit),
                 showProgress = isLoading,
                 onClick = ::submit,

features/login/impl/src/main/kotlin/io/element/android/features/login/impl/screens/waitlistscreen/WaitListView.kt

@@ -29,7 +29,6 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.systemBarsPadding
 import androidx.compose.foundation.layout.widthIn
-import androidx.compose.material3.ButtonDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.BiasAbsoluteAlignment
@@ -52,7 +51,6 @@ import io.element.android.libraries.architecture.Async
 import io.element.android.libraries.designsystem.components.dialogs.RetryDialog
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
 import io.element.android.libraries.designsystem.preview.ElementPreviewLight
-import io.element.android.libraries.designsystem.theme.aliasButtonText
 import io.element.android.libraries.designsystem.theme.components.Button
 import io.element.android.libraries.designsystem.theme.components.CircularProgressIndicator
 import io.element.android.libraries.designsystem.theme.components.Text
@@ -141,18 +139,10 @@ private fun WaitListContent(
             .padding(horizontal = 16.dp, vertical = 16.dp)
     ) {
         if (state.loginAction !is Async.Success) {
-            TextButton(
-                onClick = onCancelClicked,
-                colors = ButtonDefaults.buttonColors(
-                    containerColor = Color.White,
-                    contentColor = Color.Black,
-                    disabledContainerColor = Color.White,
-                    disabledContentColor = Color.Black,
-                ),
-            ) {
-                Text(
+            ElementTheme(darkTheme = true) {
+                TextButton(
                     text = stringResource(CommonStrings.action_cancel),
-                    style = ElementTheme.typography.aliasButtonText,
+                    onClick = onCancelClicked,
                 )
             }
         }
@@ -208,22 +198,14 @@ private fun WaitListContent(
             }
         }
         if (state.loginAction is Async.Success) {
-            Button(
-                onClick = { state.eventSink.invoke(WaitListEvents.Continue) },
-                colors = ButtonDefaults.buttonColors(
-                    containerColor = Color.White,
-                    contentColor = Color.Black,
-                    disabledContainerColor = Color.White,
-                    disabledContentColor = Color.Black,
-                ),
-                modifier = Modifier
-                    .fillMaxWidth()
-                    .align(Alignment.BottomCenter)
-                    .padding(bottom = 8.dp)
-            ) {
-                Text(
+            ElementTheme(darkTheme = true) {
+                Button(
                     text = stringResource(id = CommonStrings.action_continue),
-                    style = ElementTheme.typography.aliasButtonText,
+                    onClick = { state.eventSink.invoke(WaitListEvents.Continue) },
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .align(Alignment.BottomCenter)
+                        .padding(bottom = 8.dp),
                 )
             }
         }