Skip to content

Commit

Permalink
ADS: Typography Review (#2572)
Browse files Browse the repository at this point in the history 
Task/Issue URL:
https://app.asana.com/0/1174433894299346/1203438184524173

### Description
Update typograhpy to use lineHeight instead of lineSpacingExtra

Co-authored-by: Noelia Alcala <nalcalag@gmail.com>
  • Loading branch information
@malmstein @nalcalag
malmstein and nalcalag committed Jan 12, 2023
1 parent d169a47 commit 9d122fe
Show file tree
Hide file tree
Showing 7 changed files with 199 additions and 18 deletions.
16 changes: 13 additions & 3 deletions common-ui/src/main/java/com/duckduckgo/mobile/android/ui/view/text/DaxTextView.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,9 +88,13 @@ constructor(
H4,
H5,
Body1,
Body1Bold,
Body2,
Body2Bold,
Button,
Caption,
CaptionAllCaps,

;

companion object {
Expand All @@ -104,9 +108,12 @@ constructor(
4 -> H4
5 -> H5
6 -> Body1
7 -> Body2
8 -> Button
9 -> Caption
7 -> Body1Bold
8 -> Body2
9 -> Body2Bold
10 -> Button
11 -> Caption
12 -> CaptionAllCaps
else -> Body1
}
}
Expand All @@ -120,9 +127,12 @@ constructor(
H4 -> R.style.Typography_DuckDuckGo_H4
H5 -> R.style.Typography_DuckDuckGo_H5
Body1 -> R.style.Typography_DuckDuckGo_Body1
Body1Bold -> R.style.Typography_DuckDuckGo_Body1_Bold
Body2 -> R.style.Typography_DuckDuckGo_Body2
Body2Bold -> R.style.Typography_DuckDuckGo_Body2_Bold
Button -> R.style.Typography_DuckDuckGo_Button
Caption -> R.style.Typography_DuckDuckGo_Caption
CaptionAllCaps -> R.style.Typography_DuckDuckGo_Caption_AllCaps
}
}
}
Expand Down
160 changes: 160 additions & 0 deletions common-ui/src/main/res/layout/fragment_components_typography.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,16 @@
android:text="Text Appearance Title"
tools:ignore="HardcodedText"/>

<com.duckduckgo.mobile.android.ui.view.text.DaxTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/keyline_2"
android:layout_marginBottom="@dimen/keyline_2"
android:paddingStart="@dimen/keyline_3"
app:typography="title"
android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
tools:ignore="HardcodedText"/>

<com.duckduckgo.mobile.android.ui.view.text.DaxTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
Expand All @@ -55,6 +65,16 @@
android:text="Text Appearance H1"
tools:ignore="HardcodedText"/>

<com.duckduckgo.mobile.android.ui.view.text.DaxTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/keyline_2"
android:layout_marginBottom="@dimen/keyline_2"
android:paddingStart="@dimen/keyline_3"
app:typography="h1"
android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
tools:ignore="HardcodedText"/>

<com.duckduckgo.mobile.android.ui.view.text.DaxTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
Expand All @@ -65,6 +85,16 @@
android:text="Text Appearance H2"
tools:ignore="HardcodedText"/>

<com.duckduckgo.mobile.android.ui.view.text.DaxTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/keyline_2"
android:layout_marginBottom="@dimen/keyline_2"
android:paddingStart="@dimen/keyline_3"
app:typography="h2"
android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
tools:ignore="HardcodedText"/>

<com.duckduckgo.mobile.android.ui.view.text.DaxTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
Expand All @@ -75,6 +105,16 @@
android:text="Text Appearance H3"
tools:ignore="HardcodedText"/>

<com.duckduckgo.mobile.android.ui.view.text.DaxTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/keyline_2"
android:paddingStart="@dimen/keyline_3"
android:layout_marginBottom="@dimen/keyline_2"
app:typography="h3"
android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
tools:ignore="HardcodedText"/>

<com.duckduckgo.mobile.android.ui.view.text.DaxTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
Expand All @@ -85,6 +125,16 @@
android:text="Text Appearance H4"
tools:ignore="HardcodedText"/>

<com.duckduckgo.mobile.android.ui.view.text.DaxTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/keyline_2"
android:paddingStart="@dimen/keyline_3"
android:layout_marginBottom="@dimen/keyline_2"
app:typography="h4"
android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
tools:ignore="HardcodedText"/>

<com.duckduckgo.mobile.android.ui.view.text.DaxTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
Expand All @@ -95,6 +145,16 @@
android:text="Text Appearance H5"
tools:ignore="HardcodedText"/>

<com.duckduckgo.mobile.android.ui.view.text.DaxTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/keyline_2"
android:layout_marginBottom="@dimen/keyline_2"
android:paddingStart="@dimen/keyline_3"
app:typography="h5"
android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
tools:ignore="HardcodedText"/>

<com.duckduckgo.mobile.android.ui.view.text.DaxTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
Expand All @@ -105,6 +165,36 @@
android:text="Text Appearance Body1"
tools:ignore="HardcodedText"/>

<com.duckduckgo.mobile.android.ui.view.text.DaxTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/keyline_2"
android:paddingStart="@dimen/keyline_3"
android:layout_marginBottom="@dimen/keyline_2"
app:typography="body1"
android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
tools:ignore="HardcodedText"/>

<com.duckduckgo.mobile.android.ui.view.text.DaxTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/keyline_2"
android:paddingStart="@dimen/keyline_3"
android:layout_marginBottom="@dimen/keyline_2"
app:typography="body1_bold"
android:text="Text Appearance Body1 Bold"
tools:ignore="HardcodedText"/>

<com.duckduckgo.mobile.android.ui.view.text.DaxTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/keyline_2"
android:paddingStart="@dimen/keyline_3"
android:layout_marginBottom="@dimen/keyline_2"
app:typography="body1_bold"
android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
tools:ignore="HardcodedText"/>

<com.duckduckgo.mobile.android.ui.view.text.DaxTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
Expand All @@ -121,10 +211,50 @@
android:layout_marginTop="@dimen/keyline_2"
android:layout_marginBottom="@dimen/keyline_2"
android:paddingStart="@dimen/keyline_3"
app:typography="body2"
android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
tools:ignore="HardcodedText"/>

<com.duckduckgo.mobile.android.ui.view.text.DaxTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/keyline_2"
android:paddingStart="@dimen/keyline_3"
android:layout_marginBottom="@dimen/keyline_2"
app:typography="body2_bold"
android:text="Text Appearance Body2 Bold"
tools:ignore="HardcodedText"/>

<com.duckduckgo.mobile.android.ui.view.text.DaxTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/keyline_2"
android:layout_marginBottom="@dimen/keyline_2"
android:paddingStart="@dimen/keyline_3"
app:typography="body2_bold"
android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
tools:ignore="HardcodedText"/>

<com.duckduckgo.mobile.android.ui.view.text.DaxTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/keyline_2"
android:paddingStart="@dimen/keyline_3"
android:layout_marginBottom="@dimen/keyline_2"
app:typography="button"
android:text="Text Appearance Button"
tools:ignore="HardcodedText"/>

<com.duckduckgo.mobile.android.ui.view.text.DaxTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/keyline_2"
android:layout_marginBottom="@dimen/keyline_2"
android:paddingStart="@dimen/keyline_3"
app:typography="button"
android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
tools:ignore="HardcodedText"/>

<com.duckduckgo.mobile.android.ui.view.text.DaxTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
Expand All @@ -135,6 +265,36 @@
android:text="Text Appearance Caption"
tools:ignore="HardcodedText"/>

<com.duckduckgo.mobile.android.ui.view.text.DaxTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/keyline_2"
android:layout_marginBottom="@dimen/keyline_2"
android:paddingStart="@dimen/keyline_3"
app:typography="caption"
android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
tools:ignore="HardcodedText"/>

<com.duckduckgo.mobile.android.ui.view.text.DaxTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/keyline_2"
android:paddingStart="@dimen/keyline_3"
android:layout_marginBottom="@dimen/keyline_2"
app:typography="caption_allCaps"
android:text="Text Appearance Caption All Caps"
tools:ignore="HardcodedText"/>

<com.duckduckgo.mobile.android.ui.view.text.DaxTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/keyline_2"
android:layout_marginBottom="@dimen/keyline_2"
android:paddingStart="@dimen/keyline_3"
app:typography="caption_allCaps"
android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
tools:ignore="HardcodedText"/>

<com.duckduckgo.mobile.android.ui.view.listitem.SectionHeaderListItem
android:layout_height="wrap_content"
android:layout_width="match_parent"
Expand Down
2 changes: 1 addition & 1 deletion common-ui/src/main/res/layout/view_dax_dialog.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@
android:id="@+id/logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/keyline_2"
android:layout_marginStart="@dimen/keyline_5"
android:layout_marginBottom="@dimen/keyline_4"
app:layout_constraintBottom_toTopOf="@id/cardView"
app:layout_constraintStart_toStartOf="@id/cardView"
Expand Down
9 changes: 6 additions & 3 deletions common-ui/src/main/res/values/attrs-typography.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,12 @@
<enum name="h4" value="4"/>
<enum name="h5" value="5"/>
<enum name="body1" value="6"/>
<enum name="body2" value="7"/>
<enum name="button" value="8"/>
<enum name="caption" value="9"/>
<enum name="body1_bold" value="7"/>
<enum name="body2" value="8"/>
<enum name="body2_bold" value="9"/>
<enum name="button" value="10"/>
<enum name="caption" value="11"/>
<enum name="caption_allCaps" value="12"/>
</attr>
<attr name="textType" format="enum" >
<enum name="primary" value="0"/>
Expand Down
1 change: 0 additions & 1 deletion common-ui/src/main/res/values/design-system-dimensions.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,5 +99,4 @@
<!-- Card -->
<dimen name="daxBubbleDialogDistanceFromEdge">22dp</dimen>
<dimen name="daxBubbleDialogEdge">9dp</dimen>

</resources>
1 change: 0 additions & 1 deletion common-ui/src/main/res/values/design-system-theming.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,7 +133,6 @@
<!--controls the ripple coloring-->
<item name="colorControlHighlight">?attr/daxColorRipple</item>


<!--Design System Colors theme independent-->
<item name="daxColorDim">@color/black60</item>
<item name="daxColorWhite">@color/white</item>
Expand Down

0 comments on commit 9d122fe

Please sign in to comment.