@hypothesis/frontend-shared
Version:
Shared components, styles and utilities for Hypothesis projects
778 lines • 29 kB
JavaScript
var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/StylingComponentsPage.tsx";
import { Link } from '../../../';
import Library from '../Library';
import { jsxDEV as _jsxDEV, Fragment as _Fragment } from "preact/jsx-dev-runtime";
export default function StylingComponentsPage() {
return _jsxDEV(Library.Page, {
title: "Styling components",
intro: _jsxDEV(_Fragment, {
children: _jsxDEV("p", {
children: ["The", ' ', _jsxDEV(Library.Link, {
href: "/using-components#presentational-components-styling-api",
children: "styling API"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 12,
columnNumber: 13
}, this), ' ', "supported by some presentational components provides several mechanisms for style customizations."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 10,
columnNumber: 11
}, this)
}, void 0, false),
children: _jsxDEV(Library.Section, {
title: "Using the Styling API",
children: [_jsxDEV(Library.Callout, {
children: ["This documentation pertains to updated presentational components that support the extended", ' ', _jsxDEV(Library.Link, {
href: "/using-components#presentational-components-styling-api",
children: "Styling API"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 25,
columnNumber: 11
}, this), ". For components that ", "don't", " yet support this API, you can achieve most style customization using the ", _jsxDEV("code", {
children: "classes"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 29,
columnNumber: 46
}, this), " prop, but may need to use ", _jsxDEV("code", {
children: "!important"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 30,
columnNumber: 23
}, this), " rules in some cases to avoid conflicts."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 22,
columnNumber: 9
}, this), _jsxDEV(Library.Section, {
title: "Component CSS layers and associated styling props",
children: [_jsxDEV("div", {
className: "grid grid-cols-6 gap-2 my-8 items-center border py-4 px-2 rounded border-stone-400",
children: [_jsxDEV("div", {}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 35,
columnNumber: 13
}, this), _jsxDEV("div", {
className: "col-span-4 border rounded-md p-3 text-center",
children: "Functional and behavioral"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 36,
columnNumber: 13
}, this), _jsxDEV("div", {}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 39,
columnNumber: 13
}, this), _jsxDEV("div", {
className: "text-right",
children: _jsxDEV("code", {
children: "unstyled"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 41,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 40,
columnNumber: 13
}, this), _jsxDEV("div", {
className: "col-span-4 border rounded-md p-3 text-center",
children: "Core and layout"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 43,
columnNumber: 13
}, this), _jsxDEV("div", {}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 46,
columnNumber: 13
}, this), _jsxDEV("div", {
className: "text-right",
children: _jsxDEV("code", {
children: "variant"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 48,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 47,
columnNumber: 13
}, this), _jsxDEV("div", {
className: "col-span-2 border rounded-md p-3 text-center",
children: "Theming"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 50,
columnNumber: 13
}, this), _jsxDEV("div", {
className: "col-span-2 border rounded-md p-3 text-center",
children: "Dimensions"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 53,
columnNumber: 13
}, this), _jsxDEV("div", {
children: _jsxDEV("code", {
children: "size"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 57,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 56,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 34,
columnNumber: 11
}, this), _jsxDEV("ul", {
children: [_jsxDEV("li", {
children: ["Some components have foundational", ' ', _jsxDEV("strong", {
children: "functional and behavioral CSS"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 63,
columnNumber: 15
}, this), " that cannot be disabled, e.g. interactivity, accessibility rules."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 61,
columnNumber: 13
}, this), _jsxDEV("li", {
children: [_jsxDEV("strong", {
children: "Core and layout"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 67,
columnNumber: 15
}, this), " styling can be disabled with the", ' ', _jsxDEV("code", {
children: "unstyled"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 68,
columnNumber: 15
}, this), " prop. This will also disable theming and dimensional (sizing) styles, allowing full visual customization."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 66,
columnNumber: 13
}, this), _jsxDEV("li", {
children: [_jsxDEV("strong", {
children: "Theming"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 72,
columnNumber: 15
}, this), " can be controlled or disabled with the", ' ', _jsxDEV("code", {
children: "variant"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 73,
columnNumber: 15
}, this), " prop."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 71,
columnNumber: 13
}, this), _jsxDEV("li", {
children: [_jsxDEV("strong", {
children: "Dimensions"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 76,
columnNumber: 15
}, this), " and sizing can be controlled or disabled with the ", _jsxDEV("code", {
children: "size"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 77,
columnNumber: 33
}, this), " prop."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 75,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 60,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 33,
columnNumber: 9
}, this), _jsxDEV(Library.Section, {
title: "Theming with variant",
children: [_jsxDEV("p", {
children: ["Many presentational components provide ", _jsxDEV("code", {
children: "variant"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 84,
columnNumber: 52
}, this), " options, which apply different defined ", '"themes"', " to the component."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 83,
columnNumber: 11
}, this), _jsxDEV(Library.Demo, {
title: "Variant examples: Link",
withSource: true,
children: _jsxDEV("div", {
className: "flex flex-col",
children: [_jsxDEV(Link, {
href: "https://www.example.com",
variant: "brand",
children: "Link with variant: brand"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 89,
columnNumber: 15
}, this), _jsxDEV(Link, {
href: "https://www.example.com",
variant: "text",
children: "Link with variant: text"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 92,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 88,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 87,
columnNumber: 11
}, this), _jsxDEV(Library.Section, {
title: "Adjusting theming with the 'custom' variant",
children: [_jsxDEV("p", {
children: ["Set ", _jsxDEV("code", {
children: "variant"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 100,
columnNumber: 19
}, this), " to ", _jsxDEV("code", {
children: "'custom'"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 100,
columnNumber: 43
}, this), " when:"]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 99,
columnNumber: 13
}, this), _jsxDEV("ul", {
children: [_jsxDEV("li", {
children: ["the component you are working takes a", _jsxDEV("code", {
children: "variant"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 104,
columnNumber: 54
}, this), " prop (not all components have variants), ", _jsxDEV("strong", {
children: "and"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 105,
columnNumber: 53
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 103,
columnNumber: 15
}, this), _jsxDEV("li", {
children: ["you want to apply CSS (", _jsxDEV("code", {
children: "classes"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 108,
columnNumber: 40
}, this), ") that are in any of the theme-styling categories below"]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 107,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 102,
columnNumber: 13
}, this), _jsxDEV("p", {
children: "Styles for dimensions (size) and core layout will still be applied."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 113,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "Customizing Link theming",
withSource: true,
children: _jsxDEV(Link, {
href: "https://www.example.com",
variant: "custom",
classes: "text-blue-focus hover:text-grey-7",
children: "Link with custom theming of text color"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 119,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 118,
columnNumber: 13
}, this), _jsxDEV(Library.Section, {
title: "Theme styling categories",
children: [_jsxDEV("p", {
children: [_jsxDEV("code", {
children: "variant"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 130,
columnNumber: 17
}, this), " styles correspond to the following", ' ', _jsxDEV(Link, {
href: "https://tailwindcss.com/docs",
children: "TailwindCSS"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 131,
columnNumber: 17
}, this), ' ', "styling categories:"]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 129,
columnNumber: 15
}, this), _jsxDEV("ul", {
children: [_jsxDEV("li", {
children: "typography (includes colors)"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 135,
columnNumber: 17
}, this), _jsxDEV("li", {
children: "backgrounds"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 136,
columnNumber: 17
}, this), _jsxDEV("li", {
children: "borders (except ring)"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 137,
columnNumber: 17
}, this), _jsxDEV("li", {
children: "effects"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 138,
columnNumber: 17
}, this), _jsxDEV("li", {
children: "filters"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 139,
columnNumber: 17
}, this), _jsxDEV("li", {
children: "transitions and animation"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 140,
columnNumber: 17
}, this), _jsxDEV("li", {
children: "transforms"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 141,
columnNumber: 17
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 134,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 128,
columnNumber: 13
}, this), _jsxDEV(Library.Section, {
title: "Avoiding CSS conflicts",
children: [_jsxDEV("p", {
children: ["Setting ", _jsxDEV("code", {
children: "variant"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 147,
columnNumber: 25
}, this), " to ", _jsxDEV("code", {
children: "'custom'"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 147,
columnNumber: 49
}, this), ' ', "ensures that the component does not output any theme-related styles. This prevents CSS conflicts with your theming", ' ', _jsxDEV("code", {
children: "classes"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 150,
columnNumber: 17
}, this), " and makes it easier to spot when a component has had its theme customized."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 146,
columnNumber: 15
}, this), _jsxDEV(Library.Demo, {
title: "Example: variant styles conflict",
withSource: true,
children: _jsxDEV(Link, {
href: "https://www.example.com",
variant: "text",
classes: "text-brand",
underline: "always",
children: "This link should be red"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 155,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 154,
columnNumber: 15
}, this), _jsxDEV(Library.Demo, {
title: "Example: Using `custom` variant to avoid conflicts",
withSource: true,
children: _jsxDEV(Link, {
href: "https://www.example.com",
variant: "custom",
classes: "text-brand",
underline: "always",
children: "This link should be red"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 169,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 165,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 145,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 98,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 82,
columnNumber: 9
}, this), _jsxDEV(Library.Section, {
title: "Sizing with `size`",
children: [_jsxDEV(Library.Section, {
title: "When to use size='custom'",
children: [_jsxDEV("p", {
children: ["Set ", _jsxDEV("code", {
children: "size"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 185,
columnNumber: 19
}, this), " to ", _jsxDEV("code", {
children: "'custom'"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 185,
columnNumber: 40
}, this), " when:"]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 184,
columnNumber: 13
}, this), _jsxDEV("ul", {
children: [_jsxDEV("li", {
children: ["the component you are working takes a", _jsxDEV("code", {
children: "size"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 189,
columnNumber: 54
}, this), " prop (not all components have sizes), ", _jsxDEV("strong", {
children: "and"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 190,
columnNumber: 45
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 188,
columnNumber: 15
}, this), _jsxDEV("li", {
children: ["you want to apply ", _jsxDEV("code", {
children: "classes"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 193,
columnNumber: 35
}, this), " that are in any of the sizing categories below"]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 192,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 187,
columnNumber: 13
}, this), _jsxDEV("p", {
children: ["Setting ", _jsxDEV("code", {
children: "size"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 198,
columnNumber: 23
}, this), " to ", _jsxDEV("code", {
children: "'custom'"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 198,
columnNumber: 44
}, this), " ensures that the component does not output any size-related styles. This prevents CSS conflicts with your sizing ", _jsxDEV("code", {
children: "classes"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 200,
columnNumber: 55
}, this), " and makes it easier to spot when a component has had its theme customized."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 197,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 183,
columnNumber: 11
}, this), _jsxDEV(Library.Section, {
title: "Size styling categories",
children: [_jsxDEV("p", {
children: [_jsxDEV("code", {
children: "size"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 207,
columnNumber: 15
}, this), " styles correspond to the following", ' ', _jsxDEV(Link, {
href: "https://tailwindcss.com/docs",
children: "TailwindCSS"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 208,
columnNumber: 15
}, this), ' ', "styling categories:"]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 206,
columnNumber: 13
}, this), _jsxDEV("ul", {
children: [_jsxDEV("li", {
children: "spacing: margins, padding, etc."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 212,
columnNumber: 15
}, this), _jsxDEV("li", {
children: "sizing"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 213,
columnNumber: 15
}, this), _jsxDEV("li", {
children: "flexbox and grid: gap (only)"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 214,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 211,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 205,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 182,
columnNumber: 9
}, this), _jsxDEV(Library.Section, {
title: "Unstyled components",
children: [_jsxDEV("p", {
children: [_jsxDEV("code", {
children: "unstyled"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 221,
columnNumber: 13
}, this), " (", _jsxDEV("code", {
children: "boolean"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 221,
columnNumber: 36
}, this), ") disables all styles in a component (except, in some cases, essential behavioral styles required for component functionality)."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 220,
columnNumber: 11
}, this), _jsxDEV(Library.Demo, {
title: "Fully-customized Link using unstyled",
withSource: true,
children: _jsxDEV(Link, {
unstyled: true,
href: "http://www.example.com",
classes: "border rounded-md bg-slate-500 p-2 text-white hover:text-slate-100 hover:bg-slate-600",
children: "Customized link"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 226,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 225,
columnNumber: 11
}, this), _jsxDEV(Library.Callout, {
children: [_jsxDEV("strong", {
children: "Note"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 235,
columnNumber: 13
}, this), ": When ", _jsxDEV("code", {
children: "unstyled"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 235,
columnNumber: 41
}, this), " is set, values passed to ", _jsxDEV("code", {
children: "size"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 236,
columnNumber: 23
}, this), " or ", _jsxDEV("code", {
children: "variant"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 236,
columnNumber: 44
}, this), " will be ignored, as associated styles are disabled."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 234,
columnNumber: 11
}, this), _jsxDEV(Library.Section, {
title: "Unstyled style categories",
children: [_jsxDEV("p", {
children: ["Setting ", _jsxDEV("code", {
children: "unstyled"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 242,
columnNumber: 23
}, this), " disables (pretty much) all styling.", ' ', "Disabled styles include those in ", _jsxDEV("code", {
children: "variant"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 243,
columnNumber: 48
}, this), " and", ' ', _jsxDEV("code", {
children: "size"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 244,
columnNumber: 15
}, this), " categories, and, in addition, styles from the following", ' ', _jsxDEV(Link, {
href: "https://tailwindcss.com/docs",
children: "TailwindCSS"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 246,
columnNumber: 15
}, this), ' ', "styling categories:"]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 241,
columnNumber: 13
}, this), _jsxDEV("ul", {
children: [_jsxDEV("li", {
children: "layout"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 250,
columnNumber: 15
}, this), _jsxDEV("li", {
children: "flexbox and grid"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 251,
columnNumber: 15
}, this), _jsxDEV("li", {
children: "border: ring (only)"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 252,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 249,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 240,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 219,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 21,
columnNumber: 7
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 6,
columnNumber: 5
}, this);
}
//# sourceMappingURL=StylingComponentsPage.js.map