@hypothesis/frontend-shared
Version:
Shared components, styles and utilities for Hypothesis projects
194 lines • 7.18 kB
JavaScript
var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/CustomizingComponents.js";
import Library from '../Library';
import { jsxDEV as _jsxDEV } from "preact/jsx-dev-runtime";
import { Fragment as _Fragment } from "preact/jsx-dev-runtime";
export default function CustomizingComponentsPage() {
return _jsxDEV(Library.Page, {
title: "Customizing components",
intro: _jsxDEV(_Fragment, {
children: [_jsxDEV("p", {
children: "Here are the steps to take when you find yourself wanting to customize the styling of a component."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 9,
columnNumber: 11
}, this), _jsxDEV("p", {
children: ["This guide applies to updated (", '"next"', ") components only."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 13,
columnNumber: 11
}, this)]
}, void 0, true),
children: _jsxDEV(Library.Pattern, {
title: "How to customize a component",
children: [_jsxDEV("p", {
children: "These steps should be taken in order when design or layout customization of a component is necessary."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 18,
columnNumber: 9
}, this), _jsxDEV("ol", {
children: [_jsxDEV("li", {
children: ["Use a ", _jsxDEV("strong", {
children: "different variant"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 24,
columnNumber: 19
}, this), " of the component. Check the", ' ', "component's", " documentation in this library to see what variants are available."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 23,
columnNumber: 11
}, this), _jsxDEV("li", {
children: ["Use ", _jsxDEV("strong", {
children: "component styling props"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 29,
columnNumber: 17
}, this), ", e.g.", ' ', _jsxDEV("code", {
children: "color"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 30,
columnNumber: 13
}, this), ", ", _jsxDEV("code", {
children: "underline"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 30,
columnNumber: 33
}, this), " or ", _jsxDEV("code", {
children: "size"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 30,
columnNumber: 59
}, this), ". These differ per component and define styling aspects that are intended to be adjusted."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 28,
columnNumber: 11
}, this), _jsxDEV("li", {
children: ["Use an ", _jsxDEV("strong", {
children: "unstyled component"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 35,
columnNumber: 20
}, this), ", e.g.", ' ', _jsxDEV("code", {
children: "LinkUnstyled"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 36,
columnNumber: 13
}, this), ". This is appropriate if you want to do considerable customization of a component."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 34,
columnNumber: 11
}, this), _jsxDEV("li", {
children: ["Use the", ' ', _jsxDEV("strong", {
children: [_jsxDEV("code", {
children: "classes"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 42,
columnNumber: 15
}, this), " prop"]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 41,
columnNumber: 13
}, this), ". This allows authors to append arbitrary classes to the", ' ', "component's", " outermost element but should be used with consideration."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 39,
columnNumber: 11
}, this), _jsxDEV("li", {
children: ["Use a ", _jsxDEV("strong", {
children: "different component"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 49,
columnNumber: 19
}, this), ", or create a new one."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 48,
columnNumber: 11
}, this), _jsxDEV("li", {
children: ["Emergency escape hatch: Use", ' ', _jsxDEV("strong", {
children: [_jsxDEV("code", {
children: "!important"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 54,
columnNumber: 15
}, this), " CSS rules"]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 53,
columnNumber: 13
}, this), ' ', "(these class names are prefixed with a ", _jsxDEV("code", {
children: "!"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 56,
columnNumber: 52
}, this), " in", _jsxDEV("code", {
children: "tailwindcss"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 57,
columnNumber: 13
}, this), ") . This should be a last-ditch tactic."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 51,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 22,
columnNumber: 9
}, this), _jsxDEV(Library.Example, {
title: "Stop and reflect",
children: _jsxDEV("p", {
children: ["Any time you use ", _jsxDEV("code", {
children: "classes"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 63,
columnNumber: 30
}, this), " and especially if you use", ' ', _jsxDEV("code", {
children: "!important"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 64,
columnNumber: 13
}, this), " hacks, raise the issue. It may be that the component needs adjustment, or that a new component is called for."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 62,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 61,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 17,
columnNumber: 7
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 5,
columnNumber: 5
}, this);
}
//# sourceMappingURL=CustomizingComponents.js.map