Sefar by Yassir

Welcome to Sefar by Yassir!

Migrate from Sefar 0.2.9 to 0.11.0 #

Below is presented the list of the breaking changes which may effect the consumers of the library:

Bar Chart & Line Chart: #

Both Bar Chart and Line Chart have parameter type changes.

Initially xAxisValues and yAxisValues where of type List and values were allowed to be either AxisValue.Numeric or AxisValue.Categorical. Now, xAxisValues are of type List and yAxisValues are of type List. yAxisValues can no longer be categorical, only numeric.

Please refer to the updated usage section of Charts to see a code example.

General Illustrations Name Changes: #

Before # 
GeneralIllustrations.GlobeExclamationMarkPaperplane
After #

Please note case changes in letter B of Dashboard

GeneralIllustrations.GlobeExclamationMarkInactivePaperPlane

Buttons: #

There was a problem with modifiers of buttons that were applied twice. So if you added padding of 8.dp, it would apply it twice and you will have a padding of 16.dp. In this new version, we fixed this problem. So, if you were using our buttons and applying modifiers to them please review them to make sure you have the same UI.

System Icons Name Changes: #

Dashboard icons were renamed, so please check the following before and after (names are listed respectively):

Before # 
SystemIcons.DashBoard
SystemIcons.DashBoard1
SystemIcons.DashBoard1Filled
After #

Please note case changes in letter B of Dashboard

SystemIcons.LineChart
SystemIcons.Dashboard
SystemIcons.DashboardFilled

Logo Icons Removed: #

Country Flags in LogosIcons were removed. So all the following will no longer be avalable

LogosIcons.AlgeriaRectangular
LogosIcons.AlgeriaRound
LogosIcons.FranceRectangular
LogosIcons.FranceRound
LogosIcons.MoroccoRectangular
LogosIcons.MoroccoRound
LogosIcons.SenegalRectangular
LogosIcons.SenegalRound
LogosIcons.SouthAfricaRectangular
LogosIcons.TunisiaRectangular
LogosIcons.TunisiaRound
LogosIcons.UAERectangular
LogosIcons.UAERound

Rating Bar Changes: #

Added a property to disable the double tap event on the Rating bar (to optionally diable half star ratings)

Before # 
var rating by remember { mutableFloatStateOf(0f) }

RatingBar(
    modifier = Modifier.padding(16.dp), //optional
    onRatingChange = { newRating -> rating = newRating }
)
After # 
var rating by remember { mutableFloatStateOf(0f) }

RatingBar(
    modifier = Modifier.padding(16.dp), //optional
    allowDoubleTap = false, //optional
    onRatingChange = { newRating -> rating = newRating }
)

Generic Input Changes #

New Parameter Added called isInteractive. The parameter is true by default. If you don´t want your field to show the keyboard or to appear in focused state when tapped on, you can set it to false. Example Usecase: If you want the generic Field to be clickable and to direct the user to another action or page, you can set this property to false and add a clickable modifier.

GenericInput(
  modifier = Modifier.clickable {
    Log.d("GenericInputField", "Clicked on GenericInput")
  }
  .
  .
  .
  .
  isInteractive = true, // optional
  .
  .
  .
  .
)

Bottom Navigation Bar Item changes: #

BottomNavigatioBar item should have a BadgeType now instead of only raw text, this will allow to show a text badge or a dot badge.

Before # 
val bottomNavigationBarList = listOf(
        BottomNavigationBarItem(
            text = "Tab",
            iconRes = R.drawable.ic_alert_circle,
            onClick = {  }
        ),
        BottomNavigationBarItem(
            textResId = R.string.tab_string,
            iconRes = R.drawable.ic_lock,
            badgeText = null,
            onClick = {  },
        ),
        BottomNavigationBarItem(
            text = "Tab",
            iconRes = R.drawable.ic_coins_hand,
            badgeText = "2"
            onClick = {  },
        )
    )

BottomNavigationBar(
  list = bottomNavigationBarList,
  selectedItemIndex = 1,
  onItemSelected = { }
)
After # 
val bottomNavigationBarList = listOf(
        BottomNavigationBarItem(
            text = "Tab",
            iconRes = R.drawable.ic_alert_circle,
            onClick = {   }
        ),
        BottomNavigationBarItem(
            textResId = R.string.tab_string,
            iconRes = R.drawable.ic_lock,
            badgeType = BadgeType.TextBadge("2"),
            onClick = {   },
        ),
        BottomNavigationBarItem(
            text = "Tab",
            iconRes = R.drawable.ic_coins_hand,
            badgeType = BadgeType.DotBadge
            onClick = {   },
        )
    )

BottomNavigationBar(
  list = bottomNavigationBarList,
  selectedItemIndex = 1,
  onItemSelected = { }
)

Migrate from Sefar 0.2.8 to 0.2.9 #

Below is presented the list of the breaking changes which may effect the consumers of the library:

TagStyle location changed: #

TagStyle´s location has been changed. SO if you were using it you will have to re-import it.

Before # 
import com.yassir.android.yassir_design_system.designsystem.components.tags.internal.TagStyle
After # 
import com.yassir.android.yassir_design_system.designsystem.components.tags.TagStyle

Illustrations name changes: #

Before # 
GeneralIllustrations.GiftUserContact
After # 
GeneralIllustrations.GiftPhoneUserContactBig

CheckboxGroup & RadioGroup removal of various styles: #

You will no longer be able to select checkboxStyle or radioButtonStyle to change the size of the selectors. There´s only one unifies size now.

Before # 
CheckboxGroup(
  modifier = Modifier,
  onStateChange = {checkBoxGroupState -> },
  topLevelCheckbox = IndeterminateCheckboxItem(
    title = "Toppings",
    description = "All the toppings"
  ),
  checkboxes = listOf(
    CheckboxItem(title = "Pepperoni", description = "spicy salami seasoned with paprika"),
    CheckboxItem(title = "Extra cheese", description = "extra cheese on your pizza!"),
  ),
  isGroupEnabled = true,
  checkboxStyle = CheckboxStyle.Large
)

RadioGroup(
  modifier = Modifier,
  onItemSelection = { intValue ->  },
  items = leadingRadioGroupList,
  selectedItemIndex = 0,
  isGroupEnabled = true
  radioButtonStyle = RadioButtonStyle.Small
)
After # 
RadioGroup(
  modifier = Modifier,
  onItemSelection = { intValue ->  },
  items = leadingRadioGroupList,
  selectedItemIndex = 0,
  isGroupEnabled = true 
)
CheckboxGroup(
  modifier = Modifier,
  onStateChange = {checkBoxGroupState -> },
  topLevelCheckbox = IndeterminateCheckboxItem(
    title = "Toppings",
    description = "All the toppings"
  ),
  checkboxes = listOf(
    CheckboxItem(title = "Pepperoni", description = "spicy salami seasoned with paprika"),
    CheckboxItem(title = "Extra cheese", description = "extra cheese on your pizza!"),
  ),
  isGroupEnabled = true,
)

Switch - removal of small toggle type #

Small Variant has been removed, only Large variant stays so need to specify type

Before # 
  Switch(
    enabled = true,
    checked = true,
    type = ToggleType.LargeSwitch(isIconVisible = true, title = "ON"),
    onToggle = {},
  )
After # 
  Switch(
    enabled = true,
    checked = false,
    isIconVisible = false,
    title = "OFF",
    onToggle = {},
  )

Snackbar #

Removed optional ´displayDuration´, duration now is 6000L

Before # 
Snackbar(
    message = "This is a snackbar message",
    actionLabel = "Retry",
    onActionClick = { },
    iconResId = R.drawable.ic_alert_circle,
    displayDuration = 5000L, // optional, default is 5000 milliseconds (5 seconds)
    onDismiss = { },
    action2Label = "Undo", 
    onAction2Click = {  },
)
After # 
Snackbar(
    message = "This is a snackbar message",
    actionLabel = "Retry",
    onActionClick = {  },
    iconResId = R.drawable.ic_alert_circle,
    onDismiss = { },
    action2Label = "Undo",
    onAction2Click = { },
)

Migrate from Sefar 0.2.7.3 to 0.2.8 #

Below is presented the list of the breaking changes which may effect the consumers of the library:

Button TrailingElementType in ListItem: #

add leadingIconResId, trailingIconResId, loading and isElevated to Button.

Before # 
 data class Button(
    val modifier: Modifier = Modifier,
    val onClick: () -> Unit,
    val text: String,
    val buttonType: ButtonType = ButtonType.Primary,
) : TrailingElementType()
After # 
data class Button(
    val modifier: Modifier = Modifier,
    val text: String,
    val buttonType: ButtonType = ButtonType.Primary,
    val loading: Boolean = false,
    val isElevated: Boolean = false,
    @DrawableRes val leadingIconResId: Int? = null,
    @DrawableRes val trailingIconResId: Int? = null,
    val onClick: () -> Unit,
) : TrailingElementType()

CustomState in backdrop: #

Passed Modifier in customContent to make sure content is properly scrollable and aligned and have sticky footer bottom and ensure full state/contained in backdrop.

Before # 
    data class CustomState(
    val isElevatedFooter: Boolean = false,
    val customContent: @Composable (() -> Unit)? = null,
) : BackdropType()
After # 
data class CustomState(
    val isElevatedFooter: Boolean = false,
    val customContent: @Composable ((Modifier) -> Unit)? = null,
) : BackdropType()

Icons name changes: #

Icon from Communication library had name change from ´StarSmallFilled´ to ´StarSmallFull´

Before # 
CommunicationIcons.StarSmallFilled
After # 
CommunicationIcons.StarSmallFull

Icons from Logos library had names changed as follows:

Before # 
LogosIcons.Viper
LogosIcons.ViperMonotone
LogosIcons.TicTok
LogosIcons.TicTokMonotone
LogosIcons.Twitter
LogosIcons.TwitterMonotone
LogosIcons.FacebookMessage
LogosIcons.FacebookMessageMonotone
LogosIcons.UAEeRound
After # 
LogosIcons.Viber
LogosIcons.ViberMonotone
LogosIcons.TikTok
LogosIcons.TikTokMonotone
LogosIcons.X
LogosIcons.XMonotone
LogosIcons.FacebookMessenger
LogosIcons.FacebookMessengerMonotone
LogosIcons.UAERound

Icons from Communication library had names changed as follows:

Before # 
CommunicationIcons.Marketing
After # 
CommunicationIcons.Speaker

Migrate from Sefar 0.2.7.2 to 0.2.7.3 #

Below is presented the list of the breaking changes which may effect the consumers of the library

PhoneInput changes: #

2 new parameters where added:

  • isCountrySelectionEnabled a boolean to determine whether a tapping only the flag opens a backdrop with country selection or not.
  • isCountryCodeTextEnabled a boolean flag to make country code text is dimmed and disabled or enabled.

Migrate from Sefar 0.2.6 to 0.2.7 #

Below is presented the list of the breaking changes which may effect the consumers of the library

Snackbar changes: #

The Snackbar size has been removed, now it has a fixed height of 44.dp, in adddition, the Snackbar now can accept two actions rather than only one action.

Snackbar Before # 
Snackbar(
    modifier = Modifier, // optional: passed as is
    message = "Message to show to users", // set the snackbar message
    actionLabel = null, // optional
    onActionClick = {}, // optional
    iconResId = null, // optional,
    size = SnackbarSize.Medium, //optional
    displayDuration = 5000L, // optional
    onDismiss = {}, // optional
)
Snackbar After # 
Snackbar(
    modifier = Modifier, // optional: passed as is
    message = "Message to show to users", // set the snackbar message
    actionLabel = null, // optional
    onActionClick = {}, // optional
    iconResId = null, // optional,
    displayDuration = 5000L, // optional
    onDismiss = {}, // optional,
    action2Label = null, // optional
    onAction2Click = {}, // optional
)

LineChart changes: #

  • AxisValue & Dataset classes that are used as property types in LineChart have changed locations so you might want to remove their imports and add them again correctly.

SizeConstants object removed: #

The class SizeConstants is no longer available for consumers of Sefar. Please only consider using spacings supported in our theme example: YassirTheme.spacing.spacing1 and if you don´t find a value in our supported spacings that is the same size you need then the size you´re looking for is not supported by Sefar so in that case please add it to your own code base as a constant.

Migrate from Sefar 0.2.5 to 0.2.6 #

Below is presented the list of the breaking changes which may effect the consumers of the library

Code Input changes: #

Please note that the valid types of codeType property have been changed for PIN code and OTP code. Please see below examples:

PIN CODE Before # 
CodeInput(
  modifier = Modifier, // optional
  codeType = CodeType.PIN_CODE,
  label = "PIN Code", // optional
  isError = false, // optional
  isEnabled = true, // optional
  clearCode = false, // optional
  autoFocus = true, // optional
  codeLength = CodeInputDefaults.LENGTH, // optional
  spaceBetweenCodeCells = YassirTheme.spacing.spacing2, // optional
  hint = AnnotatedString(hintText), // optional
  onHintClick = {}, // optional
  resetErrorState = {}, // optional
  onCodeFilled = { code ->
    /* handle entered PIN code */
  },
  colors = YassirTheme.colors // optional
)
PIN CODE After # 
CodeInput(
  modifier = Modifier, // optional
  codeType = CodeType.PinCode,
  label = "PIN Code", // optional
  isError = false, // optional
  isEnabled = true, // optional
  clearCode = false, // optional
  autoFocus = true, // optional
  codeLength = CodeInputDefaults.LENGTH, // optional
  spaceBetweenCodeCells = YassirTheme.spacing.spacing2, // optional
  hint = AnnotatedString(hintText), // optional
  onHintClick = {}, // optional
  resetErrorState = {}, // optional
  onCodeFilled = { code ->
    /* handle entered PIN code */
  },
  colors = YassirTheme.colors // optional
)
OTP CODE Before # 
CodeInput(
  modifier = Modifier
    .align(Alignment.CenterHorizontally)
    .padding(top = YassirTheme.spacing.spacing4), // optional
  codeType = CodeType.OTP_CODE,
  isError = false, // optional
  isEnabled = true, // optional
  clearCode = false, // optional
  autoFocus = true, // optional
  codeLength = 6, // optional
  spaceBetweenCodeCells = YassirTheme.spacing.spacing1_5, // optional
  hint = AnnotatedString(hintText), // optional
  onHintClick = {}, // optional
  resetErrorState = { isError = false }, // optional
  onCodeFilled = { code ->
    /* handle entered OTP code */
  },
  colors = YassirTheme.colors, // optional
  label = "OTP Code" // optional
)
OTP CODE Before # 
CodeInput(
  modifier = Modifier
    .align(Alignment.CenterHorizontally)
    .padding(top = YassirTheme.spacing.spacing4), // optional
  codeType = CodeType.OtpCode(
    initialCode = "456757" //optional
  ),
  isError = false, // optional
  isEnabled = true, // optional
  clearCode = false, // optional
  autoFocus = true, // optional
  codeLength = 6, // optional
  spaceBetweenCodeCells = YassirTheme.spacing.spacing1_5, // optional
  hint = AnnotatedString(hintText), // optional
  onHintClick = {}, // optional
  resetErrorState = { isError = false }, // optional
  onCodeFilled = { code ->
    /* handle entered OTP code */
  },
  colors = YassirTheme.colors, // optional
  label = "OTP Code" // optional
)

Migrate from Sefar 0.2.3 to 0.2.5 #

Below is presented the list of the breaking changes which may effect the consumers of the library

Time Picker changes: #

File has been moved and properties of the component have been combined under ´TimePickerProperties´ object, so re-add the import and check the following example:

Before # 
TimePicker(
    timeFormat = if (is24HFormat) TimeFormat.HOUR_24 else TimeFormat.AM_PM,
    minutesIncrement = minutesIncrement,
    onDismissRequest = { onShowDialogChange(false) },
    onApply = { uno ->
        onApply(uno)
        onShowDialogChange(false)
    },
    onSnappedTime = { uno, _ -> uno.get(Calendar.HOUR_OF_DAY) },
    onCancel = { onShowDialogChange(false) }
)
After # 
TimePicker(
    modifier = Modifier.withTestPrefix("time_picker_screen"),
    timePickerProperties = TimePickerProperties(
        timeFormat = if (is24HFormat) TimeFormat.HOUR_24 else TimeFormat.AM_PM,
        minutesIncrement = minutesIncrement,
        onSnappedTime = { uno, _ -> uno.get(Calendar.HOUR_OF_DAY) },
    ),
    onDismissRequest = { onShowDialogChange(false) },
    onApply = { uno ->
        onApply(uno)
        onShowDialogChange(false)
    },
    onCancel = { onShowDialogChange(false) }
)

Bottom Navigation Bar changes #

Properties have been changed:

Before # 
BottomNavigationBar(
  list = bottomNavigationBarList,
  initialSelectedItemIndex = 1, // optional
  colors = YassirColorScheme.colors // optional
)
After # 
BottomNavigationBar(
  list = bottomNavigationBarList,
  selectedItemIndex = 1, // optional
  onItemSelected = { }
)

Migrate from Sefar 0.2.2.2 to 0.2.3 #

Below is presented the list of the breaking changes which may effect the consumers of the library

Phone Input changes: #

  1. Added arguments to customize Country Backdrop in Phone Input, like “countryBackdropTitle”, “searchBackdropPlaceholder” “backdropHintText”
  2. Changed the logic of passing the initial selected country - now it is needed to pass a String with Region Code
  3. Changed logic of setting a list of countries for the Phone Input. Now it is divided into 3 different lists, more about it usages and the definition of the types can be found in the Sefar Phone Input documentation

Before: # 

PhoneInput(
  modifier = Modifier.padding(YassirTheme.spacing.spacing3), // optional
  hint = "Phone Number can't be empty!", // optional
  hasError = true, // optional
  hasLabel = true, // optional
  enabled = true, // optional
  phoneNumber = "", // optional
  isCountrySelectionEnabled = true, // optional
  countriesList = SupportedCountries.entries, // optional
  onPhoneNumberChange = { phoneNumber, isValid -> }, // optional
  initialSelectedCountry = SupportedCountry.ALgeria, // optional
  onHintClick = { /* action */ } // optional,
  onImeAction = { /* action */ } // optional,
)

After # 

PhoneInput(
  modifier = Modifier.padding(YassirTheme.spacing.spacing3), // optional
  hint = "Phone Number can't be empty!", // optional
  hasError = true, // optional
  hasLabel = true, // optional
  enabled = true, // optional
  phoneNumber = "", // optional
  isCountrySelectionEnabled = true, // optional
  countriesList = SupportedCountries.entries, // optional
  onPhoneNumberChange = { phoneNumber, isValid -> }, // optional
  initialSelectedCountryRegionCode: String = SupportedCountry.Algeria.regionCode // optional
  countriesBackDropList: CountryCodeListType = CountryCodeListType.SupportedCounties // optional
  countryBackdropTitle: String = "", // optional
  backdropHintText: Int? = R.string.country_backdrop_hint, // optional
  searchBackdropPlaceholder: String? = null,
  onHintClick = { /* action */ } // optional,
  onImeAction = { /* action */ } // optional,
)

Map Pin changes: #

  1. YassirMapPin name is changed to MapPin

Before:

fun YassirMapPin(
    mapPinType: MapPinType,
    mapPinDirection: MapPinDirection = MapPinDirection.Up,
    mapPinComponentColor: MapPinComponentColor = MapPinComponentColor.Primary
)

After:

fun MapPin(
    modifier: Modifier = Modifier,
    mapPinType: MapPinType,
    mapPinDirection: MapPinDirection = MapPinDirection.Up,
    mapPinComponentColor: MapPinComponentColor = MapPinComponentColor.Primary
)

Action changes: #

  1. Action name changed to Button Action used in Backdrop and Modal

Before:

fun Modal(
    modifier: Modifier = Modifier,
    modalType: ModalType,
    colors: YassirColorScheme = YassirTheme.colors,
    primaryAction: Action? = null,
    secondaryAction: Action? = null,
    tertiaryAction: Action? = null,
    onDismiss: () -> Unit,
)

After:

fun Modal(
    modifier: Modifier = Modifier,
    modalType: ModalType,
    colors: YassirColorScheme = YassirTheme.colors,
    primaryAction: ButtonAction? = null,
    secondaryAction: ButtonAction? = null,
    tertiaryAction: ButtonAction? = null,
    onDismiss: () -> Unit,
)

Backdrop #

Before:

fun Backdrop(
    modifier: Modifier = Modifier,
    backDropType: BackdropType,
    backdropHeaderItem: BackdropHeaderItem? = null,
primaryAction: ButtonAction? = null,
    secondaryAction: ButtonAction? = null,
    tertiaryAction: ButtonAction? = null,
    isVisible: Boolean = false,
    screenState: ScreenState = ScreenState.Contained(),
    windowInsets: WindowInsets = BottomSheetDefaults.windowInsets,
    sheetState: SheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true),
    onDismissRequest: () -> Unit
)

After:

fun Backdrop(
    modifier: Modifier = Modifier,
    backDropType: BackdropType,
    backdropHeaderItem: BackdropHeaderItem? = null,
    primaryAction: ButtonAction? = null,
    secondaryAction: ButtonAction? = null,
    tertiaryAction: ButtonAction? = null,
    isVisible: Boolean = false,
    screenState: ScreenState = ScreenState.Contained(),
    windowInsets: WindowInsets = BottomSheetDefaults.windowInsets,
    sheetState: SheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true),
    onDismissRequest: () -> Unit
)