@wordpress/components 28.0.1 → 28.1.0
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 +3 -0
- package/build/radio-control/index.js +1 -1
- package/build/radio-control/index.js.map +1 -1
- package/build-module/radio-control/index.js +1 -1
- package/build-module/radio-control/index.js.map +1 -1
- package/build-style/style-rtl.css +4 -3
- package/build-style/style.css +4 -3
- package/build-types/checkbox-control/stories/index.story.d.ts.map +1 -1
- package/package.json +19 -19
- package/src/checkbox-control/stories/index.story.tsx +3 -0
- package/src/checkbox-control/style.scss +4 -2
- package/src/radio-control/index.tsx +1 -1
- package/src/radio-control/style.scss +1 -1
- package/tsconfig.tsbuildinfo +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -2,9 +2,12 @@
|
|
|
2
2
|
|
|
3
3
|
## Unreleased
|
|
4
4
|
|
|
5
|
+
## 28.1.0 (2024-06-15)
|
|
6
|
+
|
|
5
7
|
### Enhancements
|
|
6
8
|
|
|
7
9
|
- Add `text-wrap: balance` fallback to all instances of `text-wrap: pretty` for greater cross browser compatibility. ([#62233](https://github.com/WordPress/gutenberg/pull/62233))
|
|
10
|
+
- Updates the space between input + label to `8px` in CheckboxControl and RadioControl. Also increased the space between RadioControl components to `12px` to make it consistent with CheckboxControl. ([#61696](https://github.com/WordPress/gutenberg/pull/61696))
|
|
8
11
|
|
|
9
12
|
### Bug Fixes
|
|
10
13
|
|
|
@@ -73,7 +73,7 @@ function RadioControl(props) {
|
|
|
73
73
|
help: help,
|
|
74
74
|
className: (0, _clsx.default)(className, 'components-radio-control'),
|
|
75
75
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vStack.VStack, {
|
|
76
|
-
spacing:
|
|
76
|
+
spacing: 3,
|
|
77
77
|
children: options.map((option, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
78
78
|
className: "components-radio-control__option",
|
|
79
79
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_clsx","_interopRequireDefault","require","_compose","_baseControl","_vStack","_jsxRuntime","RadioControl","props","label","className","selected","help","onChange","hideLabelFromVision","options","additionalProps","instanceId","useInstanceId","id","onChangeValue","event","target","value","length","jsx","default","__nextHasNoMarginBottom","clsx","children","VStack","spacing","map","option","index","jsxs","type","name","checked","undefined","htmlFor","_default","exports"],"sources":["@wordpress/components/src/radio-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport type { ChangeEvent } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../base-control';\nimport type { WordPressComponentProps } from '../context';\nimport type { RadioControlProps } from './types';\nimport { VStack } from '../v-stack';\n\n/**\n * Render a user interface to select the user type using radio inputs.\n *\n * ```jsx\n * import { RadioControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyRadioControl = () => {\n * const [ option, setOption ] = useState( 'a' );\n *\n * return (\n * <RadioControl\n * label=\"User type\"\n * help=\"The type of the current user\"\n * selected={ option }\n * options={ [\n * { label: 'Author', value: 'a' },\n * { label: 'Editor', value: 'e' },\n * ] }\n * onChange={ ( value ) => setOption( value ) }\n * />\n * );\n * };\n * ```\n */\nexport function RadioControl(\n\tprops: WordPressComponentProps< RadioControlProps, 'input', false >\n) {\n\tconst {\n\t\tlabel,\n\t\tclassName,\n\t\tselected,\n\t\thelp,\n\t\tonChange,\n\t\thideLabelFromVision,\n\t\toptions = [],\n\t\t...additionalProps\n\t} = props;\n\tconst instanceId = useInstanceId( RadioControl );\n\tconst id = `inspector-radio-control-${ instanceId }`;\n\tconst onChangeValue = ( event: ChangeEvent< HTMLInputElement > ) =>\n\t\tonChange( event.target.value );\n\n\tif ( ! options?.length ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<BaseControl\n\t\t\t__nextHasNoMarginBottom\n\t\t\tlabel={ label }\n\t\t\tid={ id }\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\thelp={ help }\n\t\t\tclassName={ clsx( className, 'components-radio-control' ) }\n\t\t>\n\t\t\t<VStack spacing={
|
|
1
|
+
{"version":3,"names":["_clsx","_interopRequireDefault","require","_compose","_baseControl","_vStack","_jsxRuntime","RadioControl","props","label","className","selected","help","onChange","hideLabelFromVision","options","additionalProps","instanceId","useInstanceId","id","onChangeValue","event","target","value","length","jsx","default","__nextHasNoMarginBottom","clsx","children","VStack","spacing","map","option","index","jsxs","type","name","checked","undefined","htmlFor","_default","exports"],"sources":["@wordpress/components/src/radio-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport type { ChangeEvent } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../base-control';\nimport type { WordPressComponentProps } from '../context';\nimport type { RadioControlProps } from './types';\nimport { VStack } from '../v-stack';\n\n/**\n * Render a user interface to select the user type using radio inputs.\n *\n * ```jsx\n * import { RadioControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyRadioControl = () => {\n * const [ option, setOption ] = useState( 'a' );\n *\n * return (\n * <RadioControl\n * label=\"User type\"\n * help=\"The type of the current user\"\n * selected={ option }\n * options={ [\n * { label: 'Author', value: 'a' },\n * { label: 'Editor', value: 'e' },\n * ] }\n * onChange={ ( value ) => setOption( value ) }\n * />\n * );\n * };\n * ```\n */\nexport function RadioControl(\n\tprops: WordPressComponentProps< RadioControlProps, 'input', false >\n) {\n\tconst {\n\t\tlabel,\n\t\tclassName,\n\t\tselected,\n\t\thelp,\n\t\tonChange,\n\t\thideLabelFromVision,\n\t\toptions = [],\n\t\t...additionalProps\n\t} = props;\n\tconst instanceId = useInstanceId( RadioControl );\n\tconst id = `inspector-radio-control-${ instanceId }`;\n\tconst onChangeValue = ( event: ChangeEvent< HTMLInputElement > ) =>\n\t\tonChange( event.target.value );\n\n\tif ( ! options?.length ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<BaseControl\n\t\t\t__nextHasNoMarginBottom\n\t\t\tlabel={ label }\n\t\t\tid={ id }\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\thelp={ help }\n\t\t\tclassName={ clsx( className, 'components-radio-control' ) }\n\t\t>\n\t\t\t<VStack spacing={ 3 }>\n\t\t\t\t{ options.map( ( option, index ) => (\n\t\t\t\t\t<div\n\t\t\t\t\t\tkey={ `${ id }-${ index }` }\n\t\t\t\t\t\tclassName=\"components-radio-control__option\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\tid={ `${ id }-${ index }` }\n\t\t\t\t\t\t\tclassName=\"components-radio-control__input\"\n\t\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\t\tname={ id }\n\t\t\t\t\t\t\tvalue={ option.value }\n\t\t\t\t\t\t\tonChange={ onChangeValue }\n\t\t\t\t\t\t\tchecked={ option.value === selected }\n\t\t\t\t\t\t\taria-describedby={\n\t\t\t\t\t\t\t\t!! help ? `${ id }__help` : undefined\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t{ ...additionalProps }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<label\n\t\t\t\t\t\t\tclassName=\"components-radio-control__label\"\n\t\t\t\t\t\t\thtmlFor={ `${ id }-${ index }` }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ option.label }\n\t\t\t\t\t\t</label>\n\t\t\t\t\t</div>\n\t\t\t\t) ) }\n\t\t\t</VStack>\n\t\t</BaseControl>\n\t);\n}\n\nexport default RadioControl;\n"],"mappings":";;;;;;;;AAGA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AAMA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,YAAA,GAAAH,sBAAA,CAAAC,OAAA;AAGA,IAAAG,OAAA,GAAAH,OAAA;AAAoC,IAAAI,WAAA,GAAAJ,OAAA;AAjBpC;AACA;AACA;;AAIA;AACA;AACA;;AAGA;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;AACO,SAASK,YAAYA,CAC3BC,KAAmE,EAClE;EACD,MAAM;IACLC,KAAK;IACLC,SAAS;IACTC,QAAQ;IACRC,IAAI;IACJC,QAAQ;IACRC,mBAAmB;IACnBC,OAAO,GAAG,EAAE;IACZ,GAAGC;EACJ,CAAC,GAAGR,KAAK;EACT,MAAMS,UAAU,GAAG,IAAAC,sBAAa,EAAEX,YAAa,CAAC;EAChD,MAAMY,EAAE,GAAI,2BAA2BF,UAAY,EAAC;EACpD,MAAMG,aAAa,GAAKC,KAAsC,IAC7DR,QAAQ,CAAEQ,KAAK,CAACC,MAAM,CAACC,KAAM,CAAC;EAE/B,IAAK,CAAER,OAAO,EAAES,MAAM,EAAG;IACxB,OAAO,IAAI;EACZ;EAEA,oBACC,IAAAlB,WAAA,CAAAmB,GAAA,EAACrB,YAAA,CAAAsB,OAAW;IACXC,uBAAuB;IACvBlB,KAAK,EAAGA,KAAO;IACfU,EAAE,EAAGA,EAAI;IACTL,mBAAmB,EAAGA,mBAAqB;IAC3CF,IAAI,EAAGA,IAAM;IACbF,SAAS,EAAG,IAAAkB,aAAI,EAAElB,SAAS,EAAE,0BAA2B,CAAG;IAAAmB,QAAA,eAE3D,IAAAvB,WAAA,CAAAmB,GAAA,EAACpB,OAAA,CAAAyB,MAAM;MAACC,OAAO,EAAG,CAAG;MAAAF,QAAA,EAClBd,OAAO,CAACiB,GAAG,CAAE,CAAEC,MAAM,EAAEC,KAAK,kBAC7B,IAAA5B,WAAA,CAAA6B,IAAA;QAECzB,SAAS,EAAC,kCAAkC;QAAAmB,QAAA,gBAE5C,IAAAvB,WAAA,CAAAmB,GAAA;UACCN,EAAE,EAAI,GAAGA,EAAI,IAAIe,KAAO,EAAG;UAC3BxB,SAAS,EAAC,iCAAiC;UAC3C0B,IAAI,EAAC,OAAO;UACZC,IAAI,EAAGlB,EAAI;UACXI,KAAK,EAAGU,MAAM,CAACV,KAAO;UACtBV,QAAQ,EAAGO,aAAe;UAC1BkB,OAAO,EAAGL,MAAM,CAACV,KAAK,KAAKZ,QAAU;UACrC,oBACC,CAAC,CAAEC,IAAI,GAAI,GAAGO,EAAI,QAAO,GAAGoB,SAC5B;UAAA,GACIvB;QAAe,CACpB,CAAC,eACF,IAAAV,WAAA,CAAAmB,GAAA;UACCf,SAAS,EAAC,iCAAiC;UAC3C8B,OAAO,EAAI,GAAGrB,EAAI,IAAIe,KAAO,EAAG;UAAAL,QAAA,EAE9BI,MAAM,CAACxB;QAAK,CACR,CAAC;MAAA,GArBD,GAAGU,EAAI,IAAIe,KAAO,EAsBrB,CACJ;IAAC,CACI;EAAC,CACG,CAAC;AAEhB;AAAC,IAAAO,QAAA,GAAAC,OAAA,CAAAhB,OAAA,GAEcnB,YAAY","ignoreList":[]}
|
|
@@ -65,7 +65,7 @@ export function RadioControl(props) {
|
|
|
65
65
|
help: help,
|
|
66
66
|
className: clsx(className, 'components-radio-control'),
|
|
67
67
|
children: /*#__PURE__*/_jsx(VStack, {
|
|
68
|
-
spacing:
|
|
68
|
+
spacing: 3,
|
|
69
69
|
children: options.map((option, index) => /*#__PURE__*/_jsxs("div", {
|
|
70
70
|
className: "components-radio-control__option",
|
|
71
71
|
children: [/*#__PURE__*/_jsx("input", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["clsx","useInstanceId","BaseControl","VStack","jsx","_jsx","jsxs","_jsxs","RadioControl","props","label","className","selected","help","onChange","hideLabelFromVision","options","additionalProps","instanceId","id","onChangeValue","event","target","value","length","__nextHasNoMarginBottom","children","spacing","map","option","index","type","name","checked","undefined","htmlFor"],"sources":["@wordpress/components/src/radio-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport type { ChangeEvent } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../base-control';\nimport type { WordPressComponentProps } from '../context';\nimport type { RadioControlProps } from './types';\nimport { VStack } from '../v-stack';\n\n/**\n * Render a user interface to select the user type using radio inputs.\n *\n * ```jsx\n * import { RadioControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyRadioControl = () => {\n * const [ option, setOption ] = useState( 'a' );\n *\n * return (\n * <RadioControl\n * label=\"User type\"\n * help=\"The type of the current user\"\n * selected={ option }\n * options={ [\n * { label: 'Author', value: 'a' },\n * { label: 'Editor', value: 'e' },\n * ] }\n * onChange={ ( value ) => setOption( value ) }\n * />\n * );\n * };\n * ```\n */\nexport function RadioControl(\n\tprops: WordPressComponentProps< RadioControlProps, 'input', false >\n) {\n\tconst {\n\t\tlabel,\n\t\tclassName,\n\t\tselected,\n\t\thelp,\n\t\tonChange,\n\t\thideLabelFromVision,\n\t\toptions = [],\n\t\t...additionalProps\n\t} = props;\n\tconst instanceId = useInstanceId( RadioControl );\n\tconst id = `inspector-radio-control-${ instanceId }`;\n\tconst onChangeValue = ( event: ChangeEvent< HTMLInputElement > ) =>\n\t\tonChange( event.target.value );\n\n\tif ( ! options?.length ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<BaseControl\n\t\t\t__nextHasNoMarginBottom\n\t\t\tlabel={ label }\n\t\t\tid={ id }\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\thelp={ help }\n\t\t\tclassName={ clsx( className, 'components-radio-control' ) }\n\t\t>\n\t\t\t<VStack spacing={
|
|
1
|
+
{"version":3,"names":["clsx","useInstanceId","BaseControl","VStack","jsx","_jsx","jsxs","_jsxs","RadioControl","props","label","className","selected","help","onChange","hideLabelFromVision","options","additionalProps","instanceId","id","onChangeValue","event","target","value","length","__nextHasNoMarginBottom","children","spacing","map","option","index","type","name","checked","undefined","htmlFor"],"sources":["@wordpress/components/src/radio-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport type { ChangeEvent } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../base-control';\nimport type { WordPressComponentProps } from '../context';\nimport type { RadioControlProps } from './types';\nimport { VStack } from '../v-stack';\n\n/**\n * Render a user interface to select the user type using radio inputs.\n *\n * ```jsx\n * import { RadioControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyRadioControl = () => {\n * const [ option, setOption ] = useState( 'a' );\n *\n * return (\n * <RadioControl\n * label=\"User type\"\n * help=\"The type of the current user\"\n * selected={ option }\n * options={ [\n * { label: 'Author', value: 'a' },\n * { label: 'Editor', value: 'e' },\n * ] }\n * onChange={ ( value ) => setOption( value ) }\n * />\n * );\n * };\n * ```\n */\nexport function RadioControl(\n\tprops: WordPressComponentProps< RadioControlProps, 'input', false >\n) {\n\tconst {\n\t\tlabel,\n\t\tclassName,\n\t\tselected,\n\t\thelp,\n\t\tonChange,\n\t\thideLabelFromVision,\n\t\toptions = [],\n\t\t...additionalProps\n\t} = props;\n\tconst instanceId = useInstanceId( RadioControl );\n\tconst id = `inspector-radio-control-${ instanceId }`;\n\tconst onChangeValue = ( event: ChangeEvent< HTMLInputElement > ) =>\n\t\tonChange( event.target.value );\n\n\tif ( ! options?.length ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<BaseControl\n\t\t\t__nextHasNoMarginBottom\n\t\t\tlabel={ label }\n\t\t\tid={ id }\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\thelp={ help }\n\t\t\tclassName={ clsx( className, 'components-radio-control' ) }\n\t\t>\n\t\t\t<VStack spacing={ 3 }>\n\t\t\t\t{ options.map( ( option, index ) => (\n\t\t\t\t\t<div\n\t\t\t\t\t\tkey={ `${ id }-${ index }` }\n\t\t\t\t\t\tclassName=\"components-radio-control__option\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\tid={ `${ id }-${ index }` }\n\t\t\t\t\t\t\tclassName=\"components-radio-control__input\"\n\t\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\t\tname={ id }\n\t\t\t\t\t\t\tvalue={ option.value }\n\t\t\t\t\t\t\tonChange={ onChangeValue }\n\t\t\t\t\t\t\tchecked={ option.value === selected }\n\t\t\t\t\t\t\taria-describedby={\n\t\t\t\t\t\t\t\t!! help ? `${ id }__help` : undefined\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t{ ...additionalProps }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<label\n\t\t\t\t\t\t\tclassName=\"components-radio-control__label\"\n\t\t\t\t\t\t\thtmlFor={ `${ id }-${ index }` }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ option.label }\n\t\t\t\t\t\t</label>\n\t\t\t\t\t</div>\n\t\t\t\t) ) }\n\t\t\t</VStack>\n\t\t</BaseControl>\n\t);\n}\n\nexport default RadioControl;\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,IAAI,MAAM,MAAM;AAGvB;AACA;AACA;AACA,SAASC,aAAa,QAAQ,oBAAoB;;AAElD;AACA;AACA;AACA,OAAOC,WAAW,MAAM,iBAAiB;AAGzC,SAASC,MAAM,QAAQ,YAAY;;AAEnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAxBA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAyBA,OAAO,SAASC,YAAYA,CAC3BC,KAAmE,EAClE;EACD,MAAM;IACLC,KAAK;IACLC,SAAS;IACTC,QAAQ;IACRC,IAAI;IACJC,QAAQ;IACRC,mBAAmB;IACnBC,OAAO,GAAG,EAAE;IACZ,GAAGC;EACJ,CAAC,GAAGR,KAAK;EACT,MAAMS,UAAU,GAAGjB,aAAa,CAAEO,YAAa,CAAC;EAChD,MAAMW,EAAE,GAAI,2BAA2BD,UAAY,EAAC;EACpD,MAAME,aAAa,GAAKC,KAAsC,IAC7DP,QAAQ,CAAEO,KAAK,CAACC,MAAM,CAACC,KAAM,CAAC;EAE/B,IAAK,CAAEP,OAAO,EAAEQ,MAAM,EAAG;IACxB,OAAO,IAAI;EACZ;EAEA,oBACCnB,IAAA,CAACH,WAAW;IACXuB,uBAAuB;IACvBf,KAAK,EAAGA,KAAO;IACfS,EAAE,EAAGA,EAAI;IACTJ,mBAAmB,EAAGA,mBAAqB;IAC3CF,IAAI,EAAGA,IAAM;IACbF,SAAS,EAAGX,IAAI,CAAEW,SAAS,EAAE,0BAA2B,CAAG;IAAAe,QAAA,eAE3DrB,IAAA,CAACF,MAAM;MAACwB,OAAO,EAAG,CAAG;MAAAD,QAAA,EAClBV,OAAO,CAACY,GAAG,CAAE,CAAEC,MAAM,EAAEC,KAAK,kBAC7BvB,KAAA;QAECI,SAAS,EAAC,kCAAkC;QAAAe,QAAA,gBAE5CrB,IAAA;UACCc,EAAE,EAAI,GAAGA,EAAI,IAAIW,KAAO,EAAG;UAC3BnB,SAAS,EAAC,iCAAiC;UAC3CoB,IAAI,EAAC,OAAO;UACZC,IAAI,EAAGb,EAAI;UACXI,KAAK,EAAGM,MAAM,CAACN,KAAO;UACtBT,QAAQ,EAAGM,aAAe;UAC1Ba,OAAO,EAAGJ,MAAM,CAACN,KAAK,KAAKX,QAAU;UACrC,oBACC,CAAC,CAAEC,IAAI,GAAI,GAAGM,EAAI,QAAO,GAAGe,SAC5B;UAAA,GACIjB;QAAe,CACpB,CAAC,eACFZ,IAAA;UACCM,SAAS,EAAC,iCAAiC;UAC3CwB,OAAO,EAAI,GAAGhB,EAAI,IAAIW,KAAO,EAAG;UAAAJ,QAAA,EAE9BG,MAAM,CAACnB;QAAK,CACR,CAAC;MAAA,GArBD,GAAGS,EAAI,IAAIW,KAAO,EAsBrB,CACJ;IAAC,CACI;EAAC,CACG,CAAC;AAEhB;AAEA,eAAetB,YAAY","ignoreList":[]}
|
|
@@ -490,6 +490,7 @@ p + .components-button.is-tertiary {
|
|
|
490
490
|
}
|
|
491
491
|
.components-checkbox-control {
|
|
492
492
|
--checkbox-input-size: 24px;
|
|
493
|
+
--checkbox-input-margin: 8px;
|
|
493
494
|
}
|
|
494
495
|
@media (min-width: 600px) {
|
|
495
496
|
.components-checkbox-control {
|
|
@@ -634,7 +635,7 @@ p + .components-button.is-tertiary {
|
|
|
634
635
|
.components-checkbox-control__input-container {
|
|
635
636
|
position: relative;
|
|
636
637
|
display: inline-block;
|
|
637
|
-
margin-left:
|
|
638
|
+
margin-left: var(--checkbox-input-margin);
|
|
638
639
|
vertical-align: middle;
|
|
639
640
|
width: var(--checkbox-input-size);
|
|
640
641
|
aspect-ratio: 1;
|
|
@@ -665,7 +666,7 @@ svg.components-checkbox-control__indeterminate {
|
|
|
665
666
|
|
|
666
667
|
.components-checkbox-control__help {
|
|
667
668
|
display: inline-block;
|
|
668
|
-
margin-inline-start: calc(var(--checkbox-input-size) +
|
|
669
|
+
margin-inline-start: calc(var(--checkbox-input-size) + var(--checkbox-input-margin));
|
|
669
670
|
}
|
|
670
671
|
|
|
671
672
|
.components-circular-option-picker {
|
|
@@ -2644,7 +2645,7 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
|
|
|
2644
2645
|
min-width: 24px;
|
|
2645
2646
|
max-width: 24px;
|
|
2646
2647
|
display: inline-flex;
|
|
2647
|
-
margin: 0 0 0
|
|
2648
|
+
margin: 0 0 0 8px;
|
|
2648
2649
|
padding: 0;
|
|
2649
2650
|
-webkit-appearance: none;
|
|
2650
2651
|
appearance: none;
|
package/build-style/style.css
CHANGED
|
@@ -490,6 +490,7 @@ p + .components-button.is-tertiary {
|
|
|
490
490
|
}
|
|
491
491
|
.components-checkbox-control {
|
|
492
492
|
--checkbox-input-size: 24px;
|
|
493
|
+
--checkbox-input-margin: 8px;
|
|
493
494
|
}
|
|
494
495
|
@media (min-width: 600px) {
|
|
495
496
|
.components-checkbox-control {
|
|
@@ -634,7 +635,7 @@ p + .components-button.is-tertiary {
|
|
|
634
635
|
.components-checkbox-control__input-container {
|
|
635
636
|
position: relative;
|
|
636
637
|
display: inline-block;
|
|
637
|
-
margin-right:
|
|
638
|
+
margin-right: var(--checkbox-input-margin);
|
|
638
639
|
vertical-align: middle;
|
|
639
640
|
width: var(--checkbox-input-size);
|
|
640
641
|
aspect-ratio: 1;
|
|
@@ -665,7 +666,7 @@ svg.components-checkbox-control__indeterminate {
|
|
|
665
666
|
|
|
666
667
|
.components-checkbox-control__help {
|
|
667
668
|
display: inline-block;
|
|
668
|
-
margin-inline-start: calc(var(--checkbox-input-size) +
|
|
669
|
+
margin-inline-start: calc(var(--checkbox-input-size) + var(--checkbox-input-margin));
|
|
669
670
|
}
|
|
670
671
|
|
|
671
672
|
.components-circular-option-picker {
|
|
@@ -2653,7 +2654,7 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
|
|
|
2653
2654
|
min-width: 24px;
|
|
2654
2655
|
max-width: 24px;
|
|
2655
2656
|
display: inline-flex;
|
|
2656
|
-
margin: 0
|
|
2657
|
+
margin: 0 8px 0 0;
|
|
2657
2658
|
padding: 0;
|
|
2658
2659
|
-webkit-appearance: none;
|
|
2659
2660
|
appearance: none;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/checkbox-control/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAOtD;;GAEG;AACH,OAAO,eAAe,MAAM,IAAI,CAAC;AAIjC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,eAAe,CAmBvC,CAAC;AACF,eAAe,IAAI,CAAC;AAoBpB,eAAO,MAAM,OAAO,EAAE,OAAO,CAAE,OAAO,eAAe,CAEpD,CAAC;AAMF,eAAO,MAAM,aAAa,EAAE,OAAO,CAAE,OAAO,eAAe,CAgD1D,CAAC;AAMF;;;;;;;;;GASG;AACH,eAAO,MAAM,eAAe,EAAE,OAAO,CAAE,OAAO,eAAe,
|
|
1
|
+
{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/checkbox-control/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAOtD;;GAEG;AACH,OAAO,eAAe,MAAM,IAAI,CAAC;AAIjC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,eAAe,CAmBvC,CAAC;AACF,eAAe,IAAI,CAAC;AAoBpB,eAAO,MAAM,OAAO,EAAE,OAAO,CAAE,OAAO,eAAe,CAEpD,CAAC;AAMF,eAAO,MAAM,aAAa,EAAE,OAAO,CAAE,OAAO,eAAe,CAgD1D,CAAC;AAMF;;;;;;;;;GASG;AACH,eAAO,MAAM,eAAe,EAAE,OAAO,CAAE,OAAO,eAAe,CA+B5D,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wordpress/components",
|
|
3
|
-
"version": "28.0
|
|
3
|
+
"version": "28.1.0",
|
|
4
4
|
"description": "UI components for WordPress.",
|
|
5
5
|
"author": "The WordPress Contributors",
|
|
6
6
|
"license": "GPL-2.0-or-later",
|
|
@@ -43,23 +43,23 @@
|
|
|
43
43
|
"@types/gradient-parser": "0.1.3",
|
|
44
44
|
"@types/highlight-words-core": "1.2.1",
|
|
45
45
|
"@use-gesture/react": "^10.3.1",
|
|
46
|
-
"@wordpress/a11y": "^4.0
|
|
47
|
-
"@wordpress/compose": "^7.0
|
|
48
|
-
"@wordpress/date": "^5.0
|
|
49
|
-
"@wordpress/deprecated": "^4.0
|
|
50
|
-
"@wordpress/dom": "^4.0
|
|
51
|
-
"@wordpress/element": "^6.0
|
|
52
|
-
"@wordpress/escape-html": "^3.0
|
|
53
|
-
"@wordpress/hooks": "^4.0
|
|
54
|
-
"@wordpress/html-entities": "^4.0
|
|
55
|
-
"@wordpress/i18n": "^5.0
|
|
56
|
-
"@wordpress/icons": "^10.0
|
|
57
|
-
"@wordpress/is-shallow-equal": "^5.0
|
|
58
|
-
"@wordpress/keycodes": "^4.0
|
|
59
|
-
"@wordpress/primitives": "^4.0
|
|
60
|
-
"@wordpress/private-apis": "^1.0
|
|
61
|
-
"@wordpress/rich-text": "^7.0
|
|
62
|
-
"@wordpress/warning": "^3.0
|
|
46
|
+
"@wordpress/a11y": "^4.1.0",
|
|
47
|
+
"@wordpress/compose": "^7.1.0",
|
|
48
|
+
"@wordpress/date": "^5.1.0",
|
|
49
|
+
"@wordpress/deprecated": "^4.1.0",
|
|
50
|
+
"@wordpress/dom": "^4.1.0",
|
|
51
|
+
"@wordpress/element": "^6.1.0",
|
|
52
|
+
"@wordpress/escape-html": "^3.1.0",
|
|
53
|
+
"@wordpress/hooks": "^4.1.0",
|
|
54
|
+
"@wordpress/html-entities": "^4.1.0",
|
|
55
|
+
"@wordpress/i18n": "^5.1.0",
|
|
56
|
+
"@wordpress/icons": "^10.1.0",
|
|
57
|
+
"@wordpress/is-shallow-equal": "^5.1.0",
|
|
58
|
+
"@wordpress/keycodes": "^4.1.0",
|
|
59
|
+
"@wordpress/primitives": "^4.1.0",
|
|
60
|
+
"@wordpress/private-apis": "^1.1.0",
|
|
61
|
+
"@wordpress/rich-text": "^7.1.0",
|
|
62
|
+
"@wordpress/warning": "^3.1.0",
|
|
63
63
|
"change-case": "^4.1.2",
|
|
64
64
|
"clsx": "^2.1.1",
|
|
65
65
|
"colord": "^2.7.0",
|
|
@@ -86,5 +86,5 @@
|
|
|
86
86
|
"publishConfig": {
|
|
87
87
|
"access": "public"
|
|
88
88
|
},
|
|
89
|
-
"gitHead": "
|
|
89
|
+
"gitHead": "66d3bf12e67d16deddc4b4a9ec42e1d0bed3479a"
|
|
90
90
|
}
|
|
@@ -142,6 +142,8 @@ export const WithCustomLabel: StoryFn< typeof CheckboxControl > = ( {
|
|
|
142
142
|
setChecked( v );
|
|
143
143
|
onChange( v );
|
|
144
144
|
} }
|
|
145
|
+
// Disable reason: For simplicity of the code snippet.
|
|
146
|
+
// eslint-disable-next-line no-restricted-syntax
|
|
145
147
|
id="my-checkbox-with-custom-label"
|
|
146
148
|
aria-describedby="my-custom-description"
|
|
147
149
|
/>
|
|
@@ -149,6 +151,7 @@ export const WithCustomLabel: StoryFn< typeof CheckboxControl > = ( {
|
|
|
149
151
|
<label htmlFor="my-checkbox-with-custom-label">
|
|
150
152
|
My custom label
|
|
151
153
|
</label>
|
|
154
|
+
{ /* eslint-disable-next-line no-restricted-syntax */ }
|
|
152
155
|
<div id="my-custom-description" style={ { fontSize: 13 } }>
|
|
153
156
|
A custom description.
|
|
154
157
|
</div>
|
|
@@ -5,6 +5,8 @@
|
|
|
5
5
|
@include break-small() {
|
|
6
6
|
--checkbox-input-size: 20px;
|
|
7
7
|
}
|
|
8
|
+
|
|
9
|
+
--checkbox-input-margin: #{$grid-unit-10};
|
|
8
10
|
}
|
|
9
11
|
|
|
10
12
|
.components-checkbox-control__label {
|
|
@@ -55,7 +57,7 @@
|
|
|
55
57
|
.components-checkbox-control__input-container {
|
|
56
58
|
position: relative;
|
|
57
59
|
display: inline-block;
|
|
58
|
-
margin-right:
|
|
60
|
+
margin-right: var(--checkbox-input-margin);
|
|
59
61
|
vertical-align: middle;
|
|
60
62
|
width: var(--checkbox-input-size);
|
|
61
63
|
aspect-ratio: 1;
|
|
@@ -84,5 +86,5 @@ svg.components-checkbox-control__indeterminate {
|
|
|
84
86
|
|
|
85
87
|
.components-checkbox-control__help {
|
|
86
88
|
display: inline-block;
|
|
87
|
-
margin-inline-start: calc(var(--checkbox-input-size) +
|
|
89
|
+
margin-inline-start: calc(var(--checkbox-input-size) + var(--checkbox-input-margin));
|
|
88
90
|
}
|