0.9.0

Spark

🆕 Chips can now be selectable and closed

Caution

The Filled style has been removed and may break your build if used. You need to see with your ui to know which styles to use instead of this one

Warning

The styles for chips have been deprecated you now need to use either the Chip or the ChipSelectable components for your need and provide the style in argument

If you want to make your Chip closable then you will need to add a callback action in the new onClose parameter.

Screen_recording_20240423_163700.mp4

---

🆕 BottomSheet now use the spark specs

Caution

This change will most likely break your build since most of the api has changed.
We now use the M3 BottomSheet instead of a fork from a alpha version of it we did when it was only available in M2.

Warning

The BottomSheet currently only accept M3 snackbars, you won't be able to display a SparkSnackbar

---

• 🆕 ProgressTracker is now available! it still has a few minor visual bugs but it can be tested by squads on their scope don't hesitate to give us feedbacks!

Screen_recording_20240423_163832.mp4

• 🆕 TextLinkButton will now use LocalContentColor when using the Surface intent. This will allow you to have a onSurface TextLink when needed

Screen_recording_20240423_164027.mp4

• 🆕 Popover can now take an intent for its surface color

• 🆕 Image has its emptyIcon and errorIcon parameters open now for special cases
• 💬 A11y have been translated to german
• 💄 Rating will now have a lisible color when disabled

• 💄 Badge now use surface instead of onColor for its border color
• 🐛 Filled and Contrast Button now have a clear disabled state when their content color is dark

Before	After

• 💄 New icons have been added

Catalog App

• 🎨 Brand colors has been updated to their latest values
• 🔧 All Configurators are now scrollable

CI

• 🔧 Decorrelated spotless and ktlint
• 🆕 Added Paparazzi as a manual workflow
• 🆕 Ran Lava Vulnerability Scanner on CI workflow
• 🔧 Moved code formatting tasks first in the contributing list

New Contributors

• @vyguera made their first contribution in #1032
• @lustikuss made their first contribution in #1062

Full Changelog: 0.8.0...0.9.0

0.8.0

Spark

• 🆕 Create the base custom layout for horizontal progress tracker
• 🆕 Add Slider component
• 🐛 Fix the Button end icon being squished when content is too long

Catalog App

• 🎨 Update TextLink configurator colors
• 🎨 Add Configurator for Progressbar
• 🚀 Replace deprecated actionsdesk/lfs-warning with composite action

0.7.0

What's Changed

Spark

• 🆕 Add slots api to Buttons and Tags
• 🆕 Add new TextLink Component
• 🆕 Add Large UserAvatarStyle Component @amokhefi
• 🐛 Add Info as IconButton intent color
• 🐛 Fix ConstraintLayout Constraint not being applied to IconButtons & IconToggleButton
• 🐛 Fix annotatedStringResource with args don't render annotation style
• 🐛 Remove unexpected Compose tooling dependency on runtime classpath
• 🐛 Attempt to reduce letter spacing on callout typo
• 🚀 Update modifiers impl to use Node api

Catalog App

• 💄 Theme settings are now saved between sessions @theobch
• 🎨 Add Configurator for Popover
• 🎨 Add Configurator for Progressbar
• 📝 We can now specify a group to whom the app is distributed
• 📝 A message can be specified when publishing the app

New Contributors

• @amokhefi made their first contribution in #919

Full Changelog: 0.6.1...0.7.0

0.6.0

What's Changed

Spark

• 🆕 Add TextField addons api with premade addons
• 🆕 Add Popover component
• 🆕 Add new Modal Component
• 🆕 Add Progressbar Component
• 🆕 Update rating specs
• 🆕 Add Rating Input
• 💄 Add Button Shapes and unify the api for all button types
• 🐛 Checkbox checkmark was using onPrimary instead of onColor from intent
• 🎨 Screenshot tests for all SparkIcons

Catalog App

• 💄 Add Subito theme to catalog app
• 💄 Add Milanuncios theme to catalog app
• 🎨 Add examples ad configurator for Rating
• 🎨 Add a configurator for the Tab
• 🎨 Add missing test, examples, configurator for Tag component
• 🐛 Fix typos in TabsExamples and replace one icon to fit the style
• 🐛📝 Replace zeroheight links with spark.adevinta.com

New Contributors

• @mregtej made their first contribution in #801

Full Changelog: 0.5.0...0.6.0

0.5.0

What's Changed

Spark

• 🆕 Add IconButtons with all intents, shapes and sizes
• 🆕 Add loading state to the IconButton component
• 🆕 Add IconToggleButton
• 💄 Use M2 elevation system instead of the M3 one
• ⬆️ Bump compileSdk and targetSdk to 34
• 🎨 Change colors from LBC & KA
• 🐛 Make the readonly Textfields not take the focus look when focused
• 📝 Replace oneliner with two distinct commands
• 🐛 ModalFullScreenScaffold top padding issue when no illustration

Catalog App

• 🆕 Add Icons demo to CatalogApp
• 🆕 Add examples for tab component
• 💄 Add Kleinanzeigen theme
• 🎨 Add illustrations for components item
• 🚀 Fetch icon resources in coroutines
• 🐛 Shorten catalog app name
• 🐛 Add proguard rules to keep the names of spark icons resources
• 🐛 Component Illustrations are too big
• 🐛 Minor fixes in CatalogApp
• 💄 Modify Segmented color to be more visible and make switch take full width
• 💄 Update catalog app to show ExtraLarge icons

New Contributors

• @mazzouzi made their first contribution in #716

Full Changelog: 0.4.2...0.5.0

0.4.2

What's Changed

Fix color not being applied on theme update

	Before	After
Base
Modified

• fix(colors): some colors were not updated on theme change by @soulcramer in #668
• chore: prepare version 0.4.2 by @soulcramer in #670

Full Changelog: 0.4.1...0.4.2

0.4.1

What's Changed

Spark

• 🆕 Implement Spark Tab and Tab Group
  
  To migrate from the Material Tabs to the Spark one you have to replace your TabRow by a TabGroup.

  Next you'll have to use the new Tab API like so:
  From

  Tab(
      selected = selectedIndex == index,
      onClick = { selectedIndex = index },
      enabled = true,
  ) {
       Text(title)
  }

  To

  Tab(
       selected = selectedIndex == index,
       onClick = { selectedIndex = index }, // handle click
       text = title,
  )

• 💄 Checkbox, Switch, RadioButton now has intents support

  Screenshot

  

• 💄 Disabled components now use dim3

  Screenshot

  

• 💄 Button Outline border size is now 1dp instead of 2dp

  Screenshot

  

• 💄 Update TextField background color

  Screenshot

  

• 💄 TextField leading content padding is adjusted

• 💄 TextField addons content color is always onSurface even when unfocused

• 💄 ButtonContrast in Surface intent is now readable

• 💄 ModalFullScreenScaffold spaces and layout has been adjusted

• 🗑️ Small size for Button has been removed

• 🐛 Replace Modifier.autofill by Autofill Composable

Catalog App

• 🆕 Now have examples and a configurator for Button, Checkbox, Switch, RadioButton TextField
• 💄 The launcher icon now has a light and dark variant depending on the theme mode
• 🐛 The app state is saved on configuration change
• 🐛 Fix the link to component documentation

New Contributors

• @AsueG made their first contribution in #527
• @theobch made their first contribution in #538
• @kazaky made their first contribution in #602

Full Changelog: 0.3.1...0.4.1

0.3.1

• 🆕 Added Basic and Accent intents to all released components.
• 💄Updated the default color intents to Basic for Tag, Chip, Spinner.
• 🗑️ Deprecated Primary and Secondary intents, Main and Supportshould be used instead.

0.3.0

What's Changed

TextField 🧪

TextFields now have a Alert and a Success state and looks more like the current spec for the TextFields.
This is still experimental as there's currently ongoing discussions about the UI.

⚠️ Note that this is a breaking change

• The leadingIcon/trailingIcon are now named leadingContent/trailingContent.
• The isError boolean parameter now is state which accept a TextFieldState that defines if the Textfield is in Success, Error or Alert state.
• The error String param is renamed stateMessage as it doesn't represent only the error message anymore.

These changes result in this api :

TextField(
    value = newEmail,
    error = errorMessage,
    isError = isErrorEnabled,
    onValueChange = onNewEmailChanged,
    leadingIcon = { MarkerIcon() },
)

becoming like this:

TextField(
    value = newEmail,
    stateMessage = errorMessage,
    state = if (isErrorEnabled) TextFieldState.Error else null,
    onValueChange = onNewEmailChanged,
    leadingContent = { MarkerIcon() },
)

Utility

We've added Extension variables on Color and Typography to makes usages of dims and highlight easier:

Now instead of writing:

SparkTheme.colors.primary.copy(alpha = alpha = SparkTheme.colors.dim2)
SparkTheme.typographies.body1.copy(fontWeight = FontWeight.Bold)

You can use the simpler

SparkTheme.colors.primary.dim2
SparkTheme.typographies.body1.highlight

But if you're using the Text API we recommend you to use the provided fontWeight parameter:

Text(
    text = text,
    style = SparkTheme.typographies.body2,
    fontWeight = FontWeight.Bold,
)

Fixes:

Badges

The Badge had only 2 intents Error and Info. It now has all of them.

Before	After

Button

The disabled color was following the Material Guideline instead of the spark one, it's now using a DIm3 for the intent color.

Tag

When UI testing a Tag component, there was an issue trying to find the text inside of it. Indeed Tag descendants were not merged which forced consumers to dig inside it to fetch these informations while this was not needed.
They're now merged so it will be simpler to test this component.
Fixed by @ThibaultChariere

SnackBar

Even if the snackbar is not specified yet we modified its shape to be similar to the one used in Polaris New UI
_Done by @GoUpNorth

Before	After

⚠️ Breaking changes:

Icons

The deprecated icons are now removed from Spark. please refer to either the Spark Figma Foundation or the icons in your screen Figma.

---

Other Internals changes

• fix: Rename Colors using Figma tokens by @MarinaRomanova in #500
• feat: Update the catalog app design and add examples by @soulcramer in #373
• fix: Remove isPro param from preview in Catalog App by @MarinaRomanova in #513

---

New Contributors

• @ThibaultChariere made their first contribution in #511
• @GoUpNorth made their first contribution in #515

Full Changelog: 0.2.0...0.3.0

0.2.0

What's Changed

Toggles

The Toggles now better respect the spark specification by allowing to specify a label alignment (start/end) and have a new padding.
If this you adapted your UI to align component with a toggle they will be misaligned like here and you
need to check if this impact your screens or not (@android-adlife is concerned about this for sure)

Modals

• An experimental Fullscreen modal component is available
• The bottomsheets now use the new api from M3

Badges

The Spark badges are now available and replace the previous Material ones.

If you used the Material version one before you'll have to make the following migration:

@Composable
fun From(){
    val count = 200
    Badge(modifier = Modifier.size(36.dp), containerColor = SparkTheme.colors.error) {
        if(count >= 99){
            Text(text = "99+")
        } else {
            Text(text = count.toString())
        }
    }
}

@Composable
fun To(){
    Badge(badgeStyle = BadgeStyle.Medium, intent = BadgeIntent.Danger, count = 200, overflowCount = 99)
}

Chips

The Spark chips are now also available and also replace the previous Material ones.

If you used the Material version one before you'll have to make the following migration:

@Composable
fun From(){
    AssistChip(
        onClick = { /* Do something! */ },
        label = { Text("Assist Chip") },
        leadingIcon = {
            Icon(
                Icons.Filled.Settings,
                contentDescription = "Localized description",
                Modifier.size(AssistChipDefaults.IconSize),
            )
        },
    )

}

@Composable
fun To(){
    ChipOutlined(
        text = "Outlined Chip",
        intent = ChipIntent.Primary,
        leadingIcon = SparkIcon.Account.Offers.Outlined,
        enabled = enabled,
    )
}

You might need to change the Chip intent to correspond to your new ui.

Typography

The typographies now use Nunito as default font.

Documentation

New documentation available at https://adevinta.github.io/spark-android/ so you won’t need to search inside the repo to find how to use a component.

Fixes:

Buttons

The Outlined button now has a disabled outline as expected.

Image

The image component have a new loadingPlaceholder parameter to
let you modify the loading placeholder which is useful in cases like the adview gallery where it
would take the whole screen but created flashes when the loading was too quick.

⚠️ Breaking changes:

Icons

The icons have changed to support automations
when their design changes.

We now have a new IconSize type on the Icon component that maps to the Figma icon component parameter so you won't have to look for which size to use.
So you will have to check if you're using a custom size for your icon you'll have to use this new parameter in the future.

Icons now have a new size parameter that you can use to specify the size of the icon (Use the same from Figma).
The size values are now one of the following:

• IconSize.Small = 16dp
• IconSize.Medium = 24dp
• IconSize.Large = 32dp
• IconSize.ExtraLarge = 40dp

---

New Contributors

• @McGalanes made their first contribution in #397
• @shkschneider made their first contribution in #458

Full Changelog: 0.1.0...0.2.0