The big feature with this release is the new Input Silk widget:

Many future Silk widgets are expected to support size and color scheme parameters. As part of this release, we went back and updated buttons to accept these parameters as well.

Hopefully this makes it easier to create a richer collection of buttons in your site.

Silk

• New Input (and related TextInput) silk widgets.
  • You can also create InputGroups which let you decorate an input with extra elements on either side.
• Button now accepts size and colorScheme parameters.
  • For example: Button(..., size = ButtonSize.SM, colorScheme = ColorSchemes.Teal)
  • This change is potentially backwards compatible. See the notes below for more information.

Frontend

• New calc method, particularly useful for working with CSS variables.

  val PaddingVar by StyleVariable(1.cssRem)
  Modifier.padding(calc { (BasePaddingVar.value() + 2.px) * 2 })

Markdown

• Kobweb markdown tables no longer ignore justification hints

Notes

Input

Silk's Input aims to be a compromise between Jetpack Compose's TextField and Compose HTML's Input -- in other words, you pass parameters into the method rather than inside an attrs block.

A concrete example can help here:

// Compose HTML
val colorValue by remember { mutableStateOf("") }
Input(
   InputType.Color,
   attrs = {
      defaultValue(colorValue)
      placeholder("Select your profile color")
      onInput { e -> colorValue = e.value }
      style { width(100.percent) }
   }
)

// Silk
val colorValue by remember { mutableStateOf("") }
Input(
   InputType.Color,
   colorValue,
   onValueChanged = { colorValue = it },
   Modifier.width(100.percent),
   placeholder = "Select your profile color"
)

Shortcuts are provided for the very common text and password inputs:

// Compose HTML
Input(InputType.Text, ...)
Input(InputType.Password, ...)

// Silk
TextInput(...)
TextInput(..., password = true)

In addition to a more "Jetpack Compose" API, the Silk variant includes a bunch of additional styling configuration support. You can choose from one of several variants (outline, filled, flush, and unstyled) and override the placeholder color and selected border color.

Finally, you can decorate your input with elements on the left and right hand sides, by declaring an InputGroup:

var telNum by remember { mutableStateOf("") }
InputGroup {
    LeftAddon { Text("+1") }
    Input(
        InputType.Tel,
        telNum,
        onValueChanged = { telNum = it }
        placeholder = "phone number",
        autoComplete = AutoComplete.telNational,
   )
}

Button implementation changes and (potential) backwards incompatibility

Button styling internally has changed. While we expect a majority of buttons in practice won't be affected, you may find that your button is suddenly looking a little weird.

Likely, this can happen if you set margin and/or height/width on your own buttons, so you may want to experiment removing them. NOTE: If you have a circle or square button (i.e. for icons), you probably set its padding to 0.px, and if so, you should keep that!

For example, in response to this change, we updated the README hero example:

// Before
var colorMode by ColorMode.currentState
Button(
  onClick = { colorMode = colorMode.opposite },
  Modifier.borderRadius(50.percent).padding(0.px)
) {
  Box(Modifier.margin(7.px)) {
    // Includes support for Font Awesome icons
    if (colorMode.isLight) FaSun() else FaMoon()
  }
}

// After
// (the inner margin within the Button is no longer required)
var colorMode by ColorMode.currentState
Button(
  onClick = { colorMode = colorMode.opposite },
  Modifier.borderRadius(50.percent).padding(0.px)
) {
  // Includes support for Font Awesome icons
  if (colorMode.isLight) FaSun() else FaMoon()
}

Note that while the button in the above case would still have looked fine without the change here, removing the inner margin modifier simplifies the code, which makes it easier to read and maintain.

You can also experiment with passing sizes into your button, e.g. Button(size = ButtonSize.SM)

Full Changelog: v0.13.10...v0.13.11