@spectrum-web-components/action-group 0.6.2 → 0.7.1
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/README.md +31 -0
- package/custom-elements.json +71 -22
- package/package.json +5 -4
- package/src/ActionGroup.d.ts +11 -7
- package/src/ActionGroup.js +100 -156
- package/src/ActionGroup.js.map +1 -1
- package/src/action-group.css.js +20 -17
- package/src/action-group.css.js.map +1 -1
- package/src/spectrum-action-group.css.js +20 -17
- package/src/spectrum-action-group.css.js.map +1 -1
- package/stories/action-group-tooltip.stories.js +13 -4
- package/stories/action-group-tooltip.stories.js.map +1 -1
- package/stories/action-group.stories.js +30 -0
- package/stories/action-group.stories.js.map +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"action-group.css.js","sourceRoot":"","sources":["action-group.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsHjB,CAAC;AACF,eAAe,MAAM,CAAC","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-actiongroup-button-gap-reset:0;--spectrum-actiongroup-quiet-compact-button-gap:var(\n--spectrum-global-dimension-size-25\n)}:host{display:flex;flex-wrap:wrap}::slotted(*){flex-shrink:0}:host(:not([vertical]):not([compact])){margin-top:calc(-1*var(--spectrum-actiongroup-button-gap-y, var(--spectrum-global-dimension-size-100)))}:host(:not([vertical]):not([compact])) ::slotted(*){flex-shrink:0;margin-top:var(\n--spectrum-actiongroup-button-gap-y,var(--spectrum-global-dimension-size-100)\n)}:host([dir=ltr]:not([vertical]):not([compact])) ::slotted(:not(:last-child)){margin-right:var(\n--spectrum-actiongroup-button-gap-x,var(--spectrum-global-dimension-size-100)\n)}:host([dir=rtl]:not([vertical]):not([compact])) ::slotted(:not(:last-child)){margin-left:var(\n--spectrum-actiongroup-button-gap-x,var(--spectrum-global-dimension-size-100)\n)}:host([vertical]){display:inline-flex;flex-direction:column}:host([dir=ltr][vertical]) ::slotted(:not(:first-child)){margin-left:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([dir=rtl][vertical]) ::slotted(:not(:first-child)){margin-right:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([vertical]) ::slotted(:not(:first-child)){margin-top:var(\n--spectrum-actiongroup-button-gap-y,var(--spectrum-global-dimension-size-100)\n)}:host([dir=ltr][vertical][vertical]){margin-left:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([dir=rtl][vertical][vertical]){margin-right:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([vertical][vertical]){margin-top:var(\n--spectrum-actiongroup-button-gap-y,var(--spectrum-global-dimension-size-100)\n)}:host([dir=ltr][compact][quiet]) ::slotted(:not(:first-child)){margin-left:var(\n--spectrum-actiongroup-quiet-compact-button-gap\n)}:host([dir=rtl][compact][quiet]) ::slotted(:not(:first-child)){margin-right:var(\n--spectrum-actiongroup-quiet-compact-button-gap\n)}:host([compact][quiet]) ::slotted(:not(:first-child)){margin-top:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([dir=ltr][compact][quiet][vertical]) ::slotted(:not(:first-child)){margin-left:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([dir=rtl][compact][quiet][vertical]) ::slotted(:not(:first-child)){margin-right:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([compact][quiet][vertical]) ::slotted(:not(:first-child)){margin-top:var(\n--spectrum-actiongroup-quiet-compact-button-gap\n)}:host([compact]:not([quiet])){flex-wrap:nowrap}:host([compact]:not([quiet])) ::slotted(*){border-radius:0;position:relative;z-index:0}:host([dir=ltr][compact]:not([quiet])) ::slotted(:first-child){border-top-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:first-child){border-bottom-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){border-bottom-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:first-child){margin-right:calc(-1*var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){margin-left:calc(-1*var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){border-top-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){border-top-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){margin-left:calc(-1*var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){margin-right:calc(-1*var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){margin-right:0}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){margin-left:0}:host([compact]:not([quiet])) ::slotted([selected]){z-index:1}:host([compact]:not([quiet])) ::slotted(:hover){z-index:2}:host([compact]:not([quiet])) ::slotted(.focus-visible){z-index:3}:host([compact]:not([quiet])) ::slotted(:focus-visible){z-index:3}:host([dir=ltr][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-left:calc(-1*var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-right:calc(-1*var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-right:calc(-1*var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-left:calc(-1*var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([compact][vertical]:not([quiet])) ::slotted(*){border-radius:0}:host([compact][vertical]:not([quiet])) ::slotted(:not(:first-child)){margin-bottom:calc(-1*var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2);margin-top:calc(-1*var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([compact][vertical]:not([quiet])) ::slotted(:first-child){border-radius:0;margin-bottom:calc(-1*var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([compact][vertical]:not([quiet])) ::slotted(:last-child){border-radius:0;margin-bottom:0;margin-top:calc(-1*var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([justified]) ::slotted(*){flex:1}:host([dir][compact][vertical]) ::slotted(:nth-child(n)){margin-left:0;margin-right:0}:host([justified]) ::slotted(:not([role])),:host([vertical]) ::slotted(:not([role])){align-items:stretch;display:flex;flex-direction:column}:host([compact]:not([quiet])) ::slotted(:not([role])){--overriden-border-radius:0;--spectrum-actionbutton-s-quiet-textonly-border-radius:var(\n--overriden-border-radius\n);--spectrum-actionbutton-s-textonly-border-radius:var(\n--overriden-border-radius\n);--spectrum-actionbutton-m-quiet-textonly-border-radius:var(\n--overriden-border-radius\n);--spectrum-actionbutton-m-textonly-border-radius:var(\n--overriden-border-radius\n);--spectrum-actionbutton-l-quiet-textonly-border-radius:var(\n--overriden-border-radius\n);--spectrum-actionbutton-l-textonly-border-radius:var(\n--overriden-border-radius\n);--spectrum-actionbutton-xl-quiet-textonly-border-radius:var(\n--overriden-border-radius\n);--spectrum-actionbutton-xl-textonly-border-radius:var(\n--overriden-border-radius\n)}:host([compact][vertical]:not([quiet])) ::slotted(:not([role]):first-child){--overriden-border-radius:var(--spectrum-alias-border-radius-regular) var(--spectrum-alias-border-radius-regular) 0 0}:host([compact][vertical]:not([quiet])) ::slotted(:not([role]):last-child){--overriden-border-radius:0 0 var(--spectrum-alias-border-radius-regular) var(--spectrum-alias-border-radius-regular)}:host([dir=ltr][compact]:not([quiet]):not([vertical])) ::slotted(:not([role]):first-child){--overriden-border-radius:var(--spectrum-alias-border-radius-regular) 0 0 var(--spectrum-alias-border-radius-regular)}:host([dir=rtl][compact]:not([quiet]):not([vertical])) ::slotted(:not([role]):first-child){--overriden-border-radius:0 var(--spectrum-alias-border-radius-regular) var(--spectrum-alias-border-radius-regular) 0}:host([dir=ltr][compact]:not([quiet]):not([vertical])) ::slotted(:not([role]):last-child){--overriden-border-radius:0 var(--spectrum-alias-border-radius-regular) var(--spectrum-alias-border-radius-regular) 0}:host([dir=rtl][compact]:not([quiet]):not([vertical])) ::slotted(:not([role]):last-child){--overriden-border-radius:var(--spectrum-alias-border-radius-regular) 0 0 var(--spectrum-alias-border-radius-regular)}\n`;\nexport default styles;"]}
|
|
1
|
+
{"version":3,"file":"action-group.css.js","sourceRoot":"","sources":["action-group.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyHjB,CAAC;AACF,eAAe,MAAM,CAAC","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-actiongroup-button-gap-reset:0;--spectrum-actiongroup-quiet-compact-button-gap:var(\n--spectrum-global-dimension-size-25\n)}:host{display:flex;flex-wrap:wrap}::slotted(*){flex-shrink:0}:host(:not([vertical]):not([compact])){margin-top:calc(var(\n--spectrum-actiongroup-button-gap-y,\nvar(--spectrum-global-dimension-size-100)\n)*-1)}:host(:not([vertical]):not([compact])) ::slotted(*){flex-shrink:0;margin-top:var(\n--spectrum-actiongroup-button-gap-y,var(--spectrum-global-dimension-size-100)\n)}:host([dir=ltr]:not([vertical]):not([compact])) ::slotted(:not(:last-child)){margin-right:var(\n--spectrum-actiongroup-button-gap-x,var(--spectrum-global-dimension-size-100)\n)}:host([dir=rtl]:not([vertical]):not([compact])) ::slotted(:not(:last-child)){margin-left:var(\n--spectrum-actiongroup-button-gap-x,var(--spectrum-global-dimension-size-100)\n)}:host([vertical]){display:inline-flex;flex-direction:column}:host([dir=ltr][vertical]) ::slotted(:not(:first-child)){margin-left:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([dir=rtl][vertical]) ::slotted(:not(:first-child)){margin-right:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([vertical]) ::slotted(:not(:first-child)){margin-top:var(\n--spectrum-actiongroup-button-gap-y,var(--spectrum-global-dimension-size-100)\n)}:host([dir=ltr][vertical][vertical]){margin-left:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([dir=rtl][vertical][vertical]){margin-right:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([vertical][vertical]){margin-top:var(\n--spectrum-actiongroup-button-gap-y,var(--spectrum-global-dimension-size-100)\n)}:host([dir=ltr][compact][quiet]) ::slotted(:not(:first-child)){margin-left:var(\n--spectrum-actiongroup-quiet-compact-button-gap\n)}:host([dir=rtl][compact][quiet]) ::slotted(:not(:first-child)){margin-right:var(\n--spectrum-actiongroup-quiet-compact-button-gap\n)}:host([compact][quiet]) ::slotted(:not(:first-child)){margin-top:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([dir=ltr][compact][quiet][vertical]) ::slotted(:not(:first-child)){margin-left:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([dir=rtl][compact][quiet][vertical]) ::slotted(:not(:first-child)){margin-right:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([compact][quiet][vertical]) ::slotted(:not(:first-child)){margin-top:var(\n--spectrum-actiongroup-quiet-compact-button-gap\n)}:host([compact]:not([quiet])){flex-wrap:nowrap}:host([compact]:not([quiet])) ::slotted(*){border-radius:0;position:relative;z-index:0}:host([dir=ltr][compact]:not([quiet])) ::slotted(:first-child){border-top-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:first-child){border-bottom-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){border-bottom-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:first-child){margin-right:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){margin-left:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){border-top-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){border-top-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){margin-left:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){margin-right:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){margin-right:0}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){margin-left:0}:host([compact]:not([quiet])) ::slotted([selected]){z-index:1}:host([compact]:not([quiet])) ::slotted(:hover){z-index:2}:host([compact]:not([quiet])) ::slotted(.focus-visible){z-index:3}:host([compact]:not([quiet])) ::slotted(:focus-visible){z-index:3}:host([dir=ltr][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-left:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-right:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-right:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-left:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([compact][vertical]:not([quiet])) ::slotted(*){border-radius:0}:host([compact][vertical]:not([quiet])) ::slotted(:not(:first-child)){margin-bottom:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2);margin-top:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([compact][vertical]:not([quiet])) ::slotted(:first-child){border-radius:0;margin-bottom:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([compact][vertical]:not([quiet])) ::slotted(:last-child){border-radius:0;margin-bottom:0;margin-top:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([justified]) ::slotted(*){flex:1}:host([dir][compact][vertical]) ::slotted(:nth-child(n)){margin-left:0;margin-right:0}:host([justified]) ::slotted(:not([role])),:host([vertical]) ::slotted(:not([role])){align-items:stretch;display:flex;flex-direction:column}:host([compact]:not([quiet])) ::slotted(:not([role])){--overriden-border-radius:0;--spectrum-actionbutton-s-quiet-textonly-border-radius:var(\n--overriden-border-radius\n);--spectrum-actionbutton-s-textonly-border-radius:var(\n--overriden-border-radius\n);--spectrum-actionbutton-m-quiet-textonly-border-radius:var(\n--overriden-border-radius\n);--spectrum-actionbutton-m-textonly-border-radius:var(\n--overriden-border-radius\n);--spectrum-actionbutton-l-quiet-textonly-border-radius:var(\n--overriden-border-radius\n);--spectrum-actionbutton-l-textonly-border-radius:var(\n--overriden-border-radius\n);--spectrum-actionbutton-xl-quiet-textonly-border-radius:var(\n--overriden-border-radius\n);--spectrum-actionbutton-xl-textonly-border-radius:var(\n--overriden-border-radius\n)}:host([compact][vertical]:not([quiet])) ::slotted(:not([role]):first-child){--overriden-border-radius:var(--spectrum-alias-border-radius-regular) var(--spectrum-alias-border-radius-regular) 0 0}:host([compact][vertical]:not([quiet])) ::slotted(:not([role]):last-child){--overriden-border-radius:0 0 var(--spectrum-alias-border-radius-regular) var(--spectrum-alias-border-radius-regular)}:host([dir=ltr][compact]:not([quiet]):not([vertical])) ::slotted(:not([role]):first-child){--overriden-border-radius:var(--spectrum-alias-border-radius-regular) 0 0 var(--spectrum-alias-border-radius-regular)}:host([dir=rtl][compact]:not([quiet]):not([vertical])) ::slotted(:not([role]):first-child){--overriden-border-radius:0 var(--spectrum-alias-border-radius-regular) var(--spectrum-alias-border-radius-regular) 0}:host([dir=ltr][compact]:not([quiet]):not([vertical])) ::slotted(:not([role]):last-child){--overriden-border-radius:0 var(--spectrum-alias-border-radius-regular) var(--spectrum-alias-border-radius-regular) 0}:host([dir=rtl][compact]:not([quiet]):not([vertical])) ::slotted(:not([role]):last-child){--overriden-border-radius:var(--spectrum-alias-border-radius-regular) 0 0 var(--spectrum-alias-border-radius-regular)}\n`;\nexport default styles;"]}
|
|
@@ -13,7 +13,10 @@ import { css } from '@spectrum-web-components/base';
|
|
|
13
13
|
const styles = css `
|
|
14
14
|
:host{--spectrum-actiongroup-button-gap-reset:0;--spectrum-actiongroup-quiet-compact-button-gap:var(
|
|
15
15
|
--spectrum-global-dimension-size-25
|
|
16
|
-
)}:host{display:flex;flex-wrap:wrap}::slotted(*){flex-shrink:0}:host(:not([vertical]):not([compact])){margin-top:calc(
|
|
16
|
+
)}:host{display:flex;flex-wrap:wrap}::slotted(*){flex-shrink:0}:host(:not([vertical]):not([compact])){margin-top:calc(var(
|
|
17
|
+
--spectrum-actiongroup-button-gap-y,
|
|
18
|
+
var(--spectrum-global-dimension-size-100)
|
|
19
|
+
)*-1)}:host(:not([vertical]):not([compact])) ::slotted(*){flex-shrink:0;margin-top:var(
|
|
17
20
|
--spectrum-actiongroup-button-gap-y,var(--spectrum-global-dimension-size-100)
|
|
18
21
|
)}:host([dir=ltr]:not([vertical]):not([compact])) ::slotted(:not(:last-child)){margin-right:var(
|
|
19
22
|
--spectrum-actiongroup-button-gap-x,var(--spectrum-global-dimension-size-100)
|
|
@@ -51,13 +54,13 @@ const styles = css `
|
|
|
51
54
|
--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)
|
|
52
55
|
)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){border-bottom-right-radius:var(
|
|
53
56
|
--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)
|
|
54
|
-
)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:first-child){margin-right:calc(
|
|
57
|
+
)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:first-child){margin-right:calc(var(
|
|
55
58
|
--spectrum-actionbutton-m-texticon-border-size,
|
|
56
59
|
var(--spectrum-alias-border-size-thin)
|
|
57
|
-
)/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){margin-left:calc(
|
|
60
|
+
)*-1/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){margin-left:calc(var(
|
|
58
61
|
--spectrum-actionbutton-m-texticon-border-size,
|
|
59
62
|
var(--spectrum-alias-border-size-thin)
|
|
60
|
-
)/2)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){border-top-right-radius:var(
|
|
63
|
+
)*-1/2)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){border-top-right-radius:var(
|
|
61
64
|
--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)
|
|
62
65
|
)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){border-top-left-radius:var(
|
|
63
66
|
--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)
|
|
@@ -65,31 +68,31 @@ var(--spectrum-alias-border-size-thin)
|
|
|
65
68
|
--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)
|
|
66
69
|
)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(
|
|
67
70
|
--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)
|
|
68
|
-
)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){margin-left:calc(
|
|
71
|
+
)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){margin-left:calc(var(
|
|
69
72
|
--spectrum-actionbutton-m-texticon-border-size,
|
|
70
73
|
var(--spectrum-alias-border-size-thin)
|
|
71
|
-
)/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){margin-right:calc(
|
|
74
|
+
)*-1/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){margin-right:calc(var(
|
|
72
75
|
--spectrum-actionbutton-m-texticon-border-size,
|
|
73
76
|
var(--spectrum-alias-border-size-thin)
|
|
74
|
-
)/2)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){margin-right:0}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){margin-left:0}:host([compact]:not([quiet])) ::slotted([selected]){z-index:1}:host([compact]:not([quiet])) ::slotted(:hover){z-index:2}:host([compact]:not([quiet])) ::slotted(.focus-visible){z-index:3}:host([compact]:not([quiet])) ::slotted(:focus-visible){z-index:3}:host([dir=ltr][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-left:calc(
|
|
77
|
+
)*-1/2)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){margin-right:0}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){margin-left:0}:host([compact]:not([quiet])) ::slotted([selected]){z-index:1}:host([compact]:not([quiet])) ::slotted(:hover){z-index:2}:host([compact]:not([quiet])) ::slotted(.focus-visible){z-index:3}:host([compact]:not([quiet])) ::slotted(:focus-visible){z-index:3}:host([dir=ltr][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-left:calc(var(
|
|
75
78
|
--spectrum-actionbutton-m-texticon-border-size,
|
|
76
79
|
var(--spectrum-alias-border-size-thin)
|
|
77
|
-
)/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-right:calc(
|
|
80
|
+
)*-1/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-right:calc(var(
|
|
78
81
|
--spectrum-actionbutton-m-texticon-border-size,
|
|
79
82
|
var(--spectrum-alias-border-size-thin)
|
|
80
|
-
)/2)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-right:calc(
|
|
83
|
+
)*-1/2)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-right:calc(var(
|
|
81
84
|
--spectrum-actionbutton-m-texticon-border-size,
|
|
82
85
|
var(--spectrum-alias-border-size-thin)
|
|
83
|
-
)/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-left:calc(
|
|
86
|
+
)*-1/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-left:calc(var(
|
|
84
87
|
--spectrum-actionbutton-m-texticon-border-size,
|
|
85
88
|
var(--spectrum-alias-border-size-thin)
|
|
86
|
-
)/2)}:host([compact][vertical]:not([quiet])) ::slotted(*){border-radius:0}:host([compact][vertical]:not([quiet])) ::slotted(:not(:first-child)){margin-bottom:calc(
|
|
89
|
+
)*-1/2)}:host([compact][vertical]:not([quiet])) ::slotted(*){border-radius:0}:host([compact][vertical]:not([quiet])) ::slotted(:not(:first-child)){margin-bottom:calc(var(
|
|
87
90
|
--spectrum-actionbutton-m-texticon-border-size,
|
|
88
91
|
var(--spectrum-alias-border-size-thin)
|
|
89
|
-
)/2);margin-top:calc(
|
|
92
|
+
)*-1/2);margin-top:calc(var(
|
|
90
93
|
--spectrum-actionbutton-m-texticon-border-size,
|
|
91
94
|
var(--spectrum-alias-border-size-thin)
|
|
92
|
-
)/2)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-left-radius:var(
|
|
95
|
+
)*-1/2)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-left-radius:var(
|
|
93
96
|
--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)
|
|
94
97
|
)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(
|
|
95
98
|
--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)
|
|
@@ -97,10 +100,10 @@ var(--spectrum-alias-border-size-thin)
|
|
|
97
100
|
--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)
|
|
98
101
|
)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-left-radius:var(
|
|
99
102
|
--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)
|
|
100
|
-
)}:host([compact][vertical]:not([quiet])) ::slotted(:first-child){border-radius:0;margin-bottom:calc(
|
|
103
|
+
)}:host([compact][vertical]:not([quiet])) ::slotted(:first-child){border-radius:0;margin-bottom:calc(var(
|
|
101
104
|
--spectrum-actionbutton-m-texticon-border-size,
|
|
102
105
|
var(--spectrum-alias-border-size-thin)
|
|
103
|
-
)/2)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(
|
|
106
|
+
)*-1/2)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(
|
|
104
107
|
--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)
|
|
105
108
|
)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(
|
|
106
109
|
--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)
|
|
@@ -108,10 +111,10 @@ var(--spectrum-alias-border-size-thin)
|
|
|
108
111
|
--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)
|
|
109
112
|
)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(
|
|
110
113
|
--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)
|
|
111
|
-
)}:host([compact][vertical]:not([quiet])) ::slotted(:last-child){border-radius:0;margin-bottom:0;margin-top:calc(
|
|
114
|
+
)}:host([compact][vertical]:not([quiet])) ::slotted(:last-child){border-radius:0;margin-bottom:0;margin-top:calc(var(
|
|
112
115
|
--spectrum-actionbutton-m-texticon-border-size,
|
|
113
116
|
var(--spectrum-alias-border-size-thin)
|
|
114
|
-
)/2)}:host([justified]) ::slotted(*){flex:1}
|
|
117
|
+
)*-1/2)}:host([justified]) ::slotted(*){flex:1}
|
|
115
118
|
`;
|
|
116
119
|
export default styles;
|
|
117
120
|
//# sourceMappingURL=spectrum-action-group.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"spectrum-action-group.css.js","sourceRoot":"","sources":["spectrum-action-group.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"spectrum-action-group.css.js","sourceRoot":"","sources":["spectrum-action-group.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyGjB,CAAC;AACF,eAAe,MAAM,CAAC","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-actiongroup-button-gap-reset:0;--spectrum-actiongroup-quiet-compact-button-gap:var(\n--spectrum-global-dimension-size-25\n)}:host{display:flex;flex-wrap:wrap}::slotted(*){flex-shrink:0}:host(:not([vertical]):not([compact])){margin-top:calc(var(\n--spectrum-actiongroup-button-gap-y,\nvar(--spectrum-global-dimension-size-100)\n)*-1)}:host(:not([vertical]):not([compact])) ::slotted(*){flex-shrink:0;margin-top:var(\n--spectrum-actiongroup-button-gap-y,var(--spectrum-global-dimension-size-100)\n)}:host([dir=ltr]:not([vertical]):not([compact])) ::slotted(:not(:last-child)){margin-right:var(\n--spectrum-actiongroup-button-gap-x,var(--spectrum-global-dimension-size-100)\n)}:host([dir=rtl]:not([vertical]):not([compact])) ::slotted(:not(:last-child)){margin-left:var(\n--spectrum-actiongroup-button-gap-x,var(--spectrum-global-dimension-size-100)\n)}:host([vertical]){display:inline-flex;flex-direction:column}:host([dir=ltr][vertical]) ::slotted(:not(:first-child)){margin-left:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([dir=rtl][vertical]) ::slotted(:not(:first-child)){margin-right:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([vertical]) ::slotted(:not(:first-child)){margin-top:var(\n--spectrum-actiongroup-button-gap-y,var(--spectrum-global-dimension-size-100)\n)}:host([dir=ltr][vertical][vertical]){margin-left:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([dir=rtl][vertical][vertical]){margin-right:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([vertical][vertical]){margin-top:var(\n--spectrum-actiongroup-button-gap-y,var(--spectrum-global-dimension-size-100)\n)}:host([dir=ltr][compact][quiet]) ::slotted(:not(:first-child)){margin-left:var(\n--spectrum-actiongroup-quiet-compact-button-gap\n)}:host([dir=rtl][compact][quiet]) ::slotted(:not(:first-child)){margin-right:var(\n--spectrum-actiongroup-quiet-compact-button-gap\n)}:host([compact][quiet]) ::slotted(:not(:first-child)){margin-top:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([dir=ltr][compact][quiet][vertical]) ::slotted(:not(:first-child)){margin-left:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([dir=rtl][compact][quiet][vertical]) ::slotted(:not(:first-child)){margin-right:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([compact][quiet][vertical]) ::slotted(:not(:first-child)){margin-top:var(\n--spectrum-actiongroup-quiet-compact-button-gap\n)}:host([compact]:not([quiet])){flex-wrap:nowrap}:host([compact]:not([quiet])) ::slotted(*){border-radius:0;position:relative;z-index:0}:host([dir=ltr][compact]:not([quiet])) ::slotted(:first-child){border-top-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:first-child){border-bottom-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){border-bottom-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:first-child){margin-right:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){margin-left:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){border-top-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){border-top-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){margin-left:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){margin-right:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){margin-right:0}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){margin-left:0}:host([compact]:not([quiet])) ::slotted([selected]){z-index:1}:host([compact]:not([quiet])) ::slotted(:hover){z-index:2}:host([compact]:not([quiet])) ::slotted(.focus-visible){z-index:3}:host([compact]:not([quiet])) ::slotted(:focus-visible){z-index:3}:host([dir=ltr][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-left:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-right:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-right:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-left:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([compact][vertical]:not([quiet])) ::slotted(*){border-radius:0}:host([compact][vertical]:not([quiet])) ::slotted(:not(:first-child)){margin-bottom:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2);margin-top:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([compact][vertical]:not([quiet])) ::slotted(:first-child){border-radius:0;margin-bottom:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([compact][vertical]:not([quiet])) ::slotted(:last-child){border-radius:0;margin-bottom:0;margin-top:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([justified]) ::slotted(*){flex:1}\n`;\nexport default styles;"]}
|
|
@@ -102,6 +102,13 @@ export default {
|
|
|
102
102
|
},
|
|
103
103
|
};
|
|
104
104
|
const template = (args) => {
|
|
105
|
+
requestAnimationFrame(() => {
|
|
106
|
+
const group = document.querySelector('sp-action-group');
|
|
107
|
+
const selectedDiv = group.nextElementSibling;
|
|
108
|
+
if (selectedDiv) {
|
|
109
|
+
selectedDiv.textContent = `Selected: ${JSON.stringify(group.selected)}`;
|
|
110
|
+
}
|
|
111
|
+
});
|
|
105
112
|
return html `
|
|
106
113
|
<sp-action-group
|
|
107
114
|
label="Favorite Color"
|
|
@@ -134,11 +141,11 @@ const template = (args) => {
|
|
|
134
141
|
<sp-tooltip slot="hover-content">The sun at noon.</sp-tooltip>
|
|
135
142
|
</overlay-trigger>
|
|
136
143
|
</sp-action-group>
|
|
137
|
-
${args.selects
|
|
138
|
-
? html
|
|
139
|
-
: html `
|
|
144
|
+
${!!args.selects
|
|
145
|
+
? html `
|
|
140
146
|
<div>Selected:</div>
|
|
141
|
-
`
|
|
147
|
+
`
|
|
148
|
+
: html ``}
|
|
142
149
|
`;
|
|
143
150
|
};
|
|
144
151
|
export const selectsSingle = (args) => template(args);
|
|
@@ -158,11 +165,13 @@ justified.args = {
|
|
|
158
165
|
compact: true,
|
|
159
166
|
emphasized: true,
|
|
160
167
|
justified: true,
|
|
168
|
+
selects: undefined,
|
|
161
169
|
};
|
|
162
170
|
export const vertical = (args) => template(args);
|
|
163
171
|
vertical.args = {
|
|
164
172
|
compact: true,
|
|
165
173
|
emphasized: true,
|
|
166
174
|
vertical: true,
|
|
175
|
+
selects: undefined,
|
|
167
176
|
};
|
|
168
177
|
//# sourceMappingURL=action-group-tooltip.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"action-group-tooltip.stories.js","sourceRoot":"","sources":["action-group-tooltip.stories.ts"],"names":[],"mappings":"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","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { html, TemplateResult } from '@spectrum-web-components/base';\nimport { spreadProps } from '../../../test/lit-helpers.js';\n\nimport '../sp-action-group.js';\nimport '@spectrum-web-components/action-button/sp-action-button.js';\nimport '@spectrum-web-components/overlay/overlay-trigger.js';\nimport '@spectrum-web-components/tooltip/sp-tooltip.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-properties.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-info.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-view-all-tags.js';\nimport { ActionGroup } from '../src/ActionGroup.js';\n\nexport default {\n title: 'Action Group/Tooltips',\n component: 'sp-action-group',\n args: {\n compact: false,\n emphasized: false,\n justified: false,\n quiet: false,\n vertical: false,\n selects: 'none',\n },\n argTypes: {\n compact: {\n name: 'compact',\n description:\n 'Visually joins the buttons together to clarify their relationship to one another.',\n type: { name: 'boolean', required: false },\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n emphasized: {\n name: 'emphasized',\n type: { name: 'boolean', required: false },\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n justified: {\n name: 'justified',\n description:\n 'Aligns the action group items to use all the available space on that line.',\n type: { name: 'boolean', required: false },\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n quiet: {\n name: 'quiet',\n type: { name: 'boolean', required: false },\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n vertical: {\n name: 'vertical',\n description: 'Changes the orientation of the action group.',\n type: { name: 'boolean', required: false },\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n selects: {\n name: 'selects',\n description:\n 'Whether the elements selects its children and how many it can select at a time.',\n table: {\n defaultValue: { summary: '' },\n },\n control: {\n type: 'inline-radio',\n options: ['none', 'single', 'multiple'],\n },\n },\n },\n};\n\ninterface Properties {\n compact?: boolean;\n emphasized?: boolean;\n justified?: boolean;\n quiet?: boolean;\n vertical?: boolean;\n selects?: 'none' | 'single' | 'multiple';\n [prop: string]: unknown;\n}\n\nconst template = (args: Properties): TemplateResult => {\n return html`\n <sp-action-group\n label=\"Favorite Color\"\n ...=${spreadProps(args)}\n @change=${({ target }: Event & { target: ActionGroup }) => {\n const next = target.nextElementSibling as HTMLDivElement;\n next.textContent = `Selected: ${JSON.stringify(\n target.selected\n )}`;\n }}\n >\n <overlay-trigger>\n <sp-action-button slot=\"trigger\">Red</sp-action-button>\n <sp-tooltip slot=\"hover-content\">\n This is a cool color.\n </sp-tooltip>\n </overlay-trigger>\n <overlay-trigger>\n <sp-action-button slot=\"trigger\">Green</sp-action-button>\n <sp-tooltip slot=\"hover-content\">\n You wouldn't be wrong.\n </sp-tooltip>\n </overlay-trigger>\n <overlay-trigger>\n <sp-action-button slot=\"trigger\" value=\"blue\" selected>\n Blue\n </sp-action-button>\n <sp-tooltip slot=\"hover-content\">The sky in spring.</sp-tooltip>\n </overlay-trigger>\n <overlay-trigger>\n <sp-action-button slot=\"trigger\">Yellow</sp-action-button>\n <sp-tooltip slot=\"hover-content\">The sun at noon.</sp-tooltip>\n </overlay-trigger>\n </sp-action-group>\n ${args.selects == 'none'\n ? html``\n : html`\n <div>Selected:</div>\n `}\n `;\n};\n\nexport const selectsSingle = (args: Properties): TemplateResult =>\n template(args);\nselectsSingle.args = {\n compact: true,\n emphasized: true,\n selects: 'single',\n};\n\nexport const selectsMultiple = (args: Properties): TemplateResult =>\n template(args);\nselectsMultiple.args = {\n compact: true,\n emphasized: true,\n selects: 'multiple',\n};\n\nexport const justified = (args: Properties): TemplateResult => template(args);\njustified.args = {\n compact: true,\n emphasized: true,\n justified: true,\n};\n\nexport const vertical = (args: Properties): TemplateResult => template(args);\nvertical.args = {\n compact: true,\n emphasized: true,\n vertical: true,\n};\n"]}
|
|
1
|
+
{"version":3,"file":"action-group-tooltip.stories.js","sourceRoot":"","sources":["action-group-tooltip.stories.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AAEF,OAAO,EAAE,IAAI,EAAkB,MAAM,+BAA+B,CAAC;AACrE,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAE3D,OAAO,uBAAuB,CAAC;AAC/B,OAAO,4DAA4D,CAAC;AACpE,OAAO,qDAAqD,CAAC;AAC7D,OAAO,gDAAgD,CAAC;AACxD,OAAO,qEAAqE,CAAC;AAC7E,OAAO,+DAA+D,CAAC;AACvE,OAAO,wEAAwE,CAAC;AAGhF,eAAe;IACX,KAAK,EAAE,uBAAuB;IAC9B,SAAS,EAAE,iBAAiB;IAC5B,IAAI,EAAE;QACF,OAAO,EAAE,KAAK;QACd,UAAU,EAAE,KAAK;QACjB,SAAS,EAAE,KAAK;QAChB,KAAK,EAAE,KAAK;QACZ,QAAQ,EAAE,KAAK;QACf,OAAO,EAAE,MAAM;KAClB;IACD,QAAQ,EAAE;QACN,OAAO,EAAE;YACL,IAAI,EAAE,SAAS;YACf,WAAW,EACP,mFAAmF;YACvF,IAAI,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE;YAC1C,KAAK,EAAE;gBACH,IAAI,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;gBAC5B,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;aACnC;YACD,OAAO,EAAE;gBACL,IAAI,EAAE,SAAS;aAClB;SACJ;QACD,UAAU,EAAE;YACR,IAAI,EAAE,YAAY;YAClB,IAAI,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE;YAC1C,KAAK,EAAE;gBACH,IAAI,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;gBAC5B,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;aACnC;YACD,OAAO,EAAE;gBACL,IAAI,EAAE,SAAS;aAClB;SACJ;QACD,SAAS,EAAE;YACP,IAAI,EAAE,WAAW;YACjB,WAAW,EACP,4EAA4E;YAChF,IAAI,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE;YAC1C,KAAK,EAAE;gBACH,IAAI,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;gBAC5B,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;aACnC;YACD,OAAO,EAAE;gBACL,IAAI,EAAE,SAAS;aAClB;SACJ;QACD,KAAK,EAAE;YACH,IAAI,EAAE,OAAO;YACb,IAAI,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE;YAC1C,KAAK,EAAE;gBACH,IAAI,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;gBAC5B,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;aACnC;YACD,OAAO,EAAE;gBACL,IAAI,EAAE,SAAS;aAClB;SACJ;QACD,QAAQ,EAAE;YACN,IAAI,EAAE,UAAU;YAChB,WAAW,EAAE,8CAA8C;YAC3D,IAAI,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE;YAC1C,KAAK,EAAE;gBACH,IAAI,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;gBAC5B,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;aACnC;YACD,OAAO,EAAE;gBACL,IAAI,EAAE,SAAS;aAClB;SACJ;QACD,OAAO,EAAE;YACL,IAAI,EAAE,SAAS;YACf,WAAW,EACP,iFAAiF;YACrF,KAAK,EAAE;gBACH,YAAY,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE;aAChC;YACD,OAAO,EAAE;gBACL,IAAI,EAAE,cAAc;gBACpB,OAAO,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,UAAU,CAAC;aAC1C;SACJ;KACJ;CACJ,CAAC;AAYF,MAAM,QAAQ,GAAG,CAAC,IAAgB,EAAkB,EAAE;IAClD,qBAAqB,CAAC,GAAG,EAAE;QACvB,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,iBAAiB,CAAgB,CAAC;QACvE,MAAM,WAAW,GAAG,KAAK,CAAC,kBAAkB,CAAC;QAC7C,IAAI,WAAW,EAAE;YACb,WAAW,CAAC,WAAW,GAAG,aAAa,IAAI,CAAC,SAAS,CACjD,KAAK,CAAC,QAAQ,CACjB,EAAE,CAAC;SACP;IACL,CAAC,CAAC,CAAC;IACH,OAAO,IAAI,CAAA;;;kBAGG,WAAW,CAAC,IAAI,CAAC;sBACb,CAAC,EAAE,MAAM,EAAmC,EAAE,EAAE;QACtD,MAAM,IAAI,GAAG,MAAM,CAAC,kBAAoC,CAAC;QACzD,IAAI,CAAC,WAAW,GAAG,aAAa,IAAI,CAAC,SAAS,CAC1C,MAAM,CAAC,QAAQ,CAClB,EAAE,CAAC;IACR,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;UAyBH,CAAC,CAAC,IAAI,CAAC,OAAO;QACZ,CAAC,CAAC,IAAI,CAAA;;eAEH;QACH,CAAC,CAAC,IAAI,CAAA,EAAE;KACf,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,IAAgB,EAAkB,EAAE,CAC9D,QAAQ,CAAC,IAAI,CAAC,CAAC;AACnB,aAAa,CAAC,IAAI,GAAG;IACjB,OAAO,EAAE,IAAI;IACb,UAAU,EAAE,IAAI;IAChB,OAAO,EAAE,QAAQ;CACpB,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,IAAgB,EAAkB,EAAE,CAChE,QAAQ,CAAC,IAAI,CAAC,CAAC;AACnB,eAAe,CAAC,IAAI,GAAG;IACnB,OAAO,EAAE,IAAI;IACb,UAAU,EAAE,IAAI;IAChB,OAAO,EAAE,UAAU;CACtB,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,IAAgB,EAAkB,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;AAC9E,SAAS,CAAC,IAAI,GAAG;IACb,OAAO,EAAE,IAAI;IACb,UAAU,EAAE,IAAI;IAChB,SAAS,EAAE,IAAI;IACf,OAAO,EAAE,SAAS;CACrB,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,IAAgB,EAAkB,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;AAC7E,QAAQ,CAAC,IAAI,GAAG;IACZ,OAAO,EAAE,IAAI;IACb,UAAU,EAAE,IAAI;IAChB,QAAQ,EAAE,IAAI;IACd,OAAO,EAAE,SAAS;CACrB,CAAC","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { html, TemplateResult } from '@spectrum-web-components/base';\nimport { spreadProps } from '../../../test/lit-helpers.js';\n\nimport '../sp-action-group.js';\nimport '@spectrum-web-components/action-button/sp-action-button.js';\nimport '@spectrum-web-components/overlay/overlay-trigger.js';\nimport '@spectrum-web-components/tooltip/sp-tooltip.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-properties.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-info.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-view-all-tags.js';\nimport { ActionGroup } from '../src/ActionGroup.js';\n\nexport default {\n title: 'Action Group/Tooltips',\n component: 'sp-action-group',\n args: {\n compact: false,\n emphasized: false,\n justified: false,\n quiet: false,\n vertical: false,\n selects: 'none',\n },\n argTypes: {\n compact: {\n name: 'compact',\n description:\n 'Visually joins the buttons together to clarify their relationship to one another.',\n type: { name: 'boolean', required: false },\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n emphasized: {\n name: 'emphasized',\n type: { name: 'boolean', required: false },\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n justified: {\n name: 'justified',\n description:\n 'Aligns the action group items to use all the available space on that line.',\n type: { name: 'boolean', required: false },\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n quiet: {\n name: 'quiet',\n type: { name: 'boolean', required: false },\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n vertical: {\n name: 'vertical',\n description: 'Changes the orientation of the action group.',\n type: { name: 'boolean', required: false },\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n selects: {\n name: 'selects',\n description:\n 'Whether the elements selects its children and how many it can select at a time.',\n table: {\n defaultValue: { summary: '' },\n },\n control: {\n type: 'inline-radio',\n options: ['none', 'single', 'multiple'],\n },\n },\n },\n};\n\ninterface Properties {\n compact?: boolean;\n emphasized?: boolean;\n justified?: boolean;\n quiet?: boolean;\n vertical?: boolean;\n selects?: 'none' | 'single' | 'multiple';\n [prop: string]: unknown;\n}\n\nconst template = (args: Properties): TemplateResult => {\n requestAnimationFrame(() => {\n const group = document.querySelector('sp-action-group') as ActionGroup;\n const selectedDiv = group.nextElementSibling;\n if (selectedDiv) {\n selectedDiv.textContent = `Selected: ${JSON.stringify(\n group.selected\n )}`;\n }\n });\n return html`\n <sp-action-group\n label=\"Favorite Color\"\n ...=${spreadProps(args)}\n @change=${({ target }: Event & { target: ActionGroup }) => {\n const next = target.nextElementSibling as HTMLDivElement;\n next.textContent = `Selected: ${JSON.stringify(\n target.selected\n )}`;\n }}\n >\n <overlay-trigger>\n <sp-action-button slot=\"trigger\">Red</sp-action-button>\n <sp-tooltip slot=\"hover-content\">\n This is a cool color.\n </sp-tooltip>\n </overlay-trigger>\n <overlay-trigger>\n <sp-action-button slot=\"trigger\">Green</sp-action-button>\n <sp-tooltip slot=\"hover-content\">\n You wouldn't be wrong.\n </sp-tooltip>\n </overlay-trigger>\n <overlay-trigger>\n <sp-action-button slot=\"trigger\" value=\"blue\" selected>\n Blue\n </sp-action-button>\n <sp-tooltip slot=\"hover-content\">The sky in spring.</sp-tooltip>\n </overlay-trigger>\n <overlay-trigger>\n <sp-action-button slot=\"trigger\">Yellow</sp-action-button>\n <sp-tooltip slot=\"hover-content\">The sun at noon.</sp-tooltip>\n </overlay-trigger>\n </sp-action-group>\n ${!!args.selects\n ? html`\n <div>Selected:</div>\n `\n : html``}\n `;\n};\n\nexport const selectsSingle = (args: Properties): TemplateResult =>\n template(args);\nselectsSingle.args = {\n compact: true,\n emphasized: true,\n selects: 'single',\n};\n\nexport const selectsMultiple = (args: Properties): TemplateResult =>\n template(args);\nselectsMultiple.args = {\n compact: true,\n emphasized: true,\n selects: 'multiple',\n};\n\nexport const justified = (args: Properties): TemplateResult => template(args);\njustified.args = {\n compact: true,\n emphasized: true,\n justified: true,\n selects: undefined,\n};\n\nexport const vertical = (args: Properties): TemplateResult => template(args);\nvertical.args = {\n compact: true,\n emphasized: true,\n vertical: true,\n selects: undefined,\n};\n"]}
|
|
@@ -113,8 +113,16 @@ function renderButtons(args) {
|
|
|
113
113
|
</sp-action-group>
|
|
114
114
|
`;
|
|
115
115
|
}
|
|
116
|
+
function displaySelectionState() {
|
|
117
|
+
const group = document.querySelector('sp-action-group');
|
|
118
|
+
const selectedDiv = group.nextElementSibling;
|
|
119
|
+
if (selectedDiv) {
|
|
120
|
+
selectedDiv.textContent = `Selected: ${JSON.stringify(group.selected)}`;
|
|
121
|
+
}
|
|
122
|
+
}
|
|
116
123
|
export const Default = (args) => renderButtons(args);
|
|
117
124
|
export const selectsSingle = (args) => {
|
|
125
|
+
requestAnimationFrame(displaySelectionState);
|
|
118
126
|
return html `
|
|
119
127
|
<sp-action-group
|
|
120
128
|
?compact=${args.compact}
|
|
@@ -138,6 +146,7 @@ export const selectsSingle = (args) => {
|
|
|
138
146
|
`;
|
|
139
147
|
};
|
|
140
148
|
export const selectsMultiple = (args) => {
|
|
149
|
+
requestAnimationFrame(displaySelectionState);
|
|
141
150
|
return html `
|
|
142
151
|
<sp-action-group
|
|
143
152
|
${spreadProps(args)}
|
|
@@ -191,6 +200,27 @@ export const selectsMultipleWithTooltips = (args) => {
|
|
|
191
200
|
<div>Selected:</div>
|
|
192
201
|
`;
|
|
193
202
|
};
|
|
203
|
+
export const selectsMultipleControlled = (args) => {
|
|
204
|
+
requestAnimationFrame(displaySelectionState);
|
|
205
|
+
return html `
|
|
206
|
+
<sp-action-group
|
|
207
|
+
${spreadProps(args)}
|
|
208
|
+
selects="multiple"
|
|
209
|
+
.selected=${['donuts', 'crepecakes']}
|
|
210
|
+
label="Favorite Dessert"
|
|
211
|
+
@change=${({ target }) => {
|
|
212
|
+
const next = target.nextElementSibling;
|
|
213
|
+
next.textContent = `Selected: ${JSON.stringify(target.selected)}`;
|
|
214
|
+
}}
|
|
215
|
+
>
|
|
216
|
+
<sp-action-button value="lavacakes">Lava Cakes</sp-action-button>
|
|
217
|
+
<sp-action-button value="donuts">Donuts</sp-action-button>
|
|
218
|
+
<sp-action-button value="crepecakes">Crepe Cake</sp-action-button>
|
|
219
|
+
<sp-action-button value="fruittarts">Fruit Tarts</sp-action-button>
|
|
220
|
+
</sp-action-group>
|
|
221
|
+
<div>Selected:</div>
|
|
222
|
+
`;
|
|
223
|
+
};
|
|
194
224
|
export const iconsOnly = (args) => renderIconButtons(args);
|
|
195
225
|
export const quietIconsOnly = (args) => renderIconButtons(args);
|
|
196
226
|
quietIconsOnly.args = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"action-group.stories.js","sourceRoot":"","sources":["action-group.stories.ts"],"names":[],"mappings":"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","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { html, TemplateResult } from '@spectrum-web-components/base';\nimport { spreadProps } from '../../../test/lit-helpers.js';\n\nimport '../sp-action-group.js';\nimport '@spectrum-web-components/action-button/sp-action-button.js';\nimport '@spectrum-web-components/overlay/overlay-trigger.js';\nimport '@spectrum-web-components/tooltip/sp-tooltip.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-properties.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-info.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-view-all-tags.js';\nimport { ActionGroup } from '../src/ActionGroup.js';\n\nexport default {\n title: 'Action Group',\n component: 'sp-action-group',\n args: {\n compact: false,\n emphasized: false,\n justified: false,\n quiet: false,\n vertical: false,\n },\n argTypes: {\n compact: {\n name: 'compact',\n description:\n 'Visually joins the buttons together to clarify their relationship to one another.',\n type: { name: 'boolean', required: false },\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n emphasized: {\n name: 'emphasized',\n type: { name: 'boolean', required: false },\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n justified: {\n name: 'justified',\n description:\n 'Aligns the action group items to use all the available space on that line.',\n type: { name: 'boolean', required: false },\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n quiet: {\n name: 'quiet',\n type: { name: 'boolean', required: false },\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n vertical: {\n name: 'vertical',\n description: 'Changes the orientation of the action group.',\n type: { name: 'boolean', required: false },\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n },\n};\n\ninterface Properties {\n compact?: boolean;\n emphasized?: boolean;\n justified?: boolean;\n quiet?: boolean;\n vertical?: boolean;\n [prop: string]: unknown;\n}\n\nfunction renderIconButtons(args: Properties): TemplateResult {\n return html`\n <sp-action-group ${spreadProps(args)}>\n <sp-action-button label=\"Properties\">\n <sp-icon-properties slot=\"icon\"></sp-icon-properties>\n </sp-action-button>\n <sp-action-button label=\"Info\">\n <sp-icon-info slot=\"icon\"></sp-icon-info>\n </sp-action-button>\n <sp-action-button label=\"View All Tags\">\n <sp-icon-view-all-tags slot=\"icon\"></sp-icon-view-all-tags>\n </sp-action-button>\n </sp-action-group>\n `;\n}\n\nfunction renderButtons(args: Properties): TemplateResult {\n return html`\n <sp-action-group ${spreadProps(args)}>\n <sp-action-button>Button 1</sp-action-button>\n <sp-action-button>Longer Button 2</sp-action-button>\n <sp-action-button>Short 3</sp-action-button>\n </sp-action-group>\n `;\n}\n\nexport const Default = (args: Properties): TemplateResult =>\n renderButtons(args);\n\nexport const selectsSingle = (args: Properties): TemplateResult => {\n return html`\n <sp-action-group\n ?compact=${args.compact}\n ?emphasized=${args.emphasized}\n ?quiet=${args.quiet}\n ?justified=${args.justified}\n ?vertical=${args.vertical}\n label=\"Favorite Color\"\n selects=\"single\"\n @change=${({ target }: Event & { target: ActionGroup }) => {\n const next = target.nextElementSibling as HTMLDivElement;\n next.textContent = `Selected: ${JSON.stringify(\n target.selected\n )}`;\n }}\n >\n <sp-action-button>Red</sp-action-button>\n <sp-action-button>Green</sp-action-button>\n <sp-action-button>Blue</sp-action-button>\n <sp-action-button selected>Yellow</sp-action-button>\n </sp-action-group>\n <div>Selected:</div>\n `;\n};\n\nexport const selectsMultiple = (args: Properties): TemplateResult => {\n return html`\n <sp-action-group\n ${spreadProps(args)}\n label=\"Favorite Colors\"\n selects=\"multiple\"\n @change=${({ target }: Event & { target: ActionGroup }) => {\n const next = target.nextElementSibling as HTMLDivElement;\n next.textContent = `Selected: ${JSON.stringify(\n target.selected\n )}`;\n }}\n >\n <sp-action-button>Red</sp-action-button>\n <sp-action-button selected>Green</sp-action-button>\n <sp-action-button selected>Blue</sp-action-button>\n <sp-action-button>Yellow</sp-action-button>\n </sp-action-group>\n <div>Selected:</div>\n `;\n};\n\nexport const selectsMultipleWithTooltips = (\n args: Properties\n): TemplateResult => {\n return html`\n <sp-action-group\n ${spreadProps(args)}\n label=\"Favorite Color\"\n selects=\"multiple\"\n @change=${({ target }: Event & { target: ActionGroup }) => {\n const next = target.nextElementSibling as HTMLDivElement;\n next.textContent = `Selected: ${JSON.stringify(\n target.selected\n )}`;\n }}\n >\n <overlay-trigger>\n <sp-action-button slot=\"trigger\">Red</sp-action-button>\n <sp-tooltip slot=\"hover-content\">\n This is a cool color.\n </sp-tooltip>\n </overlay-trigger>\n <overlay-trigger>\n <sp-action-button slot=\"trigger\">Green</sp-action-button>\n <sp-tooltip slot=\"hover-content\">\n You wouldn't be wrong.\n </sp-tooltip>\n </overlay-trigger>\n <overlay-trigger>\n <sp-action-button slot=\"trigger\">Blue</sp-action-button>\n <sp-tooltip slot=\"hover-content\">The sky in spring.</sp-tooltip>\n </overlay-trigger>\n <overlay-trigger>\n <sp-action-button slot=\"trigger\">Yellow</sp-action-button>\n <sp-tooltip slot=\"hover-content\">The sun at noon.</sp-tooltip>\n </overlay-trigger>\n </sp-action-group>\n <div>Selected:</div>\n `;\n};\n\nexport const iconsOnly = (args: Properties): TemplateResult =>\n renderIconButtons(args);\n\nexport const quietIconsOnly = (args: Properties): TemplateResult =>\n renderIconButtons(args);\nquietIconsOnly.args = {\n quiet: true,\n};\n\nexport const compact = (args: Properties): TemplateResult =>\n renderButtons(args);\ncompact.args = {\n compact: true,\n};\n\nexport const compactIconsOnly = (args: Properties): TemplateResult =>\n renderIconButtons(args);\ncompactIconsOnly.args = {\n compact: true,\n};\n\nexport const compactQuietIconsOnly = (args: Properties): TemplateResult =>\n renderIconButtons(args);\ncompactQuietIconsOnly.args = {\n compact: true,\n quiet: true,\n};\n\nexport const vertical = (args: Properties): TemplateResult =>\n renderButtons(args);\nvertical.args = {\n vertical: true,\n};\n\nexport const verticalIconsOnly = (args: Properties): TemplateResult =>\n renderIconButtons(args);\nverticalIconsOnly.args = {\n vertical: true,\n};\n\nexport const verticalQuietIconsOnly = (args: Properties): TemplateResult =>\n renderIconButtons(args);\nverticalQuietIconsOnly.args = {\n quiet: true,\n vertical: true,\n};\n\nexport const compactVertical = (args: Properties): TemplateResult =>\n renderButtons(args);\ncompactVertical.args = {\n compact: true,\n vertical: true,\n};\n\nexport const compactVerticalIconsOnly = (args: Properties): TemplateResult =>\n renderIconButtons(args);\ncompactVerticalIconsOnly.args = {\n compact: true,\n vertical: true,\n};\n\nexport const compactQuietVerticalIconsOnly = (\n args: Properties\n): TemplateResult => renderIconButtons(args);\ncompactQuietVerticalIconsOnly.args = {\n compact: true,\n quiet: true,\n vertical: true,\n};\n\nexport const justified = (args: Properties): TemplateResult =>\n renderButtons(args);\njustified.args = {\n justified: true,\n};\n\nexport const justifiedIconsOnly = (args: Properties): TemplateResult =>\n renderIconButtons(args);\njustifiedIconsOnly.args = {\n justified: true,\n};\n\nexport const compactJustifiedIconsOnly = (args: Properties): TemplateResult =>\n renderIconButtons(args);\ncompactJustifiedIconsOnly.args = {\n compact: true,\n justified: true,\n};\n"]}
|
|
1
|
+
{"version":3,"file":"action-group.stories.js","sourceRoot":"","sources":["action-group.stories.ts"],"names":[],"mappings":"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","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { html, TemplateResult } from '@spectrum-web-components/base';\nimport { spreadProps } from '../../../test/lit-helpers.js';\n\nimport '../sp-action-group.js';\nimport '@spectrum-web-components/action-button/sp-action-button.js';\nimport '@spectrum-web-components/overlay/overlay-trigger.js';\nimport '@spectrum-web-components/tooltip/sp-tooltip.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-properties.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-info.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-view-all-tags.js';\nimport { ActionGroup } from '../src/ActionGroup.js';\n\nexport default {\n title: 'Action Group',\n component: 'sp-action-group',\n args: {\n compact: false,\n emphasized: false,\n justified: false,\n quiet: false,\n vertical: false,\n },\n argTypes: {\n compact: {\n name: 'compact',\n description:\n 'Visually joins the buttons together to clarify their relationship to one another.',\n type: { name: 'boolean', required: false },\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n emphasized: {\n name: 'emphasized',\n type: { name: 'boolean', required: false },\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n justified: {\n name: 'justified',\n description:\n 'Aligns the action group items to use all the available space on that line.',\n type: { name: 'boolean', required: false },\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n quiet: {\n name: 'quiet',\n type: { name: 'boolean', required: false },\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n vertical: {\n name: 'vertical',\n description: 'Changes the orientation of the action group.',\n type: { name: 'boolean', required: false },\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n },\n};\n\ninterface Properties {\n compact?: boolean;\n emphasized?: boolean;\n justified?: boolean;\n quiet?: boolean;\n vertical?: boolean;\n [prop: string]: unknown;\n}\n\nfunction renderIconButtons(args: Properties): TemplateResult {\n return html`\n <sp-action-group ${spreadProps(args)}>\n <sp-action-button label=\"Properties\">\n <sp-icon-properties slot=\"icon\"></sp-icon-properties>\n </sp-action-button>\n <sp-action-button label=\"Info\">\n <sp-icon-info slot=\"icon\"></sp-icon-info>\n </sp-action-button>\n <sp-action-button label=\"View All Tags\">\n <sp-icon-view-all-tags slot=\"icon\"></sp-icon-view-all-tags>\n </sp-action-button>\n </sp-action-group>\n `;\n}\n\nfunction renderButtons(args: Properties): TemplateResult {\n return html`\n <sp-action-group ${spreadProps(args)}>\n <sp-action-button>Button 1</sp-action-button>\n <sp-action-button>Longer Button 2</sp-action-button>\n <sp-action-button>Short 3</sp-action-button>\n </sp-action-group>\n `;\n}\n\nfunction displaySelectionState() {\n const group = document.querySelector('sp-action-group') as ActionGroup;\n const selectedDiv = group.nextElementSibling;\n if (selectedDiv) {\n selectedDiv.textContent = `Selected: ${JSON.stringify(group.selected)}`;\n }\n}\nexport const Default = (args: Properties): TemplateResult =>\n renderButtons(args);\n\nexport const selectsSingle = (args: Properties): TemplateResult => {\n requestAnimationFrame(displaySelectionState);\n return html`\n <sp-action-group\n ?compact=${args.compact}\n ?emphasized=${args.emphasized}\n ?quiet=${args.quiet}\n ?justified=${args.justified}\n ?vertical=${args.vertical}\n label=\"Favorite Color\"\n selects=\"single\"\n @change=${({ target }: Event & { target: ActionGroup }) => {\n const next = target.nextElementSibling as HTMLDivElement;\n next.textContent = `Selected: ${JSON.stringify(\n target.selected\n )}`;\n }}\n >\n <sp-action-button>Red</sp-action-button>\n <sp-action-button>Green</sp-action-button>\n <sp-action-button>Blue</sp-action-button>\n <sp-action-button selected>Yellow</sp-action-button>\n </sp-action-group>\n <div>Selected:</div>\n `;\n};\n\nexport const selectsMultiple = (args: Properties): TemplateResult => {\n requestAnimationFrame(displaySelectionState);\n return html`\n <sp-action-group\n ${spreadProps(args)}\n label=\"Favorite Colors\"\n selects=\"multiple\"\n @change=${({ target }: Event & { target: ActionGroup }) => {\n const next = target.nextElementSibling as HTMLDivElement;\n next.textContent = `Selected: ${JSON.stringify(\n target.selected\n )}`;\n }}\n >\n <sp-action-button>Red</sp-action-button>\n <sp-action-button selected>Green</sp-action-button>\n <sp-action-button selected>Blue</sp-action-button>\n <sp-action-button>Yellow</sp-action-button>\n </sp-action-group>\n <div>Selected:</div>\n `;\n};\n\nexport const selectsMultipleWithTooltips = (\n args: Properties\n): TemplateResult => {\n return html`\n <sp-action-group\n ${spreadProps(args)}\n label=\"Favorite Color\"\n selects=\"multiple\"\n @change=${({ target }: Event & { target: ActionGroup }) => {\n const next = target.nextElementSibling as HTMLDivElement;\n next.textContent = `Selected: ${JSON.stringify(\n target.selected\n )}`;\n }}\n >\n <overlay-trigger>\n <sp-action-button slot=\"trigger\">Red</sp-action-button>\n <sp-tooltip slot=\"hover-content\">\n This is a cool color.\n </sp-tooltip>\n </overlay-trigger>\n <overlay-trigger>\n <sp-action-button slot=\"trigger\">Green</sp-action-button>\n <sp-tooltip slot=\"hover-content\">\n You wouldn't be wrong.\n </sp-tooltip>\n </overlay-trigger>\n <overlay-trigger>\n <sp-action-button slot=\"trigger\">Blue</sp-action-button>\n <sp-tooltip slot=\"hover-content\">The sky in spring.</sp-tooltip>\n </overlay-trigger>\n <overlay-trigger>\n <sp-action-button slot=\"trigger\">Yellow</sp-action-button>\n <sp-tooltip slot=\"hover-content\">The sun at noon.</sp-tooltip>\n </overlay-trigger>\n </sp-action-group>\n <div>Selected:</div>\n `;\n};\n\nexport const selectsMultipleControlled = (args: Properties): TemplateResult => {\n requestAnimationFrame(displaySelectionState);\n return html`\n <sp-action-group\n ${spreadProps(args)}\n selects=\"multiple\"\n .selected=${['donuts', 'crepecakes']}\n label=\"Favorite Dessert\"\n @change=${({ target }: Event & { target: ActionGroup }) => {\n const next = target.nextElementSibling as HTMLDivElement;\n next.textContent = `Selected: ${JSON.stringify(\n target.selected\n )}`;\n }}\n >\n <sp-action-button value=\"lavacakes\">Lava Cakes</sp-action-button>\n <sp-action-button value=\"donuts\">Donuts</sp-action-button>\n <sp-action-button value=\"crepecakes\">Crepe Cake</sp-action-button>\n <sp-action-button value=\"fruittarts\">Fruit Tarts</sp-action-button>\n </sp-action-group>\n <div>Selected:</div>\n `;\n};\n\nexport const iconsOnly = (args: Properties): TemplateResult =>\n renderIconButtons(args);\n\nexport const quietIconsOnly = (args: Properties): TemplateResult =>\n renderIconButtons(args);\nquietIconsOnly.args = {\n quiet: true,\n};\n\nexport const compact = (args: Properties): TemplateResult =>\n renderButtons(args);\ncompact.args = {\n compact: true,\n};\n\nexport const compactIconsOnly = (args: Properties): TemplateResult =>\n renderIconButtons(args);\ncompactIconsOnly.args = {\n compact: true,\n};\n\nexport const compactQuietIconsOnly = (args: Properties): TemplateResult =>\n renderIconButtons(args);\ncompactQuietIconsOnly.args = {\n compact: true,\n quiet: true,\n};\n\nexport const vertical = (args: Properties): TemplateResult =>\n renderButtons(args);\nvertical.args = {\n vertical: true,\n};\n\nexport const verticalIconsOnly = (args: Properties): TemplateResult =>\n renderIconButtons(args);\nverticalIconsOnly.args = {\n vertical: true,\n};\n\nexport const verticalQuietIconsOnly = (args: Properties): TemplateResult =>\n renderIconButtons(args);\nverticalQuietIconsOnly.args = {\n quiet: true,\n vertical: true,\n};\n\nexport const compactVertical = (args: Properties): TemplateResult =>\n renderButtons(args);\ncompactVertical.args = {\n compact: true,\n vertical: true,\n};\n\nexport const compactVerticalIconsOnly = (args: Properties): TemplateResult =>\n renderIconButtons(args);\ncompactVerticalIconsOnly.args = {\n compact: true,\n vertical: true,\n};\n\nexport const compactQuietVerticalIconsOnly = (\n args: Properties\n): TemplateResult => renderIconButtons(args);\ncompactQuietVerticalIconsOnly.args = {\n compact: true,\n quiet: true,\n vertical: true,\n};\n\nexport const justified = (args: Properties): TemplateResult =>\n renderButtons(args);\njustified.args = {\n justified: true,\n};\n\nexport const justifiedIconsOnly = (args: Properties): TemplateResult =>\n renderIconButtons(args);\njustifiedIconsOnly.args = {\n justified: true,\n};\n\nexport const compactJustifiedIconsOnly = (args: Properties): TemplateResult =>\n renderIconButtons(args);\ncompactJustifiedIconsOnly.args = {\n compact: true,\n justified: true,\n};\n"]}
|