kiwicom / orbit-compose Goto Github PK

https://www.figma.com/file/Y79I18H9w8HJZVxPdAkAHb/%5BOrbit%5D-Desktop-Components?node-id=6038%3A11303

In your sample app, in the Text Fields controls if I focus a field and keyboard shows up then TextFields also scroll and appear above primary button

How does that work? on my app, with your components, this is the results

TextField is below the keyboard with textSelectHandle on top of it :D

Catalog app has android:windowSoftInputMode="adjustResize", but adding it on my app has no effect.

My layout is like this:

@Preview(showSystemUi = true)
@Composable
fun LoginScreen() {

    val viewModel: LoginScreenViewModel = hiltViewModel()

    var server by remember { mutableStateOf("192.168.") }

    val discoveredServer = viewModel.foundServers.collectAsState(initial = emptyList())

    Column(modifier = Modifier
        .systemBarsPadding()
        .fillMaxSize()
        .padding(10.dp),
        verticalArrangement = Arrangement.Bottom) {

        LazyColumn {
            items(discoveredServer.value.size) { index ->
                Card(onClick = { viewModel.connectToServer(discoveredServer.value[index]) }) {
                    Text(text = discoveredServer.value[index].address ?: "")
                }
            }
        }

        TextField(value = server,
            onValueChange = { server = it },
            label = { Text(text = "Server") },
            leadingIcon = { Icon(Icons.Trip, contentDescription = null) },
            modifier = Modifier.fillMaxWidth(),
            maxLines = 1)

        Button(onClick = { /*TODO*/ }, modifier = Modifier.align(Alignment.End), enabled = false) {
            Text(text = "Next", modifier = Modifier)
        }
    }
}

which is included inside OrbitTheme -> Scaffold -> Jetpack Navigation...

Hi, there have been few useful composables added since version 0.14.0. When is the next release?

@Composable
public fun CountryFlag(
    url: String,
    contentDescription: String?,
    modifier: Modifier = Modifier,
)

• Use URL & Coil to show the flag.
• Add Coil as a dependency.
• Set default size by height and calculate it from current line-heigt, similarly we calculate Icon() size

Update component-status.yml

Hi, thanks for those awesome composables.

On your website there is a Tile component which on android has green dot with thext "Released". Where can I find it? typing Tile in Android Studio gives autocompletions for ChoiceTile and ChoiceTileCentered

• color naming
• color documentation
• color demo/presentation

Correct me if i missed but could not find it.

There is already Icons.AccountCircle so I think also adding password icon would make a nice pair for login screens!

For example:

Maybe we could allow to hoist the interaction source and make it a parameter with a default value.

Add

interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },

to button composables.

Originally posted by @shanio in #112 (comment)

Share elevation levels though OrbitTheme or somehow.

• do not change background, keep it gray
• focus outline has a higher priority than error outline

secondary -> neutral
neutral -> ...

We need to mirror some of the directional icons to match mirrored layout for RTL languages. Icons that are supposed to be automatically mirrored:

• Chevron forward
• Chevron backward
• Chevron double forward
• Chevron double backward
• Flight Direct
• Flight Multicity
• Flight Nomad
• Flight Return
• Route No stops
• Route One stop
• Route Two stops

e.g. when setting Modifier.fillMaxWidth()

@Composable
fun ListChoice(
  modifier: Modifier = Modifier,
  icon: @Composable RowScope.() -> Unit = {},
  trailingIcon: @Composable RowScope.() -> Unit = {},
  withSeparator: Boolean = true,
  content: @Composable RowScope.() -> Unit,
)

• see Figma Native Components
• don't forget apply small buttons scope to true
• prepare demos as presented in Native Figma
• update components-status.yml

on white theme it is all pretty but on dark theme it is not visible at all

dark theme	light theme

Sorry about toast, im lazy to screenshot it again. Anyways as you can see the Card composable's shadow is barly noticable compared to light theme variant

When I use Scaffold in orbit for compose, i found a bug in it.

However, it's not working well, like this.

The topAppBar is override my Alert.
But, When i use Scaffold in compose. It's woking well

Config :
Jetpack Compose 1.2.0 alpha-03

I would like to support a dark theme, but I think the library has some problems with that.

Update component-status.yml

Decided to use the TextField's error argument. But the red icon is always visible

How do I use it? my first try was this

TextField(value = server,
    modifier = Modifier.fillMaxWidth(),
    error = {
        if (errors.value is Errors.BadServer) {
            Text(text = "Can not connect to this server")
        }
    },)

That did not work because it checks if the argument is null and then displays red icon. My second try was:

val error = @Composable { if (errors.value is Errors.BadServer) {
    Text(text = "Can not connect to this server")
} else null }

TextField(value = server,
    modifier = Modifier.fillMaxWidth(),
    error = error) // here I get error "The feature "unit conversion" is disabled"

But there I get compilation error. Of course I could duplicate it and wrap whole TextField in if statement, but this feels wrong (lots of arguments will be duplicated). So how can I use it?

@Composable
fun KeyValue(
  key: @Composable () -> Unit,
  value: @Composable () -> Unit,
  modifier: Modidifier = Modifier,
)

• simplified API

@Composable
fun KeyValue(
  key: String,
  value: String,
  modifier: Modidifier = Modifier,
)

• basic with middot
• advance with custom icon
• very long linevery long linevery long linevery long linevery long linevery long linevery long linevery long linevery long linevery long linevery long linevery long line

List(
  contentColor: Color = OrbitTheme.colors.content.normal,
) {
    Text("")
    Text("")
    Text("")
}

List(icon = { Icon() }) {
}

ListLarge {
    Text("")
    Text("")
    Text("")
}

https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/material/material/samples/src/main/java/androidx/compose/material/samples/SelectionControlsSamples.kt

I am trying to set icon to ChoiceTile , but it does not works:

@Composable
fun CreateKiwiUI() {
    var selected by remember {
        mutableStateOf(false)
    }
    
    Column() {
        ChoiceTile(
            icon = {
                painterResource(id = R.drawable.ic_correct)
            },
            selected = selected,
            onSelect = {
                selected = !selected
            },
            showRadio = true,
            content = {
                Text(text = "Some text")
            }
        )
    }
}

lib versions:

implementation "kiwi.orbit.compose:ui:0.13.0"
implementation "androidx.compose.ui:ui:1.2.0-beta01"
implementation "androidx.compose.material:material:1.2.0-beta01"

I even tried latest release version of compose 1.1.1 but still does not works

Possibly simply reuse the Material version.

Move over from :shared:ui and create proper slotting API.

Update component-status.yml

I have always met those warnings asking me to add some descriptions to ImageViews, same is for Composables. Do you guys regulary set them up? Personaly, I always ignore them, or just pass nulls everywhere...

So since we have wrappers around Image and Icon why not add default parameter for contentDescription: String? = null? I can send PR if you consider it

https://foso.github.io/Jetpack-Compose-Playground/material/dropdownmenu/

• add shaping to orbit theme
• unify shapes & double check against specs