Compose your application interface with reusable building blocks.
Accessible
Hope UI follows WAI-ARIA standards, helping you to reach the largest audience possible
with less effort.
Default expanded item
Use the defaultIndex prop to set an item expanded by default.
Composable
Compose your application interface with reusable building blocks.
Accessible
Hope UI follows WAI-ARIA standards, helping you to reach the largest audience possible
with less effort.
Expand multiple items at once
Use the allowMultiple prop to permit multiple items to be expanded at once.
Composable
Compose your application interface with reusable building blocks.
Accessible
Hope UI follows WAI-ARIA standards, helping you to reach the largest audience possible
with less effort.
If you pass this prop, ensure that the index or defaultIndex{" "}
prop is an array.
Styling the expanded state
The AccordionButton component has aria-expanded set to{" "}
true or false depending on the state of the{" "}
AccordionItem. That means you can use the _expanded style prop to
style this state.
Composable
Compose your application interface with reusable building blocks.
Accessing the internal state
If you need access to the internal state of each accordion item, you can use a render prop.
It provides 2 internal state props: expanded and disabled.
{({ expanded }) => (
<>
Composable
Compose your application interface with reusable building blocks.
)}
Controlled accordion
Use the index and onChange props to control the{" "}
Accordion.
setItemIndex(value as number)}>
Composable
Compose your application interface with reusable building blocks.
Accessible
Hope UI follows WAI-ARIA standards, helping you to reach the largest audience possible
with less effort.
AccessibilityARIA roles and attributes
Each AccordionButton should be wrapped in an element with role{" "}
heading.
AccordionButton as role set to button.
AccordionButton as aria-controls set to the id of
its associated AccordionPanel.
AccordionButton as aria-expanded set to true when
its associated AccordionPanel is expanded, false otherwise.
AccordionPanel as role set to region.
AccordionPanel as aria-labelledby set to the id of
its associated AccordionButton.
Keyboard support↑ moves focus to the previous accordion button.
↓ moves focus to the next accordion button.
home moves focus to the first accordion button.
end moves focus to the last accordion button.
ThemingAccordion base styles and default props can be overridden in the Hope UI theme
configuration like below:
PropsAccordion propsAccordionItem propsOther components propsAccordionButton and AccordionPanel composes{" "}
Box
.
AccordionIcon composes{" "}
Icon
.
);
}
================================================
FILE: apps/docs/src/pages/component-docs/data-display/accordion/snippets.ts
================================================
const importComponent = `import {
Accordion,
AccordionItem,
AccordionButton,
AccordionIcon,
AccordionPanel,
} from "@hope-ui/solid"`;
const basicUsage = `
Composable
Compose your application interface with reusable building blocks.
Accessible
Hope UI follows WAI-ARIA standards,
helping you to reach the largest audience possible with less effort.
`;
const defaultIndex = `
Composable
Compose your application interface with reusable building blocks.
Accessible
Hope UI follows WAI-ARIA standards,
helping you to reach the largest audience possible with less effort.
`;
const allowMultiple = `
Composable
Compose your application interface with reusable building blocks.
Accessible
Hope UI follows WAI-ARIA standards,
helping you to reach the largest audience possible with less effort.
`;
const stylingExpandedState = `
Composable
Compose your application interface with reusable building blocks.
`;
const internalState = `
{({ expanded }) => (
<>
Composable
Compose your application interface with reusable building blocks.
)}
`;
const controlled = `function ControlledExample() {
const [itemIndex, setItemIndex] = createSignal(-1);
return (
<>
setItemIndex(value as number)}
>
Composable
Compose your application interface with reusable building blocks.
Accessible
Hope UI follows WAI-ARIA standards,
helping you to reach the largest audience possible with less effort.
);
}`;
const theming = `const config: HopeThemeConfig = {
components: {
Accordion: {
baseStyle: {
root: SystemStyleObject,
item: SystemStyleObject,
button: SystemStyleObject,
icon: SystemStyleObject,
panel: SystemStyleObject,
},
}
}
}`;
export const snippets = {
importComponent,
basicUsage,
defaultIndex,
allowMultiple,
stylingExpandedState,
internalState,
controlled,
theming,
};
================================================
FILE: apps/docs/src/pages/component-docs/data-display/avatar/index.tsx
================================================
import {
Alert,
AlertDescription,
Avatar,
AvatarBadge,
AvatarExcess,
AvatarGroup,
hope,
HStack,
ListItem,
Text,
UnorderedList,
} from "@hope-ui/solid";
import Prism from "prismjs";
import { onMount } from "solid-js";
import Code from "@/components/Code";
import CodeSnippet from "@/components/CodeSnippet";
import { ContextualNavLink } from "@/components/ContextualNav";
import PageLayout from "@/components/PageLayout";
import PageTitle from "@/components/PageTitle";
import { Preview } from "@/components/Preview";
import { PropsTable, PropsTableItem } from "@/components/PropsTable";
import SectionSubtitle from "@/components/SectionSubtitle";
import SectionTitle from "@/components/SectionTitle";
import { IconUser } from "@/icons/IconUser";
import { snippets } from "./snippets";
export default function AvatarDoc() {
const previousLink: ContextualNavLink = {
href: "/docs/data-display/accordion",
label: "Accordion",
};
const nextLink: ContextualNavLink = {
href: "/docs/data-display/badge",
label: "Badge",
};
const contextualNavLinks: ContextualNavLink[] = [
{ href: "#import", label: "Import" },
{ href: "#usage", label: "Usage" },
{ href: "#sizes", label: "Avatar sizes", indent: true },
{ href: "#fallbacks", label: "Avatar fallbacks", indent: true },
{ href: "#custom-fallback", label: "Customize the fallback avatar", indent: true },
{ href: "#with-badge", label: "Avatar with badge", indent: true },
{ href: "#avatar-group", label: "AvatarGroup", indent: true },
{ href: "#change-initials-logic", label: "Changing the initials logic", indent: true },
{ href: "#theming", label: "Theming" },
{ href: "#props", label: "Props" },
{ href: "#avatar-props", label: "Avatar props", indent: true },
{ href: "#avatar-group-props", label: "AvatarGroup props", indent: true },
];
const avatarPropItems: PropsTableItem[] = [
{
name: "size",
description: "The size of the avatar.",
type: '"2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "full"',
defaultValue: '"md"',
},
{
name: "withBorder",
description:
"If `true`, the Avatar will show a border around it. Best for a group of avatars.",
type: "boolean",
defaultValue: "false",
},
{
name: "name",
description:
"The name of the person in the avatar. If `src` has loaded, the name will be used as the `alt` attribute of the `img`. If `src` is not loaded, the name will be used to create the initials",
type: "string",
},
{
name: "src",
description: "The image url of the `Avatar`.",
type: "string",
},
{
name: "srcSet",
description: "List of sources to use for different screen resolutions.",
type: "string",
},
{
name: "icon",
description: "The default avatar used as fallback when `name`, and `src` is not specified.",
type: "(props: AvatarIconProps) => JSX.Element",
},
{
name: "iconLabel",
description:
"The `aria-label` to use with the default avatar icon when no `name` is provided.",
type: "string",
},
{
name: "loading",
description: "The image loading strategy.",
type: '"eager" | "lazy"',
},
{
name: "ignoreFallback",
description: "If `true`, opt out of the avatar's `fallback` logic.",
type: "boolean",
defaultValue: "false",
},
{
name: "getInitials",
description: "Function to get the initials to display.",
type: "(name: string) => string",
},
{
name: "onError",
description: "Function called when image failed to load.",
type: "JSX.EventHandlerUnion",
},
{
name: "imageProps",
description: "Props to be passed to the AvatarImage",
type: "ImageProps",
},
];
const avatarGroupPropItems: PropsTableItem[] = [
{
name: "size",
description: "The size of the avatars.",
type: '"2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "full"',
defaultValue: '"md"',
},
{
name: "spacing",
description: "The space between the avatars in the group.",
type: 'ResponsiveValue',
defaultValue: "-1em",
},
{
name: "avatarBorderRadius",
description: "The `border-radius` of the avatars.",
type: 'ResponsiveValue',
},
{
name: "avatarBorderColor",
description: "The `border-color` of the avatars.",
type: 'ResponsiveValue',
},
{
name: "avatarBorderWidth",
description: "The `border-width` of the avatars.",
type: 'ResponsiveValue',
},
];
onMount(() => {
Prism.highlightAll();
});
return (
Avatar
The Avatar component is used to represent a user, and displays the profile
picture, initials or fallback icon.
ImportAvatar: The image that represents the user.
AvatarBadge: A wrapper that displays its content on the right corner of
the avatar.
AvatarGroup: A wrapper to stack multiple Avatars together.
AvatarExcess: The number of non-displayed avatars in a group.
UsageAvatar sizes
Use the size prop to change the size of the Avatar. You can set the value to{" "}
2xs, xs, sm, md, lg,{" "}
xl or 2xl.
Avatar fallbacks
If there is an error loading the src of the avatar, there are 2 fallbacks:
If there's a name prop, we use it to generate the initials.
If there's no name prop, we use a default avatar.
Customize the fallback avatar
You can customize the background color and icon of the fallback avatar icon to match your
design requirements.
To update the background, pass the usual bg prop.
To update the icon svg, pass the icon prop.
} />
icon is a render prop that provides proper role and{" "}
aria-label attributes to use in your custom icon.
Avatar with badge
In some products, you might need to show a badge on the right corner of the avatar. We call
this a badge. Here's an example that shows if the user is online:
Note the use of em for the size of the AvatarBadge. This is
useful to size the badge relative to the avatar font size.
AvatarGroup
In some cases, you might need to stack avatars as a group. Use the AvatarGroup{" "}
component.
To size all the avatars equally, pass the size prop.
To adjust the spacing between the avatars, pass the spacing prop.
To set a remaining avatars number, use the AvatarExcess component.
+3Changing the initials logic
Use the getInitials prop to manage how initials are generated from name. By
default Hope UI merge the first characters of each word in the name prop.
ThemingAvatar base styles and default props can be overridden in the Hope UI theme
configuration like below:
PropsAvatar propsAvatarGroup props
);
}
================================================
FILE: apps/docs/src/pages/component-docs/data-display/avatar/snippets.ts
================================================
const importComponent = `import {
Avatar,
AvatarBadge,
AvatarGroup,
AvatarExcess
} from "@hope-ui/solid"`;
const basicUsage = ``;
const sizes = ``;
const fallbacks = ``;
const customFallbacks = `}
/>
`;
const withBadge = `
{/* You can also change the borderColor and bg of the badge */}
`;
const avatarGroup = `+3`;
const theming = `const config: HopeThemeConfig = {
components: {
Avatar: {
baseStyle: {
root: SystemStyleObject,
group: SystemStyleObject,
image: SystemStyleObject,
initials: SystemStyleObject,
badge: SystemStyleObject,
excess: SystemStyleObject,
},
defaultProps: {
root: ThemeableAvatarOptions,
group: ThemeableAvatarGroupOptions,
}
}
}
}`;
export const snippets = {
importComponent,
basicUsage,
sizes,
fallbacks,
customFallbacks,
withBadge,
avatarGroup,
theming,
};
================================================
FILE: apps/docs/src/pages/component-docs/data-display/badge/index.tsx
================================================
import { Badge, HStack, Text } from "@hope-ui/solid";
import Prism from "prismjs";
import { onMount } from "solid-js";
import Code from "@/components/Code";
import CodeSnippet from "@/components/CodeSnippet";
import { ContextualNavLink } from "@/components/ContextualNav";
import PageLayout from "@/components/PageLayout";
import PageTitle from "@/components/PageTitle";
import { Preview } from "@/components/Preview";
import { PropsTable, PropsTableItem } from "@/components/PropsTable";
import SectionSubtitle from "@/components/SectionSubtitle";
import SectionTitle from "@/components/SectionTitle";
import { snippets } from "./snippets";
export default function BadgeDoc() {
const previousLink: ContextualNavLink = {
href: "/docs/data-display/avatar",
label: "Avatar",
};
const nextLink: ContextualNavLink = {
href: "/docs/data-display/icon",
label: "Icon",
};
const contextualNavLinks: ContextualNavLink[] = [
{ href: "#import", label: "Import" },
{ href: "#usage", label: "Usage" },
{ href: "#colors", label: "Badge colors", indent: true },
{ href: "#variants", label: "Badge variants", indent: true },
{ href: "#theming", label: "Theming" },
{ href: "#props", label: "Props" },
];
const propItems: PropsTableItem[] = [
{
name: "variant",
description: "The visual style of the badge.",
type: '"solid" | "subtle" | "outline"',
defaultValue: '"subtle"',
},
{
name: "colorScheme",
description: "The color of the badge.",
type: '"primary" | "accent" | "neutral" | "success" | "info" | "warning" | "danger"',
defaultValue: '"neutral"',
},
];
onMount(() => {
Prism.highlightAll();
});
return (
BadgeBadges are used to highlight an item's status for quick recognition.ImportUsageBadgeBadge colors
Use the colorScheme prop to change the color of the Badge. You can set the
value to primary, accent, neutral,{" "}
success, info, warning or danger.
BadgeBadgeBadgeBadgeBadgeBadgeBadgeBadge variants
Use the variant prop to change the visual style of the Badge. You can set the
value to solid, subtle or outline.
BadgeBadgeBadgeThemingBadge base styles and default props can be overridden in the Hope UI theme
configuration like below:
Props
);
}
================================================
FILE: apps/docs/src/pages/component-docs/data-display/badge/snippets.ts
================================================
const importComponent = `import { Badge } from "@hope-ui/solid"`;
const basicUsage = `Badge`;
const colors = `BadgeBadgeBadgeBadgeBadgeBadgeBadge`;
const variants = `BadgeBadgeBadge`;
const theming = `const config: HopeThemeConfig = {
components: {
Badge: {
baseStyle: SystemStyleObject,
defaultProps: ThemeableBadgeOptions
}
}
}`;
export const snippets = {
importComponent,
basicUsage,
colors,
variants,
theming,
};
================================================
FILE: apps/docs/src/pages/component-docs/data-display/icon/index.tsx
================================================
import { Anchor, createIcon, hope, HStack, Icon, IconProps, Text } from "@hope-ui/solid";
import Prism from "prismjs";
import { onMount } from "solid-js";
import Code from "@/components/Code";
import CodeSnippet from "@/components/CodeSnippet";
import { ContextualNavLink } from "@/components/ContextualNav";
import PageLayout from "@/components/PageLayout";
import PageTitle from "@/components/PageTitle";
import { Preview } from "@/components/Preview";
import { PropsTable, PropsTableItem } from "@/components/PropsTable";
import SectionSubtitle from "@/components/SectionSubtitle";
import SectionTitle from "@/components/SectionTitle";
import { snippets } from "./snippets";
function CircleIcon(props: IconProps) {
return (
);
}
export default function IconDoc() {
const previousLink: ContextualNavLink = {
href: "/docs/data-display/badge",
label: "Badge",
};
const nextLink: ContextualNavLink = {
href: "/docs/data-display/image",
label: "Image",
};
const contextualNavLinks: ContextualNavLink[] = [
{ href: "#import", label: "Import" },
{ href: "#using-third-party-icon-library", label: "Using a third-party icon library" },
{ href: "#creating-custom-icons", label: "Creating your custom icons" },
{ href: "#using-icon-component", label: "Using the `Icon` component", indent: true },
{ href: "#using-create-icon-function", label: "Using the `createIcon` function", indent: true },
{ href: "#tips", label: "Tips for generating your own icons", indent: true },
{ href: "#fallback-icon", label: "Fallback icon" },
{ href: "#props", label: "Props" },
{ href: "#icon-props", label: "Icon props", indent: true },
{ href: "#create-icon-options", label: "createIcon options", indent: true },
];
const iconPropItems: PropsTableItem[] = [
{
name: "viewBox",
description: "The viewBox of the icon.",
type: "string",
defaultValue: "0 0 24 24",
},
{
name: "boxSize",
description: "The size (width and height) of the icon.",
type: "string",
defaultValue: "1em",
},
{
name: "color",
description: "The color of the icon.",
type: "string",
defaultValue: "currentColor",
},
];
const createIconPropItems: PropsTableItem[] = [
{
name: "viewBox",
description: "The viewBox of the icon.",
type: "string",
defaultValue: "0 0 24 24",
},
{
name: "path",
description: "A function that return the `svg` path or group element.",
type: "() => JSX.Element | JSX.Element[]",
},
{
name: "defaultProps",
description: "Default props automatically passed to the component; overwriteable.",
type: "IconProps",
},
];
onMount(() => {
Prism.highlightAll();
});
return (
Icon
The Icon component is used to render svg.
Import
Using a third-party icon library
To use third-party icon libraries, here are the steps:
Import the Icon component from @hope-ui/solid.
Pass the desired third party icon into the as prop.
Creating your custom iconsHope UI provides two methods for creating your custom icons:
Using the Icon component.
Using the createIcon function.
They can be imported from @hope-ui/solid:
Using the Icon component
The Icon component renders as an svg element.
This enables you to define your own custom icon components:And style them with style props:
Using the createIcon function
The createIcon function is a convenience wrapper around the process of
generating icons with Icon, allowing you to achieve the same functionality with
less effort.
Tips for generating your own icons
Export icons as svg from{" "}
Figma
,{" "}
Sketch
, etc.
Use a tool like{" "}
SvgOmg
{" "}
to reduce the size and minify the markup.
To use the color style prop, set the fill or stroke{" "}
prop of your svg path to currentColor.
Fallback icon
When children is not provided, the Icon component renders a
fallback icon.
PropsIcon render an svg, you can use any svg attributes.
Icon props
createIcon options
);
}
================================================
FILE: apps/docs/src/pages/component-docs/data-display/icon/snippets.ts
================================================
const importComponent = `import { Icon } from "@hope-ui/solid"`;
const usingThirdPartyIconLibrary = `// 1. Import
import { Icon } from "@hope-ui/solid"
import { SettingsIcon } from "some-icon-library"
// 2. Use the \`as\` prop
function Example() {
return
}`;
const importIconAndCreateIcon = `import { Icon, createIcon } from "@hope-ui/solid"`;
const customIconWithIconComponent = ``;
const customIconAsComponent = `function CircleIcon(props: IconProps) {
return (
);
}`;
const customIconAsComponentUsage = `
{/* The default icon size is 1em (16px) */}
{/* Use the \`boxSize\` prop to change the icon size */}
{/* Use the \`color\` prop to change the icon color */}
`;
const createIconExample = `import { createIcon } from "@hope-ui/solid"
export const CircleIcon = createIcon({
viewBox: "0 0 200 200",
// path is a function that returns JSX
path: () => (
),
})
`;
const fallbackIcon = ``;
export const snippets = {
importComponent,
usingThirdPartyIconLibrary,
importIconAndCreateIcon,
customIconWithIconComponent,
customIconAsComponent,
customIconAsComponentUsage,
createIconExample,
fallbackIcon,
};
================================================
FILE: apps/docs/src/pages/component-docs/data-display/image/index.tsx
================================================
import { hope, HStack, Image, Text } from "@hope-ui/solid";
import Prism from "prismjs";
import { onMount } from "solid-js";
import Code from "@/components/Code";
import CodeSnippet from "@/components/CodeSnippet";
import { ContextualNavLink } from "@/components/ContextualNav";
import PageLayout from "@/components/PageLayout";
import PageTitle from "@/components/PageTitle";
import { Preview } from "@/components/Preview";
import { PropsTable, PropsTableItem } from "@/components/PropsTable";
import SectionSubtitle from "@/components/SectionSubtitle";
import SectionTitle from "@/components/SectionTitle";
import { snippets } from "./snippets";
export default function ImageDoc() {
const previousLink: ContextualNavLink = {
href: "/docs/data-display/icon",
label: "Icon",
};
const nextLink: ContextualNavLink = {
href: "/docs/data-display/kbd",
label: "Kbd",
};
const contextualNavLinks: ContextualNavLink[] = [
{ href: "#import", label: "Import" },
{ href: "#usage", label: "Usage" },
{ href: "#image-size", label: "Image size", indent: true },
{ href: "#image-with-border-radius", label: "Image with border radius", indent: true },
{ href: "#image-fallback", label: "Image fallback", indent: true },
{ href: "#props", label: "Props" },
];
const propItems: PropsTableItem[] = [
{
name: "src",
description: "The image `src` attribute.",
type: "string",
},
{
name: "srcSet",
description: "The image `srcset` attribute.",
type: "string",
},
{
name: "sizes",
description: " The image `sizes` attribute.",
type: "string",
},
{
name: "crossOrigin",
description:
"The key used to set the crossOrigin on the HTMLImageElement into which the image will be loaded. This tells the browser to request cross-origin access when trying to download the image data.",
type: '"" | "anonymous" | "use-credentials"',
},
{
name: "loading",
description: "The image loading strategy.",
type: '"eager" | "lazy"',
},
{
name: "fallbackSrc",
description:
"Fallback image `src` to show if image is loading or image fails. Using a local image is recommended.",
type: "string",
},
{
name: "fallback",
description: "Fallback element to show if image is loading or image fails.",
type: "JSX.Element",
},
{
name: "ignoreFallback",
description: "If `true`, opt out of the `fallbackSrc` logic.",
type: "boolean",
defaultValue: "false",
},
{
name: "align",
description:
"How to align the image within its bounds. It maps to css `object-position` property.",
type: "Property.ObjectPosition",
},
{
name: "fit",
description: "How the image to fit within its bounds. It maps to css `object-fit` property.",
type: "Property.ObjectFit",
},
{
name: "onLoad",
description: "A callback for when the image `src` has been loaded.",
type: "JSX.EventHandlerUnion",
},
{
name: "onError",
description: "A callback for when there was an error loading the image `src`.",
type: "JSX.EventHandlerUnion",
},
{
name: "htmlWidth",
description: "The native HTML `width` attribute to the passed to the `img`",
type: "string | number",
},
{
name: "htmlHeight",
description: "The native HTML `height` attribute to the passed to the `img`",
type: "string | number",
},
];
onMount(() => {
Prism.highlightAll();
});
return (
Image
The Image component is used to display images.
ImportUsageImage size
The size of the image can be adjusted using the boxSize prop.
Image with border radius
The radius of the image can be adjusted using the borderRadius prop.
Image fallback
The Image component allows you provide a fallback placeholder. The placeholder
is displayed when:
The fallback or fallbackSrc prop is provided.
The image provided in src is currently loading.
An error occurred while loading the image src.
No src prop was passed.
You can also opt out of this behavior by passing the ignoreFallback prop.
Props
);
}
================================================
FILE: apps/docs/src/pages/component-docs/data-display/image/snippets.ts
================================================
const importComponent = `import { Image } from "@hope-ui/solid"`;
const basicUsage = ``;
const size = ``;
const borderRadius = ``;
const fallbackSupport = ``;
export const snippets = {
importComponent,
basicUsage,
size,
borderRadius,
fallbackSupport,
};
================================================
FILE: apps/docs/src/pages/component-docs/data-display/kbd/index.tsx
================================================
import { Kbd, ListItem, Text, UnorderedList } from "@hope-ui/solid";
import Prism from "prismjs";
import { onMount } from "solid-js";
import Code from "@/components/Code";
import CodeSnippet from "@/components/CodeSnippet";
import { ContextualNavLink } from "@/components/ContextualNav";
import PageLayout from "@/components/PageLayout";
import PageTitle from "@/components/PageTitle";
import { Preview } from "@/components/Preview";
import SectionTitle from "@/components/SectionTitle";
import { snippets } from "./snippets";
export default function KbdDoc() {
const previousLink: ContextualNavLink = {
href: "/docs/data-display/image",
label: "Image",
};
const nextLink: ContextualNavLink = {
href: "/docs/data-display/list",
label: "List",
};
const contextualNavLinks: ContextualNavLink[] = [
{ href: "#import", label: "Import" },
{ href: "#usage", label: "Usage" },
{ href: "#guideline", label: "Guideline" },
{ href: "#modifier", label: "Modifier" },
];
onMount(() => {
Prism.highlightAll();
});
return (
Kbd
The keyboard key component exists to show which key or combination of keys performs a given
action. The action itself should be further explained in accompanying content. It renders a{" "}
kbd element.
ImportUsageshift + HGuideline
All shortcuts should do their best to match what appears on the user’s keyboard.
All single letters A-Z are uppercase.For non-letter keys such as enter, esc and shift, stick to lowercase.Use the arrow symbol as opposed to spelling things out.Modifier
The only punctuation you should need is the + to indicate that a
combination of keys will activate the shortcut.
shift + H
For a sequence of keys where one must follow the other, write "then" in between.
Stick to lowercase to match the non-letter keys.
shift then H
If two different keys can execute the same action or the shortcut itself may look different
on the user’s keyboard, write "or" in between.
alt or option
);
}
================================================
FILE: apps/docs/src/pages/component-docs/data-display/kbd/snippets.ts
================================================
const importComponent = `import { Kbd } from "@hope-ui/solid"`;
const basicUsage = `shift + H`;
const modifierPlus = `shift + H`;
const modifierThen = `shift then H`;
const modifierOr = `alt or option`;
export const snippets = {
importComponent,
basicUsage,
modifierPlus,
modifierThen,
modifierOr,
};
================================================
FILE: apps/docs/src/pages/component-docs/data-display/list/index.tsx
================================================
import { Anchor, List, ListIcon, ListItem, OrderedList, Text, UnorderedList } from "@hope-ui/solid";
import Prism from "prismjs";
import { Link } from "solid-app-router";
import { onMount } from "solid-js";
import Code from "@/components/Code";
import CodeSnippet from "@/components/CodeSnippet";
import { ContextualNavLink } from "@/components/ContextualNav";
import PageLayout from "@/components/PageLayout";
import PageTitle from "@/components/PageTitle";
import { Preview } from "@/components/Preview";
import { PropsTable, PropsTableItem } from "@/components/PropsTable";
import SectionSubtitle from "@/components/SectionSubtitle";
import SectionTitle from "@/components/SectionTitle";
import { IconCheck } from "@/icons/IconCheck";
import { IconCircleDashed } from "@/icons/IconCircleDashed";
import { snippets } from "./snippets";
export default function ListDoc() {
const previousLink: ContextualNavLink = {
href: "/docs/data-display/kbd",
label: "Kbd",
};
const nextLink: ContextualNavLink = {
href: "/docs/data-display/table",
label: "Table",
};
const contextualNavLinks: ContextualNavLink[] = [
{ href: "#import", label: "Import" },
{ href: "#unordered-list", label: "Unordered List" },
{ href: "#ordered-list", label: "Ordered List" },
{ href: "#unstyled-list", label: "Unstyled List with icon" },
{ href: "#props", label: "Props" },
{ href: "#list-props", label: "List props", indent: true },
{ href: "#other-components-props", label: "Other components props", indent: true },
];
const propItems: PropsTableItem[] = [
{
name: "spacing",
description: "The space between each list item.",
type: 'ResponsiveValue',
},
{
name: "styleType",
description: "Shorthand for the `list-style-type` css property.",
type: "Property.ListStyleType",
},
{
name: "stylePosition",
description: "Shorthand for the `list-style-position` css property.",
type: "Property.ListStylePosition",
},
];
onMount(() => {
Prism.highlightAll();
});
return (
ListList component is used to display list items. It renders a ul{" "}
element by default.
ImportUnordered ListClone or download repository from GitHubInstall dependencies with npmTo start development server run npm start commandRun tests to make sure your changes do not break the buildSubmit a pull request once you are doneOrdered ListClone or download repository from GitHubInstall dependencies with npmTo start development server run npm start commandRun tests to make sure your changes do not break the buildSubmit a pull request once you are doneUnstyled List with icon
Add icons to the list items by using the ListIcon component. The size of the
icon is relative to the font size of the list item.
Clone or download repository from GitHub
Install dependencies with npm
To start development server run npm start command
Run tests to make sure your changes do not break the build
Submit a pull request once you are done
PropsList propsOther components propsListItem composes{" "}
Box
{" "}
component.
ListIcon composes{" "}
Icon
{" "}
component.
);
}
================================================
FILE: apps/docs/src/pages/component-docs/data-display/list/snippets.ts
================================================
const importComponent = `import {
List,
ListItem,
ListIcon,
OrderedList,
UnorderedList,
} from "@hope-ui/solid"`;
const unorderedList = `Clone or download repository from GitHubInstall dependencies with npmTo start development server run npm start commandRun tests to make sure your changes do not break the buildSubmit a pull request once you are done`;
const orderedList = `Clone or download repository from GitHubInstall dependencies with npmTo start development server run npm start commandRun tests to make sure your changes do not break the buildSubmit a pull request once you are done`;
const unstyledListWithIcon = `
Clone or download repository from GitHub
Install dependencies with npm
To start development server run npm start command
Run tests to make sure your changes do not break the build
Submit a pull request once you are done
`;
export const snippets = {
importComponent,
unorderedList,
orderedList,
unstyledListWithIcon,
};
================================================
FILE: apps/docs/src/pages/component-docs/data-display/table/index.tsx
================================================
import { Table, TableCaption, Tbody, Td, Text, Tfoot, Th, Thead, Tr } from "@hope-ui/solid";
import Prism from "prismjs";
import { onMount } from "solid-js";
import Code from "@/components/Code";
import CodeSnippet from "@/components/CodeSnippet";
import { ContextualNavLink } from "@/components/ContextualNav";
import PageLayout from "@/components/PageLayout";
import PageTitle from "@/components/PageTitle";
import { Preview } from "@/components/Preview";
import { PropsTable, PropsTableItem } from "@/components/PropsTable";
import SectionSubtitle from "@/components/SectionSubtitle";
import SectionTitle from "@/components/SectionTitle";
import { snippets } from "./snippets";
export default function TableDoc() {
const previousLink: ContextualNavLink = {
href: "/docs/data-display/list",
label: "List",
};
const nextLink: ContextualNavLink = {
href: "/docs/data-display/tag",
label: "Tag",
};
const contextualNavLinks: ContextualNavLink[] = [
{ href: "#import", label: "Import" },
{ href: "#usage", label: "Usage" },
{ href: "#striped", label: "Striped table", indent: true },
{ href: "#dense", label: "Dense table", indent: true },
{ href: "#row-highlight", label: "Row highlight", indent: true },
{ href: "#theming", label: "Theming" },
{ href: "#props", label: "Props" },
{ href: "#table-props", label: "Table props", indent: true },
{ href: "#table-caption-props", label: "TableCaption props", indent: true },
{ href: "#th-props", label: "Th props", indent: true },
{ href: "#td-props", label: "Td props", indent: true },
];
const tablePropItems: PropsTableItem[] = [
{
name: "striped",
description: "Set a neutral background color on odd or even row of table.",
type: '"odd" | "even"',
},
{
name: "dense",
description: "If `true`, row will have less padding and smaller font size.",
type: "boolean",
},
{
name: "highlightOnHover",
description: "If `true`, row will have hover color.",
type: "boolean",
},
];
const tableCaptionPropItems: PropsTableItem[] = [
{
name: "placement",
description:
"The placement of the table caption. This sets the `caption-side` CSS attribute.",
type: '"top" | "bottom"',
defaultValue: '"bottom"',
},
];
const thPropItems: PropsTableItem[] = [
{
name: "numeric",
description: "Aligns the cell content to the right.",
type: "boolean",
},
];
const tdPropItems: PropsTableItem[] = [
{
name: "numeric",
description: "Aligns the cell content to the right.",
type: "boolean",
},
];
onMount(() => {
Prism.highlightAll();
});
return (
Table
Tables are used to organize and display data efficiently. It renders a table{" "}
element by default.
ImportUsage
Imperial to metric conversion factors
To convert
into
multiply by
inches
millimetres (mm)
25.4
feet
centimetres (cm)
30.48
yards
metres (m)
0.91444
To convert
into
multiply by
Striped table
Use the striped prop to render striped rows. You can set the value to{" "}
even or odd.
Imperial to metric conversion factors
To convert
into
multiply by
inches
millimetres (mm)
25.4
feet
centimetres (cm)
30.48
yards
metres (m)
0.91444
To convert
into
multiply by
Dense table
Use the dense prop to reduce the table size.
Imperial to metric conversion factors
To convert
into
multiply by
inches
millimetres (mm)
25.4
feet
centimetres (cm)
30.48
yards
metres (m)
0.91444
To convert
into
multiply by
Row highlight
Use the highlightOnHover prop to highlight row on hover.
Imperial to metric conversion factors
To convert
into
multiply by
inches
millimetres (mm)
25.4
feet
centimetres (cm)
30.48
yards
metres (m)
0.91444
To convert
into
multiply by
ThemingTable base styles and default props can be overridden in the Hope UI theme
configuration like below:
PropsTable propsTableCaption propsTh propsTd props
);
}
================================================
FILE: apps/docs/src/pages/component-docs/data-display/table/snippets.ts
================================================
const importComponent = `import {
Table,
TableCaption,
Thead,
Tbody,
Tfoot,
Tr,
Th,
Td
} from "@hope-ui/solid"`;
const basicUsage = `
Imperial to metric conversion factors
To convert
into
multiply by
inches
millimetres (mm)
25.4
feet
centimetres (cm)
30.48
yards
metres (m)
0.91444
To convert
into
multiply by
`;
const striped = `
Imperial to metric conversion factors
To convert
into
multiply by
inches
millimetres (mm)
25.4
feet
centimetres (cm)
30.48
yards
metres (m)
0.91444
To convert
into
multiply by
`;
const dense = `
Imperial to metric conversion factors
To convert
into
multiply by
inches
millimetres (mm)
25.4
feet
centimetres (cm)
30.48
yards
metres (m)
0.91444
To convert
into
multiply by
`;
const highlightOnHover = `
Imperial to metric conversion factors
To convert
into
multiply by
inches
millimetres (mm)
25.4
feet
centimetres (cm)
30.48
yards
metres (m)
0.91444
To convert
into
multiply by
`;
const theming = `const config: HopeThemeConfig = {
components: {
Table: {
baseStyle: {
root: SystemStyleObject,
caption: SystemStyleObject,
thead: SystemStyleObject,
tbody: SystemStyleObject,
tfoot: SystemStyleObject,
tr: SystemStyleObject,
th: SystemStyleObject,
td: SystemStyleObject,
},
defaultProps: {
root: TableOptions,
caption: ThemeableTableCaptionOptions,
}
}
}
}`;
export const snippets = {
importComponent,
basicUsage,
striped,
dense,
highlightOnHover,
theming,
};
================================================
FILE: apps/docs/src/pages/component-docs/data-display/tag/index.tsx
================================================
import {
hope,
HStack,
Tag,
TagCloseButton,
TagLabel,
TagLeftIcon,
TagProps,
TagRightIcon,
Text,
VStack,
} from "@hope-ui/solid";
import Prism from "prismjs";
import { For, onMount } from "solid-js";
import Code from "@/components/Code";
import CodeSnippet from "@/components/CodeSnippet";
import { ContextualNavLink } from "@/components/ContextualNav";
import PageLayout from "@/components/PageLayout";
import PageTitle from "@/components/PageTitle";
import { Preview } from "@/components/Preview";
import { PropsTable, PropsTableItem } from "@/components/PropsTable";
import SectionSubtitle from "@/components/SectionSubtitle";
import SectionTitle from "@/components/SectionTitle";
import { IconGear } from "@/icons/IconGear";
import { IconPlus } from "@/icons/IconPlus";
import { snippets } from "./snippets";
export default function TagDoc() {
const previousLink: ContextualNavLink = {
href: "/docs/data-display/table",
label: "Table",
};
const nextLink: ContextualNavLink = {
href: "/docs/navigation/anchor",
label: "Anchor",
};
const contextualNavLinks: ContextualNavLink[] = [
{ href: "#import", label: "Import" },
{ href: "#usage", label: "Usage" },
{ href: "#colors", label: "Tag colors", indent: true },
{ href: "#sizes", label: "Tag sizes", indent: true },
{ href: "#variants", label: "Tag variants", indent: true },
{ href: "#with-icon", label: "Tag with icon", indent: true },
{ href: "#with-close-button", label: "Tag with close button", indent: true },
{ href: "#theming", label: "Theming" },
{ href: "#props", label: "Props" },
];
const propItems: PropsTableItem[] = [
{
name: "variant",
description: "The visual style of the tag.",
type: '"solid" | "subtle" | "outline" | "dot"',
defaultValue: '"subtle"',
},
{
name: "colorScheme",
description: "The color of the tag.",
type: '"primary" | "accent" | "neutral" | "success" | "info" | "warning" | "danger"',
defaultValue: '"neutral"',
},
{
name: "size",
description: "The size of the tag.",
type: '"sm" | "md" | "lg"',
defaultValue: '"md"',
},
{
name: "dotPlacement",
description: "Determines the placement of the dot when `variant` is `dot`.",
type: '"start" | "end"',
defaultValue: '"start"',
},
];
onMount(() => {
Prism.highlightAll();
});
return (
TagTag component is used for items that need to be labeled, categorized, or
organized using keywords that describe them.
ImportTag: The wrapper for all the tag elements.
TagLabel: The label for tag's text content.
TagLeftIcon: The icon placed on the left side of the tag.
TagRightIcon: The icon placed on the right side of the tag.
TagCloseButton: The close button for the tag.
UsageSample TagTag colors
Use the colorScheme prop to change the color of the Tag You can set the value
to primary, accent, neutral, success,{" "}
info, warning or danger.
TagTagTagTagTagTagTagTag sizes
Use the size prop to change the size of the Tag You can set the value to{" "}
sm, md or lg.
TagTagTagTag variants
Use the variant prop to change the visual style of the Tag You can set the
value to solid, subtle, outline or dot.
TagTagTag
Tag
Tag
Overview of all color and variant combination:
{variant => (
{colorScheme => (
Tag
)}
)}
Tag with icon
You can add left and right icons to the Tag component using the TagLeftIcon and{" "}
TagRightIcon components respectively.
TagTagTagTagTagTagTag with close button
Use the TagCloseButton component to add a close button to the Tag
TagTagTagThemingTag base styles and default props can be overridden in the Hope UI theme
configuration like below:
Props
);
}
================================================
FILE: apps/docs/src/pages/component-docs/data-display/tag/snippets.ts
================================================
const importComponent = `import {
Tag,
TagCloseButton,
TagLabel,
TagLeftIcon,
TagRightIcon,
} from "@hope-ui/solid"`;
const basicUsage = `Sample Tag`;
const colors = `TagTagTagTagTagTagTag`;
const sizes = `TagTagTag`;
const variants = `TagTagTagTagTag`;
const withLeftIcon = `TagTagTag`;
const withRightIcon = `TagTagTag`;
const withCloseButton = `TagTagTag`;
const theming = `const config: HopeThemeConfig = {
components: {
Tag: {
baseStyle: {
root: SystemStyleObject,
icon: SystemStyleObject,
label: SystemStyleObject,
closeButton: SystemStyleObject,
},
defaultProps: {
root: ThemeableTagOptions,
}
}
}
}`;
export const snippets = {
importComponent,
basicUsage,
colors,
sizes,
variants,
withLeftIcon,
withRightIcon,
withCloseButton,
theming,
};
================================================
FILE: apps/docs/src/pages/component-docs/data-entry/checkbox/index.tsx
================================================
import {
Center,
Checkbox,
CheckboxGroup,
CheckboxPrimitive,
CheckboxPrimitiveIndicator,
css,
HStack,
ListItem,
Text,
UnorderedList,
VStack,
} from "@hope-ui/solid";
import Prism from "prismjs";
import { createSignal, For, onMount } from "solid-js";
import Code from "@/components/Code";
import CodeSnippet from "@/components/CodeSnippet";
import { ContextualNavLink } from "@/components/ContextualNav";
import PageLayout from "@/components/PageLayout";
import PageTitle from "@/components/PageTitle";
import { Preview } from "@/components/Preview";
import { PropsTable, PropsTableItem } from "@/components/PropsTable";
import SectionSubtitle from "@/components/SectionSubtitle";
import SectionTitle from "@/components/SectionTitle";
import { IconCheck } from "@/icons/IconCheck";
import { IconPlus } from "@/icons/IconPlus";
import { IconQuestionMark } from "@/icons/IconQuestionMark";
import { snippets } from "./snippets";
const checkboxRootStyles = css({
rounded: "$md",
border: "1px solid $neutral7",
shadow: "$sm",
bg: "$loContrast",
px: "$4",
py: "$3",
w: "$full",
cursor: "pointer",
_focus: {
borderColor: "$info7",
shadow: "0 0 0 3px $colors$info5",
},
_checked: {
borderColor: "transparent",
bg: "#0c4a6e",
color: "white",
},
});
const checkboxIndicatorStyles = css({
rounded: "$sm",
border: "1px solid $neutral7",
bg: "$whiteAlpha7",
boxSize: "$5",
_groupChecked: {
borderColor: "transparent",
},
});
export default function CheckboxDoc() {
const preferences = [
{
id: 1,
name: "Comments",
description: "Get notified when someones posts a comment on a posting.",
},
{
id: 2,
name: "Candidates",
description: "Get notified when a candidate applies for a job.",
},
{
id: 3,
name: "Offers",
description: "Get notified when a candidate accepts or rejects an offer.",
},
];
const previousLink: ContextualNavLink = {
href: "/docs/typography/text",
label: "Text",
};
const nextLink: ContextualNavLink = {
href: "/docs/data-entry/form-control",
label: "FormControl",
};
const contextualNavLinks: ContextualNavLink[] = [
{ href: "#import", label: "Import" },
{ href: "#usage", label: "Usage" },
{ href: "#colors", label: "Checkbox colors", indent: true },
{ href: "#sizes", label: "Checkbox sizes", indent: true },
{ href: "#variants", label: "Checkbox variants", indent: true },
{ href: "#label-placement", label: "Checkbox label placement", indent: true },
{ href: "#disabled", label: "Disabled state", indent: true },
{ href: "#invalid", label: "Invalid state", indent: true },
{ href: "#indeterminate", label: "Indeterminate state", indent: true },
{ href: "#custom-icon", label: "Custom icon", indent: true },
{ href: "#checkbox-group", label: "CheckboxGroup", indent: true },
{ href: "#headless-api", label: "Headless API" },
{ href: "#theming", label: "Theming" },
{ href: "#props", label: "Props" },
{ href: "#checkbox-primitive-props", label: "CheckboxPrimitive props", indent: true },
{ href: "#checkbox-props", label: "Checkbox props", indent: true },
{ href: "#checkbox-group-props", label: "CheckboxGroup props", indent: true },
];
const checkboxPrimitivePropItems: PropsTableItem[] = [
{
name: "id",
description: "The id to be passed to the internal tag.",
type: "string",
},
{
name: "name",
description: "The name of the input field in a checkbox (Useful for form submission).",
type: "string",
},
{
name: "value",
description:
"The value to be used in the checkbox input. This is the value that will be returned on form submission.",
type: "string | number",
},
{
name: "checked",
description:
"If `true`, the checkbox will be checked. You'll need to pass `onChange` to update its value (since it is now controlled).",
type: "boolean",
},
{
name: "defaultChecked",
description: "If `true`, the checkbox will be initially checked.",
type: "boolean",
},
{
name: "indeterminate",
description:
"If `true`, the checkbox will be indeterminate. This only affects the icon shown inside checkbox and does not modify the checked property.",
type: "boolean",
},
{
name: "required",
description:
"If `true`, the checkbox is marked as required, and `required` attribute will be added",
type: "boolean",
},
{
name: "disabled",
description: "If `true`, the checkbox will be disabled.",
type: "boolean",
},
{
name: "invalid",
description: "If `true`, the checkbox will have `aria-invalid` set to `true`.",
type: "boolean",
},
{
name: "readOnly",
description: "If `true`, the checkbox will be readonly.",
type: "boolean",
},
{
name: "children",
description:
"The children of the checkbox. If used as a render props, the internal state will be passed.",
type: "JSX.Element | (props: { state: Accessor }) => JSX.Element",
},
{
name: "onChange",
description: "The callback invoked when the checked state of the `Checkbox` changes.",
type: "JSX.EventHandlerUnion",
},
{
name: "onFocus",
description: "The callback invoked when the checkbox is focused.",
type: "JSX.EventHandlerUnion",
},
{
name: "onBlur",
description: "The callback invoked when the checkbox is blurred (loses focus).",
type: "JSX.EventHandlerUnion",
},
];
const checkboxPropItems: PropsTableItem[] = [
{
name: "variant",
description: "The visual style of the checkbox.",
type: '"outline" | "filled"',
defaultValue: '"outline"',
},
{
name: "colorScheme",
description: "The color of the checkbox.",
type: '"primary" | "accent" | "neutral" | "success" | "info" | "warning" | "danger"',
defaultValue: '"primary"',
},
{
name: "size",
description: "The size of the checkbox.",
type: '"sm" | "md" | "lg"',
defaultValue: '"md"',
},
{
name: "labelPlacement",
description: "The placement of the checkbox label.",
type: '"start" | "end"',
defaultValue: '"end"',
},
{
name: "iconChecked",
description: "The icon to use when the checkbox is checked.",
type: "JSX.Element",
},
{
name: "iconIndeterminate",
description: "The icon to use when the checkbox is in indeterminate state.",
type: "JSX.Element",
},
{
name: "children",
description: "The children of the checkbox.",
type: "JSX.Element",
},
];
const checkboxGroupPropItems: PropsTableItem[] = [
{
name: "variant",
description: "The visual style of the checkboxes.",
type: '"outline" | "filled"',
defaultValue: '"outline"',
},
{
name: "colorScheme",
description: "The color of the checkboxes.",
type: '"primary" | "accent" | "neutral" | "success" | "info" | "warning" | "danger"',
defaultValue: '"primary"',
},
{
name: "size",
description: "The size of the checkboxes.",
type: '"sm" | "md" | "lg"',
defaultValue: '"md"',
},
{
name: "labelPlacement",
description: "The placement of the checkboxes labels.",
type: '"start" | "end"',
defaultValue: '"end"',
},
{
name: "name",
description: "The `name` attribute forwarded to each `checkbox` element.",
type: "string",
},
{
name: "value",
description: "The value of the checkbox group (in controlled mode).",
type: "(string | number)[]",
},
{
name: "defaultValue",
description: "The initial value of the checkbox group (in uncontrolled mode).",
type: "(string | number)[]",
},
{
name: "required",
description:
"If `true`, all wrapped checkbox inputs will be marked as required, and `required` attribute will be added.",
type: "boolean",
},
{
name: "disabled",
description: "If `true`, all wrapped checkbox inputs will be disabled.",
type: "boolean",
},
{
name: "invalid",
description: "If `true`, all wrapped checkbox inputs will have `aria-invalid` set to `true`.",
type: "boolean",
},
{
name: "readOnly",
description: "If `true`, all wrapped checkbox inputs will be readonly.",
type: "boolean",
},
{
name: "onChange",
description: "The callback invoked when a checkbox is checked.",
type: "(value: (string | number)[]) => void",
},
];
const [checkedItems, setCheckedItems] = createSignal([false, false]);
const allChecked = () => checkedItems().every(Boolean);
const isIndeterminate = () => checkedItems().some(Boolean) && !allChecked();
onMount(() => {
Prism.highlightAll();
});
return (
Checkbox
The Checkbox component is used in forms when a user needs to select multiple
values from several options.
ImportCheckboxPrimitive: Unstyled component containing all the parts of a
checkbox. It renders a label and a visualy hidden input with
type set to checkbox.
CheckboxPrimitiveIndicator: Unstyled component rendered when the{" "}
CheckboxPrimitive is in a checked or indeterminate{" "}
state.
Checkbox: The Hope UI styled checkbox component based on{" "}
CheckboxPrimitive.
CheckboxGroup: Component to help manage the checked state of its children{" "}
Checkbox components and conveniently pass a few shared style props to each.
UsageCheckboxCheckbox colors
Use the colorScheme prop to change the color of the Checkbox. You can set the
value to primary, accent, neutral,{" "}
success, info, warning or danger.
Checkbox sizes
Use the size prop to change the size of the Checkbox. You can set the value to{" "}
sm, md or lg.
Checkbox
Checkbox
Checkbox
Checkbox variants
Use the variant prop to change the visual style of the Checkbox. You can set
the value to outline or filled.
CheckboxCheckboxCheckbox label placement
Use the labelPlacement prop to change the placement of the label. You can set
the value to start or end.
CheckboxCheckboxDisabled state
Use the disabled prop to disable the Checkbox.
Checkbox
Checkbox
Checkbox
Invalid state
Use the invalid prop to mark the Checkbox as invalid.
Checkbox
Checkbox
Checkbox
Indeterminate state
Use the indeterminate prop to mark the Checkbox as indeterminate.
setCheckedItems([
(e.target as HTMLInputElement).checked,
(e.target as HTMLInputElement).checked,
])
}
>
Parent Checkbox
setCheckedItems([(e.target as HTMLInputElement).checked, checkedItems()[1]])
}
>
Child Checkbox 1
setCheckedItems([checkedItems()[0], (e.target as HTMLInputElement).checked])
}
>
Child Checkbox 2
Custom icon
Use the iconChecked and iconIndeterminate prop on{" "}
CheckboxControl to change the Checkbox icon.
}>
Checkbox
}>
Checkbox
CheckboxGroup
You can use the CheckboxGroup component to manage the checked state of related{" "}
Checkbox components and conveniently pass a few shared style props to each. See
the props table at the bottom of this page for a list of the shared styling props.
LuffyZoroSanji{" "}
Headless API
Use the unstyled CheckboxPrimitive component to achieve your desired design.
You can pair it with your styling solution of choice. The below example uses style props and
the css function.
{preference => (
{preference.name}
{preference.description}
)}
ThemingCheckbox base styles and default props can be overridden in the Hope UI theme
configuration like below:
PropsCheckboxPrimitive propsCheckbox propsCheckbox composes the CheckboxPrimitive component, so you can pass
all its props. These are props specific to the Checkbox component:
CheckboxGroup props
);
}
================================================
FILE: apps/docs/src/pages/component-docs/data-entry/checkbox/snippets.ts
================================================
const importComponent = `import {
CheckboxPrimitive,
CheckboxPrimitiveIndicator,
Checkbox,
CheckboxGroup
} from "@hope-ui/solid"`;
const basicUsage = `Checkbox`;
const checkboxColors = ``;
const checkboxSizes = `CheckboxCheckboxCheckbox`;
const checkboxVariants = `CheckboxCheckbox`;
const checkboxLabelPlacement = `CheckboxCheckbox`;
const checkboxDisabled = `CheckboxCheckboxCheckbox`;
const checkboxInvalid = `CheckboxCheckboxCheckbox`;
const checkboxIndeterminate = `function IndeterminateExample() {
const [checkedItems, setCheckedItems] = createSignal([false, false]);
const allChecked = () => checkedItems().every(Boolean);
const isIndeterminate = () => checkedItems().some(Boolean) && !allChecked();
return (
<>
setCheckedItems([e.target.checked, e.target.checked])}
>
Parent Checkbox
setCheckedItems([e.target.checked, checkedItems()[1]])}
>
Child Checkbox 1
setCheckedItems([checkedItems()[0], e.target.checked])}
>
Child Checkbox 2
)
}`;
const checkboxCustomIcon = `}>
Checkbox
}>
Checkbox
`;
const checkboxGroup = `LuffyZoroSanji`;
const headless = `import { css } from "@hope-ui/solid"
const checkboxRootStyles = css({
rounded: "$md",
border: "1px solid $neutral7",
shadow: "$sm",
bg: "$loContrast",
px: "$4",
py: "$3",
w: "$full",
cursor: "pointer",
_focus: {
borderColor: "$info7",
shadow: "0 0 0 3px $colors$info5",
},
_checked: {
borderColor: "transparent",
bg: "#0c4a6e",
color: "white",
},
});
const checkboxIndicatorStyles = css({
rounded: "$sm",
border: "1px solid $neutral7",
bg: "$whiteAlpha7",
boxSize: "$5",
_groupChecked: {
borderColor: "transparent",
},
});
function HeadlessExample() {
const preferences = [
{
id: 1,
name: "Comments",
description: "Get notified when someones posts a comment on a posting.",
},
{
id: 2,
name: "Candidates",
description: "Get notified when a candidate applies for a job.",
},
{
id: 3,
name: "Offers",
description: "Get notified when a candidate accepts or rejects an offer.",
},
];
return (
{preference => (
{preference.name}
{preference.description}
)}
);
}`;
const theming = `const config: HopeThemeConfig = {
components: {
Checkbox: {
baseStyle: {
root: SystemStyleObject,
group: SystemStyleObject,
control: SystemStyleObject,
label: SystemStyleObject,
},
defaultProps: {
root: ThemeableCheckboxOptions,
group: ThemeableCheckboxOptions,
}
}
}
}`;
export const snippets = {
importComponent,
basicUsage,
checkboxColors,
checkboxSizes,
checkboxVariants,
checkboxLabelPlacement,
checkboxDisabled,
checkboxInvalid,
checkboxIndeterminate,
checkboxCustomIcon,
checkboxGroup,
headless,
theming,
};
================================================
FILE: apps/docs/src/pages/component-docs/data-entry/form-control/felte-example.tsx
================================================
import { createForm } from "@felte/solid";
import { validator } from "@felte/validator-yup";
import {
Button,
Checkbox,
FormControl,
FormErrorMessage,
FormHelperText,
FormLabel,
HStack,
Input,
Radio,
RadioGroup,
SimpleOption,
SimpleSelect,
Textarea,
VStack,
} from "@hope-ui/solid";
import { For, Show } from "solid-js";
import type { InferType } from "yup";
import { boolean, mixed, object, string } from "yup";
const schema = object({
email: string().email().required(),
jobTitle: string().required(),
gender: mixed().oneOf(["male", "female", "other"]).required(),
bio: string().max(30),
subscribe: boolean(),
});
export function FelteExample() {
const { form, errors, data, isValid, setFields } = createForm>({
extend: validator({ schema }),
onSubmit: values => {
console.log(values);
},
});
return (
Email{errors("email")[0]}Job title setFields("jobTitle", value)}
>
{item => {item}}
{errors("jobTitle")[0]}GenderMaleFemaleOther{errors("gender")[0]}Bio
{data("bio")?.length ?? 0}/30
}
>
{errors("bio")[0]}Subscribe to the newsletter
);
}
================================================
FILE: apps/docs/src/pages/component-docs/data-entry/form-control/index.tsx
================================================
import {
Alert,
AlertDescription,
Anchor,
FormControl,
FormErrorMessage,
FormHelperText,
FormLabel,
HStack,
Input,
ListItem,
Radio,
RadioGroup,
SimpleOption,
SimpleSelect,
Text,
UnorderedList,
} from "@hope-ui/solid";
import Prism from "prismjs";
import { createSignal, JSX, onMount, Show } from "solid-js";
import Code from "@/components/Code";
import CodeSnippet from "@/components/CodeSnippet";
import { ContextualNavLink } from "@/components/ContextualNav";
import PageLayout from "@/components/PageLayout";
import PageTitle from "@/components/PageTitle";
import { Preview } from "@/components/Preview";
import { PropsTable, PropsTableItem } from "@/components/PropsTable";
import SectionSubtitle from "@/components/SectionSubtitle";
import SectionTitle from "@/components/SectionTitle";
import { FelteExample } from "./felte-example";
import { snippets } from "./snippets";
export default function FormControlDoc() {
const [invalidInput, setInvalidInput] = createSignal("");
const handleInvalidInput: JSX.EventHandlerUnion = event => {
setInvalidInput((event.target as HTMLInputElement).value);
};
const isInvalid = () => invalidInput() === "";
const previousLink: ContextualNavLink = {
href: "/docs/data-entry/checkbox",
label: "Checkbox",
};
const nextLink: ContextualNavLink = {
href: "/docs/data-entry/input",
label: "Input",
};
const contextualNavLinks: ContextualNavLink[] = [
{ href: "#import", label: "Import" },
{ href: "#usage", label: "Usage" },
{ href: "#required-field", label: "Requied field", indent: true },
{ href: "#disabled-field", label: "Disabled field", indent: true },
{ href: "#invalid-field", label: "Invalid field", indent: true },
{
href: "#usage-with-radio-or-checkbox-group",
label: "Usage with radio or checkbox group",
indent: true,
},
{ href: "#usage-with-select", label: "Usage with select", indent: true },
{ href: "#usage-with-form-libraries", label: "Usage with form libraries" },
{ href: "#accessibility", label: "Accessibility" },
{ href: "#theming", label: "Theming" },
{ href: "#props", label: "Props" },
];
const propItems: PropsTableItem[] = [
{
name: "id",
description:
"The custom `id` to use for the form control. This is passed directly to the form element (e.g, Input).",
type: "string",
},
{
name: "required",
description:
"If `true`, the form control will be required. The form element (e.g, Input) will have `aria-required` set to `true`.",
type: "boolean",
},
{
name: "disabled",
description:
"If `true`, the form control will be disabled. The `FormLabel` will have `data-disabled` attribute. The form element (e.g, Input) will be disabled.",
type: "boolean",
},
{
name: "invalid",
description:
"If `true`, the form control will be invalid. The `FormLabel` and `FormErrorMessage` will have `data-invalid` set to `true`. The form element (e.g, Input) will have `aria-invalid` set to `true`.",
type: "boolean",
},
{
name: "readOnly",
description: "If `true`, the form control will be readonly.",
type: "boolean",
},
];
onMount(() => {
Prism.highlightAll();
});
return (
FormControl
FormControl provides context such as required, disabled and{" "}
invalid to form elements. It follows the{" "}
WAI specifications
{" "}
for forms.
ImportFormControl: The wrapper that provides context and functionality for all
children.
FormLabel: The label of a form section. The usage is similar to html
label.
FormHelperText: The message that tells users more details about the form
section.
FormErrorMessage: The message that shows up when an error occurs.
UsageEmail addressWe'll never share your email.Required field
Use the required prop to make the form control required. The Input field will
have aria-required set to true, and the FormLabel{" "}
will show a red asterisk.
Email addressWe'll never share your email.Disabled field
Use the disabled prop to make the form control disabled.
Email addressWe'll never share your email.Invalid field
Use the invalid prop to make the form control invalid. the{" "}
FormErrorMessage will only show up when the invalid prop is true.
Email address
Enter the email you'd like to receive the newsletter on.
}
>
Email is required.
Usage with radio or checkbox group
Choose a frameworkReact
Angular
VueSvelteSolidYou should choose Solid.Usage with selectChoose a frameworkReact
Angular
VueSvelteSolidYou should choose Solid.
You can also use the more composable Select component instead of{" "}
SimpleSelect.
Usage with form libraries
The below example demonstrate the use of FormControl and others Hope UI form
related components with the{" "}
@felte/solid
{" "}
form library paired with{" "}
yup
{" "}
for object schema validation.
Accessibilityid passed to the form control will be passed to the input directly.
FormLabel will have for pointing to the id of the
input.
The input will have aria-describedby pointing to the id of the{" "}
FormHelperText.
When the field is invalid, the input will have aria-invalid set to{" "}
true and aria-describedby pointing to the id of the{" "}
FormErrorMessage first.
required, disabled, invalid and{" "}
readOnly props passed to FormControl will cascade across all
related components.
FormLabel is aware of the disabled, focused and{" "}
invalid state of the input. This helps you style the label accordingly using
the _disabled, _focus, and _invalid style props.
FormErrorMessage only renders if invalid is set to{" "}
true.
ThemingFormControl base styles and default props can be overridden in the Hope UI
theme configuration like below:
Props
);
}
================================================
FILE: apps/docs/src/pages/component-docs/data-entry/form-control/snippets.ts
================================================
const importComponent = `import {
FormControl,
FormLabel,
FormErrorMessage,
FormHelperText,
} from "@hope-ui/solid"`;
const basicUsage = `Email addressWe'll never share your email.`;
const required = `Email addressWe'll never share your email.`;
const disabled = `Email addressWe'll never share your email.`;
const invalid = `function InvalidFieldExample() {
const [value, setValue] = createSignal("")
const handleInput = (e) => setValue(e.target.value)
const isInvalid = () => value() === ""
return (
Email address
Enter the email you'd like to receive the newsletter on.
}
>
Email is required.
)
}`;
const withRadioGroup = `Choose a frameworkReactAngularVueSvelteSolidYou should choose Solid.`;
const withSelect = `Choose a frameworkReactAngularVueSvelteSolidYou should choose Solid.`;
const usageWithFormLibraries = `import { createForm } from "@felte/solid";
import { validator } from "@felte/validator-yup";
import {
Button,
Checkbox,
FormControl,
FormErrorMessage,
FormHelperText,
FormLabel,
HStack,
Input,
Radio,
RadioGroup,
SimpleOption,
SimpleSelect,
Textarea,
VStack,
} from "@hope-ui/solid";
import { For, Show } from "solid-js";
import type { InferType } from "yup";
import { boolean, mixed, object, string } from "yup";
const schema = object({
email: string().email().required(),
jobTitle: string().required(),
gender: mixed().oneOf(["male", "female", "other"]).required(),
bio: string().max(30),
subscribe: boolean(),
});
export function FelteExample() {
const {
form,
errors,
data,
isValid,
setFields
} = createForm>({
extend: validator({ schema }),
onSubmit: values => {
console.log(values);
},
});
return (
Email{errors("email")[0]}Job title setFields("jobTitle", value)}
>
{item => {item}}
{errors("jobTitle")[0]}GenderMaleFemaleOther{errors("gender")[0]}Bio
{data("bio")?.length ?? 0}/30
}
>
{errors("bio")[0]}Subscribe to the newsletter
);
}`;
const theming = `const config: HopeThemeConfig = {
components: {
FormControl: {
baseStyle: {
root: SystemStyleObject,
label: SystemStyleObject,
helperText: SystemStyleObject,
errorMessage: SystemStyleObject,
},
defaultProps: {
label: FormLabelOptions
}
}
}
}`;
export const snippets = {
importComponent,
basicUsage,
required,
disabled,
invalid,
withRadioGroup,
withSelect,
usageWithFormLibraries,
theming,
};
================================================
FILE: apps/docs/src/pages/component-docs/data-entry/input/index.tsx
================================================
import {
Input,
InputGroup,
InputLeftAddon,
InputLeftElement,
InputRightAddon,
InputRightElement,
Text,
VStack,
} from "@hope-ui/solid";
import Prism from "prismjs";
import { createSignal, onMount } from "solid-js";
import Code from "@/components/Code";
import CodeSnippet from "@/components/CodeSnippet";
import { ContextualNavLink } from "@/components/ContextualNav";
import PageLayout from "@/components/PageLayout";
import PageTitle from "@/components/PageTitle";
import { Preview } from "@/components/Preview";
import { PropsTable, PropsTableItem } from "@/components/PropsTable";
import SectionSubtitle from "@/components/SectionSubtitle";
import SectionTitle from "@/components/SectionTitle";
import { IconCheck } from "@/icons/IconCheck";
import { IconPhone } from "@/icons/IconPhone";
import { snippets } from "./snippets";
export default function InputDoc() {
const [value, setValue] = createSignal("");
const handleInput = (event: Event) => setValue((event.target as HTMLInputElement).value);
const previousLink: ContextualNavLink = {
href: "/docs/data-entry/form-control",
label: "FormControl",
};
const nextLink: ContextualNavLink = {
href: "/docs/data-entry/radio",
label: "Radio",
};
const contextualNavLinks: ContextualNavLink[] = [
{ href: "#import", label: "Import" },
{ href: "#usage", label: "Usage" },
{ href: "#sizes", label: "Input sizes", indent: true },
{ href: "#variants", label: "Input variants", indent: true },
{ href: "#addons", label: "Input addons", indent: true },
{ href: "#elements", label: "Input elements", indent: true },
{ href: "#disabled", label: "Disabled state", indent: true },
{ href: "#invalid", label: "Invalid state", indent: true },
{ href: "#controlled", label: "Controlled input", indent: true },
{ href: "#theming", label: "Theming" },
{ href: "#props", label: "Props" },
{ href: "#input-props", label: "Input props", indent: true },
{ href: "#input-group-props", label: "InputGroup props", indent: true },
];
const inputPropItems: PropsTableItem[] = [
{
name: "variant",
description: "The visual style of the input.",
type: '"outline" | "filled" | "unstyled"',
defaultValue: '"outline"',
},
{
name: "size",
description: "The size of the input.",
type: '"xs" | "sm" | "md" | "lg"',
defaultValue: '"md"',
},
{
name: "required",
description:
"If `true`, the input is marked as required, and `required` attribute will be added",
type: "boolean",
},
{
name: "disabled",
description: "If `true`, the input will be disabled.",
type: "boolean",
},
{
name: "invalid",
description: "If `true`, the input will have `aria-invalid` set to `true`.",
type: "boolean",
},
{
name: "readOnly",
description: "If `true`, the input will be readonly.",
type: "boolean",
},
{
name: "htmlSize",
description: "The native HTML `size` attribute to be passed to the `input`.",
type: "string | number",
},
];
const inputGroupPropItems: PropsTableItem[] = [
{
name: "variant",
description: "The visual style of the input.",
type: '"outline" | "filled" | "unstyled"',
defaultValue: '"outline"',
},
{
name: "size",
description: "The size of the input.",
type: '"xs" | "sm" | "md" | "lg"',
defaultValue: '"md"',
},
];
onMount(() => {
Prism.highlightAll();
});
return (
Input
The Input component is a component that is used to get user input in a text
field.
ImportUsageInput sizes
Use the size prop to change the size of the Input. You can set the value to{" "}
xs, sm, md or lg.
If you want to use the native DOM size attribute you can use the{" "}
htmlSize prop. For it to work as expected you will also need to provide the{" "}
width prop set to auto.
Input variants
Use the variant prop to change the visual style of the Input. You can set the
value to outline, filled or unstyled.
Input addons
You can add addons to the left and right of the Input component. Hope UI
exports InputGroup, InputLeftAddon and{" "}
InputRightAddon to help with this use case.
+234https://.comInput elements
In some scenarios, you might need to add an icon or button inside the input component. Hope
UI exports InputLeftElement and InputRightElement to help with
this use case.
If the left or right is an icon or text, you can pass pointerEvents="none" to{" "}
InputLeftElement or InputRightElement to ensure that clicking on
them focused the input.
$
Disabled state
Use the disabled prop to disable the Input.
Invalid state
Use the invalid prop to mark the Input as invalid.
Controlled inputValue: {value()}ThemingInput base styles and default props can be overridden in the Hope UI theme
configuration like below:
PropsInput propsInputGroup props
);
}
================================================
FILE: apps/docs/src/pages/component-docs/data-entry/input/snippets.ts
================================================
const importComponent = `import {
Input,
InputGroup,
InputLeftAddon,
InputLeftElement,
InputRightAddon,
InputRightElement,
} from "@hope-ui/solid"`;
const basicUsage = ``;
const inputSizes = ``;
const inputDomSize = ``;
const inputVariants = ``;
const inputAddons = `+234
{/*
* If you add the size prop to \`InputGroup\`,
* it'll pass it to all its children.
*/}
https://.com`;
const inputElements = `
$
`;
const inputDisabled = ``;
const inputInvalid = ``;
const controlledInput = `function Example() {
const [value, setValue] = createSignal("");
const handleInput = event => setValue(event.target.value);
return (
<>
Value: {value()}
)
}`;
const theming = `const config: HopeThemeConfig = {
components: {
Input: {
baseStyle: {
input: SystemStyleObject,
group: SystemStyleObject,
element: SystemStyleObject,
addon: SystemStyleObject,
},
defaultProps: {
input: ThemeableInputOptions,
group: ThemeableInputGroupOptions,
}
}
}
}`;
export const snippets = {
importComponent,
basicUsage,
inputSizes,
inputDomSize,
inputVariants,
inputAddons,
inputElements,
inputDisabled,
inputInvalid,
controlledInput,
theming,
};
================================================
FILE: apps/docs/src/pages/component-docs/data-entry/radio/index.tsx
================================================
import { HStack, ListItem, Radio, RadioGroup, Text, UnorderedList } from "@hope-ui/solid";
import Prism from "prismjs";
import { onMount } from "solid-js";
import Code from "@/components/Code";
import CodeSnippet from "@/components/CodeSnippet";
import { ContextualNavLink } from "@/components/ContextualNav";
import PageLayout from "@/components/PageLayout";
import PageTitle from "@/components/PageTitle";
import { Preview } from "@/components/Preview";
import { PropsTable, PropsTableItem } from "@/components/PropsTable";
import SectionSubtitle from "@/components/SectionSubtitle";
import SectionTitle from "@/components/SectionTitle";
import { snippets } from "./snippets";
export default function RadioDoc() {
const plans = [
{
id: 1,
name: "Startup",
ram: "12GB",
cpus: "6 CPUs",
disk: "160 GB SSD disk",
},
{
id: 2,
name: "Business",
ram: "16GB",
cpus: "8 CPUs",
disk: "512 GB SSD disk",
},
{
id: 3,
name: "Enterprise",
ram: "32GB",
cpus: "12 CPUs",
disk: "1024 GB SSD disk",
},
];
const previousLink: ContextualNavLink = {
href: "/docs/data-entry/form-control",
label: "FormControl",
};
const nextLink: ContextualNavLink = {
href: "/docs/data-entry/select",
label: "Select",
};
const contextualNavLinks: ContextualNavLink[] = [
{ href: "#import", label: "Import" },
{ href: "#usage", label: "Usage" },
{ href: "#colors", label: "Radio colors", indent: true },
{ href: "#sizes", label: "Radio sizes", indent: true },
{ href: "#variants", label: "Radio variants", indent: true },
{ href: "#label-placement", label: "Radio label placement", indent: true },
{ href: "#disabled", label: "Disabled state", indent: true },
{ href: "#invalid", label: "Invalid state", indent: true },
{ href: "#name-prop", label: "Note about `name` prop", indent: true },
{ href: "#theming", label: "Theming" },
{ href: "#props", label: "Props" },
{ href: "#radio-props", label: "Radio props", indent: true },
{ href: "#radio-group-props", label: "RadioGroup props", indent: true },
];
const radioPropItems: PropsTableItem[] = [
{
name: "variant",
description: "The visual style of the radio.",
type: '"outline" | "filled"',
defaultValue: '"outline"',
},
{
name: "colorScheme",
description: "The color of the radio.",
type: '"primary" | "accent" | "neutral" | "success" | "info" | "warning" | "danger"',
defaultValue: '"primary"',
},
{
name: "size",
description: "The size of the radio.",
type: '"sm" | "md" | "lg"',
defaultValue: '"md"',
},
{
name: "labelPlacement",
description: "The placement of the radio label.",
type: '"start" | "end"',
defaultValue: '"end"',
},
{
name: "name",
description: "The name of the input field in a radio (Useful for form submission).",
type: "string",
},
{
name: "value",
description:
"The value to be used in the radio input. This is the value that will be returned on form submission.",
type: "string | number",
},
{
name: "checked",
description:
"If `true`, the radio will be checked. You'll need to pass `onChange` to update its value (since it is now controlled).",
type: "boolean",
},
{
name: "defaultChecked",
description: "If `true`, the radio will be initially checked.",
type: "boolean",
},
{
name: "required",
description:
"If `true`, the radio is marked as required, and `required` attribute will be added",
type: "boolean",
},
{
name: "disabled",
description: "If `true`, the radio will be disabled.",
type: "boolean",
},
{
name: "invalid",
description: "If `true`, the radio will have `aria-invalid` set to `true`.",
type: "boolean",
},
{
name: "readOnly",
description: "If `true`, the radio will be readonly.",
type: "boolean",
},
{
name: "children",
description:
"The children of the radio. If used as a render props, the `checked` state will be passed.",
type: "JSX.Element | (props: { checked: boolean }) => JSX.Element",
},
{
name: "onChange",
description: "The callback invoked when the checked state of the `Radio` changes.",
type: "JSX.EventHandlerUnion",
},
{
name: "onFocus",
description: "The callback invoked when the radio is focused.",
type: "JSX.EventHandlerUnion",
},
{
name: "onBlur",
description: "The callback invoked when the radio is blurred (loses focus).",
type: "JSX.EventHandlerUnion",
},
];
const radioGroupPropItems: PropsTableItem[] = [
{
name: "variant",
description: "The visual style of the radios.",
type: '"outline" | "filled"',
defaultValue: '"outline"',
},
{
name: "colorScheme",
description: "The color of the radios.",
type: '"primary" | "accent" | "neutral" | "success" | "info" | "warning" | "danger"',
defaultValue: '"primary"',
},
{
name: "size",
description: "The size of the radios.",
type: '"sm" | "md" | "lg"',
defaultValue: '"md"',
},
{
name: "labelPlacement",
description: "The placement of the radios labels.",
type: '"start" | "end"',
defaultValue: '"end"',
},
{
name: "name",
description: "The `name` attribute forwarded to each `radio` element.",
type: "string",
},
{
name: "value",
description: "The value of the radio to be `checked` (in controlled mode).",
type: "string | number",
},
{
name: "defaultValue",
description: "The value of the radio to be `checked` initially (in uncontrolled mode).",
type: "string | number",
},
{
name: "required",
description:
"If `true`, all wrapped radio inputs will be marked as required, and `required` attribute will be added.",
type: "boolean",
},
{
name: "disabled",
description: "If `true`, all wrapped radio inputs will be disabled.",
type: "boolean",
},
{
name: "invalid",
description: "If `true`, all wrapped radio inputs will have `aria-invalid` set to `true`.",
type: "boolean",
},
{
name: "readOnly",
description: "If `true`, all wrapped radio inputs will be readonly.",
type: "boolean",
},
{
name: "onChange",
description: "The callback invoked when a radio is checked.",
type: "(value: string | number) => void",
},
];
onMount(() => {
Prism.highlightAll();
});
return (
Radio
Radios are used when only one choice may be selected in a series of options.
ImportRadio: Provides context for all its children. It renders a{" "}
label and a visualy hidden input with type set to{" "}
radio.
RadioGroup: Component to help manage the checked state of its children{" "}
Radio components and conveniently pass a few shared style props to each.
UsageFirstSecondThirdRadio colors
Use the colorScheme prop to change the color of the Radio. You can set the
value to primary, accent, neutral,{" "}
success, info, warning or danger.
Radio sizes
Use the size prop to change the size of the Radio. You can set the value to{" "}
sm, md or lg.
Radio
Radio
Radio
Radio variants
Use the variant prop to change the visual style of the Radio. You can set the
value to outline or filled.
RadioRadioRadio label placement
Use the labelPlacement prop to change the placement of the label. You can set
the value to start or end.
RadioRadioDisabled state
Use the disabled prop to disable the Radio.
Radio
Radio
Radio
Invalid state
Use the invalid prop to mark the Radio as invalid.
Radio
Radio
Radio
Note about name prop
We recommend passing the name prop to the RadioGroup component,
instead of passing it to each Radio component. By default, the{" "}
name prop of the RadioGroup takes precedence.
ThemingRadio base styles and default props can be overridden in the Hope UI theme
configuration like below:
PropsRadio propsRadioGroup props
);
}
================================================
FILE: apps/docs/src/pages/component-docs/data-entry/radio/snippets.ts
================================================
const importComponent = `import { Radio, RadioGroup } from "@hope-ui/solid"`;
const basicUsage = `FirstSecondThird`;
const radioColors = ``;
const radioSizes = `RadioRadioRadio`;
const radioVariants = `RadioRadio`;
const radioLabelPlacement = `RadioRadio`;
const radioDisabled = `RadioRadioRadio`;
const radioInvalid = `RadioRadioRadio`;
const nameProp = `// Do this ✅
Radio 1Radio 2
// Don't do this ❌
Radio 2Radio 2`;
const theming = `const config: HopeThemeConfig = {
components: {
Radio: {
baseStyle: {
root: SystemStyleObject,
group: SystemStyleObject,
control: SystemStyleObject,
label: SystemStyleObject,
},
defaultProps: {
root: ThemeableRadioOptions,
group: ThemeableRadioOptions,
}
}
}
}`;
export const snippets = {
importComponent,
basicUsage,
radioColors,
radioSizes,
radioVariants,
radioLabelPlacement,
radioDisabled,
radioInvalid,
nameProp,
theming,
};
================================================
FILE: apps/docs/src/pages/component-docs/data-entry/select/index.tsx
================================================
import {
Alert,
AlertDescription,
Anchor,
Box,
Divider,
hope,
Kbd,
ListItem,
Select,
SelectContent,
SelectIcon,
SelectLabel,
SelectListbox,
SelectOptGroup,
SelectOption,
SelectOptionIndicator,
SelectOptionText,
SelectPlaceholder,
SelectProps,
SelectTrigger,
SelectValue,
SimpleOption,
SimpleSelect,
Text,
UnorderedList,
VStack,
} from "@hope-ui/solid";
import Prism from "prismjs";
import { Link } from "solid-app-router";
import { createSignal, For, onMount } from "solid-js";
import Code from "@/components/Code";
import CodeSnippet from "@/components/CodeSnippet";
import { ContextualNavLink } from "@/components/ContextualNav";
import PageLayout from "@/components/PageLayout";
import PageTitle from "@/components/PageTitle";
import { Preview } from "@/components/Preview";
import { PropsTable, PropsTableItem } from "@/components/PropsTable";
import SectionSubtitle from "@/components/SectionSubtitle";
import SectionTitle from "@/components/SectionTitle";
import { IconCaretDown } from "@/icons/IconCaretDown";
import { snippets } from "./snippets";
const frameworksWithTagline = [
{ id: 1, name: "React", tagLine: "A JavaScript library for building user interfaces" },
{ id: 2, name: "Angular", tagLine: "The modern web developer's platform" },
{ id: 3, name: "Vue", tagLine: "The progressive javaScript framework" },
{ id: 4, name: "Svelte", tagLine: "Cybernetically enhanced web apps" },
{
id: 5,
name: "Solid",
tagLine: "Simple and performant reactivity for building user interfaces",
},
];
export default function SelectDoc() {
const [controlledValue, setControlledValue] = createSignal("");
const [controlledMultiValue, setControlledMultiValue] = createSignal([]);
const previousLink: ContextualNavLink = {
href: "/docs/data-entry/radio",
label: "Radio",
};
const nextLink: ContextualNavLink = {
href: "/docs/data-entry/switch",
label: "Switch",
};
const contextualNavLinks: ContextualNavLink[] = [
{ href: "#import", label: "Import" },
{ href: "#usage", label: "Usage" },
{ href: "#sizes", label: "Trigger sizes", indent: true },
{ href: "#variants", label: "Trigger variants", indent: true },
{ href: "#disabled", label: "Disabled state", indent: true },
{ href: "#invalid", label: "Invalid state", indent: true },
{ href: "#default-value", label: "Default value", indent: true },
{ href: "#disabled-option", label: "Make an option disabled", indent: true },
{ href: "#option-group", label: "Option group", indent: true },
{ href: "#typeahead-complex-option", label: "Typeahead with complex option", indent: true },
{ href: "#controlled", label: "Controlled select", indent: true },
{ href: "#multi-select", label: "Multi select" },
{ href: "#multi-default-value", label: "Default values", indent: true },
{ href: "#multi-controlled", label: "Controlled multi-select", indent: true },
{ href: "#composition", label: "Composition" },
{ href: "#simple-select", label: "Simple select" },
{ href: "#accessibility", label: "Accessibility" },
{ href: "#theming", label: "Theming" },
{ href: "#props", label: "Props" },
{ href: "#select-props", label: "Select props", indent: true },
{ href: "#select-option-props", label: "SelectOption props", indent: true },
{ href: "#select-value-props", label: "SelectValue props", indent: true },
{ href: "#select-icon-props", label: "SelectIcon props", indent: true },
{ href: "#other-components-props", label: "Other components props", indent: true },
];
const selectPropItems: PropsTableItem[] = [
{
name: "variant",
description: "The visual style of the select trigger.",
type: '"outline" | "filled" | "unstyled"',
defaultValue: '"outline"',
},
{
name: "size",
description: "The size of the select trigger.",
type: '"xs" | "sm" | "md" | "lg"',
defaultValue: '"md"',
},
{
name: "offset",
description: "Offset between the listbox and the reference (trigger) element.",
type: "number",
},
{
name: "id",
description: "The `id` of the select.",
type: "string",
},
{
name: "multiple",
description: "If `true`, allow multi-selection.",
type: "boolean",
defaultValue: "false",
},
{
name: "value",
description: "The value of the select (in controlled mode).",
type: "string | number | (string | number)[]",
},
{
name: "defaultValue",
description: "The value of the select when initially rendered (in uncontrolled mode).",
type: "string | number | (string | number)[]",
},
{
name: "required",
description: "If `true`, the select will be required.",
type: "boolean",
},
{
name: "disabled",
description: "If `true`, the select trigger will be disabled.",
type: "boolean",
},
{
name: "invalid",
description: "If `true`, the select trigger will have `aria-invalid` set to `true`.",
type: "boolean",
},
{
name: "readOnly",
description: "If `true`, the select will be readonly.",
type: "boolean",
},
{
name: "onChange",
description: "Callback invoked when the selected value changes (in controlled mode).",
type: "(value: string | number | (string | number)[]) => void",
},
{
name: "onFocus",
description: "Callback invoked when the select trigger gain focus.",
type: "JSX.EventHandlerUnion",
},
{
name: "onBlur",
description: "Callback invoked when the select trigger loose focus.",
type: "JSX.EventHandlerUnion",
},
];
const selectOptionPropItems: PropsTableItem[] = [
{
required: true,
name: "value",
description: "The value of the option.",
type: "string | number",
},
{
name: "textValue",
description:
"Optional text used for typeahead purposes. By default the typeahead behavior will use the `.textContent` of the `SelectOption`. Use this when the content is complex, or you have non-textual content inside.",
type: "string",
},
{
name: "disabled",
description: "If `true`, the option will be disabled.",
type: "boolean",
},
];
const selectValuePropItems: PropsTableItem[] = [
{
name: "children",
description:
"A custom content to use in place of the select value. The array of selected options will be passed to the render prop.",
type: "JSX.Element | (props: { selectedOptions: SelectOptionData[] }) => JSX.Element",
},
];
const selectIconPropItems: PropsTableItem[] = [
{
name: "rotateOnOpen",
description: "If `true`, the icon will perform a 180deg rotation when the select is open",
type: "boolean",
defaultValue: "false",
},
];
onMount(() => {
Prism.highlightAll();
});
return (
SelectSelect component is a component that allows users pick a value from predefined
options. Ideally, it should be used when there are more than 5 options, otherwise you might
consider using a radio group instead.
ImportSelect: The wrapper component that provides context for all its children.
SelectTrigger: The trigger that toggles the select.
SelectPlaceholder: The component used to display a placeholder when no
option is selected.
SelectValue: The part that reflects the selected value in the trigger.
SelectTag: The component used to display a selected value in a
multi-select.
SelectTagCloseButton: The button used to remove a selected option in a
multi-select.
SelectIcon: The container for the select dropdown icon.
SelectContent: The component that pops out when the select is open.
SelectListbox: The scrolling viewport that contains all of the options.
SelectOptGroup: The component used to group multiple options.
SelectLabel: The label of an options group.
SelectOption: The component that contains a selectable option.
SelectOptionText: The textual part of the option.
SelectOptionIndicator: A visual indicator rendered when the option is
selected.
UsageTrigger sizes
Use the size prop to change the size of the SelectTrigger. You can
set the value to xs, sm, md or lg.
{(size: SelectProps["size"]) => (
)}
Trigger variants
Use the variant prop to change the visual style of the{" "}
SelectTrigger. You can set the value to outline,{" "}
filled or unstyled.
{(variant: SelectProps["variant"]) => (
)}
Disabled state
Use the disabled prop to disable the Select.
Invalid state
Use the invalid prop to mark the Select as invalid.
Default value
Use the defaultValue prop to make an option selected by default.
Make an option disabled
Use the disabled prop on SelectOption to make an option disabled.
Option group
Use the SelectOptGroup and SelectLabel to visualy group options.
Typeahead with complex option
By default the typeahead behavior will use the .textContent of the{" "}
SelectOption.
However, when the content is more complex than just a text, Use the textValue{" "}
prop on SelectOption to define which text should be used for typeahead
purposes.
Controlled select
Use the value and onChange props to control the select.
Value: {controlledValue()}Multi select
Use the multiple prop to allow multi-selection.
Default values
In a multi-select pass an array to the defaultValue prop to make some options
selected by default.
Controlled multi-select
In a multi-select value and onChange props uses arrays.
Value: {JSON.stringify(controlledMultiValue())}CompositionSelect is made up of several components that you can customize to achieve your
desired design.
Obviously, don't make ugly design like the above example 😅.
Simple select
If you don't need to customize every parts of Select and want a simpler API,
Hope UI exposes the SimpleSelect and SimpleOption components.
Those are just abstraction over the base Select component.
React
Angular
VueSvelteSolid
If you want to build your own abstraction you can look at the{" "}
SimpleSelect implementation
.
AccessibilitySelect follow the{" "}
WAI ARIA Select-Only Combobox
{" "}
design pattern.
ARIA roles and attributesSelectTrigger has role of combobox.
SelectTrigger has aria-haspopup set to listbox.
SelectTrigger has aria-controls set to the id of{" "}
SelectListbox.
SelectTrigger has aria-expanded set to true when
the listbox is displayed and false otherwise.
When the select is open, SelectTrigger has aria-activedescendant{" "}
set to the id of the active SelectOption.
SelectListbox has role of listbox.
SelectOption has role of option.
The selected SelectOption has aria-selected set to{" "}
true.
Keyboard support (closed select)enter, space , ↓ and ↑ opens the select and
move visual focus to the first option or the selected one.
home open the select and move visual focus to the first option.
end open the select and move visual focus to the last option.
In multi-select, backspace remove the last selected option.
Keyboard support (opened select)enter, space or alt + ↑ select the option and
close the select.
↓ move visual focus to the next option.
↑ move visual focus to the previous option.
home and pageup move visual focus to the first option.
end and pagedown move visual focus to the last option.
tab closes the select and moves focus to the next focusable element.
esc closes the select.
In multi-select, backspace remove the last selected option.
Typeahead behavior
Any printable characters move visual focus to the first option that matches the typed
character.
If multiple keys are typed in quick succession, visual focus moves to the first option
that matches the full string.
If the same character is typed in succession, visual focus cycles among the options
starting with that character.
ThemingSelect base styles and default props can be overridden in the Hope UI theme
configuration like below:
PropsSelect propsSelectOption propsSelectValue propsSelectIcon propsOther components props
All other components composes{" "}
Box
.
);
}
================================================
FILE: apps/docs/src/pages/component-docs/data-entry/select/snippets.ts
================================================
const importComponent = `import {
Select,
SelectTrigger,
SelectPlaceholder,
SelectValue,
SelectTag,
SelectTagCloseButton,
SelectIcon,
SelectContent,
SelectListbox,
SelectOptGroup,
SelectLabel,
SelectOption,
SelectOptionText,
SelectOptionIndicator,
} from "@hope-ui/solid"`;
const basicUsage = ``;
const triggerSizes = ``;
const triggerVariants = ``;
const disabledState = ``;
const invalidState = ``;
const defaultValue = ``;
const disabledOption = ``;
const optionGroup = ``;
const typeaheadComplexOption = `const frameworks = [
{
id: 1,
name: "React",
tagLine: "A JavaScript library for building user interfaces"
},
{
id: 2,
name: "Angular",
tagLine: "The modern web developer's platform"
},
{
id: 3,
name: "Vue",
tagLine: "The progressive javaScript framework"
},
{
id: 4,
name: "Svelte",
tagLine: "Cybernetically enhanced web apps"
},
{
id: 5,
name: "Solid",
tagLine: "Simple and performant reactivity for building user interfaces",
},
];
function ComplexTypeaheadExample() {
return (
)
}`;
const controlled = `function Example() {
const [value, setValue] = createSignal("");
return (
<>
Value: {value()}
)
}`;
const multiSelectBasicUsage = ``;
const multiSelectDefaultValues = ``;
const multiSelectControlled = `function Example() {
const [value, setValue] = createSignal([]);
return (
<>
Value: {JSON.stringify(value())}
)
}`;
const simpleSelect = `ReactAngularVueSvelteSolid`;
const composition = ``;
const theming = `const config: HopeThemeConfig = {
components: {
Select: {
baseStyle: {
trigger: SystemStyleObject
placeholder: SystemStyleObject
singleValue: SystemStyleObject
multiValue: SystemStyleObject
tag: SystemStyleObject
tagCloseButton: SystemStyleObject
icon: SystemStyleObject
content: SystemStyleObject
listbox: SystemStyleObject
optgroup: SystemStyleObject
label: SystemStyleObject
option: SystemStyleObject
optionText: SystemStyleObject
optionIndicator: SystemStyleObject
},
defaultProps: {
root: ThemeableSelectOptions
}
}
}
}`;
export const snippets = {
importComponent,
basicUsage,
triggerSizes,
triggerVariants,
disabledState,
invalidState,
defaultValue,
disabledOption,
optionGroup,
typeaheadComplexOption,
controlled,
multiSelectBasicUsage,
multiSelectDefaultValues,
multiSelectControlled,
simpleSelect,
composition,
theming,
};
================================================
FILE: apps/docs/src/pages/component-docs/data-entry/switch/index.tsx
================================================
import {
Anchor,
Box,
css,
HStack,
ListItem,
Switch,
SwitchPrimitive,
SwitchPrimitiveThumb,
Text,
UnorderedList,
VStack,
} from "@hope-ui/solid";
import Prism from "prismjs";
import { Link } from "solid-app-router";
import { onMount } from "solid-js";
import Code from "@/components/Code";
import CodeSnippet from "@/components/CodeSnippet";
import { ContextualNavLink } from "@/components/ContextualNav";
import PageLayout from "@/components/PageLayout";
import PageTitle from "@/components/PageTitle";
import { Preview } from "@/components/Preview";
import { PropsTable, PropsTableItem } from "@/components/PropsTable";
import SectionSubtitle from "@/components/SectionSubtitle";
import SectionTitle from "@/components/SectionTitle";
import { snippets } from "./snippets";
const switchRootClass = css({
display: "inline-flex",
alignItems: "center",
border: "1px solid $neutral7",
rounded: "$sm",
px: "$5",
py: "$3",
w: "$full",
cursor: "pointer",
userSelect: "none",
transition: "box-shadow 250ms",
_focus: {
borderColor: "$primary7",
shadow: "0 0 0 3px $colors$primary5",
},
});
const switchControlClass = css({
all: "unset",
width: 34,
height: 12,
backgroundColor: "$blackAlpha9",
borderRadius: "9999px",
position: "relative",
boxShadow: "0 2px 10px $colors$blackAlpha7",
transition: "background-color 250ms",
_groupChecked: {
backgroundColor: "$primary9",
},
});
const switchThumbClass = css({
display: "block",
width: 20,
height: 20,
backgroundColor: "white",
borderRadius: "9999px",
boxShadow: "0 0 2px $colors$blackAlpha7",
transition: "transform 250ms",
transform: "translate(-4px, -4px)",
willChange: "transform",
_checked: {
transform: "translate(16px, -4px)",
},
});
export default function SwitchDoc() {
const previousLink: ContextualNavLink = {
href: "/docs/data-entry/select",
label: "Select",
};
const nextLink: ContextualNavLink = {
href: "/docs/data-entry/textarea",
label: "Textarea",
};
const contextualNavLinks: ContextualNavLink[] = [
{ href: "#import", label: "Import" },
{ href: "#usage", label: "Usage" },
{ href: "#colors", label: "Switch colors", indent: true },
{ href: "#sizes", label: "Switch sizes", indent: true },
{ href: "#variants", label: "Switch variants", indent: true },
{ href: "#label-placement", label: "Switch label placement", indent: true },
{ href: "#disabled", label: "Disabled state", indent: true },
{ href: "#invalid", label: "Invalid state", indent: true },
{ href: "#headless-api", label: "Headless API" },
{ href: "#theming", label: "Theming" },
{ href: "#props", label: "Props" },
{ href: "#switch-primitive-props", label: "SwitchPrimitive props", indent: true },
{ href: "#switch-props", label: "Switch props", indent: true },
];
const switchPrimitivePropItems: PropsTableItem[] = [
{
name: "id",
description: "The id to be passed to the internal tag.",
type: "string",
},
{
name: "name",
description: "The name to be passed to the internal tag.",
type: "string",
},
{
name: "value",
description:
"The value to be used in the switch input. This is the value that will be returned on form submission.",
type: "string | number",
},
{
name: "checked",
description:
"If `true`, the switch will be checked. You'll need to pass `onChange` to update its value (since it is now controlled).",
type: "boolean",
},
{
name: "defaultChecked",
description: "If `true`, the switch will be initially checked.",
type: "boolean",
},
{
name: "required",
description:
"If `true`, the switch is marked as required, and `required` attribute will be added",
type: "boolean",
},
{
name: "disabled",
description: "If `true`, the switch will be disabled.",
type: "boolean",
},
{
name: "invalid",
description: "If `true`, the switch will have `aria-invalid` set to `true`.",
type: "boolean",
},
{
name: "readOnly",
description: "If `true`, the switch will be readonly.",
type: "boolean",
},
{
name: "children",
description:
"The children of the switch. If used as a render props, the internal state will be passed.",
type: "JSX.Element | (props: { state: Accessor }) => JSX.Element",
},
{
name: "onChange",
description: "The callback invoked when the checked state of the `Switch` changes.",
type: "JSX.EventHandlerUnion",
},
{
name: "onFocus",
description: "The callback invoked when the switch is focused.",
type: "JSX.EventHandlerUnion",
},
{
name: "onBlur",
description: "The callback invoked when the switch is blurred (loses focus).",
type: "JSX.EventHandlerUnion",
},
];
const switchPropItems: PropsTableItem[] = [
{
name: "variant",
description: "The visual style of the switch.",
type: '"outline" | "filled"',
defaultValue: '"filled"',
},
{
name: "colorScheme",
description: "The color of the switch.",
type: '"primary" | "accent" | "neutral" | "success" | "info" | "warning" | "danger"',
defaultValue: '"primary"',
},
{
name: "size",
description: "The size of the switch.",
type: '"sm" | "md" | "lg"',
defaultValue: '"md"',
},
{
name: "labelPlacement",
description: "The placement of the switch label.",
type: '"start" | "end"',
defaultValue: '"start"',
},
];
onMount(() => {
Prism.highlightAll();
});
return (
Switch
The Switch component is used as an alternative for the{" "}
Checkbox
{" "}
component. You can switch between enabled or disabled states.
ImportSwitchPrimitive: Unstyled component containing all the parts of a switch.
It renders a label and a visualy hidden input with type set to{" "}
checkbox and role set to switch.
SwitchPrimitiveThumb: The thumb that is used to visually indicate whether
the switch is on or off.
Switch: The Hope UI styled switch component based on{" "}
SwitchPrimitive.
UsageSwitchSwitch colors
Use the colorScheme prop to change the color of the Switch. You can set the
value to primary, accent, neutral,{" "}
success, info, warning or danger.
Switch sizes
Use the size prop to change the size of the Switch. You can set the value to{" "}
sm, md or lg.
Switch
Switch
Switch
Switch variants
Use the variant prop to change the visual style of the Switch. You can set the
value to outline or filled.
SwitchSwitchSwitch label placement
Use the labelPlacement prop to change the placement of the label. You can set
the value to start or end.
SwitchSwitchDisabled state
Use the disabled prop to disable the Switch.
Switch
Switch
Switch
Invalid state
Use the invalid prop to mark the Switch as invalid.
Switch
Switch
Switch
Headless API
Use the unstyled SwitchPrimitive component to achieve your desired design. You
can pair it with your styling solution of choice. The below example uses style props and the{" "}
css function.
Annual billing
Save 10%
ThemingSwitch base styles and default props can be overridden in the Hope UI theme
configuration like below:
PropsSwitchPrimitive propsSwitch propsSwitch composes the SwitchPrimitive component, so you can pass all
its props. These are props specific to the Switch component:
);
}
================================================
FILE: apps/docs/src/pages/component-docs/data-entry/switch/snippets.ts
================================================
const importComponent = `import {
SwitchPrimitive,
SwitchPrimitiveThumb,
Switch
} from "@hope-ui/solid"`;
const basicUsage = `Switch`;
const switchColors = ``;
const switchSizes = `SwitchSwitchSwitch`;
const switchVariants = `SwitchSwitch`;
const switchLabelPlacement = `SwitchSwitch`;
const switchDisabled = `SwitchSwitchSwitch`;
const switchInvalid = `SwitchSwitchSwitch`;
const headless = `import { css } from "@hope-ui/solid"
const switchRootClass = css({
display: "inline-flex",
alignItems: "center",
border: "1px solid $neutral7",
rounded: "$sm",
px: "$5",
py: "$3",
w: "$full",
cursor: "pointer",
userSelect: "none",
transition: "box-shadow 250ms",
_focus: {
borderColor: "$primary7",
shadow: "0 0 0 3px $colors$primary5",
},
});
const switchControlClass = css({
all: "unset",
width: 34,
height: 12,
backgroundColor: "$blackAlpha9",
borderRadius: "9999px",
position: "relative",
boxShadow: "0 2px 10px $colors$blackAlpha7",
transition: "background-color 250ms",
_groupChecked: {
backgroundColor: "$primary9",
},
});
const switchThumbClass = css({
display: "block",
width: 20,
height: 20,
backgroundColor: "white",
borderRadius: "9999px",
boxShadow: "0 0 2px $colors$blackAlpha7",
transition: "transform 250ms",
transform: "translate(-4px, -4px)",
willChange: "transform",
_checked: {
transform: "translate(16px, -4px)",
},
});
function HeadlessExample() {
return (
Annual billing
Save 10%
);
}
`;
const theming = `const config: HopeThemeConfig = {
components: {
Switch: {
baseStyle: {
root: SystemStyleObject,
control: SystemStyleObject,
label: SystemStyleObject,
},
defaultProps: {
root: ThemeableSwitchOptions,
}
}
}
}`;
export const snippets = {
importComponent,
basicUsage,
switchColors,
switchSizes,
switchVariants,
switchLabelPlacement,
switchDisabled,
switchInvalid,
headless,
theming,
};
================================================
FILE: apps/docs/src/pages/component-docs/data-entry/textarea/index.tsx
================================================
import { Text, Textarea, VStack } from "@hope-ui/solid";
import Prism from "prismjs";
import { createSignal, onMount } from "solid-js";
import Code from "@/components/Code";
import CodeSnippet from "@/components/CodeSnippet";
import { ContextualNavLink } from "@/components/ContextualNav";
import PageLayout from "@/components/PageLayout";
import PageTitle from "@/components/PageTitle";
import { Preview } from "@/components/Preview";
import { PropsTable, PropsTableItem } from "@/components/PropsTable";
import SectionSubtitle from "@/components/SectionSubtitle";
import SectionTitle from "@/components/SectionTitle";
import { snippets } from "./snippets";
export default function TextareaDoc() {
const [value, setValue] = createSignal("");
const handleInput = (event: Event) => setValue((event.target as HTMLTextAreaElement).value);
const previousLink: ContextualNavLink = {
href: "/docs/data-entry/switch",
label: "Switch",
};
const nextLink: ContextualNavLink = {
href: "/docs/data-display/accordion",
label: "Accordion",
};
const contextualNavLinks: ContextualNavLink[] = [
{ href: "#import", label: "Import" },
{ href: "#usage", label: "Usage" },
{ href: "#sizes", label: "Textarea sizes", indent: true },
{ href: "#variants", label: "Textarea variants", indent: true },
{ href: "#disabled", label: "Disabled state", indent: true },
{ href: "#invalid", label: "Invalid state", indent: true },
{ href: "#controlled", label: "Controlled textarea", indent: true },
{ href: "#theming", label: "Theming" },
{ href: "#props", label: "Props" },
];
const propItems: PropsTableItem[] = [
{
name: "variant",
description: "The visual style of the textarea.",
type: '"outline" | "filled" | "unstyled"',
defaultValue: '"outline"',
},
{
name: "size",
description: "The size of the textarea's text.",
type: '"xs" | "sm" | "md" | "lg"',
defaultValue: '"md"',
},
{
name: "required",
description:
"If `true`, the textarea is marked as required, and `required` attribute will be added",
type: "boolean",
},
{
name: "disabled",
description: "If `true`, the textarea will be disabled.",
type: "boolean",
},
{
name: "invalid",
description: "If `true`, the textarea will have `aria-invalid` set to `true`.",
type: "boolean",
},
{
name: "readOnly",
description: "If `true`, the textarea will be readonly.",
type: "boolean",
},
];
onMount(() => {
Prism.highlightAll();
});
return (
Textarea
The Textarea component allows you to easily create multi-line text textareas.
ImportUsageTextarea sizes
Use the size prop to change the size of the Textarea's text. You can set the
value to xs, sm, md or lg.
Textarea variants
Use the variant prop to change the visual style of the Textarea. You can set
the value to outline, filled or unstyled.
Disabled state
Use the disabled prop to disable the Textarea.
Invalid state
Use the invalid prop to mark the Textarea as invalid.
Controlled textareaValue: {value()}ThemingTextarea base styles and default props can be overridden in the Hope UI theme
configuration like below:
Props
);
}
================================================
FILE: apps/docs/src/pages/component-docs/data-entry/textarea/snippets.ts
================================================
const importComponent = `import { Textarea } from "@hope-ui/solid"`;
const basicUsage = ``;
const textareaSizes = ``;
const textareaVariants = ``;
const textareaDisabled = ``;
const textareaInvalid = ``;
const controlledTextarea = `function Example() {
const [value, setValue] = createSignal("");
const handleInput = event => setValue(event.target.value);
return (
<>
Value: {value()}
)
}`;
const theming = `const config: HopeThemeConfig = {
components: {
Textarea: {
baseStyle: SystemStyleObject,
defaultProps: ThemeableTextareaOptions
}
}
}`;
export const snippets = {
importComponent,
basicUsage,
textareaSizes,
textareaVariants,
textareaDisabled,
textareaInvalid,
controlledTextarea,
theming,
};
================================================
FILE: apps/docs/src/pages/component-docs/feedback/alert/index.tsx
================================================
import {
Alert,
AlertDescription,
AlertIcon,
AlertTitle,
Box,
CloseButton,
ListItem,
Text,
UnorderedList,
VStack,
} from "@hope-ui/solid";
import Prism from "prismjs";
import { onMount } from "solid-js";
import Code from "@/components/Code";
import CodeSnippet from "@/components/CodeSnippet";
import { ContextualNavLink } from "@/components/ContextualNav";
import PageLayout from "@/components/PageLayout";
import PageTitle from "@/components/PageTitle";
import { Preview } from "@/components/Preview";
import { PropsTable, PropsTableItem } from "@/components/PropsTable";
import SectionSubtitle from "@/components/SectionSubtitle";
import SectionTitle from "@/components/SectionTitle";
import { snippets } from "./snippets";
export default function AlertDoc() {
const previousLink: ContextualNavLink = {
href: "/docs/navigation/tabs",
label: "Tabs",
};
const nextLink: ContextualNavLink = {
href: "/docs/feedback/circular-progress",
label: "CircularProgress",
};
const contextualNavLinks: ContextualNavLink[] = [
{ href: "#import", label: "Import" },
{ href: "#usage", label: "Usage" },
{ href: "#statuses", label: "Alert statuses", indent: true },
{ href: "#variants", label: "Alert variants", indent: true },
{ href: "#composition", label: "Composition", indent: true },
{ href: "#theming", label: "Theming" },
{ href: "#props", label: "Props" },
{ href: "#alert-props", label: "Alert props", indent: true },
{ href: "#alert-icon-props", label: "AlertIcon props", indent: true },
{ href: "#alert-title-props", label: "AlertTitle props", indent: true },
{ href: "#alert-description-props", label: "AlertDescription props", indent: true },
];
const propItems: PropsTableItem[] = [
{
name: "variant",
description: "The visual style of the alert.",
type: '"solid" | "subtle" | "left-accent" | "top-accent"',
defaultValue: '"subtle"',
},
{
name: "status",
description: "The status of the alert. This affects the color scheme and icon used.",
type: '"success" | "info" | "warning" | "danger"',
defaultValue: '"info"',
},
];
onMount(() => {
Prism.highlightAll();
});
return (
Alert
Alerts are used to communicate a state that affects a system, feature or page.
ImportAlert: The wrapper for alert components.
AlertIcon: The visual icon for the alert that changes based on the{" "}
status prop.
AlertTitle: The title of the alert to be announced by screen readers.
AlertDescription: The description of the alert to be announced by screen
readers.
UsageYour browser is outdated!Your Hope UI experience may be degraded.Alert statuses
Use the status prop to change the status of the alert. This affects the color
scheme and icon used. You can set the value to success, info,{" "}
warning or danger.
Hope UI is going live on April 7th. Get ready!
Data uploaded to the server. Fire on!
Seems your account is about expire, upgrade now
There was an error processing your request
Alert variants
Use the variant prop to change the visual style of the Alert You can set the
value to solid, subtle, left-accent or{" "}
top-accent.
Data uploaded to the server. Fire on!
Data uploaded to the server. Fire on!
Data uploaded to the server. Fire on!
Data uploaded to the server. Fire on!
CompositionAlert ships with smaller components to allow for flexibility in creating all
kinds of layouts. Here's an example of a custom alert style and layout:
Application submitted!
Thanks for submitting your application. Our team will get back to you soon.
Alert can also incorporate other Hope UI components. Here's an example of an
alert with wrapping description text:
Success!
Your application has been received. We will review your application and respond within
the next 48 hours.
ThemingAlert base styles and default props can be overridden in the Hope UI theme
configuration like below:
PropsAlert propsAlertIcon propsAlertIcon composes Icon and changes the icon based on the{" "}
status prop. You can use the as prop to render a custom icon.
AlertTitle propsAlertTitle composes the Box component.
AlertDescription propsAlertDescription composes the Box component.
);
}
================================================
FILE: apps/docs/src/pages/component-docs/feedback/alert/snippets.ts
================================================
const importComponent = `import {
Alert,
AlertDescription,
AlertIcon,
AlertTitle,
} from "@hope-ui/solid"`;
const basicUsage = `Your browser is outdated!Your Hope UI experience may be degraded.`;
const status = `
Hope UI is going live on April 7th. Get ready!
Data uploaded to the server. Fire on!
Seems your account is about expire, upgrade now
There was an error processing your request
`;
const variants = `
Data uploaded to the server. Fire on!
Data uploaded to the server. Fire on!
Data uploaded to the server. Fire on!
Data uploaded to the server. Fire on!
`;
const composition = `
Application submitted!
Thanks for submitting your application. Our team will get back to you soon.
`;
const compositionTwo = `Success!
Your application has been received.
We will review your application and respond within the next 48 hours.
`;
const theming = `const config: HopeThemeConfig = {
components: {
Alert: {
baseStyle: {
root: SystemStyleConfig,
icon: SystemStyleConfig,
title: SystemStyleConfig,
description: SystemStyleConfig,
},
defaultProps: {
root: ThemeableAlertOptions,
}
}
}
}`;
export const snippets = {
importComponent,
basicUsage,
status,
variants,
composition,
compositionTwo,
theming,
};
================================================
FILE: apps/docs/src/pages/component-docs/feedback/circular-progress/index.tsx
================================================
import {
CircularProgress,
CircularProgressIndicator,
CircularProgressLabel,
ListItem,
Text,
UnorderedList,
} from "@hope-ui/solid";
import Prism from "prismjs";
import { onMount } from "solid-js";
import Code from "@/components/Code";
import CodeSnippet from "@/components/CodeSnippet";
import { ContextualNavLink } from "@/components/ContextualNav";
import PageLayout from "@/components/PageLayout";
import PageTitle from "@/components/PageTitle";
import { Preview } from "@/components/Preview";
import { PropsTable, PropsTableItem } from "@/components/PropsTable";
import SectionSubtitle from "@/components/SectionSubtitle";
import SectionTitle from "@/components/SectionTitle";
import { snippets } from "./snippets";
export default function CircularProgressDoc() {
const previousLink: ContextualNavLink = {
href: "/docs/feedback/alert",
label: "Alert",
};
const nextLink: ContextualNavLink = {
href: "/docs/feedback/progress",
label: "Progress",
};
const contextualNavLinks: ContextualNavLink[] = [
{ href: "#import", label: "Import" },
{ href: "#usage", label: "Usage" },
{ href: "#color", label: "CircularProgress color", indent: true },
{ href: "#size", label: "CircularProgress size", indent: true },
{ href: "#thickness", label: "CircularProgress thickness", indent: true },
{ href: "#with-round-cap", label: "CircularProgress with round cap", indent: true },
{ href: "#with-label", label: "CircularProgress with label", indent: true },
{ href: "#indeterminate", label: "Indeterminate progress", indent: true },
{ href: "#accessibility", label: "Accessibility" },
{ href: "#theming", label: "Theming" },
{ href: "#props", label: "Props" },
{ href: "#circular-progress-props", label: "CircularProgress props", indent: true },
{
href: "#circular-progress-indicator-props",
label: "CircularProgressIndicator props",
indent: true,
},
];
const circularProgressPropItems: PropsTableItem[] = [
{
name: "trackColor",
description: "The color of the progress track.",
type: 'ColorProps["color"]',
defaultValue: "$neutral4",
},
{
name: "size",
description: "The size of the progress.",
type: 'SizeProps["boxSize"]',
defaultValue: "$12",
},
{
name: "thickness",
description: "The thickness of the progress.",
type: "Property.StrokeWidth | number",
defaultValue: "$2_5",
},
{
name: "value",
description: "The `value` of the progress indicator.",
type: "number",
},
{
name: "indeterminate",
description:
"If `true`, the progress will be indeterminate and the `value` prop will be ignored.",
type: "boolean",
},
{
name: "min",
description: "The minimum value of the progress.",
type: "number",
defaultValue: "0",
},
{
name: "max",
description: "The maximum value of the progress.",
type: "number",
defaultValue: "100",
},
{
name: "valueText",
description: "The desired `aria-valuetext` to use in place of the value.",
type: "string",
},
{
name: "getValueText",
description:
"A function that returns the desired `aria-valuetext` to use in place of the value.",
type: "(value: number, percent: number) => string",
},
];
const circularProgressIndicatorPropItems: PropsTableItem[] = [
{
name: "color",
description: "The color of the progress indicator.",
type: 'ColorProps["color"]',
defaultValue: "$primary9",
},
{
name: "withRoundCaps",
description: "If `true`, the caps of the progress indicator will be rounded.",
type: "boolean",
defaultValue: "false",
},
];
onMount(() => {
Prism.highlightAll();
});
return (
CircularProgress
The CircularProgress component is used to indicate the progress for determinate
and indeterminate processes.
ImportCircularProgress: The wrapper that provides context for its children.
CircularProgressIndicator: The visual indicator of the progress.
CircularProgressLabel: The textual representation of the progress.
UsageCircularProgress color
Use the color prop to change the color of the{" "}
CircularProgressIndicator and the trackColor prop to change the
color of the progress track (background).
CircularProgress size
Use the size prop to change the size of the progress.
CircularProgress thickness
Use the thickness prop to change the thickness of the progress.
CircularProgress with round cap
Use the withRoundCaps prop to set the CircularProgressIndicator{" "}
caps rounded.
CircularProgress with label
You can set a label inside the propgress by using the CircularProgressLabel{" "}
component. By default it will display the progress percentage.
Indeterminate progress
Use the indeterminate prop to set the progress in an indeterminate state.
AccessibilityCircularProgress has a role set to progressbar to
denote that it is a progress.
CircularProgress has aria-valuenow set to the percentage
completion value passed to the component, to ensure the progress percent is visible to
screen readers.
ThemingCircularProgress base styles and default props can be overridden in the Hope UI
theme configuration like below:
PropsCircularProgress props
CircularProgressIndicator props
);
}
================================================
FILE: apps/docs/src/pages/component-docs/feedback/circular-progress/snippets.ts
================================================
const importComponent = `import {
CircularProgress,
CircularProgressIndicator,
CircularProgressLabel
} from "@hope-ui/solid"`;
const basicUsage = ``;
const color = ``;
const size = ``;
const thickness = ``;
const withRoundCaps = ``;
const withLabel = ``;
const indeterminate = ``;
const theming = `const config: HopeThemeConfig = {
components: {
CircularProgress: {
baseStyle: {
root: SystemStyleObject,
track: SystemStyleObject,
indicator: SystemStyleObject,
label: SystemStyleObject
},
defaultProps: {
root: ThemeableCircularProgressOptions
}
}
}
}`;
export const snippets = {
importComponent,
basicUsage,
color,
size,
thickness,
withRoundCaps,
withLabel,
indeterminate,
theming,
};
================================================
FILE: apps/docs/src/pages/component-docs/feedback/notification/index.tsx
================================================
import {
Avatar,
Button,
HStack,
ListItem,
NotificationProps,
notificationService,
Text,
UnorderedList,
VStack,
} from "@hope-ui/solid";
import Prism from "prismjs";
import { onMount } from "solid-js";
import Code from "@/components/Code";
import CodeSnippet from "@/components/CodeSnippet";
import { ContextualNavLink } from "@/components/ContextualNav";
import PageLayout from "@/components/PageLayout";
import PageTitle from "@/components/PageTitle";
import { Preview } from "@/components/Preview";
import { PropsTable, PropsTableItem } from "@/components/PropsTable";
import SectionSubtitle from "@/components/SectionSubtitle";
import SectionTitle from "@/components/SectionTitle";
import { snippets } from "./snippets";
export default function SpinnerDoc() {
const previousLink: ContextualNavLink = {
href: "/docs/feedback/spinner",
label: "Spinner",
};
const nextLink: ContextualNavLink = {
href: "/docs/overlay/drawer",
label: "Drawer",
};
const contextualNavLinks: ContextualNavLink[] = [
{ href: "#import", label: "Import" },
{ href: "#usage", label: "Usage" },
{
href: "#notification-service-api",
label: "The `notificationService` API",
indent: true,
},
{ href: "#notification-status", label: "Notification status", indent: true },
{ href: "#notification-placement", label: "Notification placement", indent: true },
{ href: "#notification-duration", label: "Notification duration", indent: true },
{ href: "#persistent-notification", label: "Persistent notification", indent: true },
{ href: "#using-custom-component", label: "Using custom component", indent: true },
{ href: "#updating-notification", label: "Updating notification", indent: true },
{ href: "#hidding-notification", label: "Hidding notification", indent: true },
{ href: "#limit-and-queue", label: "Limit and queue", indent: true },
{ href: "#theming", label: "Theming" },
{ href: "#props", label: "Props" },
{ href: "#notifications-provider-props", label: "NotificationsProvider props", indent: true },
{ href: "#notification-props", label: "Notification props", indent: true },
{
href: "#notification-service-show",
label: "notificationService.show",
indent: true,
},
{
href: "#notification-service-update",
label: "notificationService.update",
indent: true,
},
{
href: "#notification-service-hide",
label: "notificationService.hide",
indent: true,
},
];
const notificationsProviderPropItems: PropsTableItem[] = [
{
name: "placement",
description: "The placement of all notifications",
type: '"top-start" | "top" | "top-end" | "bottom-start" | "bottom" | "bottom-end"',
defaultValue: '"top-end"',
},
{
name: "limit",
description:
"Maximum amount of notifications displayed at a time, other new notifications will be added to queue.",
type: "number",
defaultValue: "10",
},
{
name: "duration",
description: "The delay (in ms) before notifications hides.",
type: "number",
defaultValue: "5000",
},
{
name: "persistent",
description: "If `true`, duration will be ignored and notifications will never dismiss.",
type: "boolean",
defaultValue: "false",
},
{
name: "closable",
description: "If `true`, notifications will show a close button.",
type: "boolean",
defaultValue: "true",
},
{
name: "zIndex",
description: "The `z-index` css property of the notifications container.",
type: 'PositionProps["zIndex"]',
defaultValue: "$notification",
},
];
const notificationPropItems: PropsTableItem[] = [
{
name: "status",
description: "The status of the notification. This affects the color scheme and icon used.",
type: '"success" | "info" | "warning" | "danger"',
},
];
const notificationServiceShowPropItems: PropsTableItem[] = [
{
name: "id",
description:
"The id of the notification, used to update and remove notification. By default, a unique id is generated for each notification.",
type: "string",
},
{
name: "status",
description: "The status of the notification.",
type: '"success" | "info" | "warning" | "danger"',
},
{
name: "title",
description: "The title of the notification.",
type: "string",
},
{
name: "description",
description: "The description of the notification.",
type: "string",
},
{
name: "duration",
description: "The delay (in ms) before the notification hides.",
type: "number",
defaultValue: "5000",
},
{
name: "persistent",
description: "If `true`, duration will be ignored and the notification will never dismiss.",
type: "boolean",
defaultValue: "false",
},
{
name: "closable",
description: "If `true`, the notification will show a close button.",
type: "boolean",
defaultValue: "true",
},
{
name: "loading",
description: "If `true`, the notification will show a loader.",
type: "boolean",
},
{
name: "onClose",
description: "Callback function to run side effects after the notification has closed.",
type: "(id: string) => void",
},
{
name: "render",
description:
"Render a custom component. It will receive the notification `id` and a `close` function as render props.",
type: "(props: NotificationConfigRenderProps) => JSX.Element",
},
];
const notificationServiceHidePropItems: PropsTableItem[] = [
{
required: true,
name: "id",
description: "The `id` of the notification.",
type: "string",
},
];
onMount(() => {
Prism.highlightAll();
});
return (
NotificationNotification give feedback to users after an action has taken place.ImportNotificationsProvider: The component that provides the notification
system.
Notification: The wrapper for notification components.
NotificationIcon: The visual icon for the notification that changes based
on the status prop.
NotificationTitle: The title of the notification.
NotificationDescription: The description of the notification.
notificationService: An utility object used to show/hide notifications.
Usage
Wrap your application with the NotificationsProvider:
Then use the notificationService anywhere in your application:
The notificationService API
The notification system is based on custom events, Hope UI exports the following methods
through the notificationService object:
show: adds given notification to notifications list or queue depending on
current state and limit.
update: updates notification that was previously added to the state or
queue.
hide: removes notification with given id from notifications state and
queue.
clear: removes all notifications from notifications state and queue.
clearQueue: removes all notifications from queue.
Notification status
Use the status parameter to change the status of the notification, this affects
the icon used. You can set the value to success, info,{" "}
warning or danger.
Notification placementNotificationsProvider renders notifications with fixed position inside a
Portal. Position cannot be changed per notification. Use the placement prop to
define the placement. You can set the value to top-start, top,{" "}
top-end, bottom-start, bottom or{" "}
bottom-end.
Notification duration
Use the duration parameter to change the duration of the notification. By
default, notitification will dismiss after 5 seconds.
Persistent notification
Use the persistent parameter to make the notification persistent. the duration
will be ignored.
Using custom component
Use the render parameter to display a custom component instead of the default
Hope UI Notification.
Updating notification
Use the update method to update a specific notification. This method takes the
same parameters as the show method except that id is required.
Hidding notification
Use the hide method to dismiss a specific notification by passing its
notification id.
Limit and queueNotificationsProvider uses a queue to manage its state. You can limit maximum
amount of notifications that can be displayed by setting the limit prop.
All notifications added after limit was reached will be added into queue and displayed when
notification from current state is closed.
You can use the clearQueue method to remove all notifications that are not
currently displayed and the clear method to remove all notifications from state
and queue.
ThemingNotification base styles and default props can be overridden in the Hope UI
theme configuration like below:
Props
NotificationsProvider props
Notification props
notificationService.show
notificationService.update
The update method takes the same parameters as the show method
except that id is required.
notificationService.hide
);
}
================================================
FILE: apps/docs/src/pages/component-docs/feedback/notification/snippets.ts
================================================
const importComponent = `import {
NotificationsProvider,
Notification,
NotificationIcon,
NotificationTitle,
NotificationDescription,
notificationService,
} from "@hope-ui/solid"`;
const setup = `// 1. import \`NotificationsProvider\` component
import { HopeProvider, NotificationsProvider } from '@hope-ui/solid'
// 2. Wrap NotificationsProvider at the root of your app
function App() {
return (
)
}`;
const basicUsage = `import { notificationService } from '@hope-ui/solid'
function NotificationExample() {
const showNotification = () => {
notificationService.show({
title: "Default notification",
description: "Hey there, your code is awesome! 🤥",
})
}
return (
);
}`;
const status = ``;
const placement = `import { HopeProvider, NotificationsProvider } from '@hope-ui/solid'
function App() {
return (
)
}`;
const duration = ``;
const persistent = ``;
const customComponent = ``;
const hidding = ``;
const updating = ``;
const limitAndQueueSetup = `import { HopeProvider, NotificationsProvider } from '@hope-ui/solid'
function App() {
return (
)
}`;
const limitAndQueue = ``;
const theming = `const config: HopeThemeConfig = {
components: {
Notification: {
baseStyle: {
root: SystemStyleConfig,
icon: SystemStyleConfig,
title: SystemStyleConfig,
description: SystemStyleConfig,
},
defaultProps: {
root: ThemeableNotificationOptions,
}
}
}
}`;
export const snippets = {
importComponent,
setup,
basicUsage,
status,
placement,
duration,
persistent,
customComponent,
hidding,
updating,
limitAndQueueSetup,
limitAndQueue,
theming,
};
================================================
FILE: apps/docs/src/pages/component-docs/feedback/progress/index.tsx
================================================
import {
ListItem,
Progress,
ProgressIndicator,
ProgressLabel,
Text,
UnorderedList,
VStack,
} from "@hope-ui/solid";
import Prism from "prismjs";
import { onMount } from "solid-js";
import Code from "@/components/Code";
import CodeSnippet from "@/components/CodeSnippet";
import { ContextualNavLink } from "@/components/ContextualNav";
import PageLayout from "@/components/PageLayout";
import PageTitle from "@/components/PageTitle";
import { Preview } from "@/components/Preview";
import { PropsTable, PropsTableItem } from "@/components/PropsTable";
import SectionSubtitle from "@/components/SectionSubtitle";
import SectionTitle from "@/components/SectionTitle";
import { snippets } from "./snippets";
export default function ProgressDoc() {
const previousLink: ContextualNavLink = {
href: "/docs/feedback/circular-progress",
label: "CircularProgress",
};
const nextLink: ContextualNavLink = {
href: "/docs/feedback/skeleton",
label: "Skeleton",
};
const contextualNavLinks: ContextualNavLink[] = [
{ href: "#import", label: "Import" },
{ href: "#usage", label: "Usage" },
{ href: "#colors", label: "Progress color", indent: true },
{ href: "#sizes", label: "Progress sizes", indent: true },
{ href: "#with-label", label: "Progress with label", indent: true },
{ href: "#striped", label: "Progress with stripes", indent: true },
{ href: "#animated", label: "Animated progress", indent: true },
{ href: "#indeterminate", label: "Indeterminate progress", indent: true },
{ href: "#accessibility", label: "Accessibility" },
{ href: "#theming", label: "Theming" },
{ href: "#props", label: "Props" },
{ href: "#progress-props", label: "Progress props", indent: true },
{ href: "#progress-indicator-props", label: "ProgressIndicator props", indent: true },
];
const progressPropItems: PropsTableItem[] = [
{
name: "trackColor",
description: "The color of the progress track.",
type: 'ColorProps["color"]',
defaultValue: "$neutral4",
},
{
name: "size",
description: "The size of the progress.",
type: '"xs" | "sm" | "md" | "lg"',
defaultValue: '"md"',
},
{
name: "value",
description: "The `value` of the progress indicator.",
type: "number",
},
{
name: "indeterminate",
description:
"If `true`, the progress will be indeterminate and the `value` prop will be ignored.",
type: "boolean",
},
{
name: "min",
description: "The minimum value of the progress.",
type: "number",
defaultValue: "0",
},
{
name: "max",
description: "The maximum value of the progress.",
type: "number",
defaultValue: "100",
},
{
name: "valueText",
description: "The desired `aria-valuetext` to use in place of the value.",
type: "string",
},
{
name: "getValueText",
description:
"A function that returns the desired `aria-valuetext` to use in place of the value.",
type: "(value: number, percent: number) => string",
},
];
const progressIndicatorPropItems: PropsTableItem[] = [
{
name: "color",
description: "The color of the progress indicator.",
type: 'ColorProps["color"]',
defaultValue: "$primary9",
},
{
name: "striped",
description: "If `true`, the progress indicator will show stripes.",
type: "boolean",
},
{
name: "animated",
description: "If `true`, and striped is `true`, the stripes will be animated.",
type: "boolean",
},
];
onMount(() => {
Prism.highlightAll();
});
return (
ProgressProgress is used to display the progress status for a task that takes a long
time or consists of several steps.
ImportProgress: The wrapper that provides context for its children.
ProgressIndicator: The visual indicator of the progress.
ProgressLabel: The textual representation of the progress.
UsageProgress color
Use the color prop to change the color of the ProgressIndicator{" "}
and the trackColor prop to change the color of the progress track (background).
Progress sizes
Use the size prop to change the size of the Progress. You can set the value to{" "}
xs, sm, md or lg.
You can also use the height prop to manually set a height.
Progress with label
You can set a label inside the propgress by using the ProgressLabel component.
By default it will display the progress percentage.
Progress with stripes
Use the striped prop to apply stripes on the ProgressIndicator.
Animated progress
Use the animated prop to animate the progress stripes.
Indeterminate progress
Use the indeterminate prop to set the progress in an indeterminate state.
AccessibilityProgress has a role set to progressbar to denote
that it is a progress.
Progress has aria-valuenow set to the percentage completion
value passed to the component, to ensure the progress percent is visible to screen
readers.
ThemingProgress base styles and default props can be overridden in the Hope UI theme
configuration like below:
PropsProgress propsProgressIndicator props
);
}
================================================
FILE: apps/docs/src/pages/component-docs/feedback/progress/snippets.ts
================================================
const importComponent = `import { Progress, ProgressIndicator, ProgressLabel } from "@hope-ui/solid"`;
const basicUsage = ``;
const colors = ``;
const sizes = ``;
const withLabel = ``;
const striped = ``;
const animated = ``;
const indeterminate = ``;
const theming = `const config: HopeThemeConfig = {
components: {
Progress: {
baseStyle: {
track: SystemStyleObject,
indicator: SystemStyleObject,
label: SystemStyleObject
},
defaultProps: {
root: ThemeableProgressOptions
}
}
}
}`;
export const snippets = {
importComponent,
basicUsage,
colors,
sizes,
withLabel,
striped,
animated,
indeterminate,
theming,
};
================================================
FILE: apps/docs/src/pages/component-docs/feedback/skeleton/index.tsx
================================================
import {
Box,
ListItem,
Skeleton,
SkeletonCircle,
SkeletonText,
Text,
UnorderedList,
VStack,
} from "@hope-ui/solid";
import Prism from "prismjs";
import { onMount } from "solid-js";
import Code from "@/components/Code";
import CodeSnippet from "@/components/CodeSnippet";
import { ContextualNavLink } from "@/components/ContextualNav";
import PageLayout from "@/components/PageLayout";
import PageTitle from "@/components/PageTitle";
import { Preview } from "@/components/Preview";
import { PropsTable, PropsTableItem } from "@/components/PropsTable";
import SectionSubtitle from "@/components/SectionSubtitle";
import SectionTitle from "@/components/SectionTitle";
import { snippets } from "./snippets";
export default function SkeletonDoc() {
const previousLink: ContextualNavLink = {
href: "/docs/feedback/progress",
label: "Progress",
};
const nextLink: ContextualNavLink = {
href: "/docs/feedback/spinner",
label: "Spinner",
};
const contextualNavLinks: ContextualNavLink[] = [
{ href: "#import", label: "Import" },
{ href: "#usage", label: "Usage" },
{ href: "#circle-and-text", label: "Circle and text Skeleton", indent: true },
{ href: "#color", label: "Skeleton color", indent: true },
{
href: "#skip-when-content-is-loaded",
label: "Skipping the skeleton when content is loaded",
indent: true,
},
{ href: "#props", label: "Props" },
{ href: "#skeleton-props", label: "Skeleton props", indent: true },
{ href: "#skeleton-circle-props", label: "SkeletonCircle props", indent: true },
{ href: "#skeleton-text-props", label: "SkeletonText props", indent: true },
];
const skeletonPropItems: PropsTableItem[] = [
{
name: "startColor",
description: "The color at the animation start.",
type: 'ColorProps["backgroundColor"]',
},
{
name: "endColor",
description: "The color at the animation end.",
type: 'ColorProps["backgroundColor"]',
},
{
name: "loaded",
description: "If `true`, it'll render its children with a nice fade animation.",
type: "boolean",
},
{
name: "speed",
description: "The animation speed in CSS unit.",
type: "Property.AnimationDuration",
defaultValue: "800ms",
},
{
name: "fadeDuration",
description: "The loaded children fadeIn animation duration in CSS unit.",
type: "Property.AnimationDuration",
defaultValue: "400ms",
},
];
const skeletonCirclePropItems: PropsTableItem[] = [
{
name: "size",
description: "The size of the circle.",
type: 'SizeProps["boxSize"]',
defaultValue: "2rem",
},
];
const skeletonTextPropItems: PropsTableItem[] = [
{
name: "noOfLines",
description: "The number of skeleton text lines.",
type: "number",
defaultValue: "3",
},
{
name: "spacing",
description: "The space between each skeleton text line.",
type: 'GridLayoutProps["gap"]',
defaultValue: "0.5rem",
},
{
name: "skeletonHeight",
description: "The height of each skeleton text line.",
type: 'SizeProps["height"]',
defaultValue: "0.5rem",
},
];
onMount(() => {
Prism.highlightAll();
});
return (
SkeletonSkeleton is used to display the loading state of some components.
ImportSkeleton: The base component that show the loading state.
SkeletonCircle: A circular skeleton.
SkeletonText: A skeleton that represents one or more lines of text.
UsageYou can use it as a standalone component.Or to wrap another component to take the same height and width.
contents wrapped
won't be visible
Circle and text SkeletonSkeleton color
Use the startColor and endColor props to change the animation
color.
Skipping the skeleton when content is loaded
Use the loaded prop to prevent the skeleton from rendering.
Hope UI is coolPropsSkeleton propsSkeletonCircle propsSkeletonText props
);
}
================================================
FILE: apps/docs/src/pages/component-docs/feedback/skeleton/snippets.ts
================================================
const importComponent = `import { Skeleton, SkeletonCircle, SkeletonText } from "@hope-ui/solid"`;
const basicUsageStandalone = ``;
const basicUsageWrapper = `
contents wrapped
won't be visible
`;
const circleAndText = ``;
const color = ``;
const skipping = `Hope UI is cool`;
export const snippets = {
importComponent,
basicUsageStandalone,
basicUsageWrapper,
circleAndText,
color,
skipping,
};
================================================
FILE: apps/docs/src/pages/component-docs/feedback/spinner/index.tsx
================================================
import { HStack, Spinner, Text } from "@hope-ui/solid";
import Prism from "prismjs";
import { onMount } from "solid-js";
import Code from "@/components/Code";
import CodeSnippet from "@/components/CodeSnippet";
import { ContextualNavLink } from "@/components/ContextualNav";
import PageLayout from "@/components/PageLayout";
import PageTitle from "@/components/PageTitle";
import { Preview } from "@/components/Preview";
import { PropsTable, PropsTableItem } from "@/components/PropsTable";
import SectionSubtitle from "@/components/SectionSubtitle";
import SectionTitle from "@/components/SectionTitle";
import { snippets } from "./snippets";
export default function SpinnerDoc() {
const previousLink: ContextualNavLink = {
href: "/docs/feedback/skeleton",
label: "Skeleton",
};
const nextLink: ContextualNavLink = {
href: "/docs/feedback/notification",
label: "Notification",
};
const contextualNavLinks: ContextualNavLink[] = [
{ href: "#import", label: "Import" },
{ href: "#usage", label: "Usage" },
{ href: "#color", label: "Spinner color", indent: true },
{ href: "#empty-area-color", label: "Spinner empty area color", indent: true },
{ href: "#sizes", label: "Spinner sizes", indent: true },
{ href: "#theming", label: "Theming" },
{ href: "#props", label: "Props" },
];
const propItems: PropsTableItem[] = [
{
name: "size",
description: "The size of the spinner.",
type: '"xs" | "sm" | "md" | "lg" | "xl"',
defaultValue: '"md"',
},
{
name: "emptyColor",
description: "The color of the empty area in the spinner.",
type: "Property.Color | ColorScaleValue",
},
{
name: "color",
description: "The color of the spinner.",
type: "Property.Color | ColorScaleValue",
},
{
name: "thickness",
description: "The thickness of the spinner.",
type: "Property.BorderWidth",
},
{
name: "speed",
description: "The speed of the spinner.",
type: "Property.TransitionDuration",
},
{
name: "label",
description:
"For accessibility, the fallback loading text. This text will be visible to screen readers.",
type: "string",
defaultValue: "Loading...",
},
];
onMount(() => {
Prism.highlightAll();
});
return (
Spinner
Spinners provide a visual cue that an action is either processing, awaiting a course of
change or a result.
ImportUsageSpinner color
Use the color prop to change the color of the Spinner.
Spinner empty area color
Use the emptyColor prop to change the background color of the Spinner.
Spinner sizes
Use the size prop to change the size of the Button. You can set the value to{" "}
xs, sm, md, lg or xl.
ThemingSpinner base styles and default props can be overridden in the Hope UI theme
configuration like below:
Props
);
}
================================================
FILE: apps/docs/src/pages/component-docs/feedback/spinner/snippets.ts
================================================
const importComponent = `import { Spinner } from "@hope-ui/solid"`;
const basicUsage = ``;
const color = ``;
const emptyAreaColor = ``;
const sizes = ``;
const theming = `const config: HopeThemeConfig = {
components: {
Spinner: {
baseStyle: SystemStyleObject,
defaultProps: ThemeableSpinnerOptions
}
}
}`;
export const snippets = {
importComponent,
basicUsage,
color,
emptyAreaColor,
sizes,
theming,
};
================================================
FILE: apps/docs/src/pages/component-docs/general/button/index.tsx
================================================
import {
Alert,
AlertDescription,
Anchor,
Button,
ButtonGroup,
hope,
HStack,
IconButton,
ListItem,
Text,
UnorderedList,
} from "@hope-ui/solid";
import Prism from "prismjs";
import { Link } from "solid-app-router";
import { onMount } from "solid-js";
import { BeatLoader } from "@/components/BeatLoader";
import Code from "@/components/Code";
import CodeSnippet from "@/components/CodeSnippet";
import { ContextualNavLink } from "@/components/ContextualNav";
import PageLayout from "@/components/PageLayout";
import PageTitle from "@/components/PageTitle";
import { Preview } from "@/components/Preview";
import { PropsTable, PropsTableItem } from "@/components/PropsTable";
import SectionSubtitle from "@/components/SectionSubtitle";
import SectionTitle from "@/components/SectionTitle";
import { IconArrowRight } from "@/icons/IconArrowRight";
import { IconEmail } from "@/icons/IconEmail";
import { IconPlus } from "@/icons/IconPlus";
import { snippets } from "./snippets";
export default function ButtonDoc() {
const previousLink: ContextualNavLink = {
href: "/docs/theming/color-mode",
label: "Color mode",
};
const nextLink: ContextualNavLink = {
href: "/docs/general/icon-button",
label: "IconButton",
};
const contextualNavLinks: ContextualNavLink[] = [
{ href: "#import", label: "Import" },
{ href: "#usage", label: "Usage" },
{ href: "#button-colors", label: "Button colors", indent: true },
{ href: "#button-sizes", label: "Button sizes", indent: true },
{ href: "#button-variants", label: "Button variants", indent: true },
{ href: "#button-with-icon", label: "Button with icon", indent: true },
{ href: "#button-loading-state", label: "Button loading state", indent: true },
{ href: "#button-group", label: "Grouping buttons", indent: true },
{ href: "#accessibility", label: "Accessibility" },
{ href: "#theming", label: "Theming" },
{ href: "#props", label: "Props" },
{ href: "#button-props", label: "Button props", indent: true },
{ href: "#button-group-props", label: "ButtonGroup props", indent: true },
];
const buttonPropItems: PropsTableItem[] = [
{
name: "variant",
description: "The visual style of the button.",
type: '"solid" | "subtle" | "outline" | "dashed" | "ghost"',
defaultValue: '"solid"',
},
{
name: "colorScheme",
description: "The color of the button.",
type: '"primary" | "accent" | "neutral" | "success" | "info" | "warning" | "danger"',
defaultValue: '"primary"',
},
{
name: "size",
description: "The size of the button.",
type: '"xs" | "sm" | "md" | "lg" | "xl"',
defaultValue: '"md"',
},
{
name: "compact",
description: "If `true`, Reduces the button padding.",
type: "boolean",
defaultValue: "false",
},
{
name: "fullWidth",
description: "If `true`, the button will take up the full width of its container.",
type: "boolean",
defaultValue: "false",
},
{
name: "disabled",
description: "If `true`, the button will be disabled.",
type: "boolean",
defaultValue: "false",
},
{
name: "loading",
description: "If `true`, the button will show a loader.",
type: "boolean",
defaultValue: "false",
},
{
name: "loadingText",
description: "The label to show in the button when `loading` is true.",
type: "string",
defaultValue: "",
},
{
name: "loader",
description: "Replace the loader component when `loading` is `true`.",
type: "JSX.Element",
defaultValue: "",
},
{
name: "loaderPlacement",
description: "Determines the placement of the loader when `loading` is `true`.",
type: '"start" | "end"',
defaultValue: '"start"',
},
{
name: "iconSpacing",
description: "The space between the button icon and label.",
type: "Property.MarginRight",
defaultValue: "0.5rem",
},
{
name: "leftIcon",
description: "If added, the button will show an icon before the button's label.",
type: "JSX.Element",
defaultValue: "",
},
{
name: "rightIcon",
description: "If added, the button will show an icon after the button's label.",
type: "JSX.Element",
defaultValue: "",
},
];
const buttonGroupPropItems: PropsTableItem[] = [
{
name: "spacing",
description: "The spacing between each buttons.",
type: 'MarginProps["marginRight"]',
defaultValue: "0.5rem",
},
{
name: "attached",
description:
"If `true`, the borderRadius of button that are direct children will be altered to look flushed together.",
type: "boolean",
defaultValue: "false",
},
{
name: "variant",
description: "The visual style of all wrapped buttons.",
type: '"solid" | "subtle" | "outline" | "dashed" | "ghost"',
},
{
name: "colorScheme",
description: "The color of all wrapped buttons.",
type: '"primary" | "accent" | "neutral" | "success" | "info" | "warning" | "danger"',
},
{
name: "size",
description: "The size of all wrapped buttons.",
type: '"xs" | "sm" | "md" | "lg" | "xl"',
},
{
name: "disabled",
description: "If `true`, all wrapped buttons will be disabled.",
type: "boolean",
},
];
onMount(() => {
Prism.highlightAll();
});
return (
Button
The Button component is used to trigger an action or event, such as submitting a form,
opening a dialog, canceling an action, or performing a delete operation.
ImportUsageButton colors
Use the colorScheme prop to change the color of the Button. You can set the
value to primary, accent, neutral,{" "}
success, info, warning or danger.
Button sizes
Use the size prop to change the size of the Button. You can set the value to{" "}
xs, sm, md, lg or xl.
Use the compact prop to reduces the Button padding.
Button variants
Use the variant prop to change the visual style of the Button. You can set the
value to solid, subtle, outline, dashed{" "}
or ghost.
Button with icon
You can add left and right icons to the Button component using the leftIcon and{" "}
rightIcon props respectively.
The leftIcon and rightIcon prop values should be jsx elements
not strings.
}>Email
} variant="outline">
Call us
If you want to create your own icon components check out Hope UI{" "}
Icon
{" "}
documentation.
Button loading state
Pass the loading prop to show its loading state. By default, the button will
show a spinner and leave the button's width unchanged. You can also pass the{" "}
loadingText prop to show a spinner and the loading text.
You can change the loader element to use custom loaders as per your design requirements.
Pass the loader prop and set it to a custom jsx element.
}>
Button
When a loaderText is present, you can change the placement of the loader
element to either start or end.
Grouping buttons
You can use the Stack or ButtonGroup component to group buttons.
When you use the ButtonGroup component, it allows you to:
Set the variant, colorScheme, size and{" "}
disabled state of all buttons within it.
Add spacing between the buttons.
Flush the buttons together by removing the border radius of its children as needed.
To flush the buttons, pass the attached prop.
} />
Accessibility
Button has role of button.
When Button has focus, Space or Enter activates it.CompositionYou can override any style of the Button via style props.ThemingButton base styles and default props can be overridden in the Hope UI theme
configuration like below:
PropsButton propsButtonGroup props
);
}
================================================
FILE: apps/docs/src/pages/component-docs/general/button/snippets.ts
================================================
const importComponent = `import { Button } from "@hope-ui/solid"`;
const basicUsage = ``;
const buttonColors = ``;
const buttonSizes = ``;
const buttonSizesCompact = ``;
const buttonVariants = ``;
const buttonWithIcon = `
}>Email
} variant="outline">
Call us
`;
const buttonLoadingState = ``;
const buttonCustomLoader = `}>
Button
`;
const buttonLoaderPlacement = ``;
const buttonGroup = ``;
const buttonGroupAttached = `} />
`;
const composition = `// The size prop affects the height of the button
// It can still be overridden by passing a custom height
`;
const theming = `const config: HopeThemeConfig = {
components: {
Button: {
baseStyle: {
root: SystemStyleObject,
group: SystemStyleObject,
},
defaultProps: {
root: ThemeableButtonOptions,
group: ThemeableButtonGroupOptions,
};
}
}
}`;
export const snippets = {
importComponent,
basicUsage,
buttonColors,
buttonSizes,
buttonSizesCompact,
buttonVariants,
buttonWithIcon,
buttonLoadingState,
buttonCustomLoader,
buttonLoaderPlacement,
buttonGroup,
buttonGroupAttached,
composition,
theming,
};
================================================
FILE: apps/docs/src/pages/component-docs/general/icon-button/index.tsx
================================================
import { hope, HStack, IconButton, Text } from "@hope-ui/solid";
import Prism from "prismjs";
import { onMount } from "solid-js";
import { BeatLoader } from "@/components/BeatLoader";
import Code from "@/components/Code";
import CodeSnippet from "@/components/CodeSnippet";
import { ContextualNavLink } from "@/components/ContextualNav";
import PageLayout from "@/components/PageLayout";
import PageTitle from "@/components/PageTitle";
import { Preview } from "@/components/Preview";
import { PropsTable, PropsTableItem } from "@/components/PropsTable";
import SectionSubtitle from "@/components/SectionSubtitle";
import SectionTitle from "@/components/SectionTitle";
import { IconSearch } from "@/icons/IconSearch";
import { snippets } from "./snippets";
export default function IconButtonDoc() {
const previousLink: ContextualNavLink = {
href: "/docs/general/button",
label: "Button",
};
const nextLink: ContextualNavLink = {
href: "/docs/layout/aspect-ratio",
label: "AspectRatio",
};
const contextualNavLinks: ContextualNavLink[] = [
{ href: "#import", label: "Import" },
{ href: "#usage", label: "Usage" },
{ href: "#button-colors", label: "Button colors", indent: true },
{ href: "#button-sizes", label: "Button sizes", indent: true },
{ href: "#button-variants", label: "Button variants", indent: true },
{ href: "#button-loading-state", label: "Button loading state", indent: true },
{ href: "#accessibility", label: "Accessibility" },
{ href: "#theming", label: "Theming" },
{ href: "#props", label: "Props" },
];
const propItems: PropsTableItem[] = [
{
required: true,
name: "aria-label",
description: "A label that describes the button.",
type: "string",
defaultValue: "",
},
{
name: "icon",
description: "The icon to be used in the button.",
type: "JSX.Element",
defaultValue: "",
},
{
name: "variant",
description: "The visual style of the button.",
type: '"solid" | "subtle" | "outline" | "dashed" | "ghost"',
defaultValue: '"solid"',
},
{
name: "colorScheme",
description: "The color of the button.",
type: '"primary" | "accent" | "neutral" | "success" | "info" | "warning" | "danger"',
defaultValue: '"primary"',
},
{
name: "size",
description: "The size of the button.",
type: '"xs" | "sm" | "md" | "lg" | "xl"',
defaultValue: '"md"',
},
{
name: "compact",
description: "If `true`, Reduces the button padding.",
type: "boolean",
defaultValue: "false",
},
{
name: "disabled",
description: "If `true`, the button will be disabled.",
type: "boolean",
defaultValue: "false",
},
{
name: "loading",
description: "If `true`, the button will show a loader.",
type: "boolean",
defaultValue: "false",
},
{
name: "loader",
description: "Replace the loader component when `loading` is `true`.",
type: "JSX.Element",
defaultValue: "",
},
];
onMount(() => {
Prism.highlightAll();
});
return (
IconButton
IconButton composes the Button component except that it renders only an icon.
ImportUsage} />
Button colors
The IconButton component accepts most of the props from the Button{" "}
component, so we can use colorScheme prop to change the color of the button.
} />
} />
} />
} />
} />
} />
} />
Button sizes
Like the Button component, pass the size prop to change the size
of the button.
} />
} />
} />
} />
} />
Use the compact prop to reduces the button padding.
} />
} />
} />
} />
} />
Button variants
Like the Button component, pass the variant prop to change the
style of the button.
} />
} />
} />
} />
} />
Button loading state
Pass the loading prop to show its loading state.
} />
You can change the loader element to use custom loaders as per your design requirements.
Pass the loader prop and set it to a custom jsx element.
}
aria-label="Search"
icon={}
/>
Accessibility
IconButton has role of button.
Since the button is only an icon aria-label is required.
When IconButton has focus, Space or Enter activates it.ThemingIconButton base styles and default props can be overridden in the Hope UI theme
configuration like below:
Props
);
}
================================================
FILE: apps/docs/src/pages/component-docs/general/icon-button/snippets.ts
================================================
const importComponent = `import { IconButton } from "@hope-ui/solid"`;
const basicUsage = `} />`;
const buttonColors = `} />
} />
} />
} />
} />
} />
} />
`;
const buttonSizes = `} />
} />
} />
} />
} />
`;
const buttonSizesCompact = `} />
} />
} />
} />
} />
`;
const buttonVariants = `} />
} />
} />
} />
} />
`;
const buttonLoadingState = `} />`;
const buttonCustomLoader = `}
aria-label="Search"
icon={}
/>`;
const theming = `const config: HopeThemeConfig = {
components: {
IconButton: {
baseStyle: SystemStyleObject,
defaultProps: ThemeableIconButtonOptions
}
}
}`;
export const snippets = {
importComponent,
basicUsage,
buttonColors,
buttonSizes,
buttonSizesCompact,
buttonVariants,
buttonLoadingState,
buttonCustomLoader,
theming,
};
================================================
FILE: apps/docs/src/pages/component-docs/layout/aspect-ratio/index.tsx
================================================
import { Anchor, AspectRatio, hope, Image, Text } from "@hope-ui/solid";
import Prism from "prismjs";
import { onMount } from "solid-js";
import Code from "@/components/Code";
import CodeSnippet from "@/components/CodeSnippet";
import { ContextualNavLink } from "@/components/ContextualNav";
import PageLayout from "@/components/PageLayout";
import PageTitle from "@/components/PageTitle";
import { Preview } from "@/components/Preview";
import { PropsTable, PropsTableItem } from "@/components/PropsTable";
import SectionSubtitle from "@/components/SectionSubtitle";
import SectionTitle from "@/components/SectionTitle";
import { snippets } from "./snippets";
export default function AspectRatioDoc() {
const previousLink: ContextualNavLink = {
href: "/docs/general/icon-button",
label: "IconButton",
};
const nextLink: ContextualNavLink = {
href: "/docs/layout/box",
label: "Box",
};
const contextualNavLinks: ContextualNavLink[] = [
{ href: "#import", label: "Import" },
{ href: "#usage", label: "Usage" },
{ href: "#embed-video", label: "Embed video", indent: true },
{ href: "#embed-image", label: "Embed image", indent: true },
{ href: "#embed-map", label: "Embed a map", indent: true },
{ href: "#props", label: "Props" },
];
const propItems: PropsTableItem[] = [
{
name: "ratio",
description: "The aspect ratio of the Box (ex: 16/9, 4/3, etc).",
type: "ResponsiveValue",
defaultValue: "4/3",
},
];
onMount(() => {
Prism.highlightAll();
});
return (
AspectRatio
AspectRatio component is used to embed responsive videos and maps, etc. It uses a very
common{" "}
padding hack
{" "}
to achieve this.
ImportUsageEmbed video
To embed a video with a specific aspect ratio, use an iframe with src pointing
to the link of the video.
Pass the maxWidth prop to AspectRatio to control the width of the
content.
Embed imageHere's how to embed an image that has a 4 by 3 aspect ratio.Embed a map
Here's how to embed a responsive Google map using AspectRatio. To make the map
take up the entire width, we can ignore the maxWidth prop.
Props
);
}
================================================
FILE: apps/docs/src/pages/component-docs/layout/aspect-ratio/snippets.ts
================================================
const importComponent = `import { AspectRatio } from "@hope-ui/solid"`;
const embedVideo = `// This video will have equal sides
`;
const embedImage = ``;
const embedMap = ``;
export const snippets = {
importComponent,
embedVideo,
embedImage,
embedMap,
};
================================================
FILE: apps/docs/src/pages/component-docs/layout/box/index.tsx
================================================
import { Badge, Box, hope, Text } from "@hope-ui/solid";
import Prism from "prismjs";
import { For, onMount } from "solid-js";
import Code from "@/components/Code";
import CodeSnippet from "@/components/CodeSnippet";
import { ContextualNavLink } from "@/components/ContextualNav";
import PageLayout from "@/components/PageLayout";
import PageTitle from "@/components/PageTitle";
import { Preview } from "@/components/Preview";
import SectionTitle from "@/components/SectionTitle";
import { IconStar } from "@/icons/IconStar";
import { snippets } from "./snippets";
export default function BoxDoc() {
const previousLink: ContextualNavLink = {
href: "/docs/layout/aspect-ratio",
label: "AspectRatio",
};
const nextLink: ContextualNavLink = {
href: "/docs/layout/center",
label: "Center",
};
const contextualNavLinks: ContextualNavLink[] = [
{ href: "#import", label: "Import" },
{ href: "#usage", label: "Usage" },
{ href: "#as-prop", label: "The `as` prop" },
];
const property = {
imageUrl: "https://bit.ly/2Z4KKcF",
imageAlt: "Rear view of modern home with pool",
beds: 3,
baths: 2,
title: "Modern home in city center in the heart of historic Los Angeles",
formattedPrice: "$1,900.00",
reviewCount: 34,
rating: 4,
};
onMount(() => {
Prism.highlightAll();
});
return (
Box
Box is the most abstract component on top of which all other Hope UI components are built.
By default, it renders a div element.
The Box component is useful because it helps with 3 common use cases:Create responsive layouts with ease.Provide a shorthand way to pass styles via props.
Compose new component and allow for override using the as prop.
ImportUsage
This is the Box
A more complexe example of composing with Box:
New
{property.beds} beds • {property.baths} baths
{property.title}
{property.formattedPrice}
/ wk
{(_, i) => }
{property.reviewCount} reviews
The as prop
You can use the as prop to change the element render, just like
styled-components.
Button
);
}
================================================
FILE: apps/docs/src/pages/component-docs/layout/box/snippets.ts
================================================
const importComponent = `import { Box } from "@hope-ui/solid"`;
const basicUsage = `
This is the Box
`;
const complexeExample = `// Sample card from Airbnb
function AirbnbExample() {
const property = {
imageUrl: "https://bit.ly/2Z4KKcF",
imageAlt: "Rear view of modern home with pool",
beds: 3,
baths: 2,
title: "Modern home in city center in the heart of historic Los Angeles",
formattedPrice: "$1,900.00",
reviewCount: 34,
rating: 4,
}
return (
New
{property.beds} beds • {property.baths} baths
{property.title}
{property.formattedPrice}
/ wk
{(_, i) => }
{property.reviewCount} reviews
)
}`;
const asProp = `
Button
`;
export const snippets = {
importComponent,
basicUsage,
complexeExample,
asProp,
};
================================================
FILE: apps/docs/src/pages/component-docs/layout/center/index.tsx
================================================
import { Anchor, AspectRatio, Box, Center, hope, HStack, Text } from "@hope-ui/solid";
import Prism from "prismjs";
import { onMount } from "solid-js";
import Code from "@/components/Code";
import CodeSnippet from "@/components/CodeSnippet";
import { ContextualNavLink } from "@/components/ContextualNav";
import PageLayout from "@/components/PageLayout";
import PageTitle from "@/components/PageTitle";
import { Preview } from "@/components/Preview";
import { PropsTable, PropsTableItem } from "@/components/PropsTable";
import SectionSubtitle from "@/components/SectionSubtitle";
import SectionTitle from "@/components/SectionTitle";
import { IconPhone } from "@/icons/IconPhone";
import { snippets } from "./snippets";
export default function CenterDoc() {
const previousLink: ContextualNavLink = {
href: "/docs/layout/box",
label: "Box",
};
const nextLink: ContextualNavLink = {
href: "/docs/layout/container",
label: "Container",
};
const contextualNavLinks: ContextualNavLink[] = [
{ href: "#import", label: "Import" },
{ href: "#usage", label: "Usage" },
{ href: "#with-icons", label: "With icons", indent: true },
];
onMount(() => {
Prism.highlightAll();
});
return (
CenterCenter is a layout component that centers its child within itself.ImportUsage
Put any child element inside it, give it any width or/and height,
it'll ensure the child is centered.
This is the Center
With icons{" "}
Center can be used to create frames around icons or numbers.
1
);
}
================================================
FILE: apps/docs/src/pages/component-docs/layout/center/snippets.ts
================================================
const importComponent = `import { Center } from "@hope-ui/solid"`;
const basicUsage = `
This is the Center
`;
const withIcons = `
1
`;
export const snippets = {
importComponent,
basicUsage,
withIcons,
};
================================================
FILE: apps/docs/src/pages/component-docs/layout/container/index.tsx
================================================
import { Alert, AlertDescription, Box, Container, Text } from "@hope-ui/solid";
import Prism from "prismjs";
import { onMount } from "solid-js";
import Code from "@/components/Code";
import CodeSnippet from "@/components/CodeSnippet";
import { ContextualNavLink } from "@/components/ContextualNav";
import PageLayout from "@/components/PageLayout";
import PageTitle from "@/components/PageTitle";
import { Preview } from "@/components/Preview";
import { PropsTable, PropsTableItem } from "@/components/PropsTable";
import SectionSubtitle from "@/components/SectionSubtitle";
import SectionTitle from "@/components/SectionTitle";
import { snippets } from "./snippets";
export default function ContainerDoc() {
const previousLink: ContextualNavLink = {
href: "/docs/layout/center",
label: "Center",
};
const nextLink: ContextualNavLink = {
href: "/docs/layout/divider",
label: "Divider",
};
const contextualNavLinks: ContextualNavLink[] = [
{ href: "#import", label: "Import" },
{ href: "#usage", label: "Usage" },
{ href: "#centering-the-container", label: "Centering the container", indent: true },
{ href: "#centering-the-children", label: "Centering the children", indent: true },
{ href: "#props", label: "Props" },
];
const propItems: PropsTableItem[] = [
{
name: "centered",
description: "If `true`, container itself will be centered on the page.",
type: "ResponsiveValue",
defaultValue: "true",
},
{
name: "centerContent",
description: "If `true`, container will center its children regardless of their width.",
type: "ResponsiveValue",
defaultValue: "false",
},
];
onMount(() => {
Prism.highlightAll();
});
return (
Container
Containers are used to constrain a content's width to the current breakpoint, while keeping
it fluid.
By default, it sets the max-width of the content to match the{" "}
min-width of the current breakpoint. This is useful if you’d prefer to design
for a fixed set of screen sizes instead of trying to accommodate a fully fluid viewport.
You can customize this behavior by passing custom maxWidth values.
ImportUsage
To contain any piece of content, wrap it in the Container component.
There are many benefits to a joint design and development system. Not only does it bring
benefits to the design team, but it also brings benefits to engineering teams. It makes
sure that our experiences have a consistent look and feel, not just in our design specs,
but in production
The whole Hope UI docs is inside a Container, try resize your browser to see
it in action.
Centering the container
By default the container is centered within its parent with a margin auto on
left and right, you can disabled this behavior by setting the centered prop to{" "}
false.
There are many benefits to a joint design and development system. Not only does it bring
benefits to the design team.
Centering the children
In some cases, the width of the content can be smaller than the container's width, you can
use the centerContent prop to center the content.
There are many benefits to a joint design and development system. Not only does it bring
benefits to the design team.
Props
);
}
================================================
FILE: apps/docs/src/pages/component-docs/layout/container/snippets.ts
================================================
const importComponent = `import { Container } from "@hope-ui/solid"`;
const basicUsage = `
There are many benefits to a joint design and development system. Not only does it bring
benefits to the design team, but it also brings benefits to engineering teams. It makes
sure that our experiences have a consistent look and feel, not just in our design specs,
but in production
`;
const centerContainer = `
There are many benefits to a joint design and development system. Not only does it bring
benefits to the design team.
`;
const centerContent = `
There are many benefits to a joint design and development system. Not only does it bring
benefits to the design team.
`;
export const snippets = {
importComponent,
basicUsage,
centerContainer,
centerContent,
};
================================================
FILE: apps/docs/src/pages/component-docs/layout/divider/index.tsx
================================================
import { Center, Divider, Text, VStack } from "@hope-ui/solid";
import Prism from "prismjs";
import { onMount } from "solid-js";
import Code from "@/components/Code";
import CodeSnippet from "@/components/CodeSnippet";
import { ContextualNavLink } from "@/components/ContextualNav";
import PageLayout from "@/components/PageLayout";
import PageTitle from "@/components/PageTitle";
import { Preview } from "@/components/Preview";
import { PropsTable, PropsTableItem } from "@/components/PropsTable";
import SectionSubtitle from "@/components/SectionSubtitle";
import SectionTitle from "@/components/SectionTitle";
import { snippets } from "./snippets";
export default function DividerDoc() {
const previousLink: ContextualNavLink = {
href: "/docs/layout/container",
label: "Container",
};
const nextLink: ContextualNavLink = {
href: "/docs/layout/flex",
label: "Flex",
};
const contextualNavLinks: ContextualNavLink[] = [
{ href: "#import", label: "Import" },
{ href: "#usage", label: "Usage" },
{ href: "#orientation", label: "Orientation", indent: true },
{ href: "#variants", label: "Variants", indent: true },
{ href: "#thickness", label: "Thickness", indent: true },
{ href: "#props", label: "Props" },
];
const propItems: PropsTableItem[] = [
{
name: "orientation",
description: "The orientation of the Divider.",
type: '"horizontal" | "vertical"',
defaultValue: '"horizontal"',
},
{
name: "variant",
description: "The visual style of the Divider.",
type: '"solid" | "dashed" | "dotted"',
defaultValue: '"solid"',
},
{
name: "thickness",
description: "The thickness of the Divider.",
type: "Property.BorderWidth",
defaultValue: '"1px"',
},
];
onMount(() => {
Prism.highlightAll();
});
return (
DividerDividers are used to visually separate content in a list or group.ImportUsage
The Divider displays a thin horizontal or vertical line, and renders a{" "}
div tag.
Orientation
Pass the orientation prop and set it to either horizontal or{" "}
vertical.
If the vertical orientation is used, make sure that the parent element is assigned a height.
Variants
Use the variant prop to change the visual style of the divider.
Thickness
Use the thickness prop to change the thickness of the divider.
Props
);
}
================================================
FILE: apps/docs/src/pages/component-docs/layout/divider/snippets.ts
================================================
const importComponent = `import { Divider } from "@hope-ui/solid"`;
const basicUsage = ``;
const horizontal = ``;
const vertical = `
`;
const variants = ``;
const thickness = ``;
export const snippets = {
importComponent,
basicUsage,
horizontal,
vertical,
variants,
thickness,
};
================================================
FILE: apps/docs/src/pages/component-docs/layout/flex/index.tsx
================================================
import {
Anchor,
Box,
Button,
Center,
Flex,
Grid,
Heading,
hope,
HStack,
Spacer,
Text,
} from "@hope-ui/solid";
import Prism from "prismjs";
import { Link } from "solid-app-router";
import { onMount } from "solid-js";
import Code from "@/components/Code";
import CodeSnippet from "@/components/CodeSnippet";
import { ContextualNavLink } from "@/components/ContextualNav";
import PageLayout from "@/components/PageLayout";
import PageTitle from "@/components/PageTitle";
import { Preview } from "@/components/Preview";
import { PropsTable, PropsTableItem } from "@/components/PropsTable";
import SectionSubtitle from "@/components/SectionSubtitle";
import SectionTitle from "@/components/SectionTitle";
import { snippets } from "./snippets";
export default function FlexDoc() {
const previousLink: ContextualNavLink = {
href: "/docs/layout/divider",
label: "Divider",
};
const nextLink: ContextualNavLink = {
href: "/docs/layout/grid",
label: "Grid",
};
const contextualNavLinks: ContextualNavLink[] = [
{ href: "#import", label: "Import" },
{ href: "#usage", label: "Usage" },
{ href: "#using-the-spacer", label: "Using the Spacer", indent: true },
{ href: "#vs", label: "Flex and Spacer vs Grid vs Stack" },
{ href: "#props", label: "Props" },
];
const propItems: PropsTableItem[] = [
{
name: "direction",
description: "Shorthand for flexDirection style prop.",
type: "Property.FlexDirection",
},
{
name: "wrap",
description: "Shorthand for flexWrap style prop.",
type: "Property.FlexWrap",
},
];
onMount(() => {
Prism.highlightAll();
});
return (
Flex
Flex is{" "}
Box
{" "}
with display: flex and comes with helpful style shorthand. It renders a{" "}
div element.
ImportFlex: A Box with display: flex.
Spacer: Creates an adjustable, empty space that can be used to tune the
spacing between child elements within Flex.
UsageUsing the Flex components, here are some helpful shorthand props:flexDirection is direction.
flexWrap is wrap.
While you can pass the verbose props, using the shorthand can save you some time.
Box 1
Box 2
Box 3Using the Spacer
As an alternative to Stack, you can combine Flex and{" "}
Spacer to create stackable and responsive layouts.
Box 1
Box 2
Flex and Spacer vs Grid vs Stack
The Flex and Spacer components, Grid and{" "}
HStack treat children of different widths differently.
With Flex and Spacer, the children will span the entire width of
the container and also have equal spacing between them.
In Grid, the starting points of the children will be equally spaced but the
gaps between them will not be equal.
In HStack, the children will have equal spacing between them but they won't
span the entire width of the container.
Flex and Spacer: Full width, equal spacingGrid: The children start at the beginning, the 1/3 mark and 2/3 mark
HStack: The children have equal spacing but don't span the whole container
A good use case for Spacer is to create a navbar with a signup/login button
aligned to the right.
Hope App
Props
);
}
================================================
FILE: apps/docs/src/pages/component-docs/layout/flex/snippets.ts
================================================
const importComponent = `import { Flex, Spacer } from "@hope-ui/solid"`;
const basicUsage = `
Box 1
Box 2
Box 3`;
const usingSpacer = `
Box 1
Box 2
`;
const vs = `Flex and Spacer: Full width, equal spacingGrid: The children start at the beginning, the 1/3 mark and 2/3 markHStack: The children have equal spacing but don't span the whole container`;
const spacerUseCase = `
Hope App
`;
export const snippets = {
importComponent,
basicUsage,
usingSpacer,
vs,
spacerUseCase,
};
================================================
FILE: apps/docs/src/pages/component-docs/layout/grid/index.tsx
================================================
import { Anchor, Grid, GridItem, hope, Text } from "@hope-ui/solid";
import Prism from "prismjs";
import { Link } from "solid-app-router";
import { onMount } from "solid-js";
import Code from "@/components/Code";
import CodeSnippet from "@/components/CodeSnippet";
import { ContextualNavLink } from "@/components/ContextualNav";
import PageLayout from "@/components/PageLayout";
import PageTitle from "@/components/PageTitle";
import { Preview } from "@/components/Preview";
import { PropsTable, PropsTableItem } from "@/components/PropsTable";
import SectionSubtitle from "@/components/SectionSubtitle";
import SectionTitle from "@/components/SectionTitle";
import { snippets } from "./snippets";
export default function GridDoc() {
const previousLink: ContextualNavLink = {
href: "/docs/layout/flex",
label: "Flex",
};
const nextLink: ContextualNavLink = {
href: "/docs/layout/simple-grid",
label: "SimpleGrid",
};
const contextualNavLinks: ContextualNavLink[] = [
{ href: "#import", label: "Import" },
{ href: "#template-columns", label: "Template columns" },
{ href: "#spanning-columns", label: "Spanning columns" },
{ href: "#starting-and-ending-lines", label: "Starting and ending lines" },
{ href: "#props", label: "Props" },
{ href: "#grid-props", label: "Grid props", indent: true },
{ href: "#grid-item-props", label: "GridItem props", indent: true },
];
const gridPropItems: PropsTableItem[] = [
{
name: "autoColumns",
description: "Short hand prop for gridAutoColumns.",
type: "Property.GridAutoColumns",
},
{
name: "autoRows",
description: "Short hand prop for gridAutoRows.",
type: "Property.GridAutoRows",
},
{
name: "autoFlow",
description: "Short hand prop for gridAutoFlow.",
type: "Property.GridAutoFlow",
},
{
name: "templateAreas",
description: "Short hand prop for gridTemplateAreas.",
type: "Property.GridTemplateAreas",
},
{
name: "templateColumns",
description: "Short hand prop for gridTemplateColumns.",
type: "Property.GridTemplateColumns",
},
{
name: "templateRows",
description: "Short hand prop for gridTemplateRows.",
type: "Property.GridTemplateRows",
},
];
const gridItemPropItems: PropsTableItem[] = [
{
name: "area",
description: "Short hand prop for gridArea.",
type: "Property.GridArea",
},
{
name: "colStart",
description: "The column number the grid item should start.",
type: "Property.GridColumnStart",
},
{
name: "colEnd",
description: "The column number the grid item should end.",
type: "Property.GridColumnEnd",
},
{
name: "colSpan",
description: "The number of columns the grid item should span.",
type: 'string | number | "auto" | "full"',
},
{
name: "rowStart",
description: "The row number the grid item should start.",
type: "Property.GridRowStart",
},
{
name: "rowEnd",
description: "The row number the grid item should end.",
type: "Property.GridRowEnd",
},
{
name: "rowSpan",
description: "The number of rows the grid item should span.",
type: 'string | number | "auto" | "full"',
},
];
onMount(() => {
Prism.highlightAll();
});
return (
Grid
A primitive useful for grid layouts. Grid is{" "}
Box
{" "}
with display: grid and it comes with helpful style shorthand. It renders a{" "}
div element.
ImportGrid: The main wrapper with display: grid.
GridItem: Used as a child of Grid to control the span, and
start positions within the grid.
Template columns
Here's an example of using grid template columns with the Grid component, and
applying a gap (space) between the grid items.
Spanning columns
In some layouts, you may need certain grid items to span specific amount of columns or rows
instead of an even distribution.
To achieve this, you need to pass the colSpan prop to the GridItem{" "}
component to span across columns and also pass the rowSpan component to span
across rows. You also need to specify the templateColumns and
templateRows.
Starting and ending lines
Pass the colStart and colEnd prop to GridItem{" "}
component to make an element start or end at the nth grid position.
PropsGrid props
Grid composes Box so you can pass all the Box prop, css grid
props, and these shorthand prop to save you some time:
GridItem props
);
}
================================================
FILE: apps/docs/src/pages/component-docs/layout/grid/snippets.ts
================================================
const importComponent = `import { Grid, GridItem } from "@hope-ui/solid"`;
const templateColumns = ``;
const spanningColumns = ``;
const startingAndEndingLines = ``;
export const snippets = {
importComponent,
templateColumns,
spanningColumns,
startingAndEndingLines,
};
================================================
FILE: apps/docs/src/pages/component-docs/layout/simple-grid/index.tsx
================================================
import { Alert, AlertDescription, Box, SimpleGrid, Text } from "@hope-ui/solid";
import Prism from "prismjs";
import { onMount } from "solid-js";
import Code from "@/components/Code";
import CodeSnippet from "@/components/CodeSnippet";
import { ContextualNavLink } from "@/components/ContextualNav";
import PageLayout from "@/components/PageLayout";
import PageTitle from "@/components/PageTitle";
import { Preview } from "@/components/Preview";
import { PropsTable, PropsTableItem } from "@/components/PropsTable";
import SectionSubtitle from "@/components/SectionSubtitle";
import SectionTitle from "@/components/SectionTitle";
import { snippets } from "./snippets";
export default function SimpleGridDoc() {
const previousLink: ContextualNavLink = {
href: "/docs/layout/grid",
label: "Grid",
};
const nextLink: ContextualNavLink = {
href: "/docs/layout/stack",
label: "Stack",
};
const contextualNavLinks: ContextualNavLink[] = [
{ href: "#import", label: "Import" },
{ href: "#usage", label: "Usage" },
{ href: "#auto-responsive-grid", label: "Auto-responsive grid", indent: true },
{ href: "#spacing", label: "Changing the spacing for columns and rows", indent: true },
{ href: "#props", label: "Props" },
];
const propItems: PropsTableItem[] = [
{
name: "minChildWidth",
description:
"The width at which child elements will break into columns. Pass a number for pixel values or a string for any other valid CSS length.",
type: "ResponsiveValue",
},
{
name: "columns",
description: "The number of columns.",
type: "ResponsiveValue",
},
];
onMount(() => {
Prism.highlightAll();
});
return (
SimpleGrid
SimpleGrid provides a friendly interface to create responsive grid layouts with ease. It
renders a div element with display: grid.
ImportUsageSpecifying the number of columns for the grid layout.
You can also make it responsive by passing an object value into the columns{" "}
prop.
Auto-responsive grid
To make the grid responsive and adjust automatically without passing columns,
simply pass the minChildWidth prop to specify the min-width a
child should have before adjusting the layout.
This uses css grid auto-fit and minmax() internally.
Changing the spacing for columns and rows
Simply pass the gap prop to change the row and column spacing between the grid
items. SimpleGrid also allows you pass columnGap and{" "}
rowGap to define the space between columns and rows respectively.
CSS gap properties can be confusing, columnGap add space on the X axis
whereas rowGap add space on the Y axis.
Props
SimpleGrid composes Grid so you can pass all the Grid props and
css grid props with addition of these:
);
}
================================================
FILE: apps/docs/src/pages/component-docs/layout/simple-grid/snippets.ts
================================================
const importComponent = `import { SimpleGrid } from "@hope-ui/solid"`;
const basicUsage = ``;
const responsiveColumns = ``;
const autoResponsive = ``;
const spacing = ``;
export const snippets = {
importComponent,
basicUsage,
responsiveColumns,
autoResponsive,
spacing,
};
================================================
FILE: apps/docs/src/pages/component-docs/layout/stack/index.tsx
================================================
import { Alert, AlertDescription, Anchor, Box, hope, HStack, Stack, Text } from "@hope-ui/solid";
import Prism from "prismjs";
import { onMount } from "solid-js";
import Code from "@/components/Code";
import CodeSnippet from "@/components/CodeSnippet";
import { ContextualNavLink } from "@/components/ContextualNav";
import PageLayout from "@/components/PageLayout";
import PageTitle from "@/components/PageTitle";
import { Preview } from "@/components/Preview";
import { PropsTable, PropsTableItem } from "@/components/PropsTable";
import SectionSubtitle from "@/components/SectionSubtitle";
import SectionTitle from "@/components/SectionTitle";
import { snippets } from "./snippets";
export default function StackDoc() {
const previousLink: ContextualNavLink = {
href: "/docs/layout/simple-grid",
label: "SimpleGrid",
};
const nextLink: ContextualNavLink = {
href: "/docs/typography/heading",
label: "Heading",
};
const contextualNavLinks: ContextualNavLink[] = [
{ href: "#import", label: "Import" },
{ href: "#usage", label: "Usage" },
{ href: "#responsive-direction", label: "Responsive direction", indent: true },
{ href: "#notes-on-stack-vs-flex", label: "Notes on Stack vs Flex", indent: true },
{ href: "#props", label: "Props" },
];
const propItems: PropsTableItem[] = [
{
name: "direction",
description: "The direction to stack the items. Shorthand for flexDirection style prop.",
type: "Property.FlexDirection",
},
{
name: "wrap",
description: "Shorthand for flexWrap style prop.",
type: "Property.FlexWrap",
},
{
name: "spacing",
description: "The space between each stack item.",
type: "Property.Gap",
},
];
onMount(() => {
Prism.highlightAll();
});
return (
Stack
Stack is a layout component that makes it easy to stack elements together and apply a space
between them. It uses CSS gap properties to add spacing between its children
You can check if your browser support CSS gap property in Flex layout on{" "}
caniuse.com
ImportStack: Used to add spacing between elements in the horizontal or vertical
direction. It supports responsive values.
HStack: Used to add spacing between elements in horizontal direction, and
centers them.
VStack: Used to add spacing between elements in vertical direction only,
and centers them.
Usage
To stack elements in horizontal or vertical direction only, use the HStack or{" "}
VStack components. You can also use the Stack component as well
and pass the direction prop.
1
2
3
Responsive direction
You can pass responsive values to the Stack component to change stack direction
and/or spacing between elements.
1
2
3
Notes on Stack vs Flex
Stack's primary use case is to lay items out and control the spacing between each item. If
you have a more complicated use case, such as changing the margin on the last child, you can
combine Stack and Flex and use{" "}
justify-content: space-between for more control of the layout.
Props
);
}
================================================
FILE: apps/docs/src/pages/component-docs/layout/stack/snippets.ts
================================================
const importComponent = `import { Stack, HStack, VStack } from "@hope-ui/solid"`;
const basicUsage = `
1
2
3
`;
const responsiveDirection = `
1
2
3
`;
export const snippets = {
importComponent,
basicUsage,
responsiveDirection,
};
================================================
FILE: apps/docs/src/pages/component-docs/navigation/anchor/index.tsx
================================================
import { Anchor, Text } from "@hope-ui/solid";
import Prism from "prismjs";
import { onMount } from "solid-js";
import Code from "@/components/Code";
import CodeSnippet from "@/components/CodeSnippet";
import { ContextualNavLink } from "@/components/ContextualNav";
import PageLayout from "@/components/PageLayout";
import PageTitle from "@/components/PageTitle";
import { Preview } from "@/components/Preview";
import { PropsTable, PropsTableItem } from "@/components/PropsTable";
import SectionSubtitle from "@/components/SectionSubtitle";
import SectionTitle from "@/components/SectionTitle";
import { IconExternalLink } from "@/icons/IconExternalLink";
import { snippets } from "./snippets";
export default function AnchorDoc() {
const previousLink: ContextualNavLink = {
href: "/docs/data-display/tag",
label: "Tag",
};
const nextLink: ContextualNavLink = {
href: "/docs/navigation/breadcrumb",
label: "Breadcrumb",
};
const contextualNavLinks: ContextualNavLink[] = [
{ href: "#import", label: "Import" },
{ href: "#usage", label: "Usage" },
{ href: "#external-link", label: "External link", indent: true },
{ href: "#anchor-inline-with-text", label: "Anchor inline with text", indent: true },
{ href: "#usage-with-routing-library", label: "Usage with routing library" },
{ href: "#theming", label: "Theming" },
{ href: "#props", label: "Props" },
];
const propItems: PropsTableItem[] = [
{
name: "external",
description: "If `true`, the link will open in a new tab.",
type: "boolean",
},
];
onMount(() => {
Prism.highlightAll();
});
return (
Anchor
Anchors are accessible elements used primarily for navigation. This component is styled to
resemble a hyperlink and semantically renders an a.
ImportUsageHope UIExternal link
Use the external prop to open the link in a new tab.
Hope UI Anchor inline with text
Did you know that{" "}
Anchors can live inline with text
Usage with routing library
To use the Anchor with a routing library like solid-app-router,
all you need to do is pass the as prop. It'll replace the rendered{" "}
a tag with the router's Link.
ThemingAnchor base styles and default props can be overridden in the Hope UI theme
configuration like below:
Props
);
}
================================================
FILE: apps/docs/src/pages/component-docs/navigation/anchor/snippets.ts
================================================
const importComponent = `import { Anchor } from "@hope-ui/solid"`;
const basicUsage = `Hope UI`;
const externalLink = `
Hope UI `;
const anchorWithInlineText = `
Did you know that{" "}
Anchors can live inline with text
`;
const usageWithRoutingLibrary = `// 1. import the \`Link\` component
import { Link } from "solid-app-router"
// 2. Then use it like this
Home`;
const theming = `const config: HopeThemeConfig = {
components: {
Anchor: {
baseStyle: SystemStyleObject,
defaultProps: ThemeableAnchorOptions
}
}
}`;
export const snippets = {
importComponent,
basicUsage,
externalLink,
anchorWithInlineText,
usageWithRoutingLibrary,
theming,
};
================================================
FILE: apps/docs/src/pages/component-docs/navigation/breadcrumb/index.tsx
================================================
import {
Anchor,
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbSeparator,
ListItem,
Text,
UnorderedList,
} from "@hope-ui/solid";
import Prism from "prismjs";
import { Link } from "solid-app-router";
import { onMount } from "solid-js";
import Code from "@/components/Code";
import CodeSnippet from "@/components/CodeSnippet";
import { ContextualNavLink } from "@/components/ContextualNav";
import PageLayout from "@/components/PageLayout";
import PageTitle from "@/components/PageTitle";
import { Preview } from "@/components/Preview";
import { PropsTable, PropsTableItem } from "@/components/PropsTable";
import SectionSubtitle from "@/components/SectionSubtitle";
import SectionTitle from "@/components/SectionTitle";
import { IconChevronRight } from "@/icons/IconChevronRight";
import { snippets } from "./snippets";
export default function BreadcrumbDoc() {
const previousLink: ContextualNavLink = {
href: "/docs/navigation/anchor",
label: "Anchor",
};
const nextLink: ContextualNavLink = {
href: "/docs/navigation/tabs",
label: "Tabs",
};
const contextualNavLinks: ContextualNavLink[] = [
{ href: "#import", label: "Import" },
{ href: "#usage", label: "Usage" },
{ href: "#separator", label: "Breadcrumb separator", indent: true },
{ href: "#icon-as-separator", label: "Using icon as separator", indent: true },
{ href: "#with-end-separator", label: "Using end separator", indent: true },
{ href: "#spacing", label: "Separator spacing", indent: true },
{ href: "#composition", label: "Composition" },
{ href: "#with-routing-library", label: "Usage with routing library" },
{ href: "#accessibility", label: "Accessibility" },
{ href: "#theming", label: "Theming" },
{ href: "#props", label: "Props" },
{ href: "#breadcrumb-props", label: "Breadcrumb props", indent: true },
{ href: "#breadcrumb-link-props", label: "BreadcrumbLink props", indent: true },
{ href: "#other-components-props", label: "Other components props", indent: true },
];
const breadcrumbPropItems: PropsTableItem[] = [
{
name: "spacing",
description: "The left and right space applied to each separator.",
type: 'ResponsiveValue',
defaultValue: "0.5rem",
},
{
name: "separator",
description: "The visual separator between each breadcrumb item.",
type: "string | JSX.Element",
defaultValue: "/",
},
];
const breadcrumbLinkPropItems: PropsTableItem[] = [
{
name: "currentPage",
description:
"If `true`, renders a span with `aria-current` set to `page` instead of an anchor element.",
type: "boolean",
},
];
onMount(() => {
Prism.highlightAll();
});
return (
Breadcrumb
Breadcrumbs, or a breadcrumb navigation, can help enhance how users navigate to previous
page levels of a website, especially if that website has many pages or products.
ImportBreadcrumb: The parent container for breadcrumbs.
BreadcrumbItem: Individual breadcrumb element containing a link and
separator.
BreadcrumbLink: The breadcrumb link.
BreadcrumbSeparator: The visual separator between each breadcrumb.
Usage
Add the currentPage prop to the BreadcrumbLink that matches the
current path. When this prop is present, the BreadcrumbLink renders a{" "}
span with aria-current set to page instead of an
anchor element.
HomeDocsBreadcrumbBreadcrumb separator
Use the separator prop to change the separator used in the breadcrumb.
HomeDocsBreadcrumbUsing icon as separator
You can pass any JSX.Element to the separator prop.
}>
HomeDocsBreadcrumbUsing end separator
To append a separator to the last breadcrumb item, just add a{" "}
BreadcrumbSeparator component.
HomeDocsBreadcrumbSeparator spacing
Use the spacing prop to apply left and right margin to each separator.
HomeDocsBreadcrumbComposition
Breadcrumb composes{" "}
Box
{" "}
so you can pass all Box props to change the style of the breadcrumbs.
Home
Docs
Breadcrumb
Usage with routing library
To use the Breadcrumb with a routing Library like solid-app-router, all you
need to do is to pass the as prop to the BreadcrumbLink component.
Home
Docs
BreadcrumbAccessibility
The Breadcrumbs are rendered in a nav to denote that it is a navigation
landmark.
The Breadcrumb nav has aria-label set to breadcrumb
.
The BreadcrumbLink with currentPage prop has{" "}
aria-current set to page.
The separator has role set to presentation to denote that its
for presentation purposes.
ThemingBreadcrumb base styles and default props can be overridden in the Hope UI theme
configuration like below:
PropsBreadcrumb propsBreadcrumbLink propsOther components propsBreadcrumbItem and BreadcrumbSeparator composes{" "}
Box
{" "}
component.
);
}
================================================
FILE: apps/docs/src/pages/component-docs/navigation/breadcrumb/snippets.ts
================================================
const importComponent = `import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbSeparator
} from "@hope-ui/solid"`;
const basicUsage = `HomeDocsBreadcrumb`;
const separator = `HomeDocsBreadcrumb`;
const iconSeparator = `}>
HomeDocsBreadcrumb
`;
const withEndSeparator = `HomeDocsBreadcrumb`;
const spacing = `HomeDocsBreadcrumb`;
const composition = `
Home
Docs
Breadcrumb
`;
const withRoutingLibrary = `import { Link } from "solid-app-router"
HomeDocsBreadcrumb
`;
const theming = `const config: HopeThemeConfig = {
components: {
Breadcrumb: {
baseStyle: {
root: SystemStyleObject,
item: SystemStyleObject,
link: SystemStyleObject,
separator: SystemStyleObject,
},
defaultProps: {
root: ThemeableBreadcrumbOptions
}
}
}
}`;
export const snippets = {
importComponent,
basicUsage,
separator,
iconSeparator,
withEndSeparator,
spacing,
composition,
withRoutingLibrary,
theming,
};
================================================
FILE: apps/docs/src/pages/component-docs/navigation/tabs/index.tsx
================================================
import {
Anchor,
Input,
Kbd,
ListItem,
Tab,
TabList,
TabPanel,
Tabs,
TabsProps,
Text,
UnorderedList,
VStack,
} from "@hope-ui/solid";
import Prism from "prismjs";
import { Link } from "solid-app-router";
import { createSignal, For, JSX, onMount } from "solid-js";
import Code from "@/components/Code";
import CodeSnippet from "@/components/CodeSnippet";
import { ContextualNavLink } from "@/components/ContextualNav";
import PageLayout from "@/components/PageLayout";
import PageTitle from "@/components/PageTitle";
import { Preview } from "@/components/Preview";
import { PropsTable, PropsTableItem } from "@/components/PropsTable";
import SectionSubtitle from "@/components/SectionSubtitle";
import SectionTitle from "@/components/SectionTitle";
import { snippets } from "./snippets";
export default function TabsDoc() {
const [tabIndex, setTabIndex] = createSignal(0);
const handleSliderChange: JSX.EventHandlerUnion = event => {
setTabIndex(parseInt((event.target as HTMLInputElement).value, 10));
};
const handleTabsChange = (index: number) => {
setTabIndex(index);
};
const previousLink: ContextualNavLink = {
href: "/docs/navigation/breadcrumb",
label: "Breadcrumb",
};
const nextLink: ContextualNavLink = {
href: "/docs/feedback/alert",
label: "Alert",
};
const contextualNavLinks: ContextualNavLink[] = [
{ href: "#import", label: "Import" },
{ href: "#usage", label: "Usage" },
{ href: "#colors", label: "Tabs colors", indent: true },
{ href: "#sizes", label: "Tabs sizes", indent: true },
{ href: "#variants", label: "Tabs variants", indent: true },
{ href: "#aligments", label: "Tabs aligments", indent: true },
{ href: "#orientation", label: "Tabs orientation", indent: true },
{ href: "#fitted-tabs", label: "Fitted tabs", indent: true },
{ href: "#disabled-tab", label: "Disabled tab", indent: true },
{ href: "#initial-active-tab", label: "Make a tab initially active", indent: true },
{ href: "#keep-alive", label: "Keeping tab panels alive", indent: true },
{ href: "#controlled-tabs", label: "Controlled tabs", indent: true },
{ href: "#accessibility", label: "Accessibility" },
{ href: "#theming", label: "Theming" },
{ href: "#props", label: "Props" },
{ href: "#tabs-props", label: "Tabs props", indent: true },
{ href: "#tab-props", label: "Tab props", indent: true },
{ href: "#other-components-props", label: "Other components props", indent: true },
];
const tabsPropItems: PropsTableItem[] = [
{
name: "variant",
description: "The visual style of the tabs.",
type: '"underline" | "outline" | "cards" | "pills"',
defaultValue: '"underline"',
},
{
name: "colorScheme",
description: "The color of the tabs.",
type: '"primary" | "accent" | "neutral" | "success" | "info" | "warning" | "danger"',
defaultValue: '"primary"',
},
{
name: "size",
description: "The size of the tabs.",
type: '"sm" | "md" | "lg"',
defaultValue: '"md"',
},
{
name: "alignment",
description: "The alignment of the tabs.",
type: '"start" | "center" | "apart" | "end"',
defaultValue: '"start"',
},
{
name: "orientation",
description: "The orientation of the tabs.",
type: '"horizontal" | "vertical"',
defaultValue: '"horizontal"',
},
{
name: "fitted",
description: "If `true`, the tabs will stretch to fit the container.",
type: "boolean",
defaultValue: "false",
},
{
name: "keepAlive",
description: "If `true`, the content of inactive tab panels stays mounted when unselected.",
type: "boolean",
defaultValue: "false",
},
{
name: "index",
description: "The index of the selected tab (in controlled mode).",
type: "number",
},
{
name: "defaultIndex",
description: "The initial index of the selected tab (in uncontrolled mode).",
type: "number",
defaultValue: "0",
},
{
name: "id",
description: "The id of the tabs component.",
type: "string",
},
{
name: "onChange",
description:
"Callback invoked when the tabs index changes (in controlled or un-controlled modes).",
type: "(index: number) => void",
},
];
const tabPropItems: PropsTableItem[] = [
{
name: "id",
description: "The `id` of the tab.",
type: "string",
},
{
name: "panelId",
description: "The `id` of the tab panel associated to this tab.",
type: "string",
},
{
name: "disabled",
description: "If `true`, the tab will be disabled.",
type: "boolean",
},
];
onMount(() => {
Prism.highlightAll();
});
return (
Tabs
An accessible tabs component that provides keyboard interactions and ARIA attributes
described in the{" "}
WAI-ARIA Tabs
{" "}
design pattern.
ImportTabs: Provides context for all its children.
TabList: Wrapper for the Tab components.
Tab: Element that serves as a label for one of the tab panels and can be
activated to display that panel.
TabPanel: Element that contains the content associated with a tab.
UsageOneTwoThree123Tabs colors
Use the colorScheme prop to change the color of the Tabs. You can set the value
to primary, accent, neutral, success,{" "}
info, warning or danger.
{colorScheme => (
OneTwoThree123
)}
Tabs sizes
Use the size prop to change the size of the Tabs. You can set the value to{" "}
sm, md or lg.
{size => (
OneTwoThree123
)}
Tabs variants
Use the variant prop to change the visual style of the Tabs. You can set the
value to underline, outline, cards or{" "}
pills.
{variant => (
OneTwoThree123
)}
Tabs aligments
Use the aligment prop to change the alignment of the TabList. You
can set the value to start, center, apart or{" "}
end.
{alignment => (
OneTwoThree123
)}
Tabs orientation
Use the orientation prop to change the orientation of the Tabs. You can set the
value to horizontal or vertical.
OneTwoThree123Fitted tabs
Use the fitted prop to stretch the tab list to fit the container.
OneTwoThree123Disabled tab
Use the disabled prop to disabled a Tab. When a Tab{" "}
is disabled, it is skipped during keyboard navigation and it is not clickable.
OneTwoThree123Make a tab initially active
Use the defaultIndex prop to set a Tab initially active. Indexes
start at 0.
OneTwoThree123Keeping tab panels alive
By default, when you switch between tabs the state of the tab panels are lost, use the{" "}
keepAlive prop to keep tab panels alive even when there's not visible.
OneTwoThree23OneTwoThree23Controlled tabs
Use the index and onChange props to control the Tabs{" "}
like form inputs.
OneTwoThree
Click the tabs or pull the slider around
Yeah yeah. What's up?
Oh, hello there.
AccessibilityARIA roles and attributesTabList as role set to tablist.
TabList as aria-orientation set to horizontal or{" "}
vertical based on the value of the orientation prop.
Tab as role set to tab.
Tab as aria-selected set to true when its selected.
Tab as aria-controls set to the id of its
associated TabPanel.
TabPanel as role set to tabpanel.
TabPanel as aria-labelledby set to the id of the{" "}
Tab that labels it.
Keyboard support← moves focus to the previous tab (in horizontal orientation).
→ moves focus to the next tab (in horizontal orientation).
↑ moves focus to the previous tab (in vertical orientation).
↓ moves focus to the next tab (in vertical orientation).
home moves focus to the first tab.
end moves focus to the last tab.
tab when focus moves into the tab list, places focus on the active tab element.
ThemingTabs base styles and default props can be overridden in the Hope UI theme
configuration like below:
PropsTabs propsTab propsOther components propsTabList, TabPanels and TabPanel composes{" "}
Box
.
);
}
================================================
FILE: apps/docs/src/pages/component-docs/navigation/tabs/snippets.ts
================================================
const importComponent = `import {
Tabs,
TabList,
Tab,
TabPanel
} from "@hope-ui/solid"`;
const basicUsage = `OneTwoThree123`;
const colors = `
{colorScheme => (
OneTwoThree123
)}
`;
const sizes = `
{size => (
OneTwoThree123
)}
`;
const variants = `
{variant => (
OneTwoThree123
)}
`;
const aligments = `
{alignment => (
OneTwoThree123
)}
`;
const orientation = `OneTwoThree123`;
const fitted = `OneTwoThree123`;
const disabled = `OneTwoThree123`;
const initialActive = `OneTwoThree123`;
const keepAlive = `OneTwoThree23OneTwoThree23`;
const controlled = `function ControlledExample() {
const [tabIndex, setTabIndex] = createSignal(0);
const handleSliderChange = (event) => {
setTabIndex(parseInt(event.target.value, 10));
};
const handleTabsChange = (index) => {
setTabIndex(index);
};
return (
<>
OneTwoThree
Click the tabs or pull the slider around
Yeah yeah. What's up?
Oh, hello there.
)
}`;
const theming = `const config: HopeThemeConfig = {
components: {
Tabs: {
baseStyle: {
root: SystemStyleObject,
tabList: SystemStyleObject,
tab: SystemStyleObject,
tabPanel: SystemStyleObject,
},
defaultProps: {
root: ThemeableTabsOptions
}
}
}
}`;
export const snippets = {
importComponent,
basicUsage,
colors,
sizes,
variants,
aligments,
orientation,
fitted,
disabled,
initialActive,
keepAlive,
controlled,
theming,
};
================================================
FILE: apps/docs/src/pages/component-docs/others/close-button/index.tsx
================================================
import { CloseButton, HStack, Text } from "@hope-ui/solid";
import Prism from "prismjs";
import { onMount } from "solid-js";
import Code from "@/components/Code";
import CodeSnippet from "@/components/CodeSnippet";
import { ContextualNavLink } from "@/components/ContextualNav";
import PageLayout from "@/components/PageLayout";
import PageTitle from "@/components/PageTitle";
import { Preview } from "@/components/Preview";
import { PropsTable, PropsTableItem } from "@/components/PropsTable";
import SectionSubtitle from "@/components/SectionSubtitle";
import SectionTitle from "@/components/SectionTitle";
import { snippets } from "./snippets";
export default function CloseButtonDoc() {
const previousLink: ContextualNavLink = {
href: "/docs/overlay/tooltip",
label: "Toolitp",
};
const contextualNavLinks: ContextualNavLink[] = [
{ href: "#import", label: "Import" },
{ href: "#usage", label: "Usage" },
{ href: "#sizes", label: "Button sizes", indent: true },
{ href: "#theming", label: "Theming" },
{ href: "#props", label: "Props" },
];
const propItems: PropsTableItem[] = [
{
name: "size",
description: "The size of the button.",
type: '"sm" | "md" | "lg"',
defaultValue: '"md"',
},
{
name: "aria-label",
description: "A label that describes the button.",
type: "string",
},
{
name: "icon",
description: "The icon to be used in the button.",
type: "JSX.Element",
},
];
onMount(() => {
Prism.highlightAll();
});
return (
CloseButtonCloseButton is essentially a button with a close icon. It is used to handle the
close functionality in feedback and overlay components like Alerts, Notifications, Drawers
and Modals.
ImportUsageButton sizes
Use the size prop to change the size of the CloseButton. You can set the value
to sm, md or lg.
ThemingCloseButton base styles and default props can be overridden in the Hope UI
theme configuration like below:
Props
);
}
================================================
FILE: apps/docs/src/pages/component-docs/others/close-button/snippets.ts
================================================
const importComponent = `import { CloseButton } from "@hope-ui/solid"`;
const basicUsage = ``;
const closeButtonSizes = ``;
const theming = `const config: HopeThemeConfig = {
components: {
CloseButton: {
baseStyle: SystemStyleObject,
defaultProps: ThemeableCloseButtonOptions
}
}
}`;
export const snippets = {
importComponent,
basicUsage,
closeButtonSizes,
theming,
};
================================================
FILE: apps/docs/src/pages/component-docs/overlay/drawer/index.tsx
================================================
import {
Alert,
AlertDescription,
Anchor,
Button,
createDisclosure,
Drawer,
DrawerBody,
DrawerCloseButton,
DrawerContent,
DrawerFooter,
DrawerHeader,
DrawerOverlay,
DrawerPlacement,
DrawerProps,
FormControl,
FormLabel,
HStack,
Input,
ListItem,
Radio,
RadioGroup,
Text,
UnorderedList,
} from "@hope-ui/solid";
import Prism from "prismjs";
import { Link } from "solid-app-router";
import { createSignal, For, onMount } from "solid-js";
import Code from "@/components/Code";
import CodeSnippet from "@/components/CodeSnippet";
import { ContextualNavLink } from "@/components/ContextualNav";
import PageLayout from "@/components/PageLayout";
import PageTitle from "@/components/PageTitle";
import { Preview } from "@/components/Preview";
import { PropsTable, PropsTableItem } from "@/components/PropsTable";
import SectionSubtitle from "@/components/SectionSubtitle";
import SectionTitle from "@/components/SectionTitle";
import { IconPlus } from "@/icons/IconPlus";
import { snippets } from "./snippets";
export default function DrawerDoc() {
const [placement, setPlacement] = createSignal("right");
const [size, setSize] = createSignal("md");
const sizes = ["xs", "sm", "md", "lg", "xl", "full"];
const basicUsageDisclosure = createDisclosure();
const placementDisclosure = createDisclosure();
const initialFocusDisclosure = createDisclosure();
const sizeDisclosure = createDisclosure();
const handleSizeClick = (newSize: DrawerProps["size"]) => {
setSize(() => newSize);
sizeDisclosure.onOpen();
};
const previousLink: ContextualNavLink = {
href: "/docs/feedback/notification",
label: "Notification",
};
const nextLink: ContextualNavLink = {
href: "/docs/overlay/menu",
label: "Menu",
};
const contextualNavLinks: ContextualNavLink[] = [
{ href: "#import", label: "Import" },
{ href: "#usage", label: "Usage" },
{ href: "#drawer-placement", label: "Drawer placement", indent: true },
{ href: "#focus-on-specific-element", label: "Focus on specific element", indent: true },
{ href: "#drawer-sizes", label: "Drawer sizes", indent: true },
{ href: "#using-form-in-drawer", label: "Using a form in a Drawer", indent: true },
{ href: "#accessibility", label: "Accessibility" },
{ href: "#theming", label: "Theming" },
{ href: "#props", label: "Props" },
{ href: "#drawer-props", label: "Drawer props", indent: true },
{ href: "#other-components-props", label: "Other components props", indent: true },
];
const propItems: PropsTableItem[] = [
{
name: "size",
description: "The size of the drawer.",
type: '"xs" | "sm" | "md" | "lg" | "xl" | "full"',
defaultValue: '"xs"',
},
{
name: "placement",
description: "The placement of the drawer.",
type: '"top" | "right" | "bottom" | "left"',
defaultValue: '"right"',
},
{
name: "fullHeight",
description:
"If `true` and drawer's placement is top or bottom, the drawer will occupy the viewport height (100vh).",
type: "boolean",
},
{
name: "disableMotion",
description: "If `true`, the drawer will appear without any transition.",
type: "boolean",
},
];
onMount(() => {
Prism.highlightAll();
});
return (
Drawer
The Drawer component is a panel that slides out from the edge of the screen. It
can be useful when you need users to complete a task or view some details without leaving
the current page.
ImportDrawer: The wrapper that provides context for its children.
DrawerOverlay: The dimmed overlay behind the drawer content.
DrawerContent: The container for the drawer's content.
DrawerHeader: The header that labels the drawer.
DrawerBody: The wrapper that houses the drawer's main content.
DrawerFooter: The footer that houses the drawer actions.
DrawerCloseButton: The button that closes the drawer.
UsageCreate your accountDrawer placement
The Drawer can appear from any edge of the screen. Pass the placement prop and
set it to top, right, bottom, or left.
setPlacement(value as DrawerPlacement)}>
TopRightBottomLeftBasic Drawer
Some contents...
Some contents...
Some contents...
Focus on specific element
Hope UI automatically sets focus on the first tabbable element in the drawer. However, there
might be scenarios where you need to manually control where focus goes. To do this, pass a
CSS query selector to the initialFocus prop.
} onClick={initialFocusDisclosure.onOpen}>
Create user
Create userFirst nameLast name
Without the initialFocus prop, the drawer will set focus on the{" "}
first focusable element when it opens.
Drawer sizes
Pass the size prop if you need to adjust the size of the drawer. Values can be{" "}
xs, sm, md, lg, xl, or{" "}
full.
{size => (
)}
{`${size()} drawer contents`}
{size() === "full"
? `You're trapped 😆 , refresh the page to leave or press 'Esc' key.`
: null}
Using a form in a Drawer
If you need to but a form within the Drawer and place the sumit button in the drawer's
footer, here's the recommended way to do it:
Because the button is located outside the form, you have to leverage its native HTML{" "}
form attribute and refer to the id of the form.
AccessibilityWhen opening the Drawer, focus is trapped inside the Drawer.
By default, the drawer sets focus on the first focusable element. If the{" "}
initialFocus prop is passed, the drawer sets focus on the element that
matches the CSS query selector.
After the drawer closes, it'll return focus to the element that triggered it.
ThemingDrawer base styles and default props can be overridden in the Hope UI theme
configuration like below:
PropsDrawer propsDrawer composes the{" "}
Modal
{" "}
component with these extra props:
Other components propsDrawerOverlay, DrawerContent, DrawerHeader,{" "}
DrawerBody and DrawerFooter composes{" "}
Box
{" "}
component.
DrawerCloseButton composes{" "}
CloseButton
.
);
}
================================================
FILE: apps/docs/src/pages/component-docs/overlay/drawer/snippets.ts
================================================
const importComponent = `import {
Drawer,
DrawerBody,
DrawerCloseButton,
DrawerContent,
DrawerFooter,
DrawerHeader,
DrawerOverlay,
} from "@hope-ui/solid"`;
const basicUsage = `function DrawerExample() {
const { isOpen, onOpen, onClose } = createDisclosure()
return (
<>
Create your account
)
}`;
const placement = `function PlacementExample() {
const [placement, setPlacement] = createSignal("right");
const { isOpen, onOpen, onClose } = createDisclosure()
return (
<>
setPlacement(value as DrawerPlacement)}
>
TopRightBottomLeftBasic Drawer
Some contents...
Some contents...
Some contents...
)
}`;
const initialFocus = `function InitialFocusExample() {
const { isOpen, onOpen, onClose } = createDisclosure()
return (
<>
} onClick={onOpen}>
Create user
Create userFirst nameLast name
)
}`;
const drawerSizes = `function SizeExample() {
const [size, setSize] = createSignal("md");
const { isOpen, onOpen, onClose } = createDisclosure()
const handleClick = (newSize) => {
setSize(newSize)
onOpen()
}
const sizes = ['xs', 'sm', 'md', 'lg', 'xl', 'full']
return (
<>
{size => (
)}
{\`\${size()} drawer contents\`}
{size === 'full'
? \`You're trapped 😆 , refresh the page to leave or press 'Esc' key.\`
: null}
)
}`;
const usingForm = `function FormExample() {
const { isOpen, onOpen, onClose } = createDisclosure()
return (
<>
Create your account
)
}`;
const theming = `const config: HopeThemeConfig = {
components: {
Drawer: {
baseStyle: {
overlay: SystemStyleObject,
content: SystemStyleObject,
closeButton: SystemStyleObject,
header: SystemStyleObject,
body: SystemStyleObject,
footer: SystemStyleObject
},
defaultProps: {
root: ThemeableDrawerOptions,
closeButton: ThemeableCloseButtonOptions
}
}
}
}`;
export const snippets = {
importComponent,
basicUsage,
placement,
initialFocus,
drawerSizes,
usingForm,
theming,
};
================================================
FILE: apps/docs/src/pages/component-docs/overlay/menu/index.tsx
================================================
import {
Alert,
AlertDescription,
Anchor,
Button,
Divider,
IconButton,
Kbd,
ListItem,
Menu,
MenuContent,
MenuGroup,
MenuItem,
MenuLabel,
MenuTrigger,
Text,
UnorderedList,
} from "@hope-ui/solid";
import Prism from "prismjs";
import { Link } from "solid-app-router";
import { onMount } from "solid-js";
import Code from "@/components/Code";
import CodeSnippet from "@/components/CodeSnippet";
import { ContextualNavLink } from "@/components/ContextualNav";
import PageLayout from "@/components/PageLayout";
import PageTitle from "@/components/PageTitle";
import { Preview } from "@/components/Preview";
import { PropsTable, PropsTableItem } from "@/components/PropsTable";
import SectionSubtitle from "@/components/SectionSubtitle";
import SectionTitle from "@/components/SectionTitle";
import { IconCaretDown } from "@/icons/IconCaretDown";
import { IconEdit } from "@/icons/IconEdit";
import { IconExternalLink } from "@/icons/IconExternalLink";
import { IconHamburgerMenu } from "@/icons/IconHamburgerMenu";
import { IconPlus } from "@/icons/IconPlus";
import { IconRepeat } from "@/icons/IconRepeat";
import { snippets } from "./snippets";
export default function MenuDoc() {
const previousLink: ContextualNavLink = {
href: "/docs/overlay/drawer",
label: "Drawer",
};
const nextLink: ContextualNavLink = {
href: "/docs/overlay/modal",
label: "Modal",
};
const contextualNavLinks: ContextualNavLink[] = [
{ href: "#import", label: "Import" },
{ href: "#usage", label: "Usage" },
{ href: "#accessing-internal-state", label: "Accessing the internal state", indent: true },
{ href: "#custom-menu-trigger", label: "Custom menu trigger", indent: true },
{ href: "#icons-and-commands", label: "Icons and commands", indent: true },
{ href: "#typeahead-behavior", label: "Typeahead behavior", indent: true },
{ href: "#menu-item-colors", label: "MenuItem colors", indent: true },
{ href: "#disabled-menu-item", label: "Disabled MenuItem", indent: true },
{
href: "#trigger-action",
label: "Trigger an action when a MenuItem is selected",
indent: true,
},
{ href: "#menu-group", label: "MenuGroup", indent: true },
{ href: "#accessibility", label: "Accessibility" },
{ href: "#theming", label: "Theming" },
{ href: "#props", label: "Props" },
{ href: "#menu-props", label: "Menu props", indent: true },
{ href: "#menu-item-props", label: "MenuItem props", indent: true },
{ href: "#other-components-props", label: "Other components props", indent: true },
];
const menuPropItems: PropsTableItem[] = [
{
name: "id",
description: "The `id` of the menu trigger.",
type: "string",
},
{
name: "children",
description:
"The children of the menu. Using a render prop gives access to the `opened` state.",
type: "JSX.Element | (props: { opened: Accessor }) => JSX.Element",
},
{
name: "closeOnSelect",
description: "If `true`, the menu will close when a menu item is selected.",
type: "boolean",
defaultValue: "true",
},
{
name: "offset",
description:
"Offset between the menu content (dropdown panel) and the reference (trigger) element.",
type: "number",
},
{
name: "placement",
description: "The placement of the menu content (dropdown panel).",
type: "Placement",
defaultValue: '"bottom-start"',
},
{
name: "motionPreset",
description: "The transition that should be used for the menu.",
type: '"scale-top-left" | "scale-top-right" | "none"',
defaultValue: '"scale-top-left"',
},
];
const menuItemPropItems: PropsTableItem[] = [
{
name: "colorScheme",
description: "The color of the menu item.",
type: '"primary" | "accent" | "neutral" | "success" | "info" | "warning" | "danger"',
defaultValue: '"neutral"',
},
{
name: "disabled",
description: "If `true`, the menu item will be disabled.",
type: "boolean",
defaultValue: "true",
},
{
name: "closeOnSelect",
description: "If `true`, the menu will close when the menu item is selected.",
type: "boolean",
defaultValue: "true",
},
{
name: "textValue",
description:
"Optional text used for typeahead purposes. By default the typeahead behavior will use the `.textContent` of the `MenuItem`. Use this when the content is complex, or you have non-textual content inside.",
type: "string",
},
{
name: "icon",
description: "The icon to display next to the menu item text.",
type: "JSX.Element",
},
{
name: "iconSpacing",
description: "The space between the icon and the menu item text.",
type: 'MarginProps["marginRight"]',
defaultValue: "0.5rem",
},
{
name: "command",
description: "Right-aligned label text content, useful for displaying hotkeys.",
type: "string",
},
{
name: "commandSpacing",
description: "The space between the command and the menu item text.",
type: 'MarginProps["marginLeft"]',
defaultValue: "0.5rem",
},
{
name: "onSelect",
description:
"Event handler called when the user selects a menu item (via mouse or keyboard).",
type: "() => void",
},
];
onMount(() => {
Prism.highlightAll();
});
return (
Menu
An accessible dropdown menu for the common dropdown menu button design pattern.{" "}
Menu implement the{" "}
WAI ARIA Actions Menu Button
{" "}
design pattern.
ImportMenu: The wrapper component that provides context for all its children.
MenuTrigger: The trigger that toggles the menu.
MenuContent: The component that pops out when the menu is open.
MenuGroup: The component used to group multiple menu item.
MenuLabel: The component used to render the label of a group.
MenuItem: An item of the menu.
UsageAccessing the internal state
To access the internal state of the Menu, use a function as children (commonly
known as a render prop). You'll get access to the internal opened state.
Custom menu trigger
The default MenuTrigger can be styled using the usual styled-system props, but
it starts off plainly styled.
You can use the as prop to render a custom component instead of the default{" "}
MenuTrigger. For instance, you can use Hope UI's Button component,
or your own custom component.
Icons and commands
You can add icon to each MenuItem by passing the icon prop. To add
a commands (or hotkeys) to menu items, you can use the command prop.
Typeahead behavior
When focus is on the MenuTrigger or within the MenuContent and you
type a letter key, a search begins. Focus will move to the first MenuItem that
starts with the letter you typed.
If the content of MenuItem is too complex or non-textual you can pass the{" "}
textValue prop to MenuItem to indicate the text that will be
used for typeahead purposes.
MenuItem colors
Use the colorScheme prop to change the color of the MenuItem. You
can set the value to primary, accent, neutral,{" "}
success, info, warning or danger.
Disabled MenuItem
Use the disabled prop to disable a MenuItem.
Trigger an action when a MenuItem is selected
Pass a callback to the onSelect prop to trigger an action when the{" "}
MenuItem is selected.
MenuGroup
Use the MenuGroup and MenuLabel components to group related menu
items.
AccessibilityARIA roles and attributesMenuTrigger as role set to button.
MenuTrigger as aria-haspopup set to menu.
MenuTrigger as aria-expanded set to true when the
menu is displayed.
MenuTrigger as aria-controls set to the id of{" "}
MenuContent.
MenuContent as role set to menu.
MenuContent as aria-orientation set to vertical.
MenuItem as role set to menuitem.
Keyboard support (closed menu)enter, space or ↓ opens the menu and moves focus on the
first menu item.
↑ opens the menu and moves focus to the last menu item.
Keyboard support (opened menu)enter or space activates the menu item, close the menu and sets
focus to the menu trigger.
esc close the menu and sets focus to the menu trigger.
↑ moves focus to the previous menu item. If focus is on the first menu item,
moves focus to the last menu item.
↓ moves focus to the next menu item. If focus is on the last menu item, moves
focus to the first menu item.
home moves focus to the first menu item.
end moves focus to the last menu item.
Typeahead behavior
Any printable characters move visual focus to the first menu item that matches the typed
character.
If multiple keys are typed in quick succession, visual focus moves to the first menu item
that matches the full string.
If the same character is typed in succession, visual focus cycles among the menu items
starting with that character.
ThemingMenu base styles and default props can be overridden in the Hope UI theme
configuration like below:
PropsMenu propsMenuItem propsOther components propsMenuTrigger, MenuContent, MenuGroup and{" "}
MenuLabel composes{" "}
Box
.
);
}
================================================
FILE: apps/docs/src/pages/component-docs/overlay/menu/snippets.ts
================================================
const importComponent = `import {
Menu,
MenuTrigger,
MenuContent,
MenuGroup,
MenuLabel,
MenuItem
} from "@hope-ui/solid"`;
const basicUsage = ``;
const accessingInternalState = ``;
const iconsAndCommands = ``;
const menuItemColors = ``;
const disabledMenuItem = ``;
const triggerAction = ``;
const menuGroup = ``;
const theming = `const config: HopeThemeConfig = {
components: {
Menu: {
baseStyle: {
trigger: SystemStyleObject,
content: SystemStyleObject,
group: SystemStyleObject,
label: SystemStyleObject,
item: SystemStyleObject,
itemText: SystemStyleObject,
itemIconWrapper: SystemStyleObject,
itemCommand: SystemStyleObject,
},
defaultProps: {
root: ThemeableMenuOptions
}
}
}
}`;
export const snippets = {
importComponent,
basicUsage,
accessingInternalState,
iconsAndCommands,
menuItemColors,
disabledMenuItem,
triggerAction,
menuGroup,
theming,
};
================================================
FILE: apps/docs/src/pages/component-docs/overlay/modal/index.tsx
================================================
import {
Alert,
AlertDescription,
Anchor,
Button,
createDisclosure,
FormControl,
FormLabel,
HStack,
Input,
Kbd,
ListItem,
Modal,
ModalBody,
ModalCloseButton,
ModalContent,
ModalFooter,
ModalHeader,
ModalOverlay,
ModalProps,
Radio,
RadioGroup,
Text,
UnorderedList,
} from "@hope-ui/solid";
import Prism from "prismjs";
import { Link } from "solid-app-router";
import { createSignal, For, onMount } from "solid-js";
import Code from "@/components/Code";
import CodeSnippet from "@/components/CodeSnippet";
import { ContextualNavLink } from "@/components/ContextualNav";
import PageLayout from "@/components/PageLayout";
import PageTitle from "@/components/PageTitle";
import { Preview } from "@/components/Preview";
import { PropsTable, PropsTableItem } from "@/components/PropsTable";
import SectionSubtitle from "@/components/SectionSubtitle";
import SectionTitle from "@/components/SectionTitle";
import { snippets } from "./snippets";
export default function ModalDoc() {
const basicUsageDisclosure = createDisclosure();
const blockScrollDisclosure = createDisclosure();
const initialFocusDisclosure = createDisclosure();
const closeOnOverlayClickDisclosure = createDisclosure();
const centeredDisclosure = createDisclosure();
const transitionDisclosure = createDisclosure();
const overflowDisclosure = createDisclosure();
const sizeDisclosure = createDisclosure();
const trapFocusDisclosure = createDisclosure();
const backdropStyleDisclosure = createDisclosure();
const [scrollBehavior, setScrollBehavior] = createSignal("inside");
const [size, setSize] = createSignal("md");
const handleSizeClick = (newSize: ModalProps["size"]) => {
setSize(() => newSize);
sizeDisclosure.onOpen();
};
const sizes = ["xs", "sm", "md", "lg", "xl", "full"];
const previousLink: ContextualNavLink = {
href: "/docs/overlay/menu",
label: "Menu",
};
const nextLink: ContextualNavLink = {
href: "/docs/overlay/popover",
label: "Popover",
};
const contextualNavLinks: ContextualNavLink[] = [
{ href: "#import", label: "Import" },
{ href: "#usage", label: "Usage" },
{ href: "#block-scrolling", label: "Block scrolling when modal opens", indent: true },
{ href: "#focus-on-specific-element", label: "Focus on specific element", indent: true },
{ href: "#close-on-overlay-click", label: "Close modal on overlay click", indent: true },
{ href: "#modal-vertically-centered", label: "Make modal vertically centered", indent: true },
{ href: "#changing-transition", label: "Changing the transition", indent: true },
{ href: "#overflow-behavior", label: "Modal overflow behavior", indent: true },
{ href: "#modal-sizes", label: "Modal sizes", indent: true },
{ href: "#prevent-focus-trapping", label: "Prevent focus trapping", indent: true },
{ href: "#styling-backdrop", label: "Styling the backdrop", indent: true },
{ href: "#accessibility", label: "Accessibility" },
{ href: "#theming", label: "Theming" },
{ href: "#props", label: "Props" },
{ href: "#modal-props", label: "Modal props", indent: true },
{ href: "#other-components-props", label: "Other components props", indent: true },
];
const propItems: PropsTableItem[] = [
{
required: true,
name: "opened",
description: "If `true`, the modal will be open.",
type: "boolean",
},
{
required: true,
name: "onClose",
description: "Callback invoked to close the modal.",
type: "() => void",
},
{
name: "size",
description: "The size of the modal.",
type: '"xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "full"',
defaultValue: '"md"',
},
{
name: "scrollBehavior",
description:
"Defines how scrolling should happen when content overflows beyond the viewport.",
type: '"inside" | "outside"',
defaultValue: '"outside"',
},
{
name: "centered",
description: "If `true`, the modal will be centered on screen.",
type: "boolean",
defaultValue: "false",
},
{
name: "closeOnOverlayClick",
description: "If `true`, the modal will close when the overlay is clicked.",
type: "boolean",
defaultValue: "true",
},
{
name: "closeOnEsc",
description: "If `true`, the modal will close when the `Esc` key is pressed.",
type: "boolean",
defaultValue: "true",
},
{
name: "trapFocus",
description:
"If `false`, focus lock will be disabled completely. This is useful in situations where you still need to interact with other surrounding elements. Warning: We don't recommend doing this because it hurts the accessibility of the modal, based on WAI-ARIA specifications.",
type: "boolean",
defaultValue: "true",
},
{
name: "blockScrollOnMount",
description: "If `true`, scrolling will be disabled on the `body` when the modal opens.",
type: "boolean",
defaultValue: "true",
},
{
name: "motionPreset",
description: "The transition that should be used for the modal.",
type: '"fade-in-bottom" | "scale" | "none"',
defaultValue: '"scale"',
},
{
name: "initialFocus",
description:
"A query selector string targeting the element to receive focus when the modal opens.",
type: "string",
},
{
name: "id",
description: "The `id` of the modal dialog.",
type: "string",
},
{
name: "onOverlayClick",
description: "Callback fired when the overlay is clicked.",
type: "() => void",
},
{
name: "onEsc",
description: "Callback fired when the escape key is pressed and focus is within modal.",
type: "() => void",
},
];
onMount(() => {
Prism.highlightAll();
});
return (
Modal
A modal dialog is a window overlaid on either the primary window or another dialog window.
Content behind a modal dialog is inert, meaning that users cannot interact with it.
ImportModal: The wrapper that provides context for its children.
ModalOverlay: The dimmed overlay behind the modal dialog.
ModalContent: The container for the modal dialog's content.
ModalHeader: The header that labels the modal dialog.
ModalBody: The wrapper that houses the modal's main content.
ModalFooter: The footer that houses the modal actions.
ModalCloseButton: The button that closes the modal.
Usage
When the modal opens, focus is sent into the modal and set to the first tabbable element. If
there are no tabbled elements, focus is set on ModalContent.
Modal Title
Some contents...
Block scrolling when modal opens
For accessibility, it is recommended to block scrolling on the main document behind the
modal. Hope UI does this by default but you can set blockScrollOnMount to{" "}
false to allow scrolling behind the modal.
Modal TitleYou can scroll the content behind the modalFocus on specific element
Hope UI automatically sets focus on the first tabbable element in the modal. However, there
might be scenarios where you need to manually control where focus goes. To do this, pass a
CSS query selector to the initialFocus prop.
Create your accountFirst nameLast nameClose modal on overlay click
By default, the modal closes when you click its overlay. You can set{" "}
closeOnOverlayClick to false if you want the modal to stay
visible.
Modal Title
Some contents...
Make modal vertically centered
By default the modal has a vertical offset of 3.75rem which you can change by
passing top to the ModalContent. If you need to vertically center
the modal, pass the centered prop.
Modal Title
Some contents...
If the content within the modal overflows beyond the viewport, don't use this prop. Try
setting the{" "}
overflow behavior
{" "}
instead.
Changing the transition
The Modal comes with a scale transition by default but you can change it by
passing the motionPreset prop, and set its value to either{" "}
fade-in-bottom, scale or none.
Modal Title
Some contents...
Modal overflow behavior
If the content within the modal overflows beyond the viewport, you can use the
scrollBehavior to control how scrolling should happen.
If set to inside, scroll only occurs within the ModalBody.
If set to outside, the entire ModalContent will scroll within
the viewport.
InsideOutsideModal Title
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quos blanditiis accusamus
in praesentium dolorem, sunt quia sit sequi minima maxime? Eius natus, aut omnis
deserunt nostrum fugiat! Totam magni sapiente maxime maiores aut doloremque veniam
excepturi, id quae veritatis est omnis, nesciunt ipsum, voluptate adipisci nam sed
ea inventore facere nulla optio aliquid? Aliquid iure, optio et fuga quo dicta
ratione impedit praesentium mollitia maiores ipsa, magni sapiente reiciendis
perspiciatis. Molestiae quisquam eveniet aliquam consequatur accusantium quasi ut
sint animi reiciendis. Suscipit numquam commodi fuga provident? Voluptatem dicta
exercitationem nemo beatae cum consequuntur pariatur quidem magni sed tempore. Eaque
itaque totam quae incidunt quidem officia atque libero placeat? Obcaecati, ullam
dolores velit sequi magni animi inventore earum error maiores et, sunt numquam illo
fugiat ducimus in aspernatur possimus minus, placeat blanditiis alias. Deleniti
corrupti eaque debitis adipisci, doloremque rerum temporibus saepe error! Fugiat
inventore possimus doloribus, nemo qui, nostrum alias non tempora nam itaque quae
maiores tempore, quasi blanditiis incidunt aut. Sapiente sit distinctio adipisci.
Consectetur numquam ratione facere fuga ipsum quasi aliquam velit illum iure
consequuntur, repellat cumque quibusdam dolorem asperiores perspiciatis ducimus.
Quod earum alias nihil voluptate inventore dolores mollitia natus saepe esse. Aut
assumenda nulla maxime recusandae nihil iusto dicta commodi pariatur veritatis?
Impedit nam deserunt optio aspernatur praesentium totam illum facere id
exercitationem veniam eveniet vitae obcaecati minima, similique rerum suscipit
dolorum tempora perferendis voluptatem ex ipsam! Ut ea, sapiente cum, adipisci ab
voluptatem enim, explicabo illo sunt exercitationem ipsum doloribus? Consectetur
impedit voluptatibus culpa aperiam facere, animi placeat ea corrupti quidem
repellendus sed saepe accusamus autem delectus enim, in soluta minus laboriosam
adipisci! Numquam quod dolorem eum tempora totam, assumenda nostrum eligendi aliquam
rerum dignissimos autem quo. Qui fugit, aperiam sequi quis exercitationem quisquam
nobis facilis debitis placeat quia temporibus distinctio maiores animi nisi
voluptatum accusamus laudantium non dolore? Dolorem eum vitae modi ipsam quibusdam
tempora natus obcaecati in, expedita fugit. Explicabo quae accusantium porro unde
dolores maxime ullam optio enim quibusdam fugit veritatis excepturi ad, molestias
natus tenetur esse rerum et ab rem cupiditate, dicta aspernatur corrupti deleniti
iste. Aspernatur repellendus, voluptates omnis, hic quod minima laudantium officiis
aliquam quasi voluptatibus voluptatum provident soluta suscipit ea illum amet fugit
blanditiis velit exercitationem assumenda inventore rerum nihil! Inventore
reprehenderit distinctio non veniam eum beatae nihil reiciendis nemo est molestias
qui, dolorum praesentium explicabo id culpa nostrum repudiandae recusandae! Vero ut
placeat, fugiat, aliquam quos omnis similique temporibus iusto nulla non rerum
repellat repudiandae illum sit sapiente. Iusto et qui eaque odit eum culpa ipsa,
libero, perspiciatis voluptatem quaerat aperiam assumenda. Architecto minus
doloremque sed numquam aperiam, ratione dolorem dolores odio obcaecati quis nemo sit
delectus voluptatum possimus ad maxime et officia minima nulla illum eum quos
molestiae laboriosam. Nihil harum voluptates, ea consequatur tenetur, nulla
explicabo fugiat earum veritatis doloribus maxime deleniti nostrum quos praesentium
voluptate commodi quas assumenda fuga et placeat? Quam repudiandae, tempore
consequuntur aperiam itaque in omnis et ut unde, temporibus alias maiores
distinctio, nihil culpa. Fugiat quasi quisquam eaque facilis totam.
Modal sizes
Pass the size prop if you need to adjust the size of the modal. Values can be{" "}
xs, sm, md, lg, xl...8xl,
or full.
{size => (
)}
Modal Title
Some contents...
Prevent focus trapping
By default the modal and drawer locks the focus inside them. Normally this is what you want
to maintain accessibility standards.
While strongly discourage this use case due to the accessibility impacts,
there are certain situations where you might not want the modal to trap focus.
To prevent focus trapping, pass trapFocus and set its value to{" "}
false.
Modal TitleYou can focus on the content behind the modalStyling the backdrop
The backdrop's background by default is set to $blackAlpha11, but if you want
to achieve a different style you can use style props.
Modal Title
Some contents...
Please be aware that not every browser supports the backdrop-filter CSS
property, used in the example above.
AccessibilityARIA roles and attributes
The ModalContent has aria-modal set to true.
The ModalContent has aria-labelledby set to the id{" "}
of the ModalHeader.
The ModalContent has aria-describedby set to the id{" "}
of the ModalBody.
Keyboard support and Focus managementWhen the modal opens, focus is trapped within it.
When the modal opens, focus is automatically set to the first enabled element, or the
element from initialFocus.
Clicking on the overlay closes the Modal.
Pressing esc closes the Modal.
Scrolling is blocked on the elements behind the modal.
The modal is rendered in a portal attached to the end of document.body to
break it out of the source order.
ThemingModal base styles and default props can be overridden in the Hope UI theme
configuration like below:
PropsModal propsOther components propsModalOverlay, ModalContent, ModalHeader,{" "}
ModalBody and ModalFooter composes{" "}
Box
.
ModalCloseButton composes{" "}
CloseButton
.
);
}
================================================
FILE: apps/docs/src/pages/component-docs/overlay/modal/snippets.ts
================================================
const importComponent = `import {
Modal,
ModalBody,
ModalCloseButton,
ModalContent,
ModalFooter,
ModalHeader,
ModalOverlay,
} from "@hope-ui/solid"`;
const basicUsage = `function ModalExample() {
const { isOpen, onOpen, onClose } = createDisclosure()
return (
<>
Modal Title
Some contents...
)
}`;
const blockScroll = `function BlockScrollExample() {
const { isOpen, onOpen, onClose } = createDisclosure()
return (
<>
Modal Title
You can scroll the content behind the modal
)
}`;
const initialFocus = `function InitialFocusExample() {
const { isOpen, onOpen, onClose } = createDisclosure()
return (
<>
Create your accountFirst nameLast name
)
}`;
const closeOnOverlayClick = `function CloseOnOverlayClickExample() {
const { isOpen, onOpen, onClose } = createDisclosure()
return (
<>
Modal Title
)
}`;
const trapFocus = `function TrapFocusExample() {
const { isOpen, onOpen, onClose } = createDisclosure()
return (
<>
Modal Title
You can focus on the content behind the modal
)
}`;
const backdropStyle = `function BackdropStyleExample() {
const { isOpen, onOpen, onClose } = createDisclosure()
return (
<>
Modal Title
Some contents...
)
}`;
const theming = `const config: HopeThemeConfig = {
components: {
Modal: {
baseStyle: {
overlay: SystemStyleObject,
content: SystemStyleObject,
closeButton: SystemStyleObject,
header: SystemStyleObject,
body: SystemStyleObject,
footer: SystemStyleObject
},
defaultProps: {
root: ThemeableModalOptions,
closeButton: ThemeableCloseButtonOptions
}
}
}
}`;
export const snippets = {
importComponent,
basicUsage,
blockScroll,
initialFocus,
closeOnOverlayClick,
centered,
transition,
overflow,
sizes,
trapFocus,
backdropStyle,
theming,
};
================================================
FILE: apps/docs/src/pages/component-docs/overlay/popover/index.tsx
================================================
import {
Alert,
AlertDescription,
AlertTitle,
Anchor,
Box,
Button,
ButtonGroup,
createDisclosure,
HStack,
IconButton,
Input,
Kbd,
ListItem,
Popover,
PopoverAnchor,
PopoverArrow,
PopoverBody,
PopoverCloseButton,
PopoverContent,
PopoverFooter,
PopoverHeader,
PopoverTrigger,
Text,
UnorderedList,
} from "@hope-ui/solid";
import Prism from "prismjs";
import { Link } from "solid-app-router";
import { onMount } from "solid-js";
import Code from "@/components/Code";
import CodeSnippet from "@/components/CodeSnippet";
import { ContextualNavLink } from "@/components/ContextualNav";
import PageLayout from "@/components/PageLayout";
import PageTitle from "@/components/PageTitle";
import { Preview } from "@/components/Preview";
import { PropsTable, PropsTableItem } from "@/components/PropsTable";
import SectionSubtitle from "@/components/SectionSubtitle";
import SectionTitle from "@/components/SectionTitle";
import { IconMenu } from "@/icons/IconMenu";
import { snippets } from "./snippets";
export default function PopoverDoc() {
const { isOpen, onClose, onToggle } = createDisclosure();
const previousLink: ContextualNavLink = {
href: "/docs/overlay/modal",
label: "Modal",
};
const nextLink: ContextualNavLink = {
href: "/docs/overlay/tooltip",
label: "Tooltip",
};
const contextualNavLinks: ContextualNavLink[] = [
{ href: "#import", label: "Import" },
{ href: "#usage", label: "Usage" },
{ href: "#trigger-mode", label: "Trigger mode", indent: true },
{ href: "#initial-focus", label: "Initial focus", indent: true },
{ href: "#focus-trap", label: "Trapping focus within popover", indent: true },
{ href: "#popover-placement", label: "Popover placement", indent: true },
{ href: "#popover-anchor", label: "Popover anchor", indent: true },
{ href: "#accessing-internal-state", label: "Accessing internal state", indent: true },
{ href: "#controlled-popover", label: "Controlled popover", indent: true },
{ href: "#composition", label: "Composition" },
{ href: "#accessibility", label: "Accessibility" },
{ href: "#theming", label: "Theming" },
{ href: "#props", label: "Props" },
{ href: "#popover-props", label: "Popover props", indent: true },
{ href: "#other-components-props", label: "Other components props", indent: true },
];
const propItems: PropsTableItem[] = [
{
name: "placement",
description: "Placement of the popover.",
type: "Placement",
defaultValue: "bottom",
},
{
name: "offset",
description: "Offset between the popover and the reference (trigger) element.",
type: "number",
defaultValue: "8",
},
{
name: "shiftPadding",
description:
"The amount of padding to apply when the popover might go off screen. @see https://floating-ui.com/docs/shift.",
type: "number",
},
{
name: "id",
description: "The id of the popover content.",
type: "string",
},
{
name: "opened",
description: "If `true`, the popover will be shown (in controlled mode).",
type: "boolean",
},
{
name: "defaultOpened",
description: "If `true`, the popover will be initially shown (in uncontrolled mode).",
type: "boolean",
},
{
name: "triggerMode",
description:
"The interaction that triggers the popover. `hover` means the popover will open when you hover with mouse or focus with keyboard on the popover trigger. `click` means the popover will open on click or press `Enter` to `Space` on keyboard.",
type: '"hover" | "click"',
defaultValue: '"click"',
},
{
name: "inline",
description:
"If `true`, apply floating-ui `inline` middleware. Useful for inline reference elements that span over multiple lines, such as hyperlinks or range selections.",
type: "boolean",
},
{
name: "arrowPadding",
description: "The padding between the arrow and the edges of the popover.",
type: "number",
defaultValue: "8",
},
{
name: "openDelay",
description: "Delay (in ms) before showing the popover.",
type: "number",
defaultValue: "0",
},
{
name: "closeDelay",
description: "Delay (in ms) before hiding the popover.",
type: "number",
defaultValue: "100",
},
{
name: "closeOnBlur",
description:
"If `true`, the popover will close when the user blur out it by clicking outside or tabbing out.",
type: "boolean",
defaultValue: "true",
},
{
name: "closeOnEsc",
description: "If `true`, the popover will close when the user hit the `Esc` key.",
type: "boolean",
defaultValue: "true",
},
{
name: "trapFocus",
description: "If `true`, the focus will be locked into the popover.",
type: "boolean",
defaultValue: "false",
},
{
name: "initialFocus",
description:
"A query selector string targeting the element to receive focus when the popover opens.",
type: "string",
},
{
name: "motionPreset",
description: "Popover opening/closing transition.",
type: "PopoverMotionPreset",
defaultValue: '"scale"',
},
{
name: "children",
description: "Children of the popover.",
type: "JSX.Element | PopoverChildrenRenderProp",
},
{
name: "onOpen",
description: "Callback fired when the popover opens.",
type: "() => void",
},
{
name: "onClose",
description: "Callback fired when the popover closes.",
type: "() => void",
},
];
onMount(() => {
Prism.highlightAll();
});
return (
Popover
Popover is a non-modal dialog that floats around a trigger. It is used to display contextual
information to the user, and should be paired with a clickable trigger element.
ImportPopover: The wrapper that provides props, state, and context to its
children.
PopoverTrigger: The component that opens/closes the popover.
PopoverAnchor: The component to use as positioning reference instead of
the trigger.
PopoverContent: The popover itself.
PopoverArrow: A visual arrow that points to the reference (trigger or
anchor) element.
PopoverCloseButton: A button to close the popover.
PopoverHeader: The header of the popover.
PopoverBody: The body of the popover.
PopoverFooter: The footer of the popover.
UsagePopoverTrigger renders an unstyled button by default. For
accessiblity reason, when using the as prop ensure the element passed in is
focusable.
Trigger
Confirmation!Are you sure you want to have that milkshake?Accessibility:
When the popover opens, focus is sent to PopoverContent.
Trigger mode
Use the triggerMode prop to change the way of opening the popover. You can set
the value to hover or click.
Trigger
Confirmation!Are you sure you want to have that milkshake?Initial focus
By default, focus is sent to PopoverContent when it opens. Use the{" "}
initialFocus prop to send focus to a specific element instead.
Trigger
Running the appTo start the development server run npm start commandStep 2 of 4Trapping focus within popover
Use the trapFocus prop to lock focus inside the PopoverContent.
Trigger
Running the appTo start the development server run npm start commandStep 2 of 4Popover placement
Use the placement prop to set the preferred popover placement. You can set the
value to top, right, left, bottom and
their -start or -end variants.
Trigger
Confirmation!Are you sure you want to have that milkshake?
Even though you specified the placement, Popover will try to reposition itself in the
event that available space at the specified placement isn't enough.
Popover anchor
Use the PopoverAnchor component if you want to use a different element for the
popover positioning reference.
In the example below, the Button is the trigger that opens/closes the popover
and the Input is the reference element that the popover will position relative
to.
TriggerConfirmation!Are you sure you want to have that milkshake?Accessing internal state
Popover provides access to its internal state opened state and an{" "}
onClose method that you can access via a render prop.
{({ opened, onClose }) => (
<>
Click to {opened() ? "close" : "open"}
This is the headerHello. Nice to meet you! This is the body of the popoverThis is the footer
)}
Controlled popover
Use the opened and onClose props to control the opening and
closing of the popover.
Popover TargetConfirmation!Are you sure you want to have that milkshake?CompositionPopover is made up of several components that you can customize to achieve your
desired design.
}
aria-label="trigger"
variant="outline"
colorScheme="accent"
/>
Confirmation!
Are you sure you want to have that milkshake?AccessibilityARIA roles and attributesPopoverTrigger has aria-haspopup set to dialog to
denote that it triggers a popover.
PopoverTrigger has aria-controls set to the id of
the PopoverContent.
PopoverTrigger has aria-expanded set to true or{" "}
false depending on the open/closed state of the popover.
PopoverContent has aria-labelledby set to the id of
the PopoverHeader.
PopoverContent has aria-describedby set to the id{" "}
of the PopoverBody.
When the triggerMode is set to hover,{" "}
PopoverContent has role set to tooltip, otherwise{" "}
role is set to dialog.
Keyboard support (closed popover)
When the triggerMode prop is set to click, clicking the{" "}
PopoverTrigger or pressing space or enter when focus is
on the trigger will open the popover.
When the triggerMode prop is set to hover, focusing on or
mousing over the PopoverTrigger will open the popover.
Keyboard support (opened popover)
When the initialFocus prop is set, focus is moved to the matching element,
otherwise focus moves to the PopoverContent.
When the triggerMode prop is set to click, clicking the{" "}
PopoverTrigger closes the popover.
When the triggerMode prop is set to hover, blurring or mousing
out of the PopoverTrigger will close the popover. If you move your mouse into
the PopoverContent, it'll remain visible.
When focus is within the PopoverContent and closeOnEsc prop is
set to true, pressing esc closes the popover.
When closeOnBur prop is set to true, clicking outside or
blurring out of the PopoverContent closes the popover.
ThemingPopover base styles and default props can be overridden in the Hope UI theme
configuration like below:
PropsPopover propsOther components propsPopoverContent, PopoverArrow, PopoverHeader,{" "}
PopoverBody and PopoverFooter composes{" "}
Box
.
PopoverCloseButton composes{" "}
CloseButton
.
);
}
================================================
FILE: apps/docs/src/pages/component-docs/overlay/popover/snippets.ts
================================================
const importComponent = `import {
Popover,
PopoverTrigger,
PopoverAnchor,
PopoverContent,
PopoverArrow,
PopoverCloseButton,
PopoverHeader,
PopoverBody,
PopoverFooter,
} from "@hope-ui/solid"`;
const basicUsage = `
Trigger
Confirmation!Are you sure you want to have that milkshake?`;
const triggerOnHover = `
Trigger
Confirmation!Are you sure you want to have that milkshake?`;
const initialFocus = `
Trigger
Running the app
To start the development server run npm start command
Step 2 of 4`;
const focusTrap = `
Trigger
Running the app
To start the development server run npm start command
Step 2 of 4`;
const placement = `
Trigger
Confirmation!Are you sure you want to have that milkshake?`;
const anchor = `TriggerConfirmation!Are you sure you want to have that milkshake?`;
const internalState = `
{({ opened, onClose }) => (
<>
Click to {opened() ? "close" : "open"}
This is the headerHello. Nice to meet you! This is the body of the popoverThis is the footer
)}
`;
const controlled = `function ControlledExample() {
const { isOpen, onClose, onToggle } = createDisclosure();
return (
<>
Popover TargetConfirmation!Are you sure you want to have that milkshake?
);
}`;
const composition = `}
aria-label="trigger"
variant="outline"
colorScheme="accent"
/>
Confirmation!
Are you sure you want to have that milkshake?`;
const theming = `const config: HopeThemeConfig = {
components: {
Popover: {
baseStyle: {
content: SystemStyleObject,
arrow: SystemStyleObject,
closeButton: SystemStyleObject,
header: SystemStyleObject,
body: SystemStyleObject,
footer: SystemStyleObject,
},
defaultProps: {
root: ThemeablePopoverOptions,
closeButton: ThemeableCloseButtonOptions,
};
}
}
}`;
export const snippets = {
importComponent,
basicUsage,
triggerOnHover,
initialFocus,
focusTrap,
placement,
anchor,
internalState,
controlled,
composition,
theming,
};
================================================
FILE: apps/docs/src/pages/component-docs/overlay/tooltip/index.tsx
================================================
import { Anchor, Button, Flex, HStack, Text, Tooltip, VStack } from "@hope-ui/solid";
import Prism from "prismjs";
import { onMount } from "solid-js";
import Code from "@/components/Code";
import CodeSnippet from "@/components/CodeSnippet";
import { ContextualNavLink } from "@/components/ContextualNav";
import PageLayout from "@/components/PageLayout";
import PageTitle from "@/components/PageTitle";
import { Preview } from "@/components/Preview";
import { PropsTable, PropsTableItem } from "@/components/PropsTable";
import SectionSubtitle from "@/components/SectionSubtitle";
import SectionTitle from "@/components/SectionTitle";
import { IconSearch } from "@/icons/IconSearch";
import { snippets } from "./snippets";
export default function TooltipDoc() {
const previousLink: ContextualNavLink = {
href: "/docs/overlay/popover",
label: "Popover",
};
const nextLink: ContextualNavLink = {
href: "/docs/others/close-button",
label: "CloseButton",
};
const contextualNavLinks: ContextualNavLink[] = [
{ href: "#import", label: "Import" },
{ href: "#usage", label: "Usage" },
{ href: "#with-arrow", label: "Tooltip with arrow", indent: true },
{ href: "#with-focusable-content", label: "Tooltip with focusable content", indent: true },
{ href: "#disabled-tooltip", label: "Disabled tooltip", indent: true },
{ href: "#placement", label: "Placement" },
{ href: "#more-examples", label: "More examples" },
{ href: "#theming", label: "Theming" },
{ href: "#props", label: "Props" },
];
const propItems: PropsTableItem[] = [
{
name: "opened",
description: "If `true`, the tooltip will be shown (in controlled mode).",
type: "boolean",
},
{
name: "defaultOpened",
description: "If `true`, the tooltip will be initially shown.",
type: "boolean",
},
{
name: "label",
description: "The label of the tooltip.",
type: "JSX.Element",
},
{
name: "aria-label",
description:
"The accessible, human friendly label to use for screen readers. If passed, tooltip will show the content `label` but expose only `aria-label` to assistive technologies",
type: "string",
},
{
name: "id",
description: "The id of the tooltip.",
type: "string",
},
{
name: "placement",
description: "The placement of the tooltip relative to its reference.",
type: "Placement",
defaultValue: '"bottom"',
},
{
name: "offset",
description: "The offset between the tooltip and the reference (trigger) element.",
type: "number",
defaultValue: "8",
},
{
name: "inline",
description:
"If `true`, apply @floating-ui/dom `inline` middleware. Useful for inline reference elements that span over multiple lines, such as hyperlinks or range selections.",
type: "boolean",
},
{
name: "disabled",
description: "If `true`, the tooltip will not show.",
type: "boolean",
},
{
name: "withArrow",
description: "If `true`, the tooltip will show an arrow tip.",
type: "boolean",
defaultValue: "false",
},
{
name: "arrowSize",
description: "Size of the arrow.",
type: "number",
defaultValue: "8",
},
{
name: "arrowPadding",
description: "The padding between the arrow and the edges of the tooltip.",
type: "number",
defaultValue: "8",
},
{
name: "openDelay",
description: "Delay (in ms) before showing the tooltip.",
type: "number",
defaultValue: "0",
},
{
name: "closeDelay",
description: "Delay (in ms) before hiding the tooltip.",
type: "number",
defaultValue: "0",
},
{
name: "closeOnClick",
description: "If `true`, the tooltip will hide on click.",
type: "boolean",
defaultValue: "true",
},
{
name: "closeOnMouseDown",
description: "If `true`, the tooltip will hide while the mouse is down.",
type: "boolean",
defaultValue: "false",
},
{
name: "onOpen",
description: "Callback to run when the tooltip shows.",
type: "() => void",
},
{
name: "onClose",
description: "Callback to run when the tooltip hides.",
type: "() => void",
},
];
onMount(() => {
Prism.highlightAll();
});
return (
Tooltip
A tooltip is a brief, informative message that appears when a user interacts with an
element. Tooltips are usually initiated in one of two ways: through a mouse-hover gesture or
through a keyboard-hover gesture.
The Tooltip component follows the{" "}
WAI-ARIA
{" "}
Tooltip Pattern.
ImportUsageHover meTooltip with arrow
Use the withArrow prop to add an arrow to the tooltip.
Tooltip with focusable content
If the children of the tooltip is a focusable element, the tooltip will show when you focus
or hover on the element, and will hide when you blur or move cursor out of the element.
Disabled tooltip
Use the disabled prop to prevent the tooltip from showing up.
Placement
Using the placement prop you can adjust where your tooltip will be displayed.
More examplesThemingTooltip base styles and default props can be overridden in the Hope UI theme
configuration like below:
Props
);
}
================================================
FILE: apps/docs/src/pages/component-docs/overlay/tooltip/snippets.ts
================================================
const importComponent = `import { Tooltip } from "@hope-ui/solid"`;
const basicUsage = `Hover me`;
const withArrow = ``;
const withFocusableContent = ``;
const disabled = ``;
const placement = ``;
const moreExamples = ``;
const theming = `const config: HopeThemeConfig = {
components: {
Tooltip: {
baseStyle: SystemStyleObject,
defaultProps: ThemeableTooltipOptions
}
}
}`;
export const snippets = {
importComponent,
basicUsage,
withArrow,
withFocusableContent,
disabled,
placement,
moreExamples,
theming,
};
================================================
FILE: apps/docs/src/pages/component-docs/typography/heading/index.tsx
================================================
import { Alert, AlertDescription, Anchor, Heading, Text, VStack } from "@hope-ui/solid";
import Prism from "prismjs";
import { Link } from "solid-app-router";
import { onMount } from "solid-js";
import Code from "@/components/Code";
import CodeSnippet from "@/components/CodeSnippet";
import { ContextualNavLink } from "@/components/ContextualNav";
import PageLayout from "@/components/PageLayout";
import PageTitle from "@/components/PageTitle";
import { Preview } from "@/components/Preview";
import { PropsTable, PropsTableItem } from "@/components/PropsTable";
import SectionSubtitle from "@/components/SectionSubtitle";
import SectionTitle from "@/components/SectionTitle";
import { snippets } from "./snippets";
export default function HeadingDoc() {
const previousLink: ContextualNavLink = {
href: "/docs/layout/stack",
label: "Stack",
};
const nextLink: ContextualNavLink = {
href: "/docs/typography/text",
label: "Text",
};
const contextualNavLinks: ContextualNavLink[] = [
{ href: "#import", label: "Import" },
{ href: "#usage", label: "Usage" },
{ href: "#level", label: "Level", indent: true },
{ href: "#changing-font-size", label: "Changing the font size", indent: true },
{ href: "#truncate-text", label: "Truncate text", indent: true },
{ href: "#override-style", label: "Override style", indent: true },
{ href: "#theming", label: "Theming" },
{ href: "#props", label: "Props" },
];
const propItems: PropsTableItem[] = [
{
name: "level",
description: "The level of the heading. For example, level 3 renders an `h3`.",
type: "1 | 2 | 3 | 4 | 5 | 6",
},
{
name: "size",
description: "The size of the text. A combination of `font-size` and `line-height`.",
type: '"xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl"',
},
];
onMount(() => {
Prism.highlightAll();
});
return (
HeadingHeading composes{" "}
Box
{" "}
so you can use all the style props and add responsive styles as well. It renders a semibold{" "}
h2 tag by default.
ImportUsageI'm a HeadingLevel
To change the rendered h tag pass the level prop with a value from
1 to 6. For example, level 3 will render an h3. Use{" "}
Inspect Element to see the element that gets rendered in html.
The quick brown foxThe quick brown foxThe quick brown foxThe quick brown foxThe quick brown foxThe quick brown fox
The level prop is primarily for semantic purpose as it does not alter the
heading styles
Changing the font size
To increase the font size of the text, you can pass the size prop. It apply a
combination of fontSize and lineHeight for an optimal reading
experience.
(9xl) The quick brown fox
(8xl) The quick brown fox
(7xl) The quick brown fox
(6xl) The quick brown fox(5xl) The quick brown fox(4xl) The quick brown fox(3xl) The quick brown fox(2xl) The quick brown fox(xl) The quick brown fox(lg) The quick brown fox(base) The quick brown fox(sm) The quick brown fox(xs) The quick brown foxTruncate text
If you'd like to truncate the text after a specific number of lines, pass the{" "}
noOfLines prop and set it to the desired number of lines. It will render an
ellipsis when the text exceeds the width of the viewport or maxWidth prop.
Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing
industries for previewing layouts and visual mockups.
Override style
You can change the entire style of the text via props. For example, to change the font size,
pass the fontSize prop.
I'm using a custom font-size value for this heading
ThemingHeading base styles and default props can be overridden in the Hope UI theme
configuration like below:
Props
);
}
================================================
FILE: apps/docs/src/pages/component-docs/typography/heading/snippets.ts
================================================
const importComponent = `import { Heading } from "@hope-ui/solid"`;
const basicUsage = `I'm a Heading`;
const level = `The quick brown foxThe quick brown foxThe quick brown foxThe quick brown foxThe quick brown foxThe quick brown fox`;
const sizes = `(9xl) The quick brown fox(8xl) The quick brown fox(7xl) The quick brown fox(6xl) The quick brown fox(5xl) The quick brown fox(4xl) The quick brown fox(3xl) The quick brown fox(2xl) The quick brown fox(xl) The quick brown fox(lg) The quick brown fox(base) The quick brown fox(sm) The quick brown fox(xs) The quick brown fox`;
const truncateText = `
Lorem ipsum is placeholder Heading commonly used in the graphic, print, and publishing
industries for previewing layouts and visual mockups.
`;
const overrideStyle = `
I'm using a custom font-size value for this heading
`;
const theming = `const config: HopeThemeConfig = {
components: {
Heading: {
baseStyle: SystemStyleObject,
defaultProps: ThemeableHeadingOptions
}
}
}`;
export const snippets = {
importComponent,
basicUsage,
level,
sizes,
truncateText,
overrideStyle,
theming,
};
================================================
FILE: apps/docs/src/pages/component-docs/typography/text/index.tsx
================================================
import { Text, VStack } from "@hope-ui/solid";
import Prism from "prismjs";
import { onMount } from "solid-js";
import Code from "@/components/Code";
import CodeSnippet from "@/components/CodeSnippet";
import { ContextualNavLink } from "@/components/ContextualNav";
import PageLayout from "@/components/PageLayout";
import PageTitle from "@/components/PageTitle";
import { Preview } from "@/components/Preview";
import { PropsTable, PropsTableItem } from "@/components/PropsTable";
import SectionSubtitle from "@/components/SectionSubtitle";
import SectionTitle from "@/components/SectionTitle";
import { snippets } from "./snippets";
export default function TextDoc() {
const previousLink: ContextualNavLink = {
href: "/docs/typography/heading",
label: "Heading",
};
const nextLink: ContextualNavLink = {
href: "/docs/data-entry/checkbox",
label: "Checkbox",
};
const contextualNavLinks: ContextualNavLink[] = [
{ href: "#import", label: "Import" },
{ href: "#usage", label: "Usage" },
{ href: "#changing-font-size", label: "Changing the font size", indent: true },
{ href: "#truncate-text", label: "Truncate text", indent: true },
{ href: "#override-style", label: "Override style", indent: true },
{ href: "#override-element", label: "Override the element", indent: true },
{ href: "#theming", label: "Theming" },
{ href: "#props", label: "Props" },
];
const propItems: PropsTableItem[] = [
{
name: "size",
description: "The size of the text. It apply a combination of `font-size` and `line-height`.",
type: '"xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl"',
},
];
onMount(() => {
Prism.highlightAll();
});
return (
TextText component is the used to render text and paragraphs within an interface.
It renders a p tag by default.
ImportUsageI'm a TextChanging the font size
To increase the font size of the text, you can pass the size prop. It apply a
combination of fontSize and lineHeight for an optimal reading
experience.
(9xl) The quick brown fox
(8xl) The quick brown fox
(7xl) The quick brown fox
(6xl) The quick brown fox(5xl) The quick brown fox(4xl) The quick brown fox(3xl) The quick brown fox(2xl) The quick brown fox(xl) The quick brown fox(lg) The quick brown fox(base) The quick brown fox(sm) The quick brown fox(xs) The quick brown foxTruncate text
If you'd like to truncate the text after a specific number of lines, pass the{" "}
noOfLines prop and set it to the desired number of lines. It will render an
ellipsis when the text exceeds the width of the viewport or maxWidth prop.
Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing
industries for previewing layouts and visual mockups.
Override style
You can change the entire style of the text via props. For example, to change the font size,
pass the fontSize prop.
I'm using a custom font-size value for this text
Override the element
To override the element that gets rendered, pass the as prop. Use{" "}
Inspect Element to see the element that gets rendered in html.
ItalicUnderlineI18NCitationDeletedEmphasisInsertedCtrl + CHighlightedStrikethroughSamplesubsupThemingText base styles and default props can be overridden in the Hope UI theme
configuration like below:
Props
);
}
================================================
FILE: apps/docs/src/pages/component-docs/typography/text/snippets.ts
================================================
const importComponent = `import { Text } from "@hope-ui/solid"`;
const basicUsage = `I'm a Text`;
const sizes = `(9xl) The quick brown fox(8xl) The quick brown fox(7xl) The quick brown fox(6xl) The quick brown fox(5xl) The quick brown fox(4xl) The quick brown fox(3xl) The quick brown fox(2xl) The quick brown fox(xl) The quick brown fox(lg) The quick brown fox(base) The quick brown fox(sm) The quick brown fox(xs) The quick brown fox`;
const truncateText = `
Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing
industries for previewing layouts and visual mockups.
`;
const overrideStyle = `
I'm using a custom font-size value for this text
`;
const overrideElement = `ItalicUnderlineI18NCitationDeletedEmphasisInsertedCtrl + CHighlightedStrikethroughSamplesubsup`;
const theming = `const config: HopeThemeConfig = {
components: {
Text: {
baseStyle: SystemStyleObject,
defaultProps: ThemeableTextOptions
}
}
}`;
export const snippets = {
importComponent,
basicUsage,
sizes,
truncateText,
overrideStyle,
overrideElement,
theming,
};
================================================
FILE: apps/docs/src/pages/features/create-styles/index.tsx
================================================
import { Anchor, Text } from "@hope-ui/solid";
import Prism from "prismjs";
import { onMount } from "solid-js";
import Code from "@/components/Code";
import CodeSnippet from "@/components/CodeSnippet";
import { ContextualNavLink } from "@/components/ContextualNav";
import PageLayout from "@/components/PageLayout";
import PageTitle from "@/components/PageTitle";
import SectionTitle from "@/components/SectionTitle";
import { snippets } from "./snippets";
export default function CreateStyles() {
const previousLink: ContextualNavLink = {
href: "/docs/features/css-prop",
label: "The css prop",
};
const nextLink: ContextualNavLink = {
href: "/docs/features/responsive-styles",
label: "Responsive styles",
};
const contextualNavLinks: ContextualNavLink[] = [
{ href: "#the-css-function", label: "The `css` function" },
];
onMount(() => {
Prism.highlightAll();
});
return (
Create styles
All Hope UI components are built with the{" "}
stitches
{" "}
css-in-js libary. Meaning you can use all tools available in stitches to create styles in
Hope UI.
The css function
Hope UI expose the css function from @stitches/core configured
with the Hope UI theme.
If you don't like the style props API or your HTML is comming too verbose the css function
is a great way to extract your styles plus you get the full power of the stitches API.
If you want to learn more, check out{" "}
stitches
{" "}
documentation.
);
}
================================================
FILE: apps/docs/src/pages/features/create-styles/snippets.ts
================================================
const importCssFunction = `import { css } from "@hope-ui/solid"`;
const usingCssFunction = `import { css } from "@hope-ui/solid"
const myButtonStyles = css({
backgroundColor: "gainsboro",
borderRadius: "9999px",
fontSize: "13px",
padding: "10px 15px",
"&:hover": {
backgroundColor: "lightgray",
},
})
function MyButton() {
return
}`;
export const snippets = {
importCssFunction,
usingCssFunction,
};
================================================
FILE: apps/docs/src/pages/features/css-prop/index.tsx
================================================
import { Anchor, Box, Heading, Text } from "@hope-ui/solid";
import Prism from "prismjs";
import { Link } from "solid-app-router";
import { onMount } from "solid-js";
import Code from "@/components/Code";
import CodeSnippet from "@/components/CodeSnippet";
import { ContextualNavLink } from "@/components/ContextualNav";
import PageLayout from "@/components/PageLayout";
import PageTitle from "@/components/PageTitle";
import { Preview } from "@/components/Preview";
import SectionTitle from "@/components/SectionTitle";
import { snippets } from "./snippets";
export default function CSSProp() {
const previousLink: ContextualNavLink = {
href: "/docs/features/style-props",
label: "Style props",
};
const nextLink: ContextualNavLink = {
href: "/docs/features/create-styles",
label: "Create styles",
};
const contextualNavLinks: ContextualNavLink[] = [
{ href: "#defining-any-standard-css-property", label: "Defining any standard CSS property" },
{ href: "#defining-css-custom-properties", label: "Defining CSS custom properties" },
{ href: "#creating-nested-selectors", label: "Creating nested selectors" },
{ href: "#targeting-other-hope-components", label: "tageting other Hope UI components" },
{ href: "#targeting-other-solid-components", label: "tageting other SolidJS components" },
{ href: "#custom-media-queries", label: "Custom media queries" },
];
onMount(() => {
Prism.highlightAll();
});
return (
The css prop
With css you can provide any valid CSS to an element and utilize tokens from
your theme to ensure consistency and that you are utilizing constraint-based design
principles when styling your application.
This prop provides a superset of CSS (contains all CSS properties/selectors in addition to
custom ones) that maps values directly from the theme, depending on the CSS property used.
Also, it allows a simple way of defining responsive values that correspond to the
breakpoints defined in the theme.
To find out which properties are theme-aware, see the{" "}
Style Props
.
Although the css prop is considered an escape hatch, there are few cases where
it is needed.
Defining any standard CSS property
In case you need to set a CSS property that is not listed in the Style Props list, you can
use the css prop and pass it whatever CSS property you desire.
One such example is the filter property:
Defining CSS custom properties
Custom CSS properties can be defined via the css prop as well:
This uses CSS Custom Properties!
Creating nested selectors
To create complex, nested selectors, you can use the & operator like in sass.
Hover the box...
And I will turn green!
Targeting other Hope UI components
Inside the css prop you can target other Hope UI components using string
interpolation in the selector.
Targeting other SolidJS components
Inside the css prop you can target other SolidJS components using string
interpolation in the selector.
Custom media queries
This text won't be shown when printing this page.
);
}
================================================
FILE: apps/docs/src/pages/features/css-prop/snippets.ts
================================================
const defineStandardCSSProperty = `
`;
const defineCustomCSSProperty = `
This uses CSS Custom Properties!
`;
const createNestingSelectors = `
Hover the box...
And I will turn green!
`;
const targetingOtherHopeComponent = `
`;
const targetingOtherSolidComponent = `function MyButton() {
return
}
// Add a \`toString\` method which map to a css selector inside your component
// Here we use the underlying button class name
MyButton.toString = () => ".my-button"
`;
const customMediaQueries = `
This text won't be shown when printing this page.
`;
export const snippets = {
defineStandardCSSProperty,
defineCustomCSSProperty,
createNestingSelectors,
targetingOtherHopeComponent,
targetingOtherSolidComponent,
customMediaQueries,
};
================================================
FILE: apps/docs/src/pages/features/global-styles/index.tsx
================================================
import { Anchor, Text } from "@hope-ui/solid";
import Prism from "prismjs";
import { onMount } from "solid-js";
import Code from "@/components/Code";
import CodeSnippet from "@/components/CodeSnippet";
import { ContextualNavLink } from "@/components/ContextualNav";
import PageLayout from "@/components/PageLayout";
import PageTitle from "@/components/PageTitle";
import SectionTitle from "@/components/SectionTitle";
import { snippets } from "./snippets";
export default function GlobalStyles() {
const previousLink: ContextualNavLink = {
href: "/docs/features/responsive-styles",
label: "Responsive styles",
};
const nextLink: ContextualNavLink = {
href: "/docs/features/hope-factory",
label: "Hope factory",
};
const contextualNavLinks: ContextualNavLink[] = [
{ href: "#the-globalcss-function", label: "The `globalCss` function" },
];
onMount(() => {
Prism.highlightAll();
});
return (
Global stylesFor handling things like global resets, you can write global CSS styles.
The globalCss function
Hope UI expose the globalCss function from @stitches/core.
This function will return another function, which you must call in your app.
If you want to learn more, check out{" "}
stitches
{" "}
documentation.
);
}
================================================
FILE: apps/docs/src/pages/features/global-styles/snippets.ts
================================================
const importGlobalCssFunction = `import { globalCss } from "@hope-ui/solid"`;
const usingGlobalCssFunction = `import { globalCss } from "@hope-ui/solid"
const globalStyles = globalCss({
'*': {
margin: 0,
padding: 0
},
});
function App() {
globalStyles();
return
}`;
export const snippets = {
importGlobalCssFunction,
usingGlobalCssFunction,
};
================================================
FILE: apps/docs/src/pages/features/hope-factory/index.tsx
================================================
import { Alert, AlertDescription, Anchor, hope, Text } from "@hope-ui/solid";
import Prism from "prismjs";
import { Link } from "solid-app-router";
import { onMount } from "solid-js";
import Code from "@/components/Code";
import CodeSnippet from "@/components/CodeSnippet";
import { ContextualNavLink } from "@/components/ContextualNav";
import PageLayout from "@/components/PageLayout";
import PageTitle from "@/components/PageTitle";
import { Preview } from "@/components/Preview";
import SectionSubtitle from "@/components/SectionSubtitle";
import SectionTitle from "@/components/SectionTitle";
import { snippets } from "./snippets";
export default function HopeFactory() {
const previousLink: ContextualNavLink = {
href: "/docs/features/global-styles",
label: "Global styles",
};
const nextLink: ContextualNavLink = {
href: "/docs/theming/default-theme",
label: "Default theme",
};
const contextualNavLinks: ContextualNavLink[] = [
{ href: "#hope-jsx-elements", label: "Hope JSX elements" },
{ href: "#hope-factory-function", label: "Hope factory function" },
];
onMount(() => {
Prism.highlightAll();
});
return (
Hope factory
Hope factory serves as an object of hope enabled JSX elements, and also a{" "}
function that can be used to enable custom component receive hope's style
props.
Hope JSX elements
Create base html elements with theme-aware style props using{" "}
hope.<element> notation. For example, if you want a plain html button
with ability to pass Hope UI styles, you can write <hope.button />.
Click me
This reduces the need to create custom component wrappers and name them. This syntax is
available for any html elements.
Hope factory function
This is a function that converts non-hope components or{" "}
jsx element to hope-enabled components so you can pass style props to them.
Consider the Link component of the solid-app-router package, let's
use the hope factory function to make possible to pass style props to it.
Considering that Hope UI uses stitches under the hood, ensure the non-hope
component accepts class as props for this to work correctly
Attaching styles
In some instances, you might need to attach specific styles to the component wrapped in the
hope factory
You can also use the hope factory on jsx elements as well.
The baseClass property is the CSS class to use when targeting this
component in a css selector. This class will be applied to the rendered dom element.
Taking the above example, in stitches css() method or Hope UI css{" "}
prop, if you want to target all p in the Card component you can
use the css selector {"${Card} p"} and it will evaluate to{" "}
{".my-card p"}. If you want to learn more, check out "Targeting other SolidJS
components" in the{" "}
css prop
{" "}
documentation.
);
}
================================================
FILE: apps/docs/src/pages/features/hope-factory/snippets.ts
================================================
const importHopeFactory = `import { hope } from "@hope-ui/solid"`;
const hopeJsxElements = `
Click me
`;
const hopeFactoryFunction = `import { hope } from "@hope-ui/solid"
import { Link } from "solid-app-router"
const HopeLink = hope(Link)
function Example() {
return
}`;
const attachingStyles = `const HopeLink = hope(Link, {
baseClass: "my-link",
baseStyle: {
color: "$primary9"
}
})
`;
const attachingStylesJsxElement = `const Card = hope("div", {
baseClass: "my-card",
baseStyle: {
shadow: "$lg",
rounded: "$lg",
bg: "white",
},
})`;
export const snippets = {
importHopeFactory,
hopeJsxElements,
hopeFactoryFunction,
attachingStyles,
attachingStylesJsxElement,
};
================================================
FILE: apps/docs/src/pages/features/responsive-styles/index.tsx
================================================
import {
Alert,
AlertDescription,
Anchor,
Box,
hope,
Image,
Table,
Tbody,
Td,
Text,
Th,
Thead,
Tr,
} from "@hope-ui/solid";
import Prism from "prismjs";
import { For, onMount } from "solid-js";
import Code from "@/components/Code";
import CodeSnippet from "@/components/CodeSnippet";
import { ContextualNavLink } from "@/components/ContextualNav";
import PageLayout from "@/components/PageLayout";
import PageTitle from "@/components/PageTitle";
import { Preview } from "@/components/Preview";
import SectionTitle from "@/components/SectionTitle";
import { snippets } from "./snippets";
const breakpoints = [
{ name: "@initial", value: "none" },
{ name: "@sm", value: "@media (min-width: 640px)" },
{ name: "@md", value: "@media (min-width: 768px)" },
{ name: "@lg", value: "@media (min-width: 1024px)" },
{ name: "@xl", value: "@media (min-width: 1280px)" },
{ name: "@2xl", value: "@media (min-width: 1536px)" },
];
export default function ResponsiveStyles() {
const previousLink: ContextualNavLink = {
href: "/docs/features/create-styles",
label: "Create styles",
};
const nextLink: ContextualNavLink = {
href: "/docs/features/global-styles",
label: "Global styles",
};
const contextualNavLinks: ContextualNavLink[] = [
{ href: "#the-object-syntax", label: "The object syntax" },
{ href: "#usage-with-css-prop", label: "Usage with the `css` prop" },
{ href: "#usage-with-css-function", label: "Usage with stitches `css` function" },
{ href: "#demo", label: "Demo" },
];
onMount(() => {
Prism.highlightAll();
});
return (
Responsive styles
Hope UI supports responsive styles out of the box. Instead of manually adding{" "}
@media queries and adding nested styles throughout your code, Hope UI allows
you to use an object syntax to add mobile-first responsive styles.
Hope UI use the @media(min-width) media query to ensure your interfaces are
mobile-first.
Responsive syntax relies on the following breakpoints defined in the Hope UI theme:
Name
Value
{breakpoint => (
{breakpoint.name}
{breakpoint.value}
)}
Breakpoints are created during the createStitches call which occurs
internally in Hope UI, for this reason it is currently not possible to customize
breakpoint values.
The object syntax
All style props accept an object as value for mobile-first responsive styles.
Let's say you have a Box with the following properties:
To make the width responsive here's what you need to do:
Usage with the css prop
When using responsive styles with the css prop you don't need the{" "}
@initial breakpoint. It's like the normal way of creating mobile-first
responsive styles in CSS.
If you want to learn more, check out the{" "}
stitches
{" "}
documentation.
Usage with stitches css function
Like style props, variant created with stitches css function support responsive
styles.
If you want to learn more, check out the{" "}
stitches
{" "}
documentation.
Demo
Here's a simple example of a marketing page component that uses a stacked layout on small
screens, and a side-by-side layout on larger screens{" "}
(resize your browser to see it in action):
Marketing
Finding customers for your new business
Getting a new business off the ground is a lot of hard work. Here are five ideas you
can use to find your first customers.
);
}
================================================
FILE: apps/docs/src/pages/features/responsive-styles/snippets.ts
================================================
const initialBox = `
This is a box
`;
const boxWithResponsiveWidth = `
This is a box
`;
const usageWithCssProp = `
Box
`;
const usageWithCssFunction = `import { css } from "@hope-ui/solid";
const cardStyles = css({
borderRadius: "$lg",
backgroundColor: "white",
variants: {
elevation: {
sm: {
boxShadow: "$sm",
},
md: {
boxShadow: "$md",
},
},
},
});
// Inside your component, use the same object syntax as style props
cardStyles({
elevation: {
"@initial": "sm", // <- initial value, no breakpoint
"@lg": "md", // <- value at breakpoint "lg"
},
});`;
const demo = `
Marketing
Finding customers for your new business
Getting a new business off the ground is a lot of hard work. Here are five ideas you
can use to find your first customers.
`;
export const snippets = {
initialBox,
boxWithResponsiveWidth,
usageWithCssProp,
usageWithCssFunction,
demo,
};
================================================
FILE: apps/docs/src/pages/features/style-props/index.tsx
================================================
import { Alert, AlertDescription, Button, Text } from "@hope-ui/solid";
import Prism from "prismjs";
import { Link } from "solid-app-router";
import { onMount } from "solid-js";
import Code from "@/components/Code";
import CodeSnippet from "@/components/CodeSnippet";
import { ContextualNavLink } from "@/components/ContextualNav";
import PageLayout from "@/components/PageLayout";
import PageTitle from "@/components/PageTitle";
import { Preview } from "@/components/Preview";
import SectionSubtitle from "@/components/SectionSubtitle";
import SectionTitle from "@/components/SectionTitle";
import { StylePropsTable, StylePropsTableItem } from "@/components/StylePropsTable";
import { snippets } from "./snippets";
const marginPaddingProps: StylePropsTableItem[] = [
{ prop: "m, margin", cssProperty: "margin", themeToken: "space" },
{ prop: "mt, marginTop", cssProperty: "margin-top", themeToken: "space" },
{ prop: "mr, marginRight", cssProperty: "margin-right", themeToken: "space" },
{ prop: "ms, marginStart", cssProperty: "margin-inline-start", themeToken: "space" },
{ prop: "mb, marginBottom", cssProperty: "margin-bottom", themeToken: "space" },
{ prop: "ml, marginLeft", cssProperty: "margin-left", themeToken: "space" },
{ prop: "me, marginEnd", cssProperty: "margin-inline-end", themeToken: "space" },
{ prop: "mx", cssProperty: "margin-inline-start + margin-inline-end", themeToken: "space" },
{ prop: "my", cssProperty: "margin-top + margin-bottom", themeToken: "space" },
{ prop: "p, padding", cssProperty: "padding", themeToken: "space" },
{ prop: "pt, paddingTop", cssProperty: "padding-top", themeToken: "space" },
{ prop: "pr, paddingRight", cssProperty: "padding-right", themeToken: "space" },
{ prop: "ps, paddingStart", cssProperty: "padding-inline-start", themeToken: "space" },
{ prop: "pb, paddingBottom", cssProperty: "padding-bottom", themeToken: "space" },
{ prop: "pl, paddingLeft", cssProperty: "padding-left", themeToken: "space" },
{ prop: "pe, paddingEnd", cssProperty: "padding-inline-end", themeToken: "space" },
{ prop: "px", cssProperty: "padding-inline-start + padding-inline-end", themeToken: "space" },
{ prop: "py", cssProperty: "padding-top + padding-bottom", themeToken: "space" },
];
const colorProps: StylePropsTableItem[] = [
{ prop: "color", cssProperty: "color", themeToken: "colors" },
{ prop: "bg, background", cssProperty: "background", themeToken: "colors" },
{ prop: "bgColor, backgroundColor", cssProperty: "background-color", themeToken: "colors" },
{ prop: "opacity", cssProperty: "opacity" },
];
const typographyProps: StylePropsTableItem[] = [
{ prop: "fontFamily", cssProperty: "font-family", themeToken: "fonts" },
{ prop: "fontSize", cssProperty: "font-size", themeToken: "fontSizes" },
{ prop: "fontWeight", cssProperty: "font-weight", themeToken: "fontWeights" },
{ prop: "lineHeight", cssProperty: "line-height", themeToken: "lineHeights" },
{ prop: "letterSpacing", cssProperty: "letter-spacing", themeToken: "letterSpacings" },
{ prop: "textAlign", cssProperty: "text-align" },
{ prop: "fontStyle", cssProperty: "font-style" },
{ prop: "textTransform", cssProperty: "text-transform" },
{ prop: "textDecoration", cssProperty: "text-decoration" },
];
const layoutProps: StylePropsTableItem[] = [
{ prop: "d, display", cssProperty: "display" },
{ prop: "verticalAlign", cssProperty: "vertical-align" },
{ prop: "overflow", cssProperty: "overflow" },
{ prop: "overflowX", cssProperty: "overflow-x" },
{ prop: "overflowY", cssProperty: "overflow-y" },
];
const sizeProps: StylePropsTableItem[] = [
{ prop: "w, width", cssProperty: "width", themeToken: "sizes" },
{ prop: "h, height", cssProperty: "height", themeToken: "sizes" },
{ prop: "minW, minWidth", cssProperty: "min-width", themeToken: "sizes" },
{ prop: "maxW, maxWidth", cssProperty: "max-width", themeToken: "sizes" },
{ prop: "minH, minHeight", cssProperty: "min-height", themeToken: "sizes" },
{ prop: "maxH, maxHeight", cssProperty: "max-height", themeToken: "sizes" },
{ prop: "boxSize", cssProperty: "width + height", themeToken: "sizes" },
];
const flexboxProps: StylePropsTableItem[] = [
{ prop: "alignItems", cssProperty: "align-items" },
{ prop: "alignContent", cssProperty: "align-content" },
{ prop: "justifyItems", cssProperty: "justify-items" },
{ prop: "justifyContent", cssProperty: "justify-content" },
{ prop: "flexDirection, *direction", cssProperty: "flex-direction" },
{ prop: "flexWrap, *wrap", cssProperty: "flex-wrap" },
{ prop: "flex", cssProperty: "flex" },
{ prop: "flexGrow", cssProperty: "flex-grow" },
{ prop: "flexShrink", cssProperty: "flex-shrink" },
{ prop: "flexBasis", cssProperty: "flex-basis" },
{ prop: "alignSelf", cssProperty: "align-self" },
{ prop: "justifySelf", cssProperty: "justify-self" },
{ prop: "order", cssProperty: "order" },
];
const gridProps: StylePropsTableItem[] = [
{ prop: "gap", cssProperty: "gap", themeToken: "space" },
{ prop: "rowGap", cssProperty: "row-gap", themeToken: "space" },
{ prop: "columnGap", cssProperty: "column-gap", themeToken: "space" },
{ prop: "gridTemplate", cssProperty: "grid-template" },
{ prop: "gridTemplateColumns, *templateColumns", cssProperty: "grid-template-columns" },
{ prop: "gridTemplateRows, *templateRows", cssProperty: "grid-template-rows" },
{ prop: "gridTemplateAreas, *templateAreas", cssProperty: "grid-template-areas" },
{ prop: "gridArea, *area", cssProperty: "grid-area" },
{ prop: "gridRow", cssProperty: "grid-row" },
{ prop: "gridRowStart, *rowStart", cssProperty: "grid-row-start" },
{ prop: "gridRowEnd, *rowEnd", cssProperty: "grid-row-end" },
{ prop: "gridColumn", cssProperty: "grid-column" },
{ prop: "gridColumnStart, *colStart", cssProperty: "grid-column-start" },
{ prop: "gridColumnEnd, *colEnd", cssProperty: "grid-column-end" },
{ prop: "gridAutoFlow, *autoFlow", cssProperty: "grid-auto-flow" },
{ prop: "gridAutoColumns, *autoColumns", cssProperty: "grid-auto-columns" },
{ prop: "gridAutoRows, *autoRows", cssProperty: "grid-auto-rows" },
{ prop: "placeItems", cssProperty: "place-items" },
{ prop: "placeContent", cssProperty: "place-content" },
{ prop: "placeSelf", cssProperty: "place-self" },
];
const borderProps: StylePropsTableItem[] = [
{ prop: "border", cssProperty: "border" },
{ prop: "borderStyle", cssProperty: "border-style" },
{ prop: "borderWidth", cssProperty: "border-width", themeToken: "sizes" },
{ prop: "borderColor", cssProperty: "border-color", themeToken: "colors" },
{ prop: "borderTop", cssProperty: "border-top" },
{ prop: "borderTopStyle", cssProperty: "border-top-style" },
{ prop: "borderTopWidth", cssProperty: "border-top-width", themeToken: "sizes" },
{ prop: "borderTopColor", cssProperty: "border-top-color", themeToken: "colors" },
{ prop: "borderRight", cssProperty: "border-right" },
{ prop: "borderRightStyle", cssProperty: "border-right-style" },
{ prop: "borderRightWidth", cssProperty: "border-right-width", themeToken: "sizes" },
{ prop: "borderRightColor", cssProperty: "border-right-color", themeToken: "colors" },
{ prop: "borderBottom", cssProperty: "border-bottom" },
{ prop: "borderBottomStyle", cssProperty: "border-bottom-style" },
{ prop: "borderBottomWidth", cssProperty: "border-bottom-width", themeToken: "sizes" },
{ prop: "borderBottomColor", cssProperty: "border-bottom-color", themeToken: "colors" },
{ prop: "borderLeft", cssProperty: "border-left" },
{ prop: "borderLeftStyle", cssProperty: "border-left-style" },
{ prop: "borderLeftWidth", cssProperty: "border-left-width", themeToken: "sizes" },
{ prop: "borderLeftColor", cssProperty: "border-left-color", themeToken: "colors" },
{ prop: "borderX", cssProperty: "border-right + border-left" },
{ prop: "borderY", cssProperty: "border-top + border-bottom" },
];
const borderRadiusProps: StylePropsTableItem[] = [
{ prop: "borderRadius, rounded", cssProperty: "border-radius", themeToken: "radii" },
{ prop: "borderTopLeftRadius", cssProperty: "border-top-left-radius", themeToken: "radii" },
{ prop: "borderTopRightRadius", cssProperty: "border-top-right-radius", themeToken: "radii" },
{
prop: "borderBottomRightRadius",
cssProperty: "border-bottom-right-radius",
themeToken: "radii",
},
{ prop: "borderBottomLeftRadius", cssProperty: "border-bottom-left-radius", themeToken: "radii" },
{
prop: "borderTopRadius",
cssProperty: "border-top-left-radius + border-top-right-radius",
themeToken: "radii",
},
{
prop: "borderRightRadius",
cssProperty: "border-top-right-radius + border-bottom-right-radius",
themeToken: "radii",
},
{
prop: "borderBottomRadius",
cssProperty: "border-bottom-left-radius + border-bottom-right-radius",
themeToken: "radii",
},
{
prop: "borderLeftRadius",
cssProperty: "border-top-left-radius + border-bottom-left-radius",
themeToken: "radii",
},
];
const positionProps: StylePropsTableItem[] = [
{ prop: "pos, position", cssProperty: "position" },
{ prop: "zIndex", cssProperty: "z-index", themeToken: "zIndices" },
{ prop: "top", cssProperty: "top", themeToken: "space" },
{ prop: "right", cssProperty: "right", themeToken: "space" },
{ prop: "bottom", cssProperty: "bottom", themeToken: "space" },
{ prop: "left", cssProperty: "left", themeToken: "space" },
];
const shadowProps: StylePropsTableItem[] = [
{ prop: "textShadow", cssProperty: "text-shadow", themeToken: "shadows" },
{ prop: "shadow, boxShadow", cssProperty: "box-shadow", themeToken: "shadows" },
];
const pseudoProps: StylePropsTableItem[] = [
{ prop: "_hover", cssProperty: "&:hover, &[data-hover]" },
{ prop: "_active", cssProperty: "&:active, &[data-active]" },
{ prop: "_focus", cssProperty: "&:focus, &[data-focus]" },
{ prop: "_highlighted", cssProperty: "&[data-highlighted]" },
{ prop: "_focusWithin", cssProperty: "&:focus-within" },
{ prop: "_focusVisible", cssProperty: "&:focus-visible" },
{ prop: "_disabled", cssProperty: "&[disabled], &[aria-disabled=true], &[data-disabled]" },
{ prop: "_readOnly", cssProperty: "&[aria-readonly=true], &[readonly], &[data-readonly]" },
{ prop: "_before", cssProperty: "&::before" },
{ prop: "_after", cssProperty: "&::after" },
{ prop: "_empty", cssProperty: "&:empty" },
{ prop: "_expanded", cssProperty: "&[aria-expanded=true], &[data-expanded]" },
{ prop: "_checked", cssProperty: "&[aria-checked=true], &[data-checked]" },
{ prop: "_grabbed", cssProperty: "&[aria-grabbed=true], &[data-grabbed]" },
{ prop: "_pressed", cssProperty: "&[aria-pressed=true], &[data-pressed]" },
{ prop: "_invalid", cssProperty: "&[aria-invalid=true], &[data-invalid]" },
{ prop: "_valid", cssProperty: "&[data-valid], &[data-state=valid]" },
{ prop: "_loading", cssProperty: "&[data-loading], &[aria-busy=true]" },
{ prop: "_selected", cssProperty: "&[aria-selected=true], &[data-selected]" },
{ prop: "_hidden", cssProperty: "&[hidden], &[data-hidden]" },
{ prop: "_even", cssProperty: "&:nth-of-type(even)" },
{ prop: "_odd", cssProperty: "&:nth-of-type(odd)" },
{ prop: "_first", cssProperty: "&:first-of-type" },
{ prop: "_last", cssProperty: "&:last-of-type" },
{ prop: "_notFirst", cssProperty: "&:not(:first-of-type)" },
{ prop: "_notLast", cssProperty: "&:not(:last-of-type)" },
{ prop: "_visited", cssProperty: "&:visited" },
{ prop: "_activeLink", cssProperty: "&[aria-current=page]" },
{ prop: "_activeStep", cssProperty: "&[aria-current=step]" },
{
prop: "_indeterminate",
cssProperty: "&:indeterminate, &[aria-checked=mixed], &[data-indeterminate]",
},
{
prop: "_groupHover",
cssProperty:
"[role=group]:hover &, [role=group][data-hover] &, [data-group]:hover &, [data-group][data-hover] &, .group:hover &, .group[data-hover] &",
},
{
prop: "_peerHover",
cssProperty:
"[data-peer]:hover ~ &, [data-peer][data-hover] ~ &, .peer:hover ~ &, .peer[data-hover] ~ &",
},
{
prop: "_groupFocus",
cssProperty:
"[role=group]:focus &, [role=group][data-focus] &, [data-group]:focus &, [data-group][data-focus] &, .group:focus &, .group[data-focus] &",
},
{
prop: "_peerFocus",
cssProperty:
"[data-peer]:focus ~ &, [data-peer][data-focus] ~ &, .peer:focus ~ &, .peer[data-focus] ~ &",
},
{
prop: "_groupFocusVisible",
cssProperty:
"[role=group]:focus-visible &, [data-group]:focus-visible &, .group:focus-visible &",
},
{
prop: "_peerFocusVisible",
cssProperty: "[data-peer]:focus-visible ~ &, .peer:focus-visible ~ &",
},
{
prop: "_groupActive",
cssProperty:
"[role=group]:active &, [role=group][data-active] &, [data-group]:active &, [data-group][data-active] &, .group:active &, .group[data-active] &",
},
{
prop: "_peerActive",
cssProperty:
"[data-peer]:active ~ &, [data-peer][data-active] ~ &, .peer:active ~ &, .peer[data-active] ~ &",
},
{
prop: "_groupSelected",
cssProperty:
"[role=group][aria-selected=true] &, [role=group][data-selected] &, [data-group][aria-selected=true] &, [data-group][data-selected] &, .group[aria-selected=true] &, .group[data-selected] &",
},
{
prop: "_peerSelected",
cssProperty:
"[data-peer][aria-selected=true] ~ &, [data-peer][data-selected] ~ &, .peer[aria-selected=true] ~ &, .peer[data-selected] ~ &",
},
{
prop: "_groupDisabled",
cssProperty:
"[role=group]:disabled &, [role=group][data-disabled] &, [data-group]:disabled &, [data-group][data-disabled] &, .group:disabled &, .group[data-disabled] &",
},
{
prop: "_peerDisabled",
cssProperty:
"[data-peer]:disabled ~ &, [data-peer][data-disabled] ~ &, .peer:disabled ~ &, .peer[data-disabled] ~ &",
},
{
prop: "_groupInvalid",
cssProperty:
"[role=group]:invalid &, [role=group][data-invalid] &, [data-group]:invalid &, [data-group][data-invalid] &, .group:invalid &, .group[data-invalid] &",
},
{
prop: "_peerInvalid",
cssProperty:
"[data-peer]:invalid ~ &, [data-peer][data-invalid] ~ &, .peer:invalid ~ &, .peer[data-invalid] ~ &",
},
{
prop: "_groupChecked",
cssProperty:
"[role=group]:checked &, [role=group][data-checked] &, [data-group]:checked &, [data-group][data-checked] &, .group:checked &, .group[data-checked] &",
},
{
prop: "_peerChecked",
cssProperty:
"[data-peer]:checked ~ &, [data-peer][data-checked] ~ &, .peer:checked ~ &, .peer[data-checked] ~ &",
},
{
prop: "_groupFocusWithin",
cssProperty: "[role=group]:focus-within &, [data-group]:focus-within &, .group:focus-within &",
},
{ prop: "_peerFocusWithin", cssProperty: "[data-peer]:focus-within ~ &, .peer:focus-within ~ &" },
{
prop: "_peerPlaceholderShown",
cssProperty: "[data-peer]:placeholder-shown ~ &, .peer:placeholder-shown ~ &",
},
{ prop: "_placeholder", cssProperty: "&::placeholder" },
{ prop: "_placeholderShown", cssProperty: "&:placeholder-shown" },
{ prop: "_fullScreen", cssProperty: "&:fullscreen" },
{ prop: "_selection", cssProperty: "&::selection" },
{ prop: "_mediaDark", cssProperty: "@media (prefers-color-scheme: dark)" },
{ prop: "_mediaReduceMotion", cssProperty: "@media (prefers-reduced-motion: reduce)" },
{ prop: "_dark", cssProperty: ".hope-ui-dark &" },
{ prop: "_light", cssProperty: ".hope-ui-light &" },
];
const othersProps: StylePropsTableItem[] = [
{ prop: "appearance", cssProperty: "appearance" },
{ prop: "userSelect", cssProperty: "user-select" },
{ prop: "pointerEvents", cssProperty: "pointer-events" },
{ prop: "transition", cssProperty: "transition" },
{ prop: "resize", cssProperty: "resize" },
{ prop: "cursor", cssProperty: "cursor" },
{ prop: "outline", cssProperty: "outline" },
{ prop: "outlineOffset", cssProperty: "outline-offset" },
{ prop: "outlineColor", cssProperty: "outline-color" },
];
export default function StyleProps() {
const previousLink: ContextualNavLink = {
href: "/docs/changelog",
label: "Changelog",
};
const nextLink: ContextualNavLink = {
href: "/docs/features/css-prop",
label: "The css prop",
};
const contextualNavLinks: ContextualNavLink[] = [
{ href: "#margin-padding", label: "Margin and padding" },
{ href: "#colors", label: "Colors" },
{ href: "#typography", label: "Typography" },
{ href: "#layout", label: "Layout" },
{ href: "#size", label: "Size" },
{ href: "#flexbox", label: "Flexbox" },
{ href: "#grid-layout", label: "Grid layout" },
{ href: "#border", label: "Borders" },
{ href: "#border-radius", label: "Border radius" },
{ href: "#position", label: "Position" },
{ href: "#shadow", label: "Shadow" },
{ href: "#pseudo", label: "Pseudo selectors" },
{ href: "#others", label: "Others" },
{ href: "#as-prop", label: "The `as` prop" },
];
onMount(() => {
Prism.highlightAll();
});
return (
Style props
Style props are a way to alter the style of a component by simply passing props to it. It
helps to save time by providing helpful shorthand ways to style components.
Reference
The following table shows a list of every style prop and the properties within each group.
Margin and paddingColorTypographyLayoutSizeFlexbox
Props marked with an * will only work if you use the Flex or{" "}
Stack components.
Grid layout
Props marked with an * will only work if you use the Grid and{" "}
GridItem components.
BordersBorder radiusPositionShadowPseudo selectorsOthers
The as prop
All Hope UI components are polymorphic, meaning you can use the as prop to
change the rendered element.
For example, say you are using a Button component, and you need to make it a
link instead. You can compose a and Button like this:
And it works with SolidJS components too:
If you are using TypeScript you will get proper auto-completion based on the value of the{" "}
as prop.
);
}
================================================
FILE: apps/docs/src/pages/features/style-props/snippets.ts
================================================
const asPropWithHTMLElement = ``;
const asPropWithComponent = `import { Link } from "solid-app-router";
`;
const marginPadding = `import { Box } from "@hope-ui/solid"
// $2 refers to the value of \`theme().space[2]\`
Tomato
// You can also use custom values
// sets margin \`8px\` on all viewports and \`12px\` from the first breakpoint and up
`;
const colors = `import { Box } from "@hope-ui/solid"
// $neutral9 refers to the value of \`theme().colors.neutral9\`
// raw CSS color value
// background colors
// verbose prop
`;
const typography = `import { Text } from "@hope-ui/solid"
// font-size of \`theme().fontSizes.base\`
// font-size \`32px\`
// font-size \`"2em"\`
// text-align \`left\` on all viewports and \`center\` from the first breakpoint and up
`;
const layout = `import { Box } from "@hope-ui/solid"
// verbose
// shorthand
`;
const size = `import { Box } from "@hope-ui/solid"
// verbose
// shorthand
// use theme sizing
// width \`256px\`
// width \`"40px"\`
`;
const flexbox = `import { Box, Flex } from "@hope-ui/solid"
// verbose
Box with Flex props
// shorthand using the \`Flex\` component
Flex Container
`;
const grid = `import { Box, Grid } from "@hope-ui/solid"
// verbose
Grid
// shorthand using the \`Grid\` component
Grid
`;
const borders = `import { Box } from "@hope-ui/solid"
Card
`;
const borderRadius = `import { Button } from "@hope-ui/solid"
// This button will have no right borderRadius
// This button will have no left borderRadius
// top left and top right radius will be \`theme().radii.md\` => 6px
`;
const position = `import { Box } from "@hope-ui/solid"
// verbose
Cover
// shorthand
Cover
Absolute with top and left
Fixed with zIndex
`;
const shadow = `import { Box } from "@hope-ui/solid"
// use \`theme().shadows.md\`
md
`;
const pseudo = `import { Button } from "@hope-ui/solid"
// :hover style
// apply :hover over parent element
`;
export const snippets = {
asPropWithHTMLElement,
asPropWithComponent,
marginPadding,
colors,
typography,
layout,
size,
flexbox,
grid,
borders,
borderRadius,
position,
shadow,
pseudo,
};
================================================
FILE: apps/docs/src/pages/getting-started/changelog/index.tsx
================================================
import { Anchor, Text } from "@hope-ui/solid";
import { ContextualNavLink } from "@/components/ContextualNav";
import PageLayout from "@/components/PageLayout";
import PageTitle from "@/components/PageTitle";
export default function Changelog() {
const previousLink: ContextualNavLink = {
href: "/docs/getting-started",
label: "Installation",
};
const nextLink: ContextualNavLink = {
href: "/docs/features/style-props",
label: "Style props",
};
return (
Changelog
All notable changes of the current major version are described in the{" "}
CHANGELOG.md
{" "}
file.
);
}
================================================
FILE: apps/docs/src/pages/getting-started/installation/index.tsx
================================================
import { Alert, Text } from "@hope-ui/solid";
import Prism from "prismjs";
import { onMount } from "solid-js";
import Code from "@/components/Code";
import CodeSnippet from "@/components/CodeSnippet";
import { ContextualNavLink } from "@/components/ContextualNav";
import PageLayout from "@/components/PageLayout";
import PageTitle from "@/components/PageTitle";
import SectionTitle from "@/components/SectionTitle";
import { snippets } from "./snippets";
export default function Installation() {
const nextLink: ContextualNavLink = {
href: "/docs/changelog",
label: "Changelog",
};
const contextualNavLinks: ContextualNavLink[] = [
{ href: "#installation", label: "Installlation" },
{ href: "#provider-setup", label: "Provider setup" },
{ href: "#optional-setup", label: "Optional setup" },
];
onMount(() => {
Prism.highlightAll();
});
return (
Getting StartedWarning: Hope UI v0.x is not compatible with Solid Start and doesn't
support SSR.
Installation
Inside your SolidJS project, install Hope UI by running either of the following:
Provider setup
After installing Hope UI, you need to set up the HopeProvider at the root of
your application. This can be either in your index.jsx or{" "}
index.tsxPut in the following code:Optional setup
If you intend to customise the default theme to match your design requirements, you can
extend the theme from @hope-ui/solid.
The HopeProvider accept a config prop that deep merges the default theme with
your customizations.
);
}
================================================
FILE: apps/docs/src/pages/getting-started/installation/snippets.ts
================================================
const npmInstall = "npm install @hope-ui/solid @stitches/core solid-transition-group";
const yarnAdd = "yarn add @hope-ui/solid @stitches/core solid-transition-group";
const pnpmAdd = "pnpm add @hope-ui/solid @stitches/core solid-transition-group";
const providerSetup = `// 1. import \`HopeProvider\` component
import { HopeProvider } from '@hope-ui/solid'
// 2. Wrap HopeProvider at the root of your app
function App() {
return (
)
}`;
const customizeTheme = `// 1. Import the \`HopeThemeConfig\` type
import { HopeThemeConfig, HopeProvider } from '@hope-ui/solid'
// 2. Create a theme config to include custom colors, fonts, etc
const config: HopeThemeConfig = {
lightTheme: {
colors: {
primary9: "salmon"
}
}
}
// 3. Pass the \`config\` prop to the \`HopeProvider\`
function App() {
return (
)
}`;
export const snippets = {
npmInstall,
yarnAdd,
pnpmAdd,
providerSetup,
customizeTheme,
};
================================================
FILE: apps/docs/src/pages/landing-page.tsx
================================================
import {
Anchor,
Box,
Button,
Center,
Container,
GridItem,
Heading,
HStack,
HTMLHopeProps,
SimpleGrid,
Stack,
Text,
VStack,
VStackProps,
} from "@hope-ui/solid";
import { Link } from "solid-app-router";
import Footer from "@/components/Footer";
import Header from "@/components/Header";
import { IconAccessibility } from "@/icons/IconAccessibility";
import { IconCode } from "@/icons/IconCode";
import { IconComponent } from "@/icons/IconComponent";
import { IconGithub } from "@/icons/IconGithub";
import { IconMoon } from "@/icons/IconMoon";
import { IconPalette } from "@/icons/IconPalette";
import { IconRocket } from "@/icons/IconRocket";
import { Portal } from "solid-js/web";
function HeroSection(props: VStackProps) {
return (
The SolidJS component library you've{" "}
hoped
{" "}
for
Hope UI is a composable and accessible component library that gives you the foundation to
build your next SolidJS application.
}
fullWidth={{ "@initial": true, "@sm": false }}
>
Github
);
}
function FeatureSection(props: HTMLHopeProps<"div">) {
return (
Iterate fast
Do it yourself, but not alone.
Hope UI provides the foundation for building your application's user interface, giving
you the ability to focus on what really matter for your users.
Ready to go
Start your project with over 40 well designed SolidJS components.
Composable
Compose your application UI with reusable building blocks.
Accessible
Hope UI follows WAI-ARIA standards, helping you to reach the largest audience
possible with less effort.
Themeable
Use Hope UI's design system or build your own using the theming features.
Dark mode
Add dark mode support to your app with just a few lines of code. All components are
built with dark mode in mind.
Developer experience
An intuitive and familiar API that help you speed up your development.
);
}
export default function LandingPage() {
return (
Hope UI is no longer maintained. Focus is on the developement of it's successor: Pigment.
);
}
================================================
FILE: apps/docs/src/pages/not-found.tsx
================================================
import { Button, Center, Divider, Flex, Stack, Text, VStack } from "@hope-ui/solid";
import { Link } from "solid-app-router";
import Header from "@/components/Header";
export default function NotFound() {
return (
404
Page not found
Please check the URL in the address bar an try again.
);
}
================================================
FILE: apps/docs/src/pages/theming/color-mode/index.tsx
================================================
import {
Alert,
AlertDescription,
Box,
Button,
Text,
useColorMode,
useColorModeValue,
} from "@hope-ui/solid";
import Prism from "prismjs";
import { onMount } from "solid-js";
import Code from "@/components/Code";
import CodeSnippet from "@/components/CodeSnippet";
import { ContextualNavLink } from "@/components/ContextualNav";
import PageLayout from "@/components/PageLayout";
import PageTitle from "@/components/PageTitle";
import { Preview } from "@/components/Preview";
import SectionSubtitle from "@/components/SectionSubtitle";
import SectionTitle from "@/components/SectionTitle";
import { snippets } from "./snippets";
export default function ColorMode() {
const { colorMode, toggleColorMode } = useColorMode();
const bg = useColorModeValue("$danger9", "$info9");
const color = useColorModeValue("white", "$blackAlpha12");
const previousLink: ContextualNavLink = {
href: "/docs/theming/css-variables",
label: "CSS variables",
};
const nextLink: ContextualNavLink = {
href: "/docs/general/button",
label: "Button",
};
const contextualNavLinks: ContextualNavLink[] = [
{ href: "#initial-color-mode", label: "Initial color mode" },
{ href: "#changing-color-mode", label: "Changing color mode" },
{ href: "#use-color-mode", label: "useColorMode", indent: true },
{ href: "#use-color-mode-value", label: "useColorModeValue", indent: true },
];
onMount(() => {
Prism.highlightAll();
});
return (
Color mode
Hope UI comes with built-in support for managing color mode in your applications. All Hope
UI components are color-mode aware.
Hope UI stores the color mode in localStorage and appends a className to the{" "}
body to ensure the color mode is persistent.
Initial color mode
The default color mode used by Hope UI is light. To set the initial color mode
your application should start with, create a theme config, set the{" "}
initialColorMode to either light, dark or{" "}
system and pass the config to the HopeProvider.
When using system as initial color mode, the theme will change with the
system preference. However, if another theme is manually selected by the user then that
theme will be used on the next page load. To reset it to system preference, simply remove
the hope-ui-color-mode entry from localStorage.
Changing color mode
To manage color mode in your application, Hope UI exposes the useColorMode and{" "}
useColorModeValue hooks.
useColorModeuseColorMode is a custom hook that gives you an accessor to get the current
color mode, and a function to toggle it.
Calling toggleColorMode anywhere in your app tree toggles the color mode from
light or dark and vice versa.
useColorModeValueuseColorModeValue is a custom hook used to change any value or style based on
the color mode. It takes 2 arguments: the value in light mode, the value in dark mode and
returns a derived signal with the correct value based on the color mode.
Here's an example that changes the background-color and color{" "}
using the useColorModeValue hook.
This box's style will change based on the color mode.
);
}
================================================
FILE: apps/docs/src/pages/theming/color-mode/snippets.ts
================================================
const initialColorMode = `import { HopeThemeConfig, HopeProvider } from "@hope-ui/solid"
// 1. Create a theme config
const config: HopeThemeConfig = {
initialColorMode: "system", // 2. Add your color mode
// rest of the config...
}
// 3. Pass the \`config\` prop to the \`HopeProvider\`
function App() {
return (
)
}`;
const useColorMode = `function ColorModeSwitcher() {
const { colorMode, toggleColorMode } = useColorMode()
return (
)
}`;
const useColorModeValue = `function StyleColorMode() {
const { toggleColorMode } = useColorMode()
const bg = useColorModeValue("$danger9", "$info9")
const color = useColorModeValue("white", "$blackAlpha12")
return (
<>
This box's style will change based on the color mode.
)
}`;
export const snippets = {
initialColorMode,
useColorMode,
useColorModeValue,
};
================================================
FILE: apps/docs/src/pages/theming/css-variables/index.tsx
================================================
import { Text } from "@hope-ui/solid";
import Prism from "prismjs";
import { onMount } from "solid-js";
import Code from "@/components/Code";
import CodeSnippet from "@/components/CodeSnippet";
import { ContextualNavLink } from "@/components/ContextualNav";
import PageLayout from "@/components/PageLayout";
import PageTitle from "@/components/PageTitle";
import { snippets } from "./snippets";
export default function CSSVariables() {
const previousLink: ContextualNavLink = {
href: "/docs/theming/customize-theme",
label: "Customize theme",
};
const nextLink: ContextualNavLink = {
href: "/docs/theming/color-mode",
label: "Color mode",
};
const contextualNavLinks: ContextualNavLink[] = [];
onMount(() => {
Prism.highlightAll();
});
return (
CSS variables
All Hope UI theme tokens are available as CSS custom properties (aka CSS variables) with the{" "}
hope prefix.
Let's say you want to change your application #root div{" "}
background-color using a color from the Hope UI theme. In a plain CSS file you
can do it like this:
);
}
================================================
FILE: apps/docs/src/pages/theming/css-variables/snippets.ts
================================================
const cssVariables = `/* index.css */
#root {
background-color: var(--hope-colors-neutral1);
}`;
export const snippets = {
cssVariables,
};
================================================
FILE: apps/docs/src/pages/theming/customize-theme/index.tsx
================================================
import { Alert, AlertDescription, hope, Text } from "@hope-ui/solid";
import Prism from "prismjs";
import { onMount } from "solid-js";
import Code from "@/components/Code";
import CodeSnippet from "@/components/CodeSnippet";
import { ContextualNavLink } from "@/components/ContextualNav";
import PageLayout from "@/components/PageLayout";
import PageTitle from "@/components/PageTitle";
import SectionSubtitle from "@/components/SectionSubtitle";
import SectionTitle from "@/components/SectionTitle";
import { snippets } from "./snippets";
export default function CustomizeTheme() {
const previousLink: ContextualNavLink = {
href: "/docs/theming/default-theme",
label: "Default theme",
};
const nextLink: ContextualNavLink = {
href: "/docs/theming/css-variables",
label: "CSS variables",
};
const contextualNavLinks: ContextualNavLink[] = [
{ href: "#customizing-theme-tokens", label: "Customizing theme tokens" },
{ href: "#token-aliases", label: "Token aliases" },
{ href: "#customizing-component-styles", label: "Customizing component styles" },
{
href: "#styling-single-part-components",
label: "Styling single-part components",
indent: true,
},
{
href: "#styling-muti-parts-components",
label: "Styling multi-parts components",
indent: true,
},
];
onMount(() => {
Prism.highlightAll();
});
return (
Customize theme
By default, all Hope UI components inherit values from the default theme. In some scenarios,
you might need to customize the theme tokens to match your design requirements.
Here are some options depending on your goals:
Customize the theme tokens like colors, font sizes, line heights, etc.
Customize components base styles.Customizing theme tokens
To override a token in the default theme, create a theme config and add the keys you'd like
to override. You can also add new values to the theme.
For example, if you'd like to override the primary color palette in the theme, here's what
you'll do:
Custom keys added to the Hope UI theme are not inferred by Typescript and won't appears in
IntelliSense.
Token aliases
Hope UI supports token aliases (aka semantic tokens) in it's theme configuration. For
example, you can create an appBg token representing your application{" "}
background-color which is white in light mode and refers to Hope
UI neutral3 color token in dark mode:
Customizing component styles
Hope UI provides a components option in it's theme configuration allowing you
to globally set base style and default props for each Hope UI components.
Styling single-part components
Let's say you want all Button to have a "pill shape", be uppercased and apply
the subtle variant and success colorScheme by default, here's what
you'll do:
Styling multi-parts components
Some Hope UI components are composed of multiple parts that you can stylize. Below is and
example for the Alert component.
To know which part of a component can be stylized in the Hope UI theme configuration, please
refer to it's documentation.
);
}
================================================
FILE: apps/docs/src/pages/theming/customize-theme/snippets.ts
================================================
const overrideThemeColors = `// 1. Import the \`HopeThemeConfig\` type
import { HopeThemeConfig, HopeProvider } from "@hope-ui/solid"
// 2. Create a theme config and pass your custom values
const config: HopeThemeConfig = {
initialColorMode: "system",
lightTheme: {
colors: {
primary1: "#fefcff",
// ...
primary12: "#340c3b",
}
},
darkTheme: {
colors: {
primary1: "#1d131d",
// ...
primary12: "#fbecfc",
}
},
components: {
// Components base styles...
}
}
// 3. Pass the config to \`HopeProvider\`
// 4. Now you can use these colors in your components
function Usage() {
return Welcome
}`;
const tokenAliases = `// example theme config
const config: HopeThemeConfig = {
lightTheme: {
colors: {
appBg: "#ffffff",
}
},
darkTheme: {
colors: {
appBg: "$neutral3", // Use the \`$\` prefix to refer to another token in the theme
}
},
}`;
const singlePartComponentStyles = `// example theme config
const config: HopeThemeConfig = {
components: {
Button: {
baseStyle: {
borderRadius: "$full",
textTransform: "uppercase",
},
defaultProps: {
variant: "subtle",
colorScheme: "success",
}
}
}
}`;
const multiPartsComponentStyles = `// example theme config
const config: HopeThemeConfig = {
components: {
Alert: {
baseStyle: {
// Base style for the component
root: {
borderRadius: "$full",
},
// Base style for the component
icon: {
boxSize: "$8",
},
// Base style for the component
title: {
fontWeight: "$semibold",
textTransform: "uppercase",
},
// Base style for the component
description: {
fontSize: "14px",
}
},
defaultProps: {
// Default props for the component
root: {
variant: "solid",
},
}
}
}
}`;
export const snippets = {
overrideThemeColors,
tokenAliases,
singlePartComponentStyles,
multiPartsComponentStyles,
};
================================================
FILE: apps/docs/src/pages/theming/default-theme/index.tsx
================================================
import { Alert, AlertDescription, Anchor, hope, Text } from "@hope-ui/solid";
import Prism from "prismjs";
import { onMount } from "solid-js";
import Code from "@/components/Code";
import CodeSnippet from "@/components/CodeSnippet";
import { ColorScale, ColorScaleItem } from "@/components/ColorScale";
import { ContextualNavLink } from "@/components/ContextualNav";
import PageLayout from "@/components/PageLayout";
import PageTitle from "@/components/PageTitle";
import SectionSubtitle from "@/components/SectionSubtitle";
import SectionTitle from "@/components/SectionTitle";
import { snippets } from "./snippets";
export default function DefaultTheme() {
const previousLink: ContextualNavLink = {
href: "/docs/features/hope-factory",
label: "Hope factory",
};
const nextLink: ContextualNavLink = {
href: "/docs/theming/customize-theme",
label: "Customize theme",
};
const contextualNavLinks: ContextualNavLink[] = [
{ href: "#usage", label: "Usage" },
{ href: "#colors", label: "Colors" },
{ href: "#black-alpha", label: "Black alpha", indent: true },
{ href: "#white-alpha", label: "White alpha", indent: true },
{ href: "#primary", label: "Primary", indent: true },
{ href: "#accent", label: "Accent", indent: true },
{ href: "#neutral", label: "Neutral", indent: true },
{ href: "#success", label: "Success", indent: true },
{ href: "#info", label: "Info", indent: true },
{ href: "#warning", label: "Warning", indent: true },
{ href: "#danger", label: "Danger", indent: true },
{ href: "#typography", label: "Typography" },
{ href: "#space", label: "Space" },
{ href: "#sizes", label: "Sizes" },
{ href: "#radii", label: "Radii (Border radius)" },
{ href: "#shadows", label: "Shadows" },
{ href: "#z-indices", label: "z-index values" },
];
const colors: {
blackAlpha: ColorScaleItem[];
whiteAlpha: ColorScaleItem[];
primary: ColorScaleItem[];
accent: ColorScaleItem[];
neutral: ColorScaleItem[];
success: ColorScaleItem[];
info: ColorScaleItem[];
warning: ColorScaleItem[];
danger: ColorScaleItem[];
} = {
blackAlpha: [
{ name: "Black alpha 1", token: "blackAlpha1" },
{ name: "Black alpha 2", token: "blackAlpha2" },
{ name: "Black alpha 3", token: "blackAlpha3" },
{ name: "Black alpha 4", token: "blackAlpha4" },
{ name: "Black alpha 5", token: "blackAlpha5" },
{ name: "Black alpha 6", token: "blackAlpha6" },
{ name: "Black alpha 7", token: "blackAlpha7" },
{ name: "Black alpha 8", token: "blackAlpha8" },
{ name: "Black alpha 9", token: "blackAlpha9" },
{ name: "Black alpha 10", token: "blackAlpha10" },
{ name: "Black alpha 11", token: "blackAlpha11" },
{ name: "Black alpha 12", token: "blackAlpha12" },
],
whiteAlpha: [
{ name: "White alpha 1", token: "whiteAlpha1" },
{ name: "White alpha 2", token: "whiteAlpha2" },
{ name: "White alpha 3", token: "whiteAlpha3" },
{ name: "White alpha 4", token: "whiteAlpha4" },
{ name: "White alpha 5", token: "whiteAlpha5" },
{ name: "White alpha 6", token: "whiteAlpha6" },
{ name: "White alpha 7", token: "whiteAlpha7" },
{ name: "White alpha 8", token: "whiteAlpha8" },
{ name: "White alpha 9", token: "whiteAlpha9" },
{ name: "White alpha 10", token: "whiteAlpha10" },
{ name: "White alpha 11", token: "whiteAlpha11" },
{ name: "White alpha 12", token: "whiteAlpha12" },
],
primary: [
{ name: "Primary 1", token: "primary1" },
{ name: "Primary 2", token: "primary2" },
{ name: "Primary 3", token: "primary3" },
{ name: "Primary 4", token: "primary4" },
{ name: "Primary 5", token: "primary5" },
{ name: "Primary 6", token: "primary6" },
{ name: "Primary 7", token: "primary7" },
{ name: "Primary 8", token: "primary8" },
{ name: "Primary 9", token: "primary9" },
{ name: "Primary 10", token: "primary10" },
{ name: "Primary 11", token: "primary11" },
{ name: "Primary 12", token: "primary12" },
],
accent: [
{ name: "Accent 1", token: "accent1" },
{ name: "Accent 2", token: "accent2" },
{ name: "Accent 3", token: "accent3" },
{ name: "Accent 4", token: "accent4" },
{ name: "Accent 5", token: "accent5" },
{ name: "Accent 6", token: "accent6" },
{ name: "Accent 7", token: "accent7" },
{ name: "Accent 8", token: "accent8" },
{ name: "Accent 9", token: "accent9" },
{ name: "Accent 10", token: "accent10" },
{ name: "Accent 11", token: "accent11" },
{ name: "Accent 12", token: "accent12" },
],
neutral: [
{ name: "Neutral 1", token: "neutral1" },
{ name: "Neutral 2", token: "neutral2" },
{ name: "Neutral 3", token: "neutral3" },
{ name: "Neutral 4", token: "neutral4" },
{ name: "Neutral 5", token: "neutral5" },
{ name: "Neutral 6", token: "neutral6" },
{ name: "Neutral 7", token: "neutral7" },
{ name: "Neutral 8", token: "neutral8" },
{ name: "Neutral 9", token: "neutral9" },
{ name: "Neutral 10", token: "neutral10" },
{ name: "Neutral 11", token: "neutral11" },
{ name: "Neutral 12", token: "neutral12" },
],
success: [
{ name: "Success 1", token: "success1" },
{ name: "Success 2", token: "success2" },
{ name: "Success 3", token: "success3" },
{ name: "Success 4", token: "success4" },
{ name: "Success 5", token: "success5" },
{ name: "Success 6", token: "success6" },
{ name: "Success 7", token: "success7" },
{ name: "Success 8", token: "success8" },
{ name: "Success 9", token: "success9" },
{ name: "Success 10", token: "success10" },
{ name: "Success 11", token: "success11" },
{ name: "Success 12", token: "success12" },
],
info: [
{ name: "Info 1", token: "info1" },
{ name: "Info 2", token: "info2" },
{ name: "Info 3", token: "info3" },
{ name: "Info 4", token: "info4" },
{ name: "Info 5", token: "info5" },
{ name: "Info 6", token: "info6" },
{ name: "Info 7", token: "info7" },
{ name: "Info 8", token: "info8" },
{ name: "Info 9", token: "info9" },
{ name: "Info 10", token: "info10" },
{ name: "Info 11", token: "info11" },
{ name: "Info 12", token: "info12" },
],
warning: [
{ name: "Warning 1", token: "warning1" },
{ name: "Warning 2", token: "warning2" },
{ name: "Warning 3", token: "warning3" },
{ name: "Warning 4", token: "warning4" },
{ name: "Warning 5", token: "warning5" },
{ name: "Warning 6", token: "warning6" },
{ name: "Warning 7", token: "warning7" },
{ name: "Warning 8", token: "warning8" },
{ name: "Warning 9", token: "warning9" },
{ name: "Warning 10", token: "warning10" },
{ name: "Warning 11", token: "warning11" },
{ name: "Warning 12", token: "warning12" },
],
danger: [
{ name: "Danger 1", token: "danger1" },
{ name: "Danger 2", token: "danger2" },
{ name: "Danger 3", token: "danger3" },
{ name: "Danger 4", token: "danger4" },
{ name: "Danger 5", token: "danger5" },
{ name: "Danger 6", token: "danger6" },
{ name: "Danger 7", token: "danger7" },
{ name: "Danger 8", token: "danger8" },
{ name: "Danger 9", token: "danger9" },
{ name: "Danger 10", token: "danger10" },
{ name: "Danger 11", token: "danger11" },
{ name: "Danger 12", token: "danger12" },
],
};
onMount(() => {
Prism.highlightAll();
});
return (
Default theme
The theme object is where you define your application's color palette, type scale, font
stacks, border radius values, and more.
Usage
Many CSS properties used in style props or stitches's css function are mapped
to a scale from the Hope UI theme. The list of CSS property / theme token mapping is
available on the{" "}
stitches
{" "}
documentation.
To apply a token you need to prefix it with a $ sign.
Colors
The colors key allows you to customize the color palettes for your project.
Hope UI uses{" "}
Radix Colors
{" "}
in its default theme. Radix Colors are designed to be accessible, well-balanced, harmonious
and provide light and dark palette for each of their colors.
Since Hope UI components are built with Radix Colors, unless you have any design skills,
the recommended way of customizing colors is to pick a light and dark scale from Radix
Colors in order to keep all components accessible and dark mode friendly.
Below are the list of all colors available in the default Hope UI theme. For semantic colors
like primary, switching to dark mode will show the proper hex values from the
dark palette.
Black alphaWhite alphaPrimaryAccentNeutralSuccessInfoWarningDangerTypography
To manage typography options, the theme object supports the following keys:
fonts (font families)
fontSizesfontWeightslineHeightsletterSpacingsSpace
The space key allows you to customize the global spacing scale for your
project.
0_5 actually means 0.5, unfortunately stitches doesn't allow
dots in theme token names.
Sizes
The sizes key allows you to customize the global sizing of components you build
for your project.
Radii (Border radius)
Hope UI provides a set of smooth corner radius values. The radii key allows you
to customize the global radii scale for your project.
Shadows
Hope UI provides a default set of shadows. The shadows key allows you to
customize the global shadow scale for your project.
z-index values
hope UI provides a set of z-indices out of the box to help control the stacking order of
components.
);
}
================================================
FILE: apps/docs/src/pages/theming/default-theme/snippets.ts
================================================
const usage = `
This is the Box
`;
const colors = `// example theme object
export default {
colors: {
primary1: "#fefcff",
primary2: "#fff8ff",
primary3: "#fceffc",
primary4: "#f9e5f9",
primary5: "#f3d9f4",
primary6: "#ebc8ed",
primary7: "#dfafe3",
primary8: "#cf91d8",
primary9: "#ab4aba",
primary10: "#a43cb4",
primary11: "#9c2bad",
primary12: "#340c3b",
}
}`;
const typography = `// example theme object
export default {
fonts: {
sans: "ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'",
serif: "ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif",
mono: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
},
fontSizes: {
"2xs": "0.625rem",
xs: "0.75rem",
sm: "0.875rem",
base: "1rem",
lg: "1.125rem",
xl: "1.25rem",
"2xl": "1.5rem",
"3xl": "1.875rem",
"4xl": "2.25rem",
"5xl": "3rem",
"6xl": "3.75rem",
"7xl": "4.5rem",
"8xl": "6rem",
"9xl": "8rem",
},
fontWeights: {
hairline: 100,
thin: 200,
light: 300,
normal: 400,
medium: 500,
semibold: 600,
bold: 700,
extrabold: 800,
black: 900,
},
lineHeights: {
normal: "normal",
none: 1,
shorter: 1.25,
short: 1.375,
base: 1.5,
tall: 1.625,
taller: 2,
"3": "0.75rem",
"4": "1rem",
"5": "1.25rem",
"6": "1.5rem",
"7": "1.75rem",
"8": "2rem",
"9": "2.25rem",
"10": "2.5rem",
},
letterSpacings: {
tighter: "-0.05em",
tight: "-0.025em",
normal: "0",
wide: "0.025em",
wider: "0.05em",
widest: "0.1em",
}
}`;
const space = `// example theme object
export default {
space: {
px: "1px",
"0_5": "0.125rem",
"1": "0.25rem",
"1_5": "0.375rem",
"2": "0.5rem",
"2_5": "0.625rem",
"3": "0.75rem",
"3_5": "0.875rem",
"4": "1rem",
"5": "1.25rem",
"6": "1.5rem",
"7": "1.75rem",
"8": "2rem",
"9": "2.25rem",
"10": "2.5rem",
"12": "3rem",
"14": "3.5rem",
"16": "4rem",
"20": "5rem",
"24": "6rem",
"28": "7rem",
"32": "8rem",
"36": "9rem",
"40": "10rem",
"44": "11rem",
"48": "12rem",
"52": "13rem",
"56": "14rem",
"60": "15rem",
"64": "16rem",
"72": "18rem",
"80": "20rem",
"96": "24rem",
}
}`;
const sizes = `// example theme object
export default {
sizes: {
...space,
prose: "65ch",
max: "max-content",
min: "min-content",
full: "100%",
screenW: "100vw",
screenH: "100vh",
xs: "20rem",
sm: "24rem",
md: "28rem",
lg: "32rem",
xl: "36rem",
"2xl": "42rem",
"3xl": "48rem",
"4xl": "56rem",
"5xl": "64rem",
"6xl": "72rem",
"7xl": "80rem",
"8xl": "90rem",
containerSm: "640px",
containerMd: "768px",
containerLg: "1024px",
containerXl: "1280px",
container2xl: "1536px",
}
}`;
const radii = `// example theme object
export default {
radii: {
none: "0",
xs: "0.125rem",
sm: "0.25rem",
md: "0.375rem",
lg: "0.5rem",
xl: "0.75rem",
"2xl": "1rem",
"3xl": "1.5rem",
full: "9999px",
}
}`;
const shadows = `// example theme object
export default {
shadows: {
none: "0 0 #0000",
xs: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
sm: "0 1px 3px 0 rgb(0 0 0 / 0.09), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
md: "0 4px 6px -1px rgb(0 0 0 / 0.09), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
lg: "0 10px 15px -3px rgb(0 0 0 / 0.09), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
xl: "0 20px 25px -5px rgb(0 0 0 / 0.09), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
"2xl": "0 25px 50px -12px rgb(0 0 0 / 0.24)",
inner: "inset 0 2px 4px 0 rgb(0 0 0 / 0.06)",
}
}`;
const zIndices = `// example theme object
export default {
zIndices: {
hide: -1,
auto: "auto",
base: 0,
docked: 10,
sticky: 1000,
banner: 1100,
overlay: 1200,
modal: 1300,
dropdown: 1400,
popover: 1500,
tooltip: 1600,
skipLink: 1700,
toast: 1800,
}
}`;
export const snippets = { usage, colors, typography, space, sizes, radii, shadows, zIndices };
================================================
FILE: apps/docs/tsconfig.json
================================================
{
"extends": "../../tsconfig.json",
"compilerOptions": {
"outDir": "dist",
"baseUrl": ".",
"rootDir": ".",
"paths": {
"@/*": ["src/*"]
}
},
"include": ["./src", "vite.config.ts"]
}
================================================
FILE: apps/docs/vite.config.ts
================================================
import { fileURLToPath } from "url";
import { defineConfig } from "vite";
import prismjs from "vite-plugin-prismjs";
import solidPlugin from "vite-plugin-solid";
export default defineConfig({
plugins: [
solidPlugin(),
prismjs({
languages: ["bash", "js", "tsx", "html", "css"],
plugins: ["copy-to-clipboard", "line-highlight"],
css: false,
}),
],
resolve: {
alias: {
"@/": fileURLToPath(new URL("./src/", import.meta.url)),
},
},
build: {
target: "esnext",
polyfillDynamicImport: false,
},
});
================================================
FILE: commitlint.config.js
================================================
module.exports = {
extends: ["@commitlint/config-conventional"],
};
================================================
FILE: jest.config.js
================================================
const pkgRootPath = ``;
const solidjsPath = `${pkgRootPath}/../../node_modules/solid-js`;
module.exports = {
preset: "ts-jest",
globals: {
"ts-jest": {
tsconfig: `${pkgRootPath}/tsconfig.json`,
babelConfig: {
presets: ["@babel/preset-env", "babel-preset-solid"]
}
}
},
testEnvironment: "jsdom",
setupFilesAfterEnv: [`${pkgRootPath}/../../jest.setup.ts`, "regenerator-runtime"],
moduleNameMapper: {
"solid-js/web": `${solidjsPath}/web/dist/web.cjs`,
"solid-js/store": `${solidjsPath}/store/dist/store.cjs`,
"solid-js": `${solidjsPath}/dist/solid.cjs`
},
verbose: true,
testTimeout: 30000
};
================================================
FILE: jest.setup.ts
================================================
// jest-dom adds custom jest matchers for asserting on DOM nodes.
// allows you to do things like:
// expect(element).toHaveTextContent(/solidjs/i)
// learn more: https://github.com/testing-library/jest-dom
import "@testing-library/jest-dom";
================================================
FILE: netlify.toml
================================================
[[redirects]]
from = "/*"
to = "/index.html"
status = 200
================================================
FILE: package.json
================================================
{
"name": "hope-ui-monorepo",
"private": true,
"description": "The SolidJS component library you've hoped for.",
"homepage": "https://hope-ui.com",
"bugs": {
"url": "https://github.com/fabien-ml/hope-ui/issues"
},
"repository": {
"type": "git",
"url": "git+https://github.com/fabien-ml/hope-ui.git"
},
"license": "MIT",
"author": "Fabien MARIE-LOUISE (https://github.com/fabien-ml)",
"workspaces": [
"apps/*",
"packages/*"
],
"scripts": {
"build": "turbo run build",
"changeset": "changeset",
"clean": "turbo run clean && rm -rf node_modules",
"commit": "git-cz",
"format": "prettier . --write --ignore-path .gitignore && git update-index --again",
"lint": "eslint . --ext .ts,.tsx --ignore-path .gitignore",
"prepare": "husky install",
"release": "turbo run build && changeset publish",
"test": "turbo run test",
"typecheck": "turbo run typecheck",
"version-packages": "changeset version"
},
"lint-staged": {
"*.{md,json}": [
"prettier --write"
],
"*.ts?(x)": [
"eslint",
"prettier --write"
],
"package.json": "npx sort-package-json"
},
"config": {
"commitizen": {
"path": "@commitlint/cz-commitlint"
}
},
"devDependencies": {
"@babel/core": "7.17.9",
"@babel/preset-env": "7.16.11",
"@babel/preset-typescript": "7.16.7",
"@changesets/cli": "2.22.0",
"@commitlint/cli": "16.2.3",
"@commitlint/config-conventional": "16.2.1",
"@commitlint/cz-commitlint": "16.2.3",
"@stitches/core": "1.2.8",
"@storybook/addon-a11y": "6.4.20",
"@storybook/addon-actions": "6.4.20",
"@storybook/addon-essentials": "6.4.20",
"@storybook/addon-links": "6.4.20",
"@storybook/addons": "6.4.20",
"@storybook/api": "6.4.20",
"@storybook/builder-webpack5": "6.4.20",
"@storybook/components": "6.4.20",
"@storybook/core-events": "6.4.20",
"@storybook/html": "6.4.20",
"@storybook/manager-webpack5": "6.4.20",
"@storybook/theming": "6.4.20",
"@testing-library/dom": "8.13.0",
"@testing-library/jest-dom": "5.16.4",
"@testing-library/user-event": "14.0.4",
"@types/jest": "27.4.1",
"@types/lodash.merge": "4.6.6",
"@types/node": "17.0.23",
"@types/prismjs": "1.26.0",
"@types/scroll-lock": "2.1.0",
"@types/testing-library__jest-dom": "5.14.3",
"@typescript-eslint/eslint-plugin": "5.18.0",
"@typescript-eslint/parser": "5.18.0",
"babel-loader": "8.2.4",
"babel-preset-solid": "1.3.13",
"commitizen": "4.2.4",
"eslint": "8.12.0",
"eslint-config-prettier": "8.5.0",
"eslint-import-resolver-typescript": "2.7.1",
"eslint-plugin-import": "2.26.0",
"eslint-plugin-jsx-a11y": "6.5.1",
"eslint-plugin-prettier": "4.0.0",
"eslint-plugin-simple-import-sort": "7.0.0",
"eslint-plugin-solid": "0.4.6",
"husky": "7.0.4",
"inquirer": "8.2.2",
"jest": "27.5.1",
"lint-staged": "12.3.7",
"prettier": "2.6.2",
"prismjs": "1.27.0",
"react": "17.0.1",
"react-dom": "17.0.1",
"solid-js": "1.4.0",
"solid-testing-library": "0.3.0",
"solid-transition-group": "0.0.10",
"sort-package-json": "1.55.0",
"storybook-dark-mode": "1.0.9",
"ts-jest": "27.1.4",
"turbo": "1.2.4",
"typescript": "4.6.4",
"vite": "2.9.1",
"vite-plugin-dts": "1.1.1",
"vite-plugin-prismjs": "0.0.8",
"vite-plugin-solid": "2.2.6",
"webpack": "5.72.0"
}
}
================================================
FILE: packages/solid/.browserslistrc
================================================
defaults
not IE 11
not op_mini all
================================================
FILE: packages/solid/.storybook/main.js
================================================
const path = require("path");
module.exports = {
stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/addon-a11y",
"storybook-dark-mode",
],
framework: "@storybook/html",
core: {
builder: "webpack5",
},
babel: async options => ({
...options,
presets: ["@babel/preset-typescript", "solid"],
}),
webpackFinal: async config => {
config.resolve.alias = {
...config.resolve.alias,
"@": path.resolve(__dirname, "../src"),
};
return config;
},
};
================================================
FILE: packages/solid/.storybook/preview.js
================================================
import { themes } from "@storybook/theming";
import { render } from "solid-js/web";
let disposeStory;
// SolidJS decorators
export const decorators = [
Story => {
if (disposeStory) {
disposeStory();
}
const root = document.getElementById("root");
const solid = document.createElement("div");
solid.setAttribute("id", "solid-root");
root.appendChild(solid);
disposeStory = render(Story, solid);
return solid;
},
];
export const parameters = {
actions: { argTypesRegex: "^on[A-Z].*" },
decorators,
options: {
storySort: {
order: [
"General",
"Layout",
"Data entry",
"Data display",
"Navigation",
"Feedback",
"Overlay",
],
},
},
darkMode: {
dark: { ...themes.dark, appBg: "#1c1c1c", appContentBg: "#151718" },
light: { ...themes.normal, appBg: "#f9fafb", appContentBg: "#ffffff" },
},
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
};
================================================
FILE: packages/solid/CHANGELOG.md
================================================
## [0.6.3](https://github.com/fabien-ml/hope-ui/compare/v0.6.2...v0.6.3) (2022-08-01)
### 🐛 Bug fixes
- Added `imageProps` to `Avatar`.
## [0.6.2](https://github.com/fabien-ml/hope-ui/compare/v0.6.1...v0.6.2) (2022-05-31)
### 🐛 Bug fixes
- Select doesn't work in overlay components Modal/Drawer (#166).
## [0.6.1](https://github.com/fabien-ml/hope-ui/compare/v0.6.0...v0.6.1) (2022-05-21)
### 🐛 Bug fixes
- Opening accordion triggers form submission (#154).
- Notification close button is too small on mobile devices (#155).
## [0.6.0](https://github.com/fabien-ml/hope-ui/compare/v0.5.1...v0.6.0) (2022-05-15)
### 💥 BREAKING CHANGES
- Update `solid-js` peer dependency version to `^1.4.0`.
### 🐛 Bug fixes
- `Select` and `Menu` doesn't work with SolidJS ^1.4.0 (#150).
## [0.5.1](https://github.com/fabien-ml/hope-ui/compare/v0.5.0...v0.5.1) (2022-05-08)
### 🐛 Bug fixes
- Clicking Scrollbar in `Select` closes dropdown instead of scrolling (#145).
## [0.5.0](https://github.com/fabien-ml/hope-ui/compare/v0.4.5...v0.5.0) (2022-05-04)
### 💥 BREAKING CHANGES
- `CheckboxControl` and `CheckboxLabel` components has been removed.
- `RadioControl` and `RadioLabel` components has been removed.
- `SwitchControl` and `SwitchLabel` components has been removed.
### 🐛 Bug fixes
- `Input` event listener leak (#141).
## [0.4.5](https://github.com/fabien-ml/hope-ui/compare/v0.4.4...v0.4.5) (2022-04-28)
### 🐛 Bug fixes
- `Select` in controlled mode doesn't show the current value (#140).
## [0.4.4](https://github.com/fabien-ml/hope-ui/compare/v0.4.3...v0.4.4) (2022-04-28)
### 🐛 Bug fixes
- `_hover` style prop is not applied on `Button` and `Tabs`.
## [0.4.3](https://github.com/fabien-ml/hope-ui/compare/v0.4.2...v0.4.3) (2022-04-19)
### 🐛 Bug fixes
- Export all component styles.
## [0.4.2](https://github.com/fabien-ml/hope-ui/compare/v0.4.1...v0.4.2) (2022-04-08)
### 🐛 Bug fixes
- improved `Notification` styles.
## [0.4.1](https://github.com/fabien-ml/hope-ui/compare/v0.4.0...v0.4.1) (2022-04-08)
### 🐛 Bug fixes
- `Accordion` and `Tabs` causes infinite loops.
## [0.4.0](https://github.com/fabien-ml/hope-ui/compare/v0.3.1...v0.4.0) (2022-04-06)
### ✨ Features
- Added `Notification` system.
## [0.3.1](https://github.com/fabien-ml/hope-ui/compare/v0.3.0...v0.3.1) (2022-04-04)
### 🐛 Bug fixes
- Incorrect `borderRadius` on `Input` with addons.
## [0.3.0](https://github.com/fabien-ml/hope-ui/compare/v0.2.1...v0.3.0) (2022-04-03)
### 💥 BREAKING CHANGES
- `Select` and `SelectOption` only accept `string | number` as value.
- `SelectIcon` render prop has been removed.
- `Stack` default value for `alignItems` prop is `stretch`.
- `TabPanels` component has been removed.
### ✨ Features
- Added `Skeleton` component.
- Added `Accordion` component.
- Added `Popover` component.
- Added `screenW` and `screenH` theme tokens as semantic equivalents of `100vw` and `100vh`.
## [0.2.1](https://github.com/fabien-ml/hope-ui/compare/v0.2.0...v0.2.1) (2022-03-30)
### 🐛 Bug fixes
- `Tabs` not showing correct `TabPanel` in Safari.
## [0.2.0](https://github.com/fabien-ml/hope-ui/compare/v0.1.2...v0.2.0) (2022-03-28)
### ✨ Features
- Added `Tabs` and `Menu` components.
- Added `accent` color palette.
## [0.1.2](https://github.com/fabien-ml/hope-ui/compare/v0.1.1...v0.1.2) (2022-03-24)
### 🐛 Bug fixes
- Same `id` is passed to all `Radio` and `Checkbox` when used in a `FormControl`.
## [0.1.1](https://github.com/fabien-ml/hope-ui/compare/v0.1.0...v0.1.1) (2022-03-24)
### 🐛 Bug fixes
- Incorrect `checked` state on `Radio` when a number is used as `value`.
### ✨ Features
- Add `data-group` attribute to `Radio`, `Checkbox` and `Switch` to allow usage of `_group*` style props on children.
- `Radio`, `Checkbox` and `Switch` exposes they `checked` state as render props.
## [0.1.0](https://github.com/fabien-ml/hope-ui/releases/tag/v0.1.0) (2022-03-23)
### 💥 BREAKING CHANGES
- `Radio` has been splitted into `Radio`, `RadioControl` and `RadioLabel` to improve composability.
- `Checkbox` has been splitted into `Checkbox`, `CheckboxControl` and `CheckboxLabel` to improve composability.
- `Switch` has been splitted into `Switch`, `SwitchControl` and `SwitchLabel` to improve composability.
### ✨ Features
- Added `SimpleSelect` and `SimpleOption` components as a simpler abstraction over the `Select` API.
================================================
FILE: packages/solid/README.md
================================================
# @hope-ui/solid
A composable and accessible component library that gives you the foundation to build your next SolidJS application.
## Documentation
For full documentation, visit [hope-ui.com](https://hope-ui.com/).
## Installation
```sh
# With npm
npm install @hope-ui/solid @stitches/core solid-transition-group
# With yarn
yarn add @hope-ui/solid @stitches/core solid-transition-group
# With pnpm
pnpm add @hope-ui/solid @stitches/core solid-transition-group
```
## License
This project is licensed under the MIT License.
================================================
FILE: packages/solid/dev/index.html
================================================
Solid App
================================================
FILE: packages/solid/dev/index.tsx
================================================
import { render } from "solid-js/web";
import { HopeProvider } from "../src";
function App() {
return <>;
}
render(
() => (
),
document.getElementById("root") as HTMLDivElement
);
================================================
FILE: packages/solid/dev/vite.config.ts
================================================
import viteConfig from "../vite.config";
export default viteConfig;
================================================
FILE: packages/solid/jest.config.js
================================================
const baseJest = require("../../jest.config");
module.exports = {
...baseJest,
};
================================================
FILE: packages/solid/package.json
================================================
{
"name": "@hope-ui/solid",
"version": "0.6.3",
"private": false,
"description": "The SolidJS component library you've hoped for.",
"keywords": [
"solid",
"solidjs",
"ui",
"library",
"design",
"system",
"components"
],
"homepage": "https://hope-ui.com",
"bugs": {
"url": "https://github.com/fabien-ml/hope-ui/issues"
},
"repository": {
"type": "git",
"url": "git+https://github.com/fabien-ml/hope-ui.git",
"directory": "packages/design-system"
},
"license": "MIT",
"author": "Fabien MARIE-LOUISE (https://github.com/fabien-ml)",
"sideEffects": false,
"exports": {
".": {
"import": "./dist/index.mjs",
"require": "./dist/index.cjs"
}
},
"main": "./dist/index.cjs",
"module": "./dist/index.mjs",
"types": "./dist/index.d.ts",
"files": [
"dist"
],
"scripts": {
"build": "vite build",
"clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist",
"dev": "vite serve dev --host",
"storybook": "start-storybook -p 6006",
"test": "jest",
"test:watch": "jest --watch",
"typecheck": "tsc --noEmit"
},
"dependencies": {
"@floating-ui/dom": "0.4.4",
"csstype": "3.0.11",
"focus-trap": "6.7.3",
"lodash.merge": "4.6.2",
"scroll-lock": "2.1.5"
},
"peerDependencies": {
"@stitches/core": "^1.2.8",
"solid-js": "^1.4.0",
"solid-transition-group": "^0.0.10"
},
"publishConfig": {
"access": "public"
}
}
================================================
FILE: packages/solid/src/color-mode.ts
================================================
import { isServer } from "solid-js/web";
import { __DEV__ } from "./utils/assertion";
import { mockBody } from "./utils/object";
export type ColorMode = "light" | "dark" | "system";
const hasLocalStorageSupport = () => typeof Storage !== "undefined";
const COLOR_MODE_STORAGE_KEY = "hope-ui-color-mode";
/**
* Theme CSS class name added to `document.body` based on color mode.
*/
export const colorModeClassNames = {
light: "hope-ui-light",
dark: "hope-ui-dark",
};
function getColorModeFromLocalStorage() {
if (!hasLocalStorageSupport()) {
return null;
}
try {
return localStorage.getItem(COLOR_MODE_STORAGE_KEY) as ColorMode | null;
} catch (error) {
if (__DEV__) {
console.log(error);
}
return null;
}
}
export function saveColorModeToLocalStorage(value: ColorMode) {
if (!hasLocalStorageSupport()) {
return;
}
try {
localStorage.setItem(COLOR_MODE_STORAGE_KEY, value);
} catch (error) {
if (__DEV__) {
console.log(error);
}
}
}
/**
* Get the default color mode based on system preference or from local storage.
* @param fallbackValue Fallback color mode value, if `system` it will be the system color mode.
* @returns The default color mode to use.
*/
export function getDefaultColorMode(fallbackValue: ColorMode): ColorMode {
const persistedPreference = getColorModeFromLocalStorage();
if (persistedPreference) {
return persistedPreference;
} else if (fallbackValue === "system") {
const isSystemDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
return isSystemDark ? "dark" : "light";
} else {
return fallbackValue;
}
}
/**
* Returns the theme class to apply based on color mode.
*/
export function getColorModeClassName(isDark: boolean) {
return isDark ? colorModeClassNames.dark : colorModeClassNames.light;
}
/**
* Toggle the theme class from `document.body` based on color mode.
*/
export function syncBodyColorModeClassName(isDark: boolean) {
const body = isServer ? mockBody : document.body;
body.classList.add(getColorModeClassName(isDark));
body.classList.remove(isDark ? colorModeClassNames.light : colorModeClassNames.dark);
}
================================================
FILE: packages/solid/src/components/accordion/__tests__/accordion.test.tsx
================================================
import { cleanup, fireEvent, screen } from "solid-testing-library";
import { renderWithHopeProvider } from "../../test-utils";
import { Accordion } from "../accordion";
import { AccordionButton } from "../accordion-button";
import { AccordionItem } from "../accordion-item";
import { AccordionPanel } from "../accordion-panel";
describe("Accordion", () => {
afterEach(() => {
jest.clearAllMocks();
cleanup();
});
it("opens the accordion panel (uncontrolled)", () => {
// act
renderWithHopeProvider(() => (
