Add a tip component.
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
ci/woodpecker/tag/woodpecker Pipeline was successful

This commit is contained in:
Madeorsk 2024-09-27 19:03:44 +02:00
parent 06b2b9f5e1
commit 6252ed3045
Signed by: Madeorsk
GPG key ID: 677E51CA765BB79F
5 changed files with 52 additions and 1 deletions

View file

@ -38,6 +38,7 @@ import {Box} from "../src/Components/Box";
import {Await, useAsync} from "../src/Async"; import {Await, useAsync} from "../src/Async";
import {NotifyErrorsBoundary} from "../src/Components/Errors/NotifyErrorsBoundary"; import {NotifyErrorsBoundary} from "../src/Components/Errors/NotifyErrorsBoundary";
import {DemoFailingComponent, DemoResetComponent} from "./DemoFailingComponent"; import {DemoFailingComponent, DemoResetComponent} from "./DemoFailingComponent";
import {Tip} from "../src/Components/Tips/Tip";
export function DemoApp() export function DemoApp()
{ {
@ -163,6 +164,10 @@ export function DemoApp()
<Radio name={"radio-test"}>Radio box test</Radio> <Radio name={"radio-test"}>Radio box test</Radio>
<Radio name={"radio-test"}>Radio box test</Radio> <Radio name={"radio-test"}>Radio box test</Radio>
<Tip>
A tip component, very useful in forms which require some explanations.
</Tip>
<Select options={{ <Select options={{
"a": "AAAAAA", "a": "AAAAAA",
"b": "BBBBBB", "b": "BBBBBB",

View file

@ -1,5 +1,5 @@
{ {
"version": "1.6.3", "version": "1.7.0",
"name": "@kernelui/core", "name": "@kernelui/core",
"description": "Kernel UI Core.", "description": "Kernel UI Core.",
"scripts": { "scripts": {

View file

@ -0,0 +1,17 @@
import React from "react";
import {classes} from "../../Utils";
import {Info} from "@phosphor-icons/react";
/**
* Simple text tip component.
*/
export function Tip({className, children, ...props}: React.PropsWithChildren<React.HTMLAttributes<HTMLParagraphElement>>)
{
return (
<p className={classes("tip", className)} {...props}>
<Info weight={"duotone"} />
{children}
</p>
);
}

View file

@ -20,3 +20,4 @@
@import "components/_steps-counter"; @import "components/_steps-counter";
@import "components/_subapp"; @import "components/_subapp";
@import "components/_table"; @import "components/_table";
@import "components/_tip";

View file

@ -0,0 +1,28 @@
p.tip
{
position: relative;
margin: auto;
width: 30em;
padding: 0.3em 0.5em 0.3em 3em;
border-radius: 0.3em;
box-sizing: border-box;
border: solid var(--background-darkest) thin;
color: var(--foreground-lightest);
svg
{
position: absolute;
top: 0.3em;
left: 0.5em;
display: inline-block;
margin: 0;
color: var(--primary);
font-size: 1.5em;
vertical-align: middle;
}
}