Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Set button text size to button font size automatically; make line height automatically scale based on font size #1340

Merged
merged 9 commits into from
Nov 25, 2024
2 changes: 2 additions & 0 deletions core/button.go
Original file line number Diff line number Diff line change
Expand Up @@ -130,6 +130,7 @@ func (bt *Button) Init() {
s.Padding.Right.Dp(16)
}
}
s.Font.Size.Dp(14) // Button font size is used for text font size
s.Gap.Zero()
s.CenterAll()

Expand Down Expand Up @@ -226,6 +227,7 @@ func (bt *Button) Init() {
s.SetNonSelectable()
s.SetTextWrap(false)
s.FillMargin = false
s.Font.Size = bt.Styles.Font.Size // Directly inherit to override the [Text.Type]-based default
})
w.Updater(func() {
if bt.Type == ButtonMenu {
Expand Down
9 changes: 9 additions & 0 deletions core/button_test.go
Original file line number Diff line number Diff line change
Expand Up @@ -104,3 +104,12 @@ func TestButtonTypes(t *testing.T) {
b.AssertRender(t, "button/type-"+strings.ToLower(typ.String()))
}
}

func TestButtonFontSize(t *testing.T) {
b := NewBody()
bt := NewButton(b).SetText("Hello")
bt.Styler(func(s *styles.Style) {
s.Font.Size.Dp(48)
})
b.AssertRender(t, "button/font-size")
}
4 changes: 2 additions & 2 deletions core/meter.go
Original file line number Diff line number Diff line change
Expand Up @@ -88,14 +88,14 @@ func (m *Meter) Init() {
s.Min.Set(units.Dp(128))
m.Width.Dp(8)
s.Font.Size.Dp(32)
s.Text.LineHeight.Dp(40)
s.Text.LineHeight.Em(40.0 / 32)
s.Text.Align = styles.Center
s.Text.AlignV = styles.Center
case MeterSemicircle:
s.Min.Set(units.Dp(112), units.Dp(64))
m.Width.Dp(16)
s.Font.Size.Dp(22)
s.Text.LineHeight.Dp(28)
s.Text.LineHeight.Em(28.0 / 22)
s.Text.Align = styles.Center
s.Text.AlignV = styles.Center
}
Expand Down
6 changes: 2 additions & 4 deletions core/style.go
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,7 @@ func (wb *WidgetBase) runStylers() {
})
}

// resetStyleSettings reverses the effects of [ApplyStyleSettings]
// resetStyleSettings reverses the effects of [WidgetBase.styleSettings]
// for the widget's font size so that it does not create cascading
// inhereted font size values. It only does this for non-root elements,
// as the root element must receive the larger font size so that
Expand All @@ -118,11 +118,10 @@ func (wb *WidgetBase) resetStyleSettings() {
}
fsz := AppearanceSettings.FontSize / 100
wb.Styles.Font.Size.Value /= fsz
wb.Styles.Text.LineHeight.Value /= fsz
}

// styleSettings applies [AppearanceSettingsData.Spacing]
// and [AppearanceSettings.FontSize] to the style values for the widget.
// and [AppearanceSettingsData.FontSize] to the style values for the widget.
func (wb *WidgetBase) styleSettings() {
s := &wb.Styles

Expand All @@ -140,7 +139,6 @@ func (wb *WidgetBase) styleSettings() {

fsz := AppearanceSettings.FontSize / 100
s.Font.Size.Value *= fsz
s.Text.LineHeight.Value *= fsz
}

// StyleTree calls [WidgetBase.Style] on every widget in tree
Expand Down
33 changes: 17 additions & 16 deletions core/text.go
Original file line number Diff line number Diff line change
Expand Up @@ -119,82 +119,83 @@ func (tx *Text) Init() {
s.GrowWrap = true

// Text styles based on https://m3.material.io/styles/typography/type-scale-tokens
// We use Em for line height so that it scales properly with font size changes.
switch tx.Type {
case TextLabelLarge:
s.Text.LineHeight.Dp(20)
s.Text.LineHeight.Em(20.0 / 14)
s.Font.Size.Dp(14)
s.Text.LetterSpacing.Dp(0.1)
s.Font.Weight = styles.WeightMedium // note: excludes all fonts except Go!
s.Font.Weight = styles.WeightMedium
case TextLabelMedium:
s.Text.LineHeight.Dp(16)
s.Text.LineHeight.Em(16.0 / 12)
s.Font.Size.Dp(12)
s.Text.LetterSpacing.Dp(0.5)
s.Font.Weight = styles.WeightMedium
case TextLabelSmall:
s.Text.LineHeight.Dp(16)
s.Text.LineHeight.Em(16.0 / 11)
s.Font.Size.Dp(11)
s.Text.LetterSpacing.Dp(0.5)
s.Font.Weight = styles.WeightMedium
case TextBodyLarge:
s.Text.LineHeight.Dp(24)
s.Text.LineHeight.Em(24.0 / 16)
s.Font.Size.Dp(16)
s.Text.LetterSpacing.Dp(0.5)
s.Font.Weight = styles.WeightNormal
case TextSupporting:
s.Color = colors.Scheme.OnSurfaceVariant
fallthrough
case TextBodyMedium:
s.Text.LineHeight.Dp(20)
s.Text.LineHeight.Em(20.0 / 14)
s.Font.Size.Dp(14)
s.Text.LetterSpacing.Dp(0.25)
s.Font.Weight = styles.WeightNormal
case TextBodySmall:
s.Text.LineHeight.Dp(16)
s.Text.LineHeight.Em(16.0 / 12)
s.Font.Size.Dp(12)
s.Text.LetterSpacing.Dp(0.4)
s.Font.Weight = styles.WeightNormal
case TextTitleLarge:
s.Text.LineHeight.Dp(28)
s.Text.LineHeight.Em(28.0 / 22)
s.Font.Size.Dp(22)
s.Text.LetterSpacing.Zero()
s.Font.Weight = styles.WeightNormal
case TextTitleMedium:
s.Text.LineHeight.Dp(24)
s.Text.LineHeight.Em(24.0 / 16)
s.Font.Size.Dp(16)
s.Text.LetterSpacing.Dp(0.15)
s.Font.Weight = styles.WeightMedium
case TextTitleSmall:
s.Text.LineHeight.Dp(20)
s.Text.LineHeight.Em(20.0 / 14)
s.Font.Size.Dp(14)
s.Text.LetterSpacing.Dp(0.1)
s.Font.Weight = styles.WeightMedium
case TextHeadlineLarge:
s.Text.LineHeight.Dp(40)
s.Text.LineHeight.Em(40.0 / 32)
s.Font.Size.Dp(32)
s.Text.LetterSpacing.Zero()
s.Font.Weight = styles.WeightNormal
case TextHeadlineMedium:
s.Text.LineHeight.Dp(36)
s.Text.LineHeight.Em(36.0 / 28)
s.Font.Size.Dp(28)
s.Text.LetterSpacing.Zero()
s.Font.Weight = styles.WeightNormal
case TextHeadlineSmall:
s.Text.LineHeight.Dp(32)
s.Text.LineHeight.Em(32.0 / 24)
s.Font.Size.Dp(24)
s.Text.LetterSpacing.Zero()
s.Font.Weight = styles.WeightNormal
case TextDisplayLarge:
s.Text.LineHeight.Dp(64)
s.Text.LineHeight.Em(64.0 / 57)
s.Font.Size.Dp(57)
s.Text.LetterSpacing.Dp(-0.25)
s.Font.Weight = styles.WeightNormal
case TextDisplayMedium:
s.Text.LineHeight.Dp(52)
s.Text.LineHeight.Em(52.0 / 45)
s.Font.Size.Dp(45)
s.Text.LetterSpacing.Zero()
s.Font.Weight = styles.WeightNormal
case TextDisplaySmall:
s.Text.LineHeight.Dp(44)
s.Text.LineHeight.Em(44.0 / 36)
s.Font.Size.Dp(36)
s.Text.LetterSpacing.Zero()
s.Font.Weight = styles.WeightNormal
Expand Down
6 changes: 4 additions & 2 deletions styles/text.go
Original file line number Diff line number Diff line change
Expand Up @@ -39,8 +39,10 @@ type Text struct { //types:add
// extra space to add between words (inherited)
WordSpacing units.Value

// specified height of a line of text (inherited); text is centered within the overall lineheight;
// the standard way to specify line height is in terms of em
// LineHeight is the height of a line of text (inherited).
// Text is centered within the overall line height.
// The standard way to specify line height is in terms of
// [units.Em] so that it scales with the font size.
LineHeight units.Value

// WhiteSpace (not inherited) specifies how white space is processed,
Expand Down