Sefar by Yassir

Welcome to Sefar by Yassir!

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:

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
)