Building Rapido’s Design System- Part2

This story is the second part of the series, Building Rapido’s Design System. If you did not read the previous one, you can start from here.

In Part 1 we understood the need for a design system and generated the JSON file from the Figma tokens plugin.

Now let's move forward and see how we can build a Button component from the generated JSON file.

Design System in Android

We at Rapido, are using Jetpack Compose for writing the UI code. Let’s deep dive into the implementation of the Button component in Android using jetpack compose.

@Composable
fun RdsButton(
    modifier: Modifier = Modifier,
    buttonType: RdsButtonConstants.ButtonTypes,
    text: String,
    buttonState: RdsButtonConstants.ButtonStates = RdsButtonConstants.ButtonStates.ENABLED,
    onClick: () -> Unit
) {
    Button(
        onClick = {
            if (buttonState.isEnabled()) {
                onClick.invoke()
            } else {
                return@Button
            }
        },
        shape = RoundedCornerShape(RdsButtonToken.backgroundBorderRadius),
        colors = buttonType.buttonColors(),
        enabled = buttonState.isEnabled(),
        modifier = modifier
            .fillMaxWidth()
            .height(RdsButtonToken.buttonHeight)
    ) {
        ButtonText(
                text = text,
                modifier = Modifier
                    .align(Alignment.CenterVertically)
                    .wrapContentHeight()
            )
    }
}

modifier -> compose modifier exposed to the outside world to decore the button component as per their need.

buttonType -> type of button defined in the RdsButtonConstants.ButtonTypes.kt enum class.

text -> text to be displayed on the button.

buttonState -> state of the button defined in RdsButtonConstants.ButtonStates enum class.

onClick -> callback to be invoked on click of the button.

@Composable
private fun ButtonText(text: String, modifier: Modifier) {
    RdsTextView(
        type = RdsTextType.LabelMedium,
        text = text,
        maxLines = 1,
        textAlign = TextAlign.Center,
        modifier = modifier
    )
}

RdsButtonConstants.kt

object RdsButtonConstants {
    enum class ButtonTypes {
        PRIMARY,
        SECONDARY
    }

    enum class ButtonStates {
        ENABLED,
        DISABLED
    }
}

RdsButtonExtenssions.kt

fun RdsButtonConstants.ButtonStates.isEnabled(): Boolean {
    return when (this) {
        RdsButtonConstants.ButtonStates.ENABLED -> true
        else -> {
            false
        }
    }
}

@Composable
fun RdsButtonConstants.ButtonTypes?.buttonColors(): ButtonColors {
    return if (this == RdsButtonConstants.ButtonTypes.PRIMARY) {
        buttonPrimaryColors()
    } else {
        buttonSecondaryColors()
    }
}

Usage of button component at client

Now, let's see how we can use the above-built button component of the design system on the client side.

RdsButton(
        buttonState = RdsButtonConstants.ButtonStates.ENABLED,
        buttonType = RdsButtonConstants.ButtonTypes.PRIMARY,
        text = "Continue" 
    ) {}

you just have to call the RdsButton and pass the required parameters blindly without worrying about the styling😎

Do you use Design System at your work? How has your experience been?
Let us know in the comments below.

Acknowledgements

This couldn’t have been possible without the help and support of Gandharva Kumar, Puneet Setia, Adnan A M and Jai Dev.
Huge thanks to the incredible folks of the Android team and Design team at Rapido