Merged PR 253842: Basic and Borderless Button

Basic button implementation using style for default and borderless variants. Applied the style to the theme and updated the demo with a new Button demo and updated other demos using button to be consistent. | Design | Demo | | ------ | ------| |![Screen Shot 2019-04-09 at 2.18.19 PM.png](https://onedrive.visualstudio.com/4dcbf0bc-c3cd-49c8-a7c3-ec1924691d9b/_apis/git/repositories/32fa6338-45ea-42a0-aca0-484938e1962a/pullRequests/253842/attachments/Screen%20Shot%202019-04-09%20at%202.18.19%20PM%20(2).png) ![Screen Shot 2019-04-09 at 2.19.02 PM.png](https://onedrive.visualstudio.com/4dcbf0bc-c3cd-49c8-a7c3-ec1924691d9b/_apis/git/repositories/32fa6338-45ea-42a0-aca0-484938e1962a/pullRequests/253842/attachments/Screen%20Shot%202019-04-09%20at%202.19.02%20PM%20(2).png) | ![Screenshot_1555083988.png](https://onedrive.visualstudio.com/4dcbf0bc-c3cd-49c8-a7c3-ec1924691d9b/_apis/git/repositories/32fa6338-45ea-42a0-aca0-484938e1962a/pullRequests/253842/attachments/Screenshot_1555083988%20(2).png) | Related work items: #708719
2019-04-12 16:47:07 +00:00 · 2019-04-12 16:47:07 +00:00 · e4f6d98c14
--- a/OfficeUIFabric.Demo/src/main/AndroidManifest.xml
+++ b/OfficeUIFabric.Demo/src/main/AndroidManifest.xml
@ -28,6 +28,7 @@

        <!-- Demo activities -->
        <activity android:name="com.microsoft.officeuifabricdemo.demos.AvatarViewActivity" />
+        <activity android:name="com.microsoft.officeuifabricdemo.demos.BasicInputsActivity" />
        <activity android:name="com.microsoft.officeuifabricdemo.demos.CalendarViewActivity" />
        <activity android:name="com.microsoft.officeuifabricdemo.demos.DateTimePickerDialogActivity" />
        <activity
--- a/OfficeUIFabric.Demo/src/main/java/com/microsoft/officeuifabricdemo/Demos.kt
+++ b/OfficeUIFabric.Demo/src/main/java/com/microsoft/officeuifabricdemo/Demos.kt
@ -10,6 +10,7 @@ import java.util.*
 import kotlin.reflect.KClass

 const val AVATAR_VIEW = "AvatarView"
+const val BASIC_INPUTS = "Basic Inputs"
 const val CALENDAR_VIEW = "CalendarView"
 const val DATE_TIME_PICKER_DIALOG = "DateTimePickerDialog"
 const val PEOPLE_PICKER_VIEW = "PeoplePickerView"
@ -23,6 +24,7 @@ const val TYPOGRAPHY = "Typography"

 val DEMOS = arrayListOf(
    Demo(AVATAR_VIEW, AvatarViewActivity::class),
+    Demo(BASIC_INPUTS, BasicInputsActivity::class),
    Demo(CALENDAR_VIEW, CalendarViewActivity::class),
    Demo(DATE_TIME_PICKER_DIALOG, DateTimePickerDialogActivity::class),
    Demo(PEOPLE_PICKER_VIEW, PeoplePickerViewActivity::class),
--- a/OfficeUIFabric.Demo/src/main/java/com/microsoft/officeuifabricdemo/demos/BasicInputsActivity.kt
+++ b/OfficeUIFabric.Demo/src/main/java/com/microsoft/officeuifabricdemo/demos/BasicInputsActivity.kt
@ -0,0 +1,14 @@
+/*
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License.
+ */
+
+package com.microsoft.officeuifabricdemo.demos
+
+import com.microsoft.officeuifabricdemo.DemoActivity
+import com.microsoft.officeuifabricdemo.R
+
+class BasicInputsActivity : DemoActivity() {
+    override val contentLayoutId: Int
+        get() = R.layout.activity_basic_inputs
+}
--- a/OfficeUIFabric.Demo/src/main/res/layout/activity_basic_inputs.xml
+++ b/OfficeUIFabric.Demo/src/main/res/layout/activity_basic_inputs.xml
@ -0,0 +1,56 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  ~ Copyright (c) Microsoft Corporation. All rights reserved.
+  ~ Licensed under the MIT License.
+  -->
+
+<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    android:divider="@drawable/demo_divider"
+    android:orientation="vertical"
+    android:padding="@dimen/default_layout_margin"
+    android:showDividers="middle">
+
+    <TextView
+        style="@style/TextAppearance.UIFabric.Headline"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:paddingBottom="@dimen/headline_padding_bottom"
+        android:text="@string/button" />
+
+    <View
+        android:layout_width="match_parent"
+        android:layout_height="@dimen/headline_divider_height"
+        android:layout_marginBottom="@dimen/default_layout_margin"
+        android:background="@drawable/ms_row_divider" />
+
+    <!--For the basic button, style can be set in the app theme.-->
+
+    <Button
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:text="@string/button" />
+
+    <Button
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:enabled="false"
+        android:text="@string/button_disabled" />
+
+    <!--For other button variants, style can be set in the widget.-->
+
+    <Button
+        style="@style/Widget.UIFabric.Button.Borderless"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:text="@string/button_borderless" />
+
+    <Button
+        style="@style/Widget.UIFabric.Button.Borderless"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:enabled="false"
+        android:text="@string/button_borderless_disabled" />
+
+</LinearLayout>
--- a/OfficeUIFabric.Demo/src/main/res/layout/activity_date_time_picker_dialog.xml
+++ b/OfficeUIFabric.Demo/src/main/res/layout/activity_date_time_picker_dialog.xml
@ -19,12 +19,12 @@
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/date_time_picker_example_no_duration_title"
-        android:paddingBottom="@dimen/date_picker_example_title_padding_bottom"
+        android:paddingBottom="@dimen/headline_padding_bottom"
        style="@style/TextAppearance.UIFabric.Headline" />

    <View
        android:layout_width="match_parent"
-        android:layout_height="@dimen/date_picker_example_row_divider_height"
+        android:layout_height="@dimen/headline_divider_height"
        android:layout_marginBottom="@dimen/default_layout_margin"
        android:background="@drawable/ms_row_divider" />

@ -41,24 +41,20 @@
        android:id="@+id/date_picker_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
-        android:padding="@dimen/default_layout_margin"
-        android:textAllCaps="false"
        android:text="@string/date_time_picker_dialog_date_button" />

    <Button
        android:id="@+id/date_time_picker_date_selected_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
-        android:padding="@dimen/default_layout_margin"
-        android:textAllCaps="false"
+        android:layout_marginTop="@dimen/default_view_margin"
        android:text="@string/date_time_picker_dialog_calendar_date_time_button" />

    <Button
        android:id="@+id/date_time_picker_time_selected_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
-        android:padding="@dimen/default_layout_margin"
-        android:textAllCaps="false"
+        android:layout_marginTop="@dimen/default_view_margin"
        android:text="@string/date_time_picker_dialog_date_time_calendar_button" />

    <!--Date Range-->
@ -67,12 +63,12 @@
        android:layout_height="wrap_content"
        android:text="@string/date_time_picker_example_date_range_title"
        android:layout_marginTop="@dimen/default_layout_margin"
-        android:paddingBottom="@dimen/date_picker_example_title_padding_bottom"
+        android:paddingBottom="@dimen/headline_padding_bottom"
        style="@style/TextAppearance.UIFabric.Headline" />

    <View
        android:layout_width="match_parent"
-        android:layout_height="@dimen/date_picker_example_row_divider_height"
+        android:layout_height="@dimen/headline_divider_height"
        android:layout_marginBottom="@dimen/default_layout_margin"
        android:background="@drawable/ms_row_divider" />

@ -131,16 +127,13 @@
            android:id="@+id/date_range_start_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
-            android:padding="@dimen/default_layout_margin"
-            android:textAllCaps="false"
            android:text="@string/date_time_picker_dialog_date_start_button" />

        <Button
            android:id="@+id/date_range_end_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
-            android:padding="@dimen/default_layout_margin"
-            android:textAllCaps="false"
+            android:layout_marginStart="@dimen/default_view_margin"
            android:text="@string/date_time_picker_dialog_date_end_button" />

    </LinearLayout>
@ -150,12 +143,12 @@
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/date_time_picker_example_date_time_range_title"
-        android:paddingBottom="@dimen/date_picker_example_title_padding_bottom"
+        android:paddingBottom="@dimen/headline_padding_bottom"
        style="@style/TextAppearance.UIFabric.Headline"/>

    <View
        android:layout_width="match_parent"
-        android:layout_height="@dimen/date_picker_example_row_divider_height"
+        android:layout_height="@dimen/headline_divider_height"
        android:layout_marginBottom="@dimen/default_layout_margin"
        android:background="@drawable/ms_row_divider"/>

@ -214,8 +207,6 @@
            android:id="@+id/date_time_range_start_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
-            android:padding="@dimen/default_layout_margin"
-            android:textAllCaps="false"
            android:text="@string/date_time_picker_dialog_date_time_range_button" />

    </LinearLayout>
--- a/OfficeUIFabric.Demo/src/main/res/layout/activity_tooltip.xml
+++ b/OfficeUIFabric.Demo/src/main/res/layout/activity_tooltip.xml
@ -15,7 +15,6 @@
        android:id="@+id/tooltip_anchor_top_start"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
-        android:textAllCaps="false"
        android:text="@string/tooltip_button"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent" />
@ -24,7 +23,6 @@
        android:id="@+id/tooltip_anchor_top_end"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
-        android:textAllCaps="false"
        android:text="@string/tooltip_button"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />
@ -33,7 +31,6 @@
        android:id="@+id/tooltip_anchor_bottom_start"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
-        android:textAllCaps="false"
        android:text="@string/tooltip_button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent" />
@ -42,7 +39,6 @@
        android:id="@+id/tooltip_anchor_bottom_end"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
-        android:textAllCaps="false"
        android:text="@string/tooltip_button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />
@ -51,7 +47,6 @@
        android:id="@+id/tooltip_anchor_center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
-        android:textAllCaps="false"
        android:text="@string/tooltip_center_button"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
--- a/OfficeUIFabric.Demo/src/main/res/values/dimens.xml
+++ b/OfficeUIFabric.Demo/src/main/res/values/dimens.xml
@ -15,15 +15,17 @@
    <dimen name="calendar_date_title_text_size">18sp</dimen>

    <!--DatePickerDialog-->
-    <dimen name="date_picker_example_title_padding_bottom">4dp</dimen>
    <dimen name="date_picker_example_range_title_padding_end">4dp</dimen>
    <dimen name="date_picker_example_range_title_width">50dp</dimen>
-    <dimen name="date_picker_example_row_divider_height">1dp</dimen>

    <!--Launch Screen-->
    <dimen name="uifabric_launch_logo_bottom_spacing">53dp</dimen>
    <dimen name="uifabric_launch_microsoft_logo_bottom_spacing">32dp</dimen>

+    <!--Shared-->
+    <dimen name="headline_divider_height">@dimen/uifabric_divider_height</dimen>
+    <dimen name="headline_padding_bottom">4dp</dimen>
+
    <!--Tooltip-->
    <dimen name="tooltip_example_offset_x">10dp</dimen>
    <dimen name="tooltip_example_offset_y">10dp</dimen>
--- a/OfficeUIFabric.Demo/src/main/res/values/strings.xml
+++ b/OfficeUIFabric.Demo/src/main/res/values/strings.xml
@ -11,6 +11,12 @@
    <string name="action_settings">Settings</string>
    <string name="title_demo_detail">Control Demo</string>

+    <!--Button-->
+    <string name="button">Button</string>
+    <string name="button_disabled">Disabled Button</string>
+    <string name="button_borderless">Borderless Button</string>
+    <string name="button_borderless_disabled">Borderless Disabled Button</string>
+
    <!--CalendarView-->
    <string name="calendar_example_chosen_date">Choose a date</string>

--- a/OfficeUIFabric/src/main/res/color/button_background.xml
+++ b/OfficeUIFabric/src/main/res/color/button_background.xml
@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  ~ Copyright (c) Microsoft Corporation. All rights reserved.
+  ~ Licensed under the MIT License.
+  -->
+
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+    <item android:color="@color/uifabric_button_background_disabled" android:state_enabled="false" />
+    <item android:color="@color/uifabric_button_background_pressed" android:state_pressed="true" />
+    <item android:color="@color/uifabric_button_background_default" />
+</selector>
--- a/OfficeUIFabric/src/main/res/color/button_borderless_background.xml
+++ b/OfficeUIFabric/src/main/res/color/button_borderless_background.xml
@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  ~ Copyright (c) Microsoft Corporation. All rights reserved.
+  ~ Licensed under the MIT License.
+  -->
+
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+    <item android:color="@color/uifabric_button_borderless_background_disabled" android:state_enabled="false" />
+    <item android:color="@color/uifabric_button_borderless_background_pressed" android:state_pressed="true" />
+    <item android:color="@color/uifabric_button_borderless_background_default" />
+</selector>
--- a/OfficeUIFabric/src/main/res/color/button_text.xml
+++ b/OfficeUIFabric/src/main/res/color/button_text.xml
@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  ~ Copyright (c) Microsoft Corporation. All rights reserved.
+  ~ Licensed under the MIT License.
+  -->
+
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+    <item android:color="@color/uifabric_button_text_disabled" android:state_enabled="false" />
+    <item android:color="@color/uifabric_button_text_default" />
+</selector>
--- a/OfficeUIFabric/src/main/res/color/button_text_borderless.xml
+++ b/OfficeUIFabric/src/main/res/color/button_text_borderless.xml
@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  ~ Copyright (c) Microsoft Corporation. All rights reserved.
+  ~ Licensed under the MIT License.
+  -->
+
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+    <item android:color="@color/uifabric_button_text_disabled" android:state_enabled="false" />
+    <item android:color="@color/uifabric_button_borderless_text" />
+</selector>
--- a/OfficeUIFabric/src/main/res/color/calendar_week_day_text_selector.xml
+++ b/OfficeUIFabric/src/main/res/color/calendar_week_day_text_selector.xml
@ -5,22 +5,17 @@
  -->

 <selector xmlns:android="http://schemas.android.com/apk/res/android">
-
    <item
        android:state_activated="true"
        android:state_checked="false"
        android:color="@color/uifabric_calendar_week_day_text_active" />
-
    <item
        android:state_activated="true"
        android:state_checked="true"
        android:color="@android:color/white" />
-
    <item
        android:state_activated="false"
        android:state_checked="true"
        android:color="@android:color/white" />
-
    <item android:color="@color/uifabric_gray" />
-
-</selector>
+</selector>
--- a/OfficeUIFabric/src/main/res/drawable/button_background.xml
+++ b/OfficeUIFabric/src/main/res/drawable/button_background.xml
@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  ~ Copyright (c) Microsoft Corporation. All rights reserved.
+  ~ Licensed under the MIT License.
+  -->
+
+<shape xmlns:android="http://schemas.android.com/apk/res/android">
+    <solid android:color="@color/button_background"/>
+    <corners android:radius="@dimen/uifabric_button_corner_radius" />
+</shape>
--- a/OfficeUIFabric/src/main/res/drawable/button_borderless_background.xml
+++ b/OfficeUIFabric/src/main/res/drawable/button_borderless_background.xml
@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  ~ Copyright (c) Microsoft Corporation. All rights reserved.
+  ~ Licensed under the MIT License.
+  -->
+
+<shape xmlns:android="http://schemas.android.com/apk/res/android">
+    <solid android:color="@color/button_borderless_background"/>
+    <corners android:radius="@dimen/uifabric_button_corner_radius" />
+</shape>
--- a/OfficeUIFabric/src/main/res/drawable/ms_dialog_background_light_no_insets.xml
+++ b/OfficeUIFabric/src/main/res/drawable/ms_dialog_background_light_no_insets.xml
@ -6,6 +6,6 @@

 <shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
-    <corners android:radius="@dimen/uifabric_corner_radius_2dp" />
+    <corners android:radius="@dimen/uifabric_corner_radius_small" />
    <solid android:color="@color/uifabric_white" />
 </shape>
--- a/OfficeUIFabric/src/main/res/drawable/persona_chip_background_active.xml
+++ b/OfficeUIFabric/src/main/res/drawable/persona_chip_background_active.xml
@ -6,5 +6,5 @@

 <shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/uifabric_persona_chip_active" />
-    <corners android:radius="@dimen/uifabric_corner_radius_2dp" />
+    <corners android:radius="@dimen/uifabric_corner_radius_small" />
 </shape>
--- a/OfficeUIFabric/src/main/res/drawable/persona_chip_background_active_error.xml
+++ b/OfficeUIFabric/src/main/res/drawable/persona_chip_background_active_error.xml
@ -6,5 +6,5 @@

 <shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/uifabric_persona_chip_error_active" />
-    <corners android:radius="@dimen/uifabric_corner_radius_2dp" />
+    <corners android:radius="@dimen/uifabric_corner_radius_small" />
 </shape>
--- a/OfficeUIFabric/src/main/res/drawable/persona_chip_background_normal.xml
+++ b/OfficeUIFabric/src/main/res/drawable/persona_chip_background_normal.xml
@ -6,5 +6,5 @@

 <shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/uifabric_persona_chip_normal" />
-    <corners android:radius="@dimen/uifabric_corner_radius_2dp" />
+    <corners android:radius="@dimen/uifabric_corner_radius_small" />
 </shape>
--- a/OfficeUIFabric/src/main/res/drawable/persona_chip_background_normal_error.xml
+++ b/OfficeUIFabric/src/main/res/drawable/persona_chip_background_normal_error.xml
@ -6,5 +6,5 @@

 <shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/uifabric_persona_chip_error" />
-    <corners android:radius="@dimen/uifabric_corner_radius_2dp" />
+    <corners android:radius="@dimen/uifabric_corner_radius_small" />
 </shape>
--- a/OfficeUIFabric/src/main/res/drawable/persona_chip_background_pressed.xml
+++ b/OfficeUIFabric/src/main/res/drawable/persona_chip_background_pressed.xml
@ -6,5 +6,5 @@

 <shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/uifabric_persona_chip_pressed"/>
-    <corners android:radius="@dimen/uifabric_corner_radius_2dp" />
+    <corners android:radius="@dimen/uifabric_corner_radius_small" />
 </shape>
--- a/OfficeUIFabric/src/main/res/layout/dialog_resizable.xml
+++ b/OfficeUIFabric/src/main/res/layout/dialog_resizable.xml
@ -19,7 +19,7 @@
        android:layout_gravity="center"
        android:layout_margin="@dimen/uifabric_dialog_insets"
        android:background="@drawable/ms_dialog_background_light"
-        card_view:cardCornerRadius="@dimen/uifabric_corner_radius_2dp"
+        card_view:cardCornerRadius="@dimen/uifabric_corner_radius_small"
        card_view:cardElevation="@dimen/uifabric_resizable_dialog_card_elevation"
        card_view:cardUseCompatPadding="true"
        tools:layout_height="@dimen/uifabric_resizable_dialog_card_tools_width" />
--- a/OfficeUIFabric/src/main/res/values/colors.xml
+++ b/OfficeUIFabric/src/main/res/values/colors.xml
@ -56,6 +56,18 @@
        <item>#69797E</item>
    </array>

+    <!--Button-->
+    <color name="uifabric_button_background_default">@color/uifabric_primary</color>
+    <color name="uifabric_button_background_pressed">@color/uifabric_primary_dark</color>
+    <color name="uifabric_button_background_disabled">@color/uifabric_background_gray</color>
+    <color name="uifabric_button_text_default">@color/uifabric_white</color>
+    <color name="uifabric_button_text_disabled">@color/uifabric_border_gray</color>
+    <!--Button Borderless-->
+    <color name="uifabric_button_borderless_background_default">@android:color/transparent</color>
+    <color name="uifabric_button_borderless_background_pressed">@color/uifabric_background_gray</color>
+    <color name="uifabric_button_borderless_background_disabled">@android:color/transparent</color>
+    <color name="uifabric_button_borderless_text">@color/uifabric_primary</color>
+
    <!--CalendarView-->
    <color name="uifabric_calendar_week_heading_week_day_text">@color/uifabric_gray</color>
    <color name="uifabric_calendar_week_heading_weekend_text">@color/uifabric_border_gray</color>
--- a/OfficeUIFabric/src/main/res/values/dimens.xml
+++ b/OfficeUIFabric/src/main/res/values/dimens.xml
@ -13,6 +13,13 @@
    <dimen name="uifabric_avatar_size_xlarge">52dp</dimen>
    <dimen name="uifabric_avatar_size_xxlarge">64dp</dimen>

+    <!--Button-->
+    <dimen name="uifabric_button_padding_horizontal">@dimen/uifabric_content_inset</dimen>
+    <dimen name="uifabric_button_padding_vertical">8.5dp</dimen>
+    <dimen name="uifabric_button_borderless_padding_horizontal">8dp</dimen>
+    <dimen name="uifabric_button_corner_radius">@dimen/uifabric_corner_radius_small</dimen>
+    <dimen name="uifabric_button_min_height">36dp</dimen>
+
    <!--CalendarView-->
    <dimen name="uifabric_calendar_week_day_font_size">16sp</dimen>
    <dimen name="uifabric_calendar_month_year_font_size">12sp</dimen>
@ -70,7 +77,7 @@

    <!--Shared-->
    <dimen name="uifabric_divider_height">.5dp</dimen>
-    <dimen name="uifabric_corner_radius_2dp">2dp</dimen>
+    <dimen name="uifabric_corner_radius_small">2dp</dimen>
    <dimen name="uifabric_min_touch_size">48dp</dimen>
    <dimen name="uifabric_content_inset">16dp</dimen>

--- a/OfficeUIFabric/src/main/res/values/styles.xml
+++ b/OfficeUIFabric/src/main/res/values/styles.xml
@ -12,10 +12,36 @@
        <item name="colorPrimaryDark">@color/uifabric_primary_dark</item>
        <item name="colorAccent">@color/uifabric_primary</item>
        <item name="android:textColorPrimary">@color/uifabric_black</item>
+        <item name="buttonStyle">@style/Widget.UIFabric.Button</item>
    </style>

    <style name="Widget.UIFabric" parent="@android:style/Widget"/>

+    <!--Button-->
+    <style name="Widget.UIFabric.Button" parent="Widget.AppCompat.Button">
+        <item name="android:background">@drawable/button_background</item>
+        <!--This foreground attribute brings back the ripple effect after setting background-->
+        <item name="android:foreground">?attr/selectableItemBackground</item>
+        <item name="android:textAppearance">@style/TextAppearance.UIFabric.Button</item>
+        <item name="android:paddingStart">@dimen/uifabric_button_padding_horizontal</item>
+        <item name="android:paddingEnd">@dimen/uifabric_button_padding_horizontal</item>
+        <item name="android:paddingTop">@dimen/uifabric_button_padding_vertical</item>
+        <item name="android:paddingBottom">@dimen/uifabric_button_padding_vertical</item>
+        <item name="android:minHeight">@dimen/uifabric_button_min_height</item>
+    </style>
+    <!--We use Borderless button style as the parent to avoid drop shadow issues in some APIs.-->
+    <style name="Widget.UIFabric.Button.Borderless" parent="Widget.AppCompat.Button.Borderless">
+        <item name="android:background">@drawable/button_borderless_background</item>
+        <!--This foreground attribute brings back the ripple effect after setting background-->
+        <item name="android:foreground">?attr/selectableItemBackground</item>
+        <item name="android:textAppearance">@style/TextAppearance.UIFabric.Button.Borderless</item>
+        <item name="android:paddingStart">@dimen/uifabric_button_borderless_padding_horizontal</item>
+        <item name="android:paddingEnd">@dimen/uifabric_button_borderless_padding_horizontal</item>
+        <item name="android:paddingTop">@dimen/uifabric_button_padding_vertical</item>
+        <item name="android:paddingBottom">@dimen/uifabric_button_padding_vertical</item>
+        <item name="android:minHeight">@dimen/uifabric_button_min_height</item>
+    </style>
+
    <!--Calendar-->
    <!--calendar_week_day_text_selector sets the colors for these-->
    <style name="TextAppearance.UIFabric.CalendarDay" parent="TextAppearance.UIFabric.SubHeading">
@ -51,7 +77,7 @@
    <style name="TextAppearance.UIFabric.PeoplePickerLabel" parent="TextAppearance.UIFabric.ListItemLabel" />
    <style name="TextAppearance.UIFabric.PeoplePickerText" parent="TextAppearance.UIFabric.Heading" />
    <style name="TextAppearance.UIFabric.PeoplePickerCountSpan" parent="TextAppearance.UIFabric.LightCaption" />
-    <style name="TextAppearance.UIFabric.PeoplePickerSearchDirectoryButton" parent="TextAppearance.UIFabric.Button" />
+    <style name="TextAppearance.UIFabric.PeoplePickerSearchDirectoryButton" parent="TextAppearance.UIFabric.Button.Borderless" />

    <!--Persona-->
    <style name="TextAppearance.UIFabric.PersonaTitle" parent="TextAppearance.UIFabric.SubHeading">
--- a/OfficeUIFabric/src/main/res/values/styles_font.xml
+++ b/OfficeUIFabric/src/main/res/values/styles_font.xml
@ -55,7 +55,7 @@
        <item name="android:fontFamily">"sans-serif"</item>
    </style>

-    <!-- *** UIFabric Base Semantic Slots *** -->
+    <!-- *** UIFabric Semantic Styles *** -->

    <style name="TextAppearance.UIFabric.ListItemLabel" parent="TextAppearance.UIFabric.SubHeading">
        <item name="android:textColor">@color/uifabric_gray</item>
@ -65,8 +65,13 @@
        <item name="android:textColor">@color/uifabric_gray</item>
    </style>

+    <!--Button-->
    <style name="TextAppearance.UIFabric.Button" parent="TextAppearance.UIFabric.Body2">
-        <item name="android:textColor">@color/uifabric_primary</item>
+        <item name="android:textColor">@color/button_text</item>
+        <item name="android:textAllCaps">true</item>
+    </style>
+    <style name="TextAppearance.UIFabric.Button.Borderless">
+        <item name="android:textColor">@color/button_text_borderless</item>
    </style>

 </resources>