Skip to content

Commit

Permalink
Adjust paddings, clean up code, make default banner single line
Browse files Browse the repository at this point in the history
  • Loading branch information
@rock3r
rock3r committed Dec 6, 2024
1 parent c445b94 commit 4a5ce4d
Show file tree
Hide file tree
Showing 5 changed files with 257 additions and 135 deletions.
16 changes: 8 additions & 8 deletions .../ide-plugin/src/main/kotlin/org/jetbrains/jewel/samples/ideplugin/ComponentShowcaseTab.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,26 +56,26 @@ import org.jetbrains.jewel.ui.component.CircularProgressIndicatorBig
import org.jetbrains.jewel.ui.component.DefaultButton
import org.jetbrains.jewel.ui.component.Divider
import org.jetbrains.jewel.ui.component.Dropdown
import org.jetbrains.jewel.ui.component.ErrorBanner
import org.jetbrains.jewel.ui.component.ErrorDefaultBanner
import org.jetbrains.jewel.ui.component.ErrorInlineBanner
import org.jetbrains.jewel.ui.component.Icon
import org.jetbrains.jewel.ui.component.IconActionButton
import org.jetbrains.jewel.ui.component.IconButton
import org.jetbrains.jewel.ui.component.InformationBanner
import org.jetbrains.jewel.ui.component.InformationDefaultBanner
import org.jetbrains.jewel.ui.component.InformationInlineBanner
import org.jetbrains.jewel.ui.component.LazyTree
import org.jetbrains.jewel.ui.component.Link
import org.jetbrains.jewel.ui.component.OutlinedButton
import org.jetbrains.jewel.ui.component.RadioButtonRow
import org.jetbrains.jewel.ui.component.Slider
import org.jetbrains.jewel.ui.component.SuccessBanner
import org.jetbrains.jewel.ui.component.SuccessDefaultBanner
import org.jetbrains.jewel.ui.component.SuccessInlineBanner
import org.jetbrains.jewel.ui.component.Text
import org.jetbrains.jewel.ui.component.TextField
import org.jetbrains.jewel.ui.component.Tooltip
import org.jetbrains.jewel.ui.component.Typography
import org.jetbrains.jewel.ui.component.VerticallyScrollableContainer
import org.jetbrains.jewel.ui.component.WarningBanner
import org.jetbrains.jewel.ui.component.WarningDefaultBanner
import org.jetbrains.jewel.ui.component.WarningInlineBanner
import org.jetbrains.jewel.ui.component.separator
import org.jetbrains.jewel.ui.icons.AllIconsKeys
Expand Down Expand Up @@ -230,7 +230,7 @@ private fun RowScope.ColumnOne() {
Text(text = "Clicked action: $clickLabel")
when (bannerStyle) {
1 -> {
ErrorBanner("This is an error banner in Compose")
ErrorDefaultBanner("This is an error banner in Compose")
ErrorInlineBanner(
style = JewelTheme.inlineBannerStyle.error,
text =
Expand All @@ -244,7 +244,7 @@ private fun RowScope.ColumnOne() {
}

0 -> {
SuccessBanner("This is a success banner in Compose")
SuccessDefaultBanner("This is a success banner in Compose")
SuccessInlineBanner(
style = JewelTheme.inlineBannerStyle.success,
text =
Expand All @@ -270,12 +270,12 @@ private fun RowScope.ColumnOne() {
}

2 -> {
WarningBanner("This is a warning banner in Compose")
WarningDefaultBanner("This is a warning banner in Compose")
WarningInlineBanner("This is a warning banner in Compose")
}

else -> {
InformationBanner("This is an information banner in Compose")
InformationDefaultBanner("This is an information banner in Compose")
InformationInlineBanner("This is an information banner in Compose")
}
}
Expand Down
260 changes: 169 additions & 91 deletions ...andalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/component/Banners.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,7 @@ import androidx.compose.foundation.layout.ExperimentalLayoutApi
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.foundation.layout.padding
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
Expand All @@ -16,113 +15,192 @@ import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import org.jetbrains.jewel.foundation.theme.JewelTheme
import org.jetbrains.jewel.ui.component.ErrorBanner
import org.jetbrains.jewel.ui.component.ErrorDefaultBanner
import org.jetbrains.jewel.ui.component.ErrorInlineBanner
import org.jetbrains.jewel.ui.component.GroupHeader
import org.jetbrains.jewel.ui.component.Icon
import org.jetbrains.jewel.ui.component.IconButton
import org.jetbrains.jewel.ui.component.InformationBanner
import org.jetbrains.jewel.ui.component.InformationDefaultBanner
import org.jetbrains.jewel.ui.component.InformationInlineBanner
import org.jetbrains.jewel.ui.component.Link
import org.jetbrains.jewel.ui.component.SuccessBanner
import org.jetbrains.jewel.ui.component.SuccessDefaultBanner
import org.jetbrains.jewel.ui.component.SuccessInlineBanner
import org.jetbrains.jewel.ui.component.Text
import org.jetbrains.jewel.ui.component.WarningBanner
import org.jetbrains.jewel.ui.component.VerticallyScrollableContainer
import org.jetbrains.jewel.ui.component.WarningDefaultBanner
import org.jetbrains.jewel.ui.component.WarningInlineBanner
import org.jetbrains.jewel.ui.component.scrollbarContentSafePadding
import org.jetbrains.jewel.ui.icons.AllIconsKeys
import org.jetbrains.jewel.ui.theme.defaultBannerStyle
import org.jetbrains.jewel.ui.theme.inlineBannerStyle

private const val LONG_IPSUM =
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor" +
" incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, " +
"quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. " +
"Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu " +
"fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa " +
"qui officia deserunt mollit anim id est laborum."

@ExperimentalLayoutApi
@Composable
internal fun Banners() {
var clickLabel by remember { mutableStateOf("") }
val scrollState = rememberScrollState()
Column(Modifier.fillMaxWidth().verticalScroll(scrollState), verticalArrangement = Arrangement.spacedBy(8.dp)) {
Column {
var clickLabel by remember { mutableStateOf("") }
Text(text = "Clicked action: $clickLabel")
Spacer(Modifier.height(8.dp))

GroupHeader("Default banner (aka editor banners)")

InformationBanner(
style = JewelTheme.defaultBannerStyle.information,
text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt",
)

SuccessBanner(
style = JewelTheme.defaultBannerStyle.success,
text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt",
)

WarningBanner(
style = JewelTheme.defaultBannerStyle.warning,
text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt",
)

ErrorBanner(
style = JewelTheme.defaultBannerStyle.error,
text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt",
)

Spacer(Modifier.height(0.dp)) // The column's arrangement will add 8+8 dps of spacing

GroupHeader("Inline banner")

InformationInlineBanner(
style = JewelTheme.inlineBannerStyle.information,
text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt",
)
ErrorInlineBanner(
style = JewelTheme.inlineBannerStyle.error,
text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt",
actionIcons = {
IconButton(onClick = { clickLabel = "Error Inline Action Icon clicked" }) {
Icon(AllIconsKeys.General.Close, null)
}
},
)
InformationInlineBanner(
style = JewelTheme.inlineBannerStyle.information,
text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt",
actions = {
Link("Action A", onClick = { clickLabel = "Information Inline Action A clicked" })
Link("Action B", onClick = { clickLabel = "Information Inline Action B clicked" })
},
)
SuccessInlineBanner(
style = JewelTheme.inlineBannerStyle.success,
text =
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor" +
" incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, " +
"quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. " +
"Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu " +
"fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa " +
"qui officia deserunt mollit anim id est laborum.",
actions = {
Link("Action A", onClick = { clickLabel = "Success Inline Action A clicked" })
Link("Action B", onClick = { clickLabel = "Success Inline Action B clicked" })
},
actionIcons = {
IconButton(onClick = { clickLabel = "Error Close Icon clicked" }) {
Icon(AllIconsKeys.General.Close, null)
}
IconButton(onClick = { clickLabel = "Error Gear Icon clicked" }) {
Icon(AllIconsKeys.General.Gear, null)
}
},
)
WarningInlineBanner(
style = JewelTheme.inlineBannerStyle.warning,
text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt",
actions = { Link("Action A", onClick = { clickLabel = "Warning Inline Action A clicked" }) },
actionIcons = {
IconButton(onClick = { clickLabel = "Error Close Icon clicked" }) {
Icon(AllIconsKeys.General.Close, null)
}
IconButton(onClick = { clickLabel = "Error Gear Icon clicked" }) {
Icon(AllIconsKeys.General.Gear, null)
}
},
)
VerticallyScrollableContainer {
Column(
Modifier.fillMaxWidth().padding(end = scrollbarContentSafePadding()),
verticalArrangement = Arrangement.spacedBy(8.dp),
) {
GroupHeader("Default banner (aka editor banners)")

InformationDefaultBanner(
style = JewelTheme.defaultBannerStyle.information,
text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt",
actions = {
Link("Action A", onClick = { clickLabel = "Info default no icon Action A clicked" })
Link("Action B", onClick = { clickLabel = "Info default no icon Action B clicked" })
},
)

InformationDefaultBanner(
style = JewelTheme.defaultBannerStyle.information,
text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt",
icon = null,
actions = {
Link("Action A", onClick = { clickLabel = "Info default no icon Action A clicked" })
Link("Action B", onClick = { clickLabel = "Info default no icon Action B clicked" })
},
)

InformationDefaultBanner(style = JewelTheme.defaultBannerStyle.information, text = LONG_IPSUM)

InformationDefaultBanner(
style = JewelTheme.defaultBannerStyle.information,
text = LONG_IPSUM,
icon = null,
)

InformationDefaultBanner(
style = JewelTheme.defaultBannerStyle.information,
text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt",
)

SuccessDefaultBanner(
style = JewelTheme.defaultBannerStyle.success,
text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt",
)

WarningDefaultBanner(
style = JewelTheme.defaultBannerStyle.warning,
text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt",
)

ErrorDefaultBanner(
style = JewelTheme.defaultBannerStyle.error,
text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt",
)

Spacer(Modifier.height(8.dp))

GroupHeader("Inline banner")

InformationInlineBanner(
icon = null,
style = JewelTheme.inlineBannerStyle.information,
text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt",
)

InformationInlineBanner(
icon = null,
style = JewelTheme.inlineBannerStyle.information,
text = LONG_IPSUM,
actionIcons = {
IconButton(onClick = { clickLabel = "Info inline no icon Action Icon clicked" }) {
Icon(AllIconsKeys.General.Close, null)
}
},
)

InformationInlineBanner(
icon = null,
style = JewelTheme.inlineBannerStyle.information,
text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt",
actions = {
Link("Action A", onClick = { clickLabel = "Info inline no icon Action A clicked" })
Link("Action B", onClick = { clickLabel = "Info inline no icon Action B clicked" })
},
)

InformationInlineBanner(
icon = null,
style = JewelTheme.inlineBannerStyle.information,
text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt",
actionIcons = {
IconButton(onClick = { clickLabel = "Info inline no icon Action Icon clicked" }) {
Icon(AllIconsKeys.General.Close, null)
}
},
actions = {
Link("Action A", onClick = { clickLabel = "Info inline no icon Action A clicked" })
Link("Action B", onClick = { clickLabel = "Info inline no icon Action B clicked" })
},
)

InformationInlineBanner(
style = JewelTheme.inlineBannerStyle.information,
text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt",
)
ErrorInlineBanner(
style = JewelTheme.inlineBannerStyle.error,
text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt",
actionIcons = {
IconButton(onClick = { clickLabel = "Error Inline Action Icon clicked" }) {
Icon(AllIconsKeys.General.Close, null)
}
},
)
InformationInlineBanner(
style = JewelTheme.inlineBannerStyle.information,
text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt",
actions = {
Link("Action A", onClick = { clickLabel = "Information Inline Action A clicked" })
Link("Action B", onClick = { clickLabel = "Information Inline Action B clicked" })
},
)
SuccessInlineBanner(
style = JewelTheme.inlineBannerStyle.success,
text = LONG_IPSUM,
actions = {
Link("Action A", onClick = { clickLabel = "Success Inline Action A clicked" })
Link("Action B", onClick = { clickLabel = "Success Inline Action B clicked" })
},
actionIcons = {
IconButton(onClick = { clickLabel = "Error Close Icon clicked" }) {
Icon(AllIconsKeys.General.Close, null)
}
IconButton(onClick = { clickLabel = "Error Gear Icon clicked" }) {
Icon(AllIconsKeys.General.Gear, null)
}
},
)
WarningInlineBanner(
style = JewelTheme.inlineBannerStyle.warning,
text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt",
actions = { Link("Action A", onClick = { clickLabel = "Warning Inline Action A clicked" }) },
actionIcons = {
IconButton(onClick = { clickLabel = "Error Close Icon clicked" }) {
Icon(AllIconsKeys.General.Close, null)
}
IconButton(onClick = { clickLabel = "Error Gear Icon clicked" }) {
Icon(AllIconsKeys.General.Gear, null)
}
},
)
}
}
}
}
Loading

0 comments on commit 4a5ce4d

Please sign in to comment.