@wordpress/components 25.1.2 → 25.1.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +1 -0
- package/build/guide/icons.js +2 -5
- package/build/guide/icons.js.map +1 -1
- package/build/guide/index.js +4 -0
- package/build/guide/index.js.map +1 -1
- package/build/guide/page-control.js +1 -3
- package/build/guide/page-control.js.map +1 -1
- package/build-module/guide/icons.js +2 -5
- package/build-module/guide/icons.js.map +1 -1
- package/build-module/guide/index.js +4 -0
- package/build-module/guide/index.js.map +1 -1
- package/build-module/guide/page-control.js +1 -3
- package/build-module/guide/page-control.js.map +1 -1
- package/build-style/style-rtl.css +8 -21
- package/build-style/style.css +8 -21
- package/build-types/guide/icons.d.ts +1 -3
- package/build-types/guide/icons.d.ts.map +1 -1
- package/build-types/guide/index.d.ts.map +1 -1
- package/build-types/guide/page-control.d.ts.map +1 -1
- package/package.json +3 -3
- package/src/guide/icons.tsx +2 -7
- package/src/guide/index.tsx +4 -0
- package/src/guide/page-control.tsx +1 -5
- package/src/guide/style.scss +8 -24
- package/src/modal/style.scss +3 -2
- package/tsconfig.tsbuildinfo +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -18,6 +18,7 @@
|
|
|
18
18
|
- `Autocomplete`: Announce how many results are available to screen readers when suggestions list first renders ([#51018](https://github.com/WordPress/gutenberg/pull/51018)).
|
|
19
19
|
- `ConfirmDialog`: Ensure onConfirm isn't called an extra time when submitting one of the buttons using the keyboard ([#51730](https://github.com/WordPress/gutenberg/pull/51730)).
|
|
20
20
|
- `ZStack`: ZStack: fix component bounding box to match children ([#51836](https://github.com/WordPress/gutenberg/pull/51836)).
|
|
21
|
+
- `Modal`: Add small top padding to the content so that avoid cutting off the visible outline when hovering items ([#51829](https://github.com/WordPress/gutenberg/pull/51829)).
|
|
21
22
|
|
|
22
23
|
### Internal
|
|
23
24
|
|
package/build/guide/icons.js
CHANGED
|
@@ -12,9 +12,7 @@ var _primitives = require("@wordpress/primitives");
|
|
|
12
12
|
/**
|
|
13
13
|
* WordPress dependencies
|
|
14
14
|
*/
|
|
15
|
-
const PageControlIcon = ({
|
|
16
|
-
isSelected
|
|
17
|
-
}) => (0, _element.createElement)(_primitives.SVG, {
|
|
15
|
+
const PageControlIcon = () => (0, _element.createElement)(_primitives.SVG, {
|
|
18
16
|
width: "8",
|
|
19
17
|
height: "8",
|
|
20
18
|
fill: "none",
|
|
@@ -22,8 +20,7 @@ const PageControlIcon = ({
|
|
|
22
20
|
}, (0, _element.createElement)(_primitives.Circle, {
|
|
23
21
|
cx: "4",
|
|
24
22
|
cy: "4",
|
|
25
|
-
r: "4"
|
|
26
|
-
fill: isSelected ? '#419ECD' : '#E1E3E6'
|
|
23
|
+
r: "4"
|
|
27
24
|
}));
|
|
28
25
|
|
|
29
26
|
exports.PageControlIcon = PageControlIcon;
|
package/build/guide/icons.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/components/src/guide/icons.tsx"],"names":["PageControlIcon"
|
|
1
|
+
{"version":3,"sources":["@wordpress/components/src/guide/icons.tsx"],"names":["PageControlIcon"],"mappings":";;;;;;;;;AAGA;;AAHA;AACA;AACA;AAGO,MAAMA,eAAe,GAAG,MAC9B,4BAAC,eAAD;AAAK,EAAA,KAAK,EAAC,GAAX;AAAe,EAAA,MAAM,EAAC,GAAtB;AAA0B,EAAA,IAAI,EAAC,MAA/B;AAAsC,EAAA,KAAK,EAAC;AAA5C,GACC,4BAAC,kBAAD;AAAQ,EAAA,EAAE,EAAC,GAAX;AAAe,EAAA,EAAE,EAAC,GAAlB;AAAsB,EAAA,CAAC,EAAC;AAAxB,EADD,CADM","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { SVG, Circle } from '@wordpress/primitives';\n\nexport const PageControlIcon = () => (\n\t<SVG width=\"8\" height=\"8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t<Circle cx=\"4\" cy=\"4\" r=\"4\" />\n\t</SVG>\n);\n"]}
|
package/build/guide/index.js
CHANGED
|
@@ -123,6 +123,7 @@ function Guide({
|
|
|
123
123
|
return (0, _element.createElement)(_modal.default, {
|
|
124
124
|
className: (0, _classnames.default)('components-guide', className),
|
|
125
125
|
contentLabel: contentLabel,
|
|
126
|
+
isDismissible: pages.length > 1,
|
|
126
127
|
onRequestClose: onFinish,
|
|
127
128
|
onKeyDown: event => {
|
|
128
129
|
if (event.code === 'ArrowLeft') {
|
|
@@ -148,12 +149,15 @@ function Guide({
|
|
|
148
149
|
className: "components-guide__footer"
|
|
149
150
|
}, canGoBack && (0, _element.createElement)(_button.default, {
|
|
150
151
|
className: "components-guide__back-button",
|
|
152
|
+
variant: "tertiary",
|
|
151
153
|
onClick: goBack
|
|
152
154
|
}, (0, _i18n.__)('Previous')), canGoForward && (0, _element.createElement)(_button.default, {
|
|
153
155
|
className: "components-guide__forward-button",
|
|
156
|
+
variant: "primary",
|
|
154
157
|
onClick: goForward
|
|
155
158
|
}, (0, _i18n.__)('Next')), !canGoForward && (0, _element.createElement)(_button.default, {
|
|
156
159
|
className: "components-guide__finish-button",
|
|
160
|
+
variant: "primary",
|
|
157
161
|
onClick: onFinish
|
|
158
162
|
}, finishButtonText))));
|
|
159
163
|
}
|
package/build/guide/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/components/src/guide/index.tsx"],"names":["Guide","children","className","contentLabel","finishButtonText","onFinish","pages","guideContainer","currentPage","setCurrentPage","Children","count","since","alternative","current","focus","tabbable","find","map","child","content","canGoBack","canGoForward","length","goBack","goForward","event","code","preventDefault","image"],"mappings":";;;;;;;;;AAQA;;AALA;;AAMA;;AACA;;AACA;;AAKA;;AACA;;AACA;;AAlBA;AACA;AACA;;AAGA;AACA;AACA;;AAMA;AACA;AACA;;AAMA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASA,KAAT,CAAgB;AACfC,EAAAA,QADe;AAEfC,EAAAA,SAFe;AAGfC,EAAAA,YAHe;AAIfC,EAAAA,gBAAgB,GAAG,cAAI,QAAJ,CAJJ;AAKfC,EAAAA,QALe;AAMfC,EAAAA,KAAK,GAAG;AANO,CAAhB,EAOgB;AACf,QAAMC,cAAc,GAAG,qBAA0B,IAA1B,CAAvB;AACA,QAAM,CAAEC,WAAF,EAAeC,cAAf,IAAkC,uBAAU,CAAV,CAAxC;AAEA,0BAAW,MAAM;AAChB,QAAKC,kBAASC,KAAT,CAAgBV,QAAhB,CAAL,EAAkC;AACjC,+BAAY,6BAAZ,EAA2C;AAC1CW,QAAAA,KAAK,EAAE,KADmC;AAE1CC,QAAAA,WAAW,EAAE;AAF6B,OAA3C;AAIA;AACD,GAPD,EAOG,CAAEZ,QAAF,CAPH;AASA,0BAAW,MAAM;AAChB;AACA;AACA,QAAKM,cAAc,CAACO,OAApB,EAA8B;AAE5BC,iBAAMC,QAAN,CAAeC,IAAf,CAAqBV,cAAc,CAACO,OAApC,CADD,CAEI,CAFJ,GAESC,KAFT;AAGA;AACD,GARD,EAQG,CAAEP,WAAF,CARH;;AAUA,MAAKE,kBAASC,KAAT,CAAgBV,QAAhB,CAAL,EAAkC;AAAA;;AACjCK,IAAAA,KAAK,oBACJI,kBAASQ,GAAT,CAAcjB,QAAd,EAA0BkB,KAAF,KAAe;AACtCC,MAAAA,OAAO,EAAED;AAD6B,KAAf,CAAxB,CADI,yDAGK,EAHV;AAIA;;AAED,QAAME,SAAS,GAAGb,WAAW,GAAG,CAAhC;AACA,QAAMc,YAAY,GAAGd,WAAW,GAAGF,KAAK,CAACiB,MAAN,GAAe,CAAlD;;AAEA,QAAMC,MAAM,GAAG,MAAM;AACpB,QAAKH,SAAL,EAAiB;AAChBZ,MAAAA,cAAc,CAAED,WAAW,GAAG,CAAhB,CAAd;AACA;AACD,GAJD;;AAMA,QAAMiB,SAAS,GAAG,MAAM;AACvB,QAAKH,YAAL,EAAoB;AACnBb,MAAAA,cAAc,CAAED,WAAW,GAAG,CAAhB,CAAd;AACA;AACD,GAJD;;AAMA,MAAKF,KAAK,CAACiB,MAAN,KAAiB,CAAtB,EAA0B;AACzB,WAAO,IAAP;AACA;;AAED,SACC,4BAAC,cAAD;AACC,IAAA,SAAS,EAAG,yBAAY,kBAAZ,EAAgCrB,SAAhC,CADb;AAEC,IAAA,YAAY,EAAGC,YAFhB;AAGC,IAAA,
|
|
1
|
+
{"version":3,"sources":["@wordpress/components/src/guide/index.tsx"],"names":["Guide","children","className","contentLabel","finishButtonText","onFinish","pages","guideContainer","currentPage","setCurrentPage","Children","count","since","alternative","current","focus","tabbable","find","map","child","content","canGoBack","canGoForward","length","goBack","goForward","event","code","preventDefault","image"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useEffect, Children, useRef } from '@wordpress/element';\nimport deprecated from '@wordpress/deprecated';\nimport { __ } from '@wordpress/i18n';\nimport { focus } from '@wordpress/dom';\n\n/**\n * Internal dependencies\n */\nimport Modal from '../modal';\nimport Button from '../button';\nimport PageControl from './page-control';\nimport type { GuideProps } from './types';\n\n/**\n * `Guide` is a React component that renders a _user guide_ in a modal. The guide consists of several pages which the user can step through one by one. The guide is finished when the modal is closed or when the user clicks _Finish_ on the last page of the guide.\n *\n * ```jsx\n * function MyTutorial() {\n * \tconst [ isOpen, setIsOpen ] = useState( true );\n *\n * \tif ( ! isOpen ) {\n * \t\treturn null;\n * \t}\n *\n * \treturn (\n * \t\t<Guide\n * \t\t\tonFinish={ () => setIsOpen( false ) }\n * \t\t\tpages={ [\n * \t\t\t\t{\n * \t\t\t\t\tcontent: <p>Welcome to the ACME Store!</p>,\n * \t\t\t\t},\n * \t\t\t\t{\n * \t\t\t\t\timage: <img src=\"https://acmestore.com/add-to-cart.png\" />,\n * \t\t\t\t\tcontent: (\n * \t\t\t\t\t\t<p>\n * \t\t\t\t\t\t\tClick <i>Add to Cart</i> to buy a product.\n * \t\t\t\t\t\t</p>\n * \t\t\t\t\t),\n * \t\t\t\t},\n * \t\t\t] }\n * \t\t/>\n * \t);\n * }\n * ```\n */\nfunction Guide( {\n\tchildren,\n\tclassName,\n\tcontentLabel,\n\tfinishButtonText = __( 'Finish' ),\n\tonFinish,\n\tpages = [],\n}: GuideProps ) {\n\tconst guideContainer = useRef< HTMLDivElement >( null );\n\tconst [ currentPage, setCurrentPage ] = useState( 0 );\n\n\tuseEffect( () => {\n\t\tif ( Children.count( children ) ) {\n\t\t\tdeprecated( 'Passing children to <Guide>', {\n\t\t\t\tsince: '5.5',\n\t\t\t\talternative: 'the `pages` prop',\n\t\t\t} );\n\t\t}\n\t}, [ children ] );\n\n\tuseEffect( () => {\n\t\t// Each time we change the current page, start from the first element of the page.\n\t\t// This also solves any focus loss that can happen.\n\t\tif ( guideContainer.current ) {\n\t\t\t(\n\t\t\t\tfocus.tabbable.find( guideContainer.current ) as HTMLElement[]\n\t\t\t )[ 0 ]?.focus();\n\t\t}\n\t}, [ currentPage ] );\n\n\tif ( Children.count( children ) ) {\n\t\tpages =\n\t\t\tChildren.map( children, ( child ) => ( {\n\t\t\t\tcontent: child,\n\t\t\t} ) ) ?? [];\n\t}\n\n\tconst canGoBack = currentPage > 0;\n\tconst canGoForward = currentPage < pages.length - 1;\n\n\tconst goBack = () => {\n\t\tif ( canGoBack ) {\n\t\t\tsetCurrentPage( currentPage - 1 );\n\t\t}\n\t};\n\n\tconst goForward = () => {\n\t\tif ( canGoForward ) {\n\t\t\tsetCurrentPage( currentPage + 1 );\n\t\t}\n\t};\n\n\tif ( pages.length === 0 ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<Modal\n\t\t\tclassName={ classnames( 'components-guide', className ) }\n\t\t\tcontentLabel={ contentLabel }\n\t\t\tisDismissible={ pages.length > 1 }\n\t\t\tonRequestClose={ onFinish }\n\t\t\tonKeyDown={ ( event ) => {\n\t\t\t\tif ( event.code === 'ArrowLeft' ) {\n\t\t\t\t\tgoBack();\n\t\t\t\t\t// Do not scroll the modal's contents.\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t} else if ( event.code === 'ArrowRight' ) {\n\t\t\t\t\tgoForward();\n\t\t\t\t\t// Do not scroll the modal's contents.\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t}\n\t\t\t} }\n\t\t\tref={ guideContainer }\n\t\t>\n\t\t\t<div className=\"components-guide__container\">\n\t\t\t\t<div className=\"components-guide__page\">\n\t\t\t\t\t{ pages[ currentPage ].image }\n\n\t\t\t\t\t{ pages.length > 1 && (\n\t\t\t\t\t\t<PageControl\n\t\t\t\t\t\t\tcurrentPage={ currentPage }\n\t\t\t\t\t\t\tnumberOfPages={ pages.length }\n\t\t\t\t\t\t\tsetCurrentPage={ setCurrentPage }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\n\t\t\t\t\t{ pages[ currentPage ].content }\n\t\t\t\t</div>\n\n\t\t\t\t<div className=\"components-guide__footer\">\n\t\t\t\t\t{ canGoBack && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"components-guide__back-button\"\n\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\tonClick={ goBack }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Previous' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) }\n\t\t\t\t\t{ canGoForward && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"components-guide__forward-button\"\n\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\tonClick={ goForward }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Next' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! canGoForward && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"components-guide__finish-button\"\n\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\tonClick={ onFinish }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ finishButtonText }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) }\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</Modal>\n\t);\n}\n\nexport default Guide;\n"]}
|
|
@@ -38,9 +38,7 @@ function PageControl({
|
|
|
38
38
|
"aria-current": page === currentPage ? 'step' : undefined
|
|
39
39
|
}, (0, _element.createElement)(_button.default, {
|
|
40
40
|
key: page,
|
|
41
|
-
icon: (0, _element.createElement)(_icons.PageControlIcon,
|
|
42
|
-
isSelected: page === currentPage
|
|
43
|
-
}),
|
|
41
|
+
icon: (0, _element.createElement)(_icons.PageControlIcon, null),
|
|
44
42
|
"aria-label": (0, _i18n.sprintf)(
|
|
45
43
|
/* translators: 1: current page number 2: total number of pages */
|
|
46
44
|
(0, _i18n.__)('Page %1$d of %2$d'), page + 1, numberOfPages),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/components/src/guide/page-control.tsx"],"names":["PageControl","currentPage","numberOfPages","setCurrentPage","Array","from","length","map","_","page","undefined"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AACA;;AATA;AACA;AACA;;AAGA;AACA;AACA;AAKe,SAASA,WAAT,CAAsB;AACpCC,EAAAA,WADoC;AAEpCC,EAAAA,aAFoC;AAGpCC,EAAAA;AAHoC,CAAtB,EAIO;AACrB,SACC;AACC,IAAA,SAAS,EAAC,gCADX;AAEC,kBAAa,cAAI,gBAAJ;AAFd,KAIGC,KAAK,CAACC,IAAN,CAAY;AAAEC,IAAAA,MAAM,EAAEJ;AAAV,GAAZ,EAAwCK,GAAxC,CAA6C,CAAEC,CAAF,EAAKC,IAAL,KAC9C;AACC,IAAA,GAAG,EAAGA,IADP,CAEC;AAFD;AAGC,oBAAeA,IAAI,KAAKR,WAAT,GAAuB,MAAvB,GAAgCS;AAHhD,KAKC,4BAAC,eAAD;AACC,IAAA,GAAG,EAAGD,IADP;AAEC,IAAA,IAAI,
|
|
1
|
+
{"version":3,"sources":["@wordpress/components/src/guide/page-control.tsx"],"names":["PageControl","currentPage","numberOfPages","setCurrentPage","Array","from","length","map","_","page","undefined"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AACA;;AATA;AACA;AACA;;AAGA;AACA;AACA;AAKe,SAASA,WAAT,CAAsB;AACpCC,EAAAA,WADoC;AAEpCC,EAAAA,aAFoC;AAGpCC,EAAAA;AAHoC,CAAtB,EAIO;AACrB,SACC;AACC,IAAA,SAAS,EAAC,gCADX;AAEC,kBAAa,cAAI,gBAAJ;AAFd,KAIGC,KAAK,CAACC,IAAN,CAAY;AAAEC,IAAAA,MAAM,EAAEJ;AAAV,GAAZ,EAAwCK,GAAxC,CAA6C,CAAEC,CAAF,EAAKC,IAAL,KAC9C;AACC,IAAA,GAAG,EAAGA,IADP,CAEC;AAFD;AAGC,oBAAeA,IAAI,KAAKR,WAAT,GAAuB,MAAvB,GAAgCS;AAHhD,KAKC,4BAAC,eAAD;AACC,IAAA,GAAG,EAAGD,IADP;AAEC,IAAA,IAAI,EAAG,4BAAC,sBAAD,OAFR;AAGC,kBAAa;AACZ;AACA,kBAAI,mBAAJ,CAFY,EAGZA,IAAI,GAAG,CAHK,EAIZP,aAJY,CAHd;AASC,IAAA,OAAO,EAAG,MAAMC,cAAc,CAAEM,IAAF;AAT/B,IALD,CADC,CAJH,CADD;AA0BA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport { PageControlIcon } from './icons';\nimport type { PageControlProps } from './types';\n\nexport default function PageControl( {\n\tcurrentPage,\n\tnumberOfPages,\n\tsetCurrentPage,\n}: PageControlProps ) {\n\treturn (\n\t\t<ul\n\t\t\tclassName=\"components-guide__page-control\"\n\t\t\taria-label={ __( 'Guide controls' ) }\n\t\t>\n\t\t\t{ Array.from( { length: numberOfPages } ).map( ( _, page ) => (\n\t\t\t\t<li\n\t\t\t\t\tkey={ page }\n\t\t\t\t\t// Set aria-current=\"step\" on the active page, see https://www.w3.org/TR/wai-aria-1.1/#aria-current\n\t\t\t\t\taria-current={ page === currentPage ? 'step' : undefined }\n\t\t\t\t>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tkey={ page }\n\t\t\t\t\t\ticon={ <PageControlIcon /> }\n\t\t\t\t\t\taria-label={ sprintf(\n\t\t\t\t\t\t\t/* translators: 1: current page number 2: total number of pages */\n\t\t\t\t\t\t\t__( 'Page %1$d of %2$d' ),\n\t\t\t\t\t\t\tpage + 1,\n\t\t\t\t\t\t\tnumberOfPages\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tonClick={ () => setCurrentPage( page ) }\n\t\t\t\t\t/>\n\t\t\t\t</li>\n\t\t\t) ) }\n\t\t</ul>\n\t);\n}\n"]}
|
|
@@ -4,9 +4,7 @@ import { createElement } from "@wordpress/element";
|
|
|
4
4
|
* WordPress dependencies
|
|
5
5
|
*/
|
|
6
6
|
import { SVG, Circle } from '@wordpress/primitives';
|
|
7
|
-
export const PageControlIcon = ({
|
|
8
|
-
isSelected
|
|
9
|
-
}) => createElement(SVG, {
|
|
7
|
+
export const PageControlIcon = () => createElement(SVG, {
|
|
10
8
|
width: "8",
|
|
11
9
|
height: "8",
|
|
12
10
|
fill: "none",
|
|
@@ -14,7 +12,6 @@ export const PageControlIcon = ({
|
|
|
14
12
|
}, createElement(Circle, {
|
|
15
13
|
cx: "4",
|
|
16
14
|
cy: "4",
|
|
17
|
-
r: "4"
|
|
18
|
-
fill: isSelected ? '#419ECD' : '#E1E3E6'
|
|
15
|
+
r: "4"
|
|
19
16
|
}));
|
|
20
17
|
//# sourceMappingURL=icons.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/components/src/guide/icons.tsx"],"names":["SVG","Circle","PageControlIcon"
|
|
1
|
+
{"version":3,"sources":["@wordpress/components/src/guide/icons.tsx"],"names":["SVG","Circle","PageControlIcon"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,GAAT,EAAcC,MAAd,QAA4B,uBAA5B;AAEA,OAAO,MAAMC,eAAe,GAAG,MAC9B,cAAC,GAAD;AAAK,EAAA,KAAK,EAAC,GAAX;AAAe,EAAA,MAAM,EAAC,GAAtB;AAA0B,EAAA,IAAI,EAAC,MAA/B;AAAsC,EAAA,KAAK,EAAC;AAA5C,GACC,cAAC,MAAD;AAAQ,EAAA,EAAE,EAAC,GAAX;AAAe,EAAA,EAAE,EAAC,GAAlB;AAAsB,EAAA,CAAC,EAAC;AAAxB,EADD,CADM","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { SVG, Circle } from '@wordpress/primitives';\n\nexport const PageControlIcon = () => (\n\t<SVG width=\"8\" height=\"8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t<Circle cx=\"4\" cy=\"4\" r=\"4\" />\n\t</SVG>\n);\n"]}
|
|
@@ -108,6 +108,7 @@ function Guide({
|
|
|
108
108
|
return createElement(Modal, {
|
|
109
109
|
className: classnames('components-guide', className),
|
|
110
110
|
contentLabel: contentLabel,
|
|
111
|
+
isDismissible: pages.length > 1,
|
|
111
112
|
onRequestClose: onFinish,
|
|
112
113
|
onKeyDown: event => {
|
|
113
114
|
if (event.code === 'ArrowLeft') {
|
|
@@ -133,12 +134,15 @@ function Guide({
|
|
|
133
134
|
className: "components-guide__footer"
|
|
134
135
|
}, canGoBack && createElement(Button, {
|
|
135
136
|
className: "components-guide__back-button",
|
|
137
|
+
variant: "tertiary",
|
|
136
138
|
onClick: goBack
|
|
137
139
|
}, __('Previous')), canGoForward && createElement(Button, {
|
|
138
140
|
className: "components-guide__forward-button",
|
|
141
|
+
variant: "primary",
|
|
139
142
|
onClick: goForward
|
|
140
143
|
}, __('Next')), !canGoForward && createElement(Button, {
|
|
141
144
|
className: "components-guide__finish-button",
|
|
145
|
+
variant: "primary",
|
|
142
146
|
onClick: onFinish
|
|
143
147
|
}, finishButtonText))));
|
|
144
148
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/components/src/guide/index.tsx"],"names":["classnames","useState","useEffect","Children","useRef","deprecated","__","focus","Modal","Button","PageControl","Guide","children","className","contentLabel","finishButtonText","onFinish","pages","guideContainer","currentPage","setCurrentPage","count","since","alternative","current","tabbable","find","map","child","content","canGoBack","canGoForward","length","goBack","goForward","event","code","preventDefault","image"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AAEA;AACA;AACA;;AACA,SAASC,QAAT,EAAmBC,SAAnB,EAA8BC,QAA9B,EAAwCC,MAAxC,QAAsD,oBAAtD;AACA,OAAOC,UAAP,MAAuB,uBAAvB;AACA,SAASC,EAAT,QAAmB,iBAAnB;AACA,SAASC,KAAT,QAAsB,gBAAtB;AAEA;AACA;AACA;;AACA,OAAOC,KAAP,MAAkB,UAAlB;AACA,OAAOC,MAAP,MAAmB,WAAnB;AACA,OAAOC,WAAP,MAAwB,gBAAxB;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,KAAT,CAAgB;AACfC,EAAAA,QADe;AAEfC,EAAAA,SAFe;AAGfC,EAAAA,YAHe;AAIfC,EAAAA,gBAAgB,GAAGT,EAAE,CAAE,QAAF,CAJN;AAKfU,EAAAA,QALe;AAMfC,EAAAA,KAAK,GAAG;AANO,CAAhB,EAOgB;AACf,QAAMC,cAAc,GAAGd,MAAM,CAAoB,IAApB,CAA7B;AACA,QAAM,CAAEe,WAAF,EAAeC,cAAf,IAAkCnB,QAAQ,CAAE,CAAF,CAAhD;AAEAC,EAAAA,SAAS,CAAE,MAAM;AAChB,QAAKC,QAAQ,CAACkB,KAAT,CAAgBT,QAAhB,CAAL,EAAkC;AACjCP,MAAAA,UAAU,CAAE,6BAAF,EAAiC;AAC1CiB,QAAAA,KAAK,EAAE,KADmC;AAE1CC,QAAAA,WAAW,EAAE;AAF6B,OAAjC,CAAV;AAIA;AACD,GAPQ,EAON,CAAEX,QAAF,CAPM,CAAT;AASAV,EAAAA,SAAS,CAAE,MAAM;AAChB;AACA;AACA,QAAKgB,cAAc,CAACM,OAApB,EAA8B;AAE5BjB,MAAAA,KAAK,CAACkB,QAAN,CAAeC,IAAf,CAAqBR,cAAc,CAACM,OAApC,CADD,CAEI,CAFJ,GAESjB,KAFT;AAGA;AACD,GARQ,EAQN,CAAEY,WAAF,CARM,CAAT;;AAUA,MAAKhB,QAAQ,CAACkB,KAAT,CAAgBT,QAAhB,CAAL,EAAkC;AAAA;;AACjCK,IAAAA,KAAK,oBACJd,QAAQ,CAACwB,GAAT,CAAcf,QAAd,EAA0BgB,KAAF,KAAe;AACtCC,MAAAA,OAAO,EAAED;AAD6B,KAAf,CAAxB,CADI,yDAGK,EAHV;AAIA;;AAED,QAAME,SAAS,GAAGX,WAAW,GAAG,CAAhC;AACA,QAAMY,YAAY,GAAGZ,WAAW,GAAGF,KAAK,CAACe,MAAN,GAAe,CAAlD;;AAEA,QAAMC,MAAM,GAAG,MAAM;AACpB,QAAKH,SAAL,EAAiB;AAChBV,MAAAA,cAAc,CAAED,WAAW,GAAG,CAAhB,CAAd;AACA;AACD,GAJD;;AAMA,QAAMe,SAAS,GAAG,MAAM;AACvB,QAAKH,YAAL,EAAoB;AACnBX,MAAAA,cAAc,CAAED,WAAW,GAAG,CAAhB,CAAd;AACA;AACD,GAJD;;AAMA,MAAKF,KAAK,CAACe,MAAN,KAAiB,CAAtB,EAA0B;AACzB,WAAO,IAAP;AACA;;AAED,SACC,cAAC,KAAD;AACC,IAAA,SAAS,EAAGhC,UAAU,CAAE,kBAAF,EAAsBa,SAAtB,CADvB;AAEC,IAAA,YAAY,EAAGC,YAFhB;AAGC,IAAA,
|
|
1
|
+
{"version":3,"sources":["@wordpress/components/src/guide/index.tsx"],"names":["classnames","useState","useEffect","Children","useRef","deprecated","__","focus","Modal","Button","PageControl","Guide","children","className","contentLabel","finishButtonText","onFinish","pages","guideContainer","currentPage","setCurrentPage","count","since","alternative","current","tabbable","find","map","child","content","canGoBack","canGoForward","length","goBack","goForward","event","code","preventDefault","image"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useEffect, Children, useRef } from '@wordpress/element';\nimport deprecated from '@wordpress/deprecated';\nimport { __ } from '@wordpress/i18n';\nimport { focus } from '@wordpress/dom';\n\n/**\n * Internal dependencies\n */\nimport Modal from '../modal';\nimport Button from '../button';\nimport PageControl from './page-control';\nimport type { GuideProps } from './types';\n\n/**\n * `Guide` is a React component that renders a _user guide_ in a modal. The guide consists of several pages which the user can step through one by one. The guide is finished when the modal is closed or when the user clicks _Finish_ on the last page of the guide.\n *\n * ```jsx\n * function MyTutorial() {\n * \tconst [ isOpen, setIsOpen ] = useState( true );\n *\n * \tif ( ! isOpen ) {\n * \t\treturn null;\n * \t}\n *\n * \treturn (\n * \t\t<Guide\n * \t\t\tonFinish={ () => setIsOpen( false ) }\n * \t\t\tpages={ [\n * \t\t\t\t{\n * \t\t\t\t\tcontent: <p>Welcome to the ACME Store!</p>,\n * \t\t\t\t},\n * \t\t\t\t{\n * \t\t\t\t\timage: <img src=\"https://acmestore.com/add-to-cart.png\" />,\n * \t\t\t\t\tcontent: (\n * \t\t\t\t\t\t<p>\n * \t\t\t\t\t\t\tClick <i>Add to Cart</i> to buy a product.\n * \t\t\t\t\t\t</p>\n * \t\t\t\t\t),\n * \t\t\t\t},\n * \t\t\t] }\n * \t\t/>\n * \t);\n * }\n * ```\n */\nfunction Guide( {\n\tchildren,\n\tclassName,\n\tcontentLabel,\n\tfinishButtonText = __( 'Finish' ),\n\tonFinish,\n\tpages = [],\n}: GuideProps ) {\n\tconst guideContainer = useRef< HTMLDivElement >( null );\n\tconst [ currentPage, setCurrentPage ] = useState( 0 );\n\n\tuseEffect( () => {\n\t\tif ( Children.count( children ) ) {\n\t\t\tdeprecated( 'Passing children to <Guide>', {\n\t\t\t\tsince: '5.5',\n\t\t\t\talternative: 'the `pages` prop',\n\t\t\t} );\n\t\t}\n\t}, [ children ] );\n\n\tuseEffect( () => {\n\t\t// Each time we change the current page, start from the first element of the page.\n\t\t// This also solves any focus loss that can happen.\n\t\tif ( guideContainer.current ) {\n\t\t\t(\n\t\t\t\tfocus.tabbable.find( guideContainer.current ) as HTMLElement[]\n\t\t\t )[ 0 ]?.focus();\n\t\t}\n\t}, [ currentPage ] );\n\n\tif ( Children.count( children ) ) {\n\t\tpages =\n\t\t\tChildren.map( children, ( child ) => ( {\n\t\t\t\tcontent: child,\n\t\t\t} ) ) ?? [];\n\t}\n\n\tconst canGoBack = currentPage > 0;\n\tconst canGoForward = currentPage < pages.length - 1;\n\n\tconst goBack = () => {\n\t\tif ( canGoBack ) {\n\t\t\tsetCurrentPage( currentPage - 1 );\n\t\t}\n\t};\n\n\tconst goForward = () => {\n\t\tif ( canGoForward ) {\n\t\t\tsetCurrentPage( currentPage + 1 );\n\t\t}\n\t};\n\n\tif ( pages.length === 0 ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<Modal\n\t\t\tclassName={ classnames( 'components-guide', className ) }\n\t\t\tcontentLabel={ contentLabel }\n\t\t\tisDismissible={ pages.length > 1 }\n\t\t\tonRequestClose={ onFinish }\n\t\t\tonKeyDown={ ( event ) => {\n\t\t\t\tif ( event.code === 'ArrowLeft' ) {\n\t\t\t\t\tgoBack();\n\t\t\t\t\t// Do not scroll the modal's contents.\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t} else if ( event.code === 'ArrowRight' ) {\n\t\t\t\t\tgoForward();\n\t\t\t\t\t// Do not scroll the modal's contents.\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t}\n\t\t\t} }\n\t\t\tref={ guideContainer }\n\t\t>\n\t\t\t<div className=\"components-guide__container\">\n\t\t\t\t<div className=\"components-guide__page\">\n\t\t\t\t\t{ pages[ currentPage ].image }\n\n\t\t\t\t\t{ pages.length > 1 && (\n\t\t\t\t\t\t<PageControl\n\t\t\t\t\t\t\tcurrentPage={ currentPage }\n\t\t\t\t\t\t\tnumberOfPages={ pages.length }\n\t\t\t\t\t\t\tsetCurrentPage={ setCurrentPage }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\n\t\t\t\t\t{ pages[ currentPage ].content }\n\t\t\t\t</div>\n\n\t\t\t\t<div className=\"components-guide__footer\">\n\t\t\t\t\t{ canGoBack && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"components-guide__back-button\"\n\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\tonClick={ goBack }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Previous' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) }\n\t\t\t\t\t{ canGoForward && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"components-guide__forward-button\"\n\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\tonClick={ goForward }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Next' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! canGoForward && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"components-guide__finish-button\"\n\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\tonClick={ onFinish }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ finishButtonText }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) }\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</Modal>\n\t);\n}\n\nexport default Guide;\n"]}
|
|
@@ -26,9 +26,7 @@ export default function PageControl({
|
|
|
26
26
|
"aria-current": page === currentPage ? 'step' : undefined
|
|
27
27
|
}, createElement(Button, {
|
|
28
28
|
key: page,
|
|
29
|
-
icon: createElement(PageControlIcon,
|
|
30
|
-
isSelected: page === currentPage
|
|
31
|
-
}),
|
|
29
|
+
icon: createElement(PageControlIcon, null),
|
|
32
30
|
"aria-label": sprintf(
|
|
33
31
|
/* translators: 1: current page number 2: total number of pages */
|
|
34
32
|
__('Page %1$d of %2$d'), page + 1, numberOfPages),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/components/src/guide/page-control.tsx"],"names":["__","sprintf","Button","PageControlIcon","PageControl","currentPage","numberOfPages","setCurrentPage","Array","from","length","map","_","page","undefined"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,EAAT,EAAaC,OAAb,QAA4B,iBAA5B;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,WAAnB;AACA,SAASC,eAAT,QAAgC,SAAhC;AAGA,eAAe,SAASC,WAAT,CAAsB;AACpCC,EAAAA,WADoC;AAEpCC,EAAAA,aAFoC;AAGpCC,EAAAA;AAHoC,CAAtB,EAIO;AACrB,SACC;AACC,IAAA,SAAS,EAAC,gCADX;AAEC,kBAAaP,EAAE,CAAE,gBAAF;AAFhB,KAIGQ,KAAK,CAACC,IAAN,CAAY;AAAEC,IAAAA,MAAM,EAAEJ;AAAV,GAAZ,EAAwCK,GAAxC,CAA6C,CAAEC,CAAF,EAAKC,IAAL,KAC9C;AACC,IAAA,GAAG,EAAGA,IADP,CAEC;AAFD;AAGC,oBAAeA,IAAI,KAAKR,WAAT,GAAuB,MAAvB,GAAgCS;AAHhD,KAKC,cAAC,MAAD;AACC,IAAA,GAAG,EAAGD,IADP;AAEC,IAAA,IAAI,
|
|
1
|
+
{"version":3,"sources":["@wordpress/components/src/guide/page-control.tsx"],"names":["__","sprintf","Button","PageControlIcon","PageControl","currentPage","numberOfPages","setCurrentPage","Array","from","length","map","_","page","undefined"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,EAAT,EAAaC,OAAb,QAA4B,iBAA5B;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,WAAnB;AACA,SAASC,eAAT,QAAgC,SAAhC;AAGA,eAAe,SAASC,WAAT,CAAsB;AACpCC,EAAAA,WADoC;AAEpCC,EAAAA,aAFoC;AAGpCC,EAAAA;AAHoC,CAAtB,EAIO;AACrB,SACC;AACC,IAAA,SAAS,EAAC,gCADX;AAEC,kBAAaP,EAAE,CAAE,gBAAF;AAFhB,KAIGQ,KAAK,CAACC,IAAN,CAAY;AAAEC,IAAAA,MAAM,EAAEJ;AAAV,GAAZ,EAAwCK,GAAxC,CAA6C,CAAEC,CAAF,EAAKC,IAAL,KAC9C;AACC,IAAA,GAAG,EAAGA,IADP,CAEC;AAFD;AAGC,oBAAeA,IAAI,KAAKR,WAAT,GAAuB,MAAvB,GAAgCS;AAHhD,KAKC,cAAC,MAAD;AACC,IAAA,GAAG,EAAGD,IADP;AAEC,IAAA,IAAI,EAAG,cAAC,eAAD,OAFR;AAGC,kBAAaZ,OAAO;AACnB;AACAD,IAAAA,EAAE,CAAE,mBAAF,CAFiB,EAGnBa,IAAI,GAAG,CAHY,EAInBP,aAJmB,CAHrB;AASC,IAAA,OAAO,EAAG,MAAMC,cAAc,CAAEM,IAAF;AAT/B,IALD,CADC,CAJH,CADD;AA0BA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport { PageControlIcon } from './icons';\nimport type { PageControlProps } from './types';\n\nexport default function PageControl( {\n\tcurrentPage,\n\tnumberOfPages,\n\tsetCurrentPage,\n}: PageControlProps ) {\n\treturn (\n\t\t<ul\n\t\t\tclassName=\"components-guide__page-control\"\n\t\t\taria-label={ __( 'Guide controls' ) }\n\t\t>\n\t\t\t{ Array.from( { length: numberOfPages } ).map( ( _, page ) => (\n\t\t\t\t<li\n\t\t\t\t\tkey={ page }\n\t\t\t\t\t// Set aria-current=\"step\" on the active page, see https://www.w3.org/TR/wai-aria-1.1/#aria-current\n\t\t\t\t\taria-current={ page === currentPage ? 'step' : undefined }\n\t\t\t\t>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tkey={ page }\n\t\t\t\t\t\ticon={ <PageControlIcon /> }\n\t\t\t\t\t\taria-label={ sprintf(\n\t\t\t\t\t\t\t/* translators: 1: current page number 2: total number of pages */\n\t\t\t\t\t\t\t__( 'Page %1$d of %2$d' ),\n\t\t\t\t\t\t\tpage + 1,\n\t\t\t\t\t\t\tnumberOfPages\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tonClick={ () => setCurrentPage( page ) }\n\t\t\t\t\t/>\n\t\t\t\t</li>\n\t\t\t) ) }\n\t\t</ul>\n\t);\n}\n"]}
|
|
@@ -1631,7 +1631,7 @@ body.is-dragging-components-draggable {
|
|
|
1631
1631
|
.components-guide__footer {
|
|
1632
1632
|
align-content: center;
|
|
1633
1633
|
display: flex;
|
|
1634
|
-
height:
|
|
1634
|
+
height: 36px;
|
|
1635
1635
|
justify-content: center;
|
|
1636
1636
|
margin: 0 0 24px 0;
|
|
1637
1637
|
padding: 0 32px;
|
|
@@ -1650,12 +1650,15 @@ body.is-dragging-components-draggable {
|
|
|
1650
1650
|
height: 30px;
|
|
1651
1651
|
min-width: 20px;
|
|
1652
1652
|
margin: -6px 0;
|
|
1653
|
+
color: #e0e0e0;
|
|
1654
|
+
}
|
|
1655
|
+
.components-guide__page-control li[aria-current=step] .components-button {
|
|
1656
|
+
color: var(--wp-components-color-accent, var(--wp-admin-theme-color));
|
|
1653
1657
|
}
|
|
1654
1658
|
|
|
1655
1659
|
.components-modal__frame.components-guide {
|
|
1656
1660
|
border: none;
|
|
1657
1661
|
min-width: 312px;
|
|
1658
|
-
height: 80vh;
|
|
1659
1662
|
max-height: 575px;
|
|
1660
1663
|
}
|
|
1661
1664
|
@media (max-width: 600px) {
|
|
@@ -1666,28 +1669,12 @@ body.is-dragging-components-draggable {
|
|
|
1666
1669
|
}
|
|
1667
1670
|
|
|
1668
1671
|
.components-button.components-guide__back-button, .components-button.components-guide__forward-button, .components-button.components-guide__finish-button {
|
|
1669
|
-
height: 30px;
|
|
1670
1672
|
position: absolute;
|
|
1671
1673
|
}
|
|
1672
|
-
.components-button.components-guide__back-button, .components-button.components-guide__forward-button {
|
|
1673
|
-
font-size: 13px;
|
|
1674
|
-
padding: 4px 2px;
|
|
1675
|
-
}
|
|
1676
|
-
.components-button.components-guide__back-button.has-text svg, .components-button.components-guide__forward-button.has-text svg {
|
|
1677
|
-
margin: 0;
|
|
1678
|
-
}
|
|
1679
|
-
.components-button.components-guide__back-button:hover, .components-button.components-guide__forward-button:hover {
|
|
1680
|
-
text-decoration: underline;
|
|
1681
|
-
}
|
|
1682
1674
|
.components-button.components-guide__back-button {
|
|
1683
1675
|
right: 32px;
|
|
1684
1676
|
}
|
|
1685
|
-
.components-button.components-guide__forward-button {
|
|
1686
|
-
left: 32px;
|
|
1687
|
-
color: #1386bf;
|
|
1688
|
-
font-weight: bold;
|
|
1689
|
-
}
|
|
1690
|
-
.components-button.components-guide__finish-button {
|
|
1677
|
+
.components-button.components-guide__forward-button, .components-button.components-guide__finish-button {
|
|
1691
1678
|
left: 32px;
|
|
1692
1679
|
}
|
|
1693
1680
|
|
|
@@ -1904,7 +1891,7 @@ body.is-dragging-components-draggable {
|
|
|
1904
1891
|
.components-modal__header {
|
|
1905
1892
|
box-sizing: border-box;
|
|
1906
1893
|
border-bottom: 1px solid transparent;
|
|
1907
|
-
padding: 24px 32px
|
|
1894
|
+
padding: 24px 32px 8px;
|
|
1908
1895
|
display: flex;
|
|
1909
1896
|
flex-direction: row;
|
|
1910
1897
|
justify-content: space-between;
|
|
@@ -1955,7 +1942,7 @@ body.is-dragging-components-draggable {
|
|
|
1955
1942
|
.components-modal__content {
|
|
1956
1943
|
flex: 1;
|
|
1957
1944
|
margin-top: 72px;
|
|
1958
|
-
padding:
|
|
1945
|
+
padding: 4px 32px 32px;
|
|
1959
1946
|
overflow: auto;
|
|
1960
1947
|
}
|
|
1961
1948
|
.components-modal__content.hide-header {
|
package/build-style/style.css
CHANGED
|
@@ -1636,7 +1636,7 @@ body.is-dragging-components-draggable {
|
|
|
1636
1636
|
.components-guide__footer {
|
|
1637
1637
|
align-content: center;
|
|
1638
1638
|
display: flex;
|
|
1639
|
-
height:
|
|
1639
|
+
height: 36px;
|
|
1640
1640
|
justify-content: center;
|
|
1641
1641
|
margin: 0 0 24px 0;
|
|
1642
1642
|
padding: 0 32px;
|
|
@@ -1655,12 +1655,15 @@ body.is-dragging-components-draggable {
|
|
|
1655
1655
|
height: 30px;
|
|
1656
1656
|
min-width: 20px;
|
|
1657
1657
|
margin: -6px 0;
|
|
1658
|
+
color: #e0e0e0;
|
|
1659
|
+
}
|
|
1660
|
+
.components-guide__page-control li[aria-current=step] .components-button {
|
|
1661
|
+
color: var(--wp-components-color-accent, var(--wp-admin-theme-color));
|
|
1658
1662
|
}
|
|
1659
1663
|
|
|
1660
1664
|
.components-modal__frame.components-guide {
|
|
1661
1665
|
border: none;
|
|
1662
1666
|
min-width: 312px;
|
|
1663
|
-
height: 80vh;
|
|
1664
1667
|
max-height: 575px;
|
|
1665
1668
|
}
|
|
1666
1669
|
@media (max-width: 600px) {
|
|
@@ -1671,28 +1674,12 @@ body.is-dragging-components-draggable {
|
|
|
1671
1674
|
}
|
|
1672
1675
|
|
|
1673
1676
|
.components-button.components-guide__back-button, .components-button.components-guide__forward-button, .components-button.components-guide__finish-button {
|
|
1674
|
-
height: 30px;
|
|
1675
1677
|
position: absolute;
|
|
1676
1678
|
}
|
|
1677
|
-
.components-button.components-guide__back-button, .components-button.components-guide__forward-button {
|
|
1678
|
-
font-size: 13px;
|
|
1679
|
-
padding: 4px 2px;
|
|
1680
|
-
}
|
|
1681
|
-
.components-button.components-guide__back-button.has-text svg, .components-button.components-guide__forward-button.has-text svg {
|
|
1682
|
-
margin: 0;
|
|
1683
|
-
}
|
|
1684
|
-
.components-button.components-guide__back-button:hover, .components-button.components-guide__forward-button:hover {
|
|
1685
|
-
text-decoration: underline;
|
|
1686
|
-
}
|
|
1687
1679
|
.components-button.components-guide__back-button {
|
|
1688
1680
|
left: 32px;
|
|
1689
1681
|
}
|
|
1690
|
-
.components-button.components-guide__forward-button {
|
|
1691
|
-
right: 32px;
|
|
1692
|
-
color: #1386bf;
|
|
1693
|
-
font-weight: bold;
|
|
1694
|
-
}
|
|
1695
|
-
.components-button.components-guide__finish-button {
|
|
1682
|
+
.components-button.components-guide__forward-button, .components-button.components-guide__finish-button {
|
|
1696
1683
|
right: 32px;
|
|
1697
1684
|
}
|
|
1698
1685
|
|
|
@@ -1909,7 +1896,7 @@ body.is-dragging-components-draggable {
|
|
|
1909
1896
|
.components-modal__header {
|
|
1910
1897
|
box-sizing: border-box;
|
|
1911
1898
|
border-bottom: 1px solid transparent;
|
|
1912
|
-
padding: 24px 32px
|
|
1899
|
+
padding: 24px 32px 8px;
|
|
1913
1900
|
display: flex;
|
|
1914
1901
|
flex-direction: row;
|
|
1915
1902
|
justify-content: space-between;
|
|
@@ -1960,7 +1947,7 @@ body.is-dragging-components-draggable {
|
|
|
1960
1947
|
.components-modal__content {
|
|
1961
1948
|
flex: 1;
|
|
1962
1949
|
margin-top: 72px;
|
|
1963
|
-
padding:
|
|
1950
|
+
padding: 4px 32px 32px;
|
|
1964
1951
|
overflow: auto;
|
|
1965
1952
|
}
|
|
1966
1953
|
.components-modal__content.hide-header {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../src/guide/icons.tsx"],"names":[],"mappings":";AAKA,eAAO,MAAM,eAAe
|
|
1
|
+
{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../src/guide/icons.tsx"],"names":[],"mappings":";AAKA,eAAO,MAAM,eAAe,mBAI3B,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/guide/index.tsx"],"names":[],"mappings":";AAmBA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,iBAAS,KAAK,CAAE,EACf,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,gBAAiC,EACjC,QAAQ,EACR,KAAU,GACV,EAAE,UAAU,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/guide/index.tsx"],"names":[],"mappings":";AAmBA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,iBAAS,KAAK,CAAE,EACf,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,gBAAiC,EACjC,QAAQ,EACR,KAAU,GACV,EAAE,UAAU,sBAmHZ;AAED,eAAe,KAAK,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"page-control.d.ts","sourceRoot":"","sources":["../../src/guide/page-control.tsx"],"names":[],"mappings":";AAUA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEhD,MAAM,CAAC,OAAO,UAAU,WAAW,CAAE,EACpC,WAAW,EACX,aAAa,EACb,cAAc,GACd,EAAE,gBAAgB,
|
|
1
|
+
{"version":3,"file":"page-control.d.ts","sourceRoot":"","sources":["../../src/guide/page-control.tsx"],"names":[],"mappings":";AAUA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEhD,MAAM,CAAC,OAAO,UAAU,WAAW,CAAE,EACpC,WAAW,EACX,aAAa,EACb,cAAc,GACd,EAAE,gBAAgB,eA2BlB"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wordpress/components",
|
|
3
|
-
"version": "25.1.
|
|
3
|
+
"version": "25.1.4",
|
|
4
4
|
"description": "UI components for WordPress.",
|
|
5
5
|
"author": "The WordPress Contributors",
|
|
6
6
|
"license": "GPL-2.0-or-later",
|
|
@@ -56,7 +56,7 @@
|
|
|
56
56
|
"@wordpress/keycodes": "^3.35.1",
|
|
57
57
|
"@wordpress/primitives": "^3.33.1",
|
|
58
58
|
"@wordpress/private-apis": "^0.17.1",
|
|
59
|
-
"@wordpress/rich-text": "^6.12.
|
|
59
|
+
"@wordpress/rich-text": "^6.12.2",
|
|
60
60
|
"@wordpress/warning": "^2.35.1",
|
|
61
61
|
"change-case": "^4.1.2",
|
|
62
62
|
"classnames": "^2.3.1",
|
|
@@ -87,5 +87,5 @@
|
|
|
87
87
|
"publishConfig": {
|
|
88
88
|
"access": "public"
|
|
89
89
|
},
|
|
90
|
-
"gitHead": "
|
|
90
|
+
"gitHead": "65fb4cd5187a47ca274c24c04a220bcdb2ddfa67"
|
|
91
91
|
}
|
package/src/guide/icons.tsx
CHANGED
|
@@ -3,13 +3,8 @@
|
|
|
3
3
|
*/
|
|
4
4
|
import { SVG, Circle } from '@wordpress/primitives';
|
|
5
5
|
|
|
6
|
-
export const PageControlIcon = (
|
|
6
|
+
export const PageControlIcon = () => (
|
|
7
7
|
<SVG width="8" height="8" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
8
|
-
<Circle
|
|
9
|
-
cx="4"
|
|
10
|
-
cy="4"
|
|
11
|
-
r="4"
|
|
12
|
-
fill={ isSelected ? '#419ECD' : '#E1E3E6' }
|
|
13
|
-
/>
|
|
8
|
+
<Circle cx="4" cy="4" r="4" />
|
|
14
9
|
</SVG>
|
|
15
10
|
);
|
package/src/guide/index.tsx
CHANGED
|
@@ -111,6 +111,7 @@ function Guide( {
|
|
|
111
111
|
<Modal
|
|
112
112
|
className={ classnames( 'components-guide', className ) }
|
|
113
113
|
contentLabel={ contentLabel }
|
|
114
|
+
isDismissible={ pages.length > 1 }
|
|
114
115
|
onRequestClose={ onFinish }
|
|
115
116
|
onKeyDown={ ( event ) => {
|
|
116
117
|
if ( event.code === 'ArrowLeft' ) {
|
|
@@ -144,6 +145,7 @@ function Guide( {
|
|
|
144
145
|
{ canGoBack && (
|
|
145
146
|
<Button
|
|
146
147
|
className="components-guide__back-button"
|
|
148
|
+
variant="tertiary"
|
|
147
149
|
onClick={ goBack }
|
|
148
150
|
>
|
|
149
151
|
{ __( 'Previous' ) }
|
|
@@ -152,6 +154,7 @@ function Guide( {
|
|
|
152
154
|
{ canGoForward && (
|
|
153
155
|
<Button
|
|
154
156
|
className="components-guide__forward-button"
|
|
157
|
+
variant="primary"
|
|
155
158
|
onClick={ goForward }
|
|
156
159
|
>
|
|
157
160
|
{ __( 'Next' ) }
|
|
@@ -160,6 +163,7 @@ function Guide( {
|
|
|
160
163
|
{ ! canGoForward && (
|
|
161
164
|
<Button
|
|
162
165
|
className="components-guide__finish-button"
|
|
166
|
+
variant="primary"
|
|
163
167
|
onClick={ onFinish }
|
|
164
168
|
>
|
|
165
169
|
{ finishButtonText }
|
|
@@ -28,11 +28,7 @@ export default function PageControl( {
|
|
|
28
28
|
>
|
|
29
29
|
<Button
|
|
30
30
|
key={ page }
|
|
31
|
-
icon={
|
|
32
|
-
<PageControlIcon
|
|
33
|
-
isSelected={ page === currentPage }
|
|
34
|
-
/>
|
|
35
|
-
}
|
|
31
|
+
icon={ <PageControlIcon /> }
|
|
36
32
|
aria-label={ sprintf(
|
|
37
33
|
/* translators: 1: current page number 2: total number of pages */
|
|
38
34
|
__( 'Page %1$d of %2$d' ),
|
package/src/guide/style.scss
CHANGED
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
|
|
30
30
|
&:hover {
|
|
31
31
|
svg {
|
|
32
|
-
fill:
|
|
32
|
+
fill: $white;
|
|
33
33
|
}
|
|
34
34
|
}
|
|
35
35
|
}
|
|
@@ -57,7 +57,7 @@
|
|
|
57
57
|
&__footer {
|
|
58
58
|
align-content: center;
|
|
59
59
|
display: flex;
|
|
60
|
-
height:
|
|
60
|
+
height: $button-size;
|
|
61
61
|
justify-content: center;
|
|
62
62
|
margin: 0 0 $grid-unit-30 0;
|
|
63
63
|
padding: 0 $grid-unit-40;
|
|
@@ -78,6 +78,11 @@
|
|
|
78
78
|
height: 30px;
|
|
79
79
|
min-width: 20px;
|
|
80
80
|
margin: -6px 0;
|
|
81
|
+
color: $gray-200;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
li[aria-current="step"] .components-button {
|
|
85
|
+
color: var(--wp-components-color-accent, var(--wp-admin-theme-color));
|
|
81
86
|
}
|
|
82
87
|
}
|
|
83
88
|
}
|
|
@@ -85,7 +90,6 @@
|
|
|
85
90
|
.components-modal__frame.components-guide {
|
|
86
91
|
border: none;
|
|
87
92
|
min-width: 312px;
|
|
88
|
-
height: 80vh;
|
|
89
93
|
max-height: 575px;
|
|
90
94
|
|
|
91
95
|
@media ( max-width: $break-small ) {
|
|
@@ -98,34 +102,14 @@
|
|
|
98
102
|
&.components-guide__back-button,
|
|
99
103
|
&.components-guide__forward-button,
|
|
100
104
|
&.components-guide__finish-button {
|
|
101
|
-
height: 30px;
|
|
102
105
|
position: absolute;
|
|
103
106
|
}
|
|
104
107
|
|
|
105
|
-
&.components-guide__back-button,
|
|
106
|
-
&.components-guide__forward-button {
|
|
107
|
-
font-size: $default-font-size;
|
|
108
|
-
padding: 4px 2px;
|
|
109
|
-
|
|
110
|
-
&.has-text svg {
|
|
111
|
-
margin: 0;
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
&:hover {
|
|
115
|
-
text-decoration: underline;
|
|
116
|
-
}
|
|
117
|
-
}
|
|
118
|
-
|
|
119
108
|
&.components-guide__back-button {
|
|
120
109
|
left: $grid-unit-40;
|
|
121
110
|
}
|
|
122
111
|
|
|
123
|
-
&.components-guide__forward-button
|
|
124
|
-
right: $grid-unit-40;
|
|
125
|
-
color: #1386bf;
|
|
126
|
-
font-weight: bold;
|
|
127
|
-
}
|
|
128
|
-
|
|
112
|
+
&.components-guide__forward-button,
|
|
129
113
|
&.components-guide__finish-button {
|
|
130
114
|
right: $grid-unit-40;
|
|
131
115
|
}
|
package/src/modal/style.scss
CHANGED
|
@@ -72,7 +72,7 @@
|
|
|
72
72
|
.components-modal__header {
|
|
73
73
|
box-sizing: border-box;
|
|
74
74
|
border-bottom: $border-width solid transparent;
|
|
75
|
-
padding: $grid-unit-30 $grid-unit-40 $grid-unit-
|
|
75
|
+
padding: $grid-unit-30 $grid-unit-40 $grid-unit-10;
|
|
76
76
|
display: flex;
|
|
77
77
|
flex-direction: row;
|
|
78
78
|
justify-content: space-between;
|
|
@@ -130,7 +130,8 @@
|
|
|
130
130
|
.components-modal__content {
|
|
131
131
|
flex: 1;
|
|
132
132
|
margin-top: $header-height + $grid-unit-15;
|
|
133
|
-
padding
|
|
133
|
+
// Small top padding required to avoid cutting off the visible outline when the first child element is focusable.
|
|
134
|
+
padding: $grid-unit-05 $grid-unit-40 $grid-unit-40;
|
|
134
135
|
overflow: auto;
|
|
135
136
|
|
|
136
137
|
&.hide-header {
|