@salutejs/plasma-new-hope 0.78.0-dev.0 → 0.79.0-dev.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/components/Button/Button.styles.js +1 -0
- package/cjs/components/Button/Button.styles.js.map +1 -1
- package/cjs/components/Drawer/Drawer.js +1 -0
- package/cjs/components/Drawer/Drawer.js.map +1 -1
- package/cjs/components/IconButton/IconButton.css +24 -0
- package/cjs/components/IconButton/IconButton.js +50 -0
- package/cjs/components/IconButton/IconButton.js.map +1 -0
- package/cjs/components/IconButton/IconButton.styles.js +16 -0
- package/cjs/components/IconButton/IconButton.styles.js.map +1 -0
- package/cjs/components/IconButton/IconButton.styles_1hknr37.css +1 -0
- package/cjs/components/IconButton/IconButton.tokens.js +32 -0
- package/cjs/components/IconButton/IconButton.tokens.js.map +1 -0
- package/cjs/index.css +2 -0
- package/cjs/index.js +5 -0
- package/cjs/index.js.map +1 -1
- package/es/components/Button/Button.styles.js +1 -0
- package/es/components/Button/Button.styles.js.map +1 -1
- package/es/components/Drawer/Drawer.js +1 -0
- package/es/components/Drawer/Drawer.js.map +1 -1
- package/es/components/IconButton/IconButton.css +24 -0
- package/es/components/IconButton/IconButton.js +45 -0
- package/es/components/IconButton/IconButton.js.map +1 -0
- package/es/components/IconButton/IconButton.styles.js +12 -0
- package/es/components/IconButton/IconButton.styles.js.map +1 -0
- package/es/components/IconButton/IconButton.styles_1hknr37.css +1 -0
- package/es/components/IconButton/IconButton.tokens.js +28 -0
- package/es/components/IconButton/IconButton.tokens.js.map +1 -0
- package/es/index.css +2 -0
- package/es/index.js +2 -0
- package/es/index.js.map +1 -1
- package/package.json +2 -2
- package/styled-components/cjs/components/Button/Button.styles.js +10 -2
- package/styled-components/cjs/components/IconButton/IconButton.js +47 -0
- package/styled-components/cjs/components/IconButton/IconButton.styles.js +13 -0
- package/styled-components/cjs/components/IconButton/IconButton.tokens.js +31 -0
- package/styled-components/cjs/components/IconButton/index.js +25 -0
- package/styled-components/cjs/examples/plasma_b2c/components/IconButton/IconButton.config.js +45 -0
- package/styled-components/cjs/examples/plasma_b2c/components/IconButton/IconButton.js +11 -0
- package/styled-components/cjs/examples/plasma_b2c/components/IconButton/IconButton.stories.tsx +71 -0
- package/styled-components/cjs/examples/plasma_web/components/IconButton/IconButton.config.js +45 -0
- package/styled-components/cjs/examples/plasma_web/components/IconButton/IconButton.js +11 -0
- package/styled-components/cjs/examples/plasma_web/components/IconButton/IconButton.stories.tsx +71 -0
- package/styled-components/cjs/index.js +11 -0
- package/styled-components/es/components/Button/Button.styles.js +10 -2
- package/styled-components/es/components/IconButton/IconButton.js +41 -0
- package/styled-components/es/components/IconButton/IconButton.styles.js +8 -0
- package/styled-components/es/components/IconButton/IconButton.tokens.js +25 -0
- package/styled-components/es/components/IconButton/index.js +2 -0
- package/styled-components/es/examples/plasma_b2c/components/IconButton/IconButton.config.js +39 -0
- package/styled-components/es/examples/plasma_b2c/components/IconButton/IconButton.js +5 -0
- package/styled-components/es/examples/plasma_b2c/components/IconButton/IconButton.stories.tsx +71 -0
- package/styled-components/es/examples/plasma_web/components/IconButton/IconButton.config.js +39 -0
- package/styled-components/es/examples/plasma_web/components/IconButton/IconButton.js +5 -0
- package/styled-components/es/examples/plasma_web/components/IconButton/IconButton.stories.tsx +71 -0
- package/styled-components/es/index.js +1 -0
- package/types/components/Button/Button.styles.d.ts +1 -0
- package/types/components/Button/Button.styles.d.ts.map +1 -1
- package/types/components/IconButton/IconButton.d.ts +35 -0
- package/types/components/IconButton/IconButton.d.ts.map +1 -0
- package/types/components/IconButton/IconButton.styles.d.ts +3 -0
- package/types/components/IconButton/IconButton.styles.d.ts.map +1 -0
- package/types/components/IconButton/IconButton.tokens.d.ts +26 -0
- package/types/components/IconButton/IconButton.tokens.d.ts.map +1 -0
- package/types/components/IconButton/index.d.ts +3 -0
- package/types/components/IconButton/index.d.ts.map +1 -0
- package/types/examples/plasma_b2c/components/IconButton/IconButton.config.d.ts +38 -0
- package/types/examples/plasma_b2c/components/IconButton/IconButton.config.d.ts.map +1 -0
- package/types/examples/plasma_b2c/components/IconButton/IconButton.d.ts +32 -0
- package/types/examples/plasma_b2c/components/IconButton/IconButton.d.ts.map +1 -0
- package/types/examples/plasma_web/components/IconButton/IconButton.config.d.ts +38 -0
- package/types/examples/plasma_web/components/IconButton/IconButton.config.d.ts.map +1 -0
- package/types/examples/plasma_web/components/IconButton/IconButton.d.ts +32 -0
- package/types/examples/plasma_web/components/IconButton/IconButton.d.ts.map +1 -0
- package/types/index.d.ts +1 -0
- package/types/index.d.ts.map +1 -1
@@ -4,6 +4,7 @@ import './Button.styles_uqvh6u.css';
|
|
4
4
|
Object.defineProperty(exports, '__esModule', { value: true });
|
5
5
|
|
6
6
|
var react = require('@linaria/react');
|
7
|
+
require('focus-visible');
|
7
8
|
require('@linaria/core');
|
8
9
|
var common = require('../../engines/common.js');
|
9
10
|
var Spinner$1 = require('../Spinner/Spinner.js');
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Button.styles.js","sources":["../../../src/components/Button/Button.styles.ts"],"sourcesContent":["import { css } from '@linaria/core';\nimport { styled } from '@linaria/react';\n\nimport { applyEllipsis } from '../../mixins';\nimport { component, mergeConfig } from '../../engines';\nimport { spinnerConfig, spinnerTokens } from '../Spinner';\n\nimport { classes, tokens } from './Button.tokens';\n\n// issue #823\nconst mergedConfig = mergeConfig(spinnerConfig);\nconst Spinner = component(mergedConfig);\n\nexport const base = css`\n position: relative;\n display: inline-flex;\n align-items: center;\n box-sizing: border-box;\n justify-content: center;\n\n appearance: none;\n border: none;\n cursor: pointer;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n\n a& {\n text-decoration: none;\n }\n\n /* NOTE: \n --plasma_computed-btn-br-radius is defined in Button.tsx\n */\n --plasma_private-btn-br: var(--plasma_computed-btn-br);\n border-radius: var(--plasma_private-btn-br);\n\n &&.${String(classes.buttonSquare)} {\n width: var(${tokens.buttonHeight});\n padding: 0;\n }\n`;\n\n// TODO: PLASMA-2164\n// WHY do we need applyEllipsis ??\n// Если внутри кнопки тескт и на нее решили повесить square пропс\nexport const ButtonText = styled.span`\n :not(:last-child) {\n margin-right: 0.375rem;\n }\n\n :not(:first-child) {\n margin-left: 0.375rem;\n }\n\n ${applyEllipsis()}\n`;\n\n// TODO: #720\nexport const LoadWrap = styled.div<{ isLoading?: boolean }>`\n opacity: ${({ isLoading }) => (isLoading ? '0' : '1')};\n display: flex;\n width: 100%;\n align-items: inherit;\n justify-content: inherit;\n height: 100%;\n`;\n\nexport const Loader = styled.div`\n position: absolute;\n`;\n\nexport const StyledSpinner = styled(Spinner)`\n ${spinnerTokens.size}: var(${tokens.buttonSpinnerSize});\n ${spinnerTokens.color}: var(${tokens.buttonSpinnerColor});\n`;\n"],"names":["mergedConfig","mergeConfig","spinnerConfig","Spinner","component","base","ButtonText","styled","name","class","propsAsIs","_exp4","_ref","isLoading","LoadWrap","vars","Loader","_exp5","StyledSpinner"],"mappings":"
|
1
|
+
{"version":3,"file":"Button.styles.js","sources":["../../../src/components/Button/Button.styles.ts"],"sourcesContent":["import { css } from '@linaria/core';\nimport { styled } from '@linaria/react';\n\nimport { applyEllipsis, addFocus } from '../../mixins';\nimport { component, mergeConfig } from '../../engines';\nimport { spinnerConfig, spinnerTokens } from '../Spinner';\n\nimport { classes, tokens } from './Button.tokens';\n\n// issue #823\nconst mergedConfig = mergeConfig(spinnerConfig);\nconst Spinner = component(mergedConfig);\n\nexport const base = css`\n position: relative;\n display: inline-flex;\n align-items: center;\n box-sizing: border-box;\n justify-content: center;\n\n appearance: none;\n border: none;\n cursor: pointer;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n\n a& {\n text-decoration: none;\n }\n\n /* NOTE: \n --plasma_computed-btn-br-radius is defined in Button.tsx\n */\n --plasma_private-btn-br: var(--plasma_computed-btn-br);\n border-radius: var(--plasma_private-btn-br);\n\n &&.${String(classes.buttonSquare)} {\n width: var(${tokens.buttonHeight});\n padding: 0;\n }\n`;\n\n// TODO: PLASMA-2164\n// WHY do we need applyEllipsis ??\n// Если внутри кнопки тескт и на нее решили повесить square пропс\nexport const ButtonText = styled.span`\n :not(:last-child) {\n margin-right: 0.375rem;\n }\n\n :not(:first-child) {\n margin-left: 0.375rem;\n }\n\n ${applyEllipsis()}\n`;\n\n// TODO: #720\nexport const LoadWrap = styled.div<{ isLoading?: boolean }>`\n opacity: ${({ isLoading }) => (isLoading ? '0' : '1')};\n display: flex;\n width: 100%;\n align-items: inherit;\n justify-content: inherit;\n height: 100%;\n`;\n\nexport const Loader = styled.div`\n position: absolute;\n`;\n\nexport const StyledSpinner = styled(Spinner)`\n ${spinnerTokens.size}: var(${tokens.buttonSpinnerSize});\n ${spinnerTokens.color}: var(${tokens.buttonSpinnerColor});\n`;\n\n// INFO: Для возможности переиспользования стилей в других компонентах\nexport const baseContent = `\n position: relative;\n display: inline-flex;\n align-items: center;\n box-sizing: border-box;\n justify-content: center;\n\n appearance: none;\n border: none;\n cursor: pointer;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n\n a& {\n text-decoration: none;\n }\n\n /* NOTE: \n --plasma_computed-btn-br-radius is defined in Button.tsx\n */\n --plasma_private-btn-br: var(--plasma_computed-btn-br);\n border-radius: var(--plasma_private-btn-br);\n\n &&.${String(classes.buttonSquare)} {\n width: var(${tokens.buttonHeight});\n padding: 0;\n }\n\n color: var(${tokens.buttonColor});\n background-color: var(${tokens.buttonBackgroundColor});\n\n :hover {\n color: var(${tokens.buttonColorHover}, var(${tokens.buttonColor}));\n background-color: var(${tokens.buttonBackgroundColorHover}, var(${tokens.buttonBackgroundColor}));\n\n scale: var(${tokens.buttonScaleHover});\n }\n\n :active {\n color: var(${tokens.buttonColorActive}, var(${tokens.buttonColor}));\n background-color: var(${tokens.buttonBackgroundColorActive}, var(${tokens.buttonBackgroundColor}));\n\n scale: var(${tokens.buttonScaleActive});\n }\n\n height: var(${tokens.buttonHeight});\n width: var(${tokens.buttonWidth});\n\n /* TODO: #714 move these calc's to plasma-mapping | ds-generator and add Math.round() */\n padding: 0 var(${tokens.buttonPadding}, calc(var(${tokens.buttonHeight}) * 1.618 / 4));\n\n font-family: var(${tokens.buttonFontFamily});\n font-size: var(${tokens.buttonFontSize});\n font-style: var(${tokens.buttonFontStyle});\n font-weight: var(${tokens.buttonFontWeight});\n letter-spacing: var(${tokens.buttonLetterSpacing});\n line-height: var(${tokens.buttonLineHeight});\n\n /* TODO: #710 make it token API ? */\n --plasma_private-btn-outline-size: var(--plasma-button-outline-size, 0.0625rem);\n\n :focus {\n outline: none;\n }\n\n ${addFocus({\n outlineOffset: '-0.125rem',\n outlineSize: 'var(--plasma_private-btn-outline-size)',\n outlineRadius: 'calc(0.125rem + var(--plasma_private-btn-br))',\n outlineColor: `var(${tokens.buttonFocusColor})`,\n })}\n\n &[disabled] {\n opacity: var(${tokens.buttonDisabledOpacity});\n cursor: not-allowed;\n\n :hover,\n :active {\n scale: none;\n\n color: var(${tokens.buttonColor});\n background-color: var(${tokens.buttonBackgroundColor});\n }\n }\n\n &.${classes.fixedStretching} {\n width: var(${tokens.buttonWidth});\n }\n &.${classes.filledStretching} {\n width: 100%;\n }\n &.${classes.autoStretching} {\n width: auto;\n }\n`;\n"],"names":["mergedConfig","mergeConfig","spinnerConfig","Spinner","component","base","ButtonText","styled","name","class","propsAsIs","_exp4","_ref","isLoading","LoadWrap","vars","Loader","_exp5","StyledSpinner"],"mappings":";;;;;;;;;;AASA;AACA,IAAMA,YAAY,gBAAGC,kBAAW,CAACC,uBAAa,CAAC,CAAA;AAC/C,IAAMC,OAAO,gBAAGC,gBAAS,CAACJ,YAAY,CAAC,CAAA;AAEhC,IAAMK,IAAI,GA0BhB,UAAA;;AAED;AACA;AACA;AACO,IAAMC,UAAU,gBAAGC,YAAM,CAAA,MAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,YAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAU/B,EAAA;;AAED;AAAA,IAAAC,KAAA,GAvDkBA,SAuDlBA,KAAAA,GAAA;AAAA,EAAA,OAEe,UAAAC,IAAA,EAAA;AAAA,IAAA,IAAGC,SAAAA,GAAAA,IAAAA,CAAAA,SAAAA,CAAAA;AAAAA,IAAAA,OAAiBA,SAAS,GAAG,GAAG,GAAG,GAAI,CAAA;AAAA,GAAA,CAAA;AAAA,CAAA,CAAA;AADlD,IAAMC,QAAQ,gBAAGP,YAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,UAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAAK,EAAAA,IAAA,EAAA;AAAA,IAAA,WAAA,EAAA,cACfJ,KAA0C,EAAA,CAAA;AAAA,GAAA;AAAA,CAMxD,EAAA;AAEM,IAAMK,MAAM,gBAAGT,YAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,QAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAE3B,EAAA;AAAC,IAAAO,KAAA,GAnEgBA,SAmEhBA,KAAAA,GAAA;AAAA,EAAA,OAEkCd,OAAO,CAAA;AAAA,CAAA,CAAA;AAApC,IAAMe,aAAa,gBAAGX,YAAM,CAAAU,KAAA,EAAA,CAAA,CAAA;AAAAT,EAAAA,IAAA,EAAA,eAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,IAAA;AAAA,CAGlC;;;;;;;;"}
|
@@ -15,6 +15,7 @@ require('@linaria/react');
|
|
15
15
|
var index = require('../Popup/utils/index.js');
|
16
16
|
var Overlay = require('../Overlay/Overlay.js');
|
17
17
|
var Panel$1 = require('../Panel/Panel.js');
|
18
|
+
require('focus-visible');
|
18
19
|
var Drawer_tokens = require('./Drawer.tokens.js');
|
19
20
|
var base = require('./variations/_view/base.js');
|
20
21
|
var base$1 = require('./variations/_size/base.js');
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Drawer.js","sources":["../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from 'react';\nimport { useFocusTrap, useForkRef, safeUseId } from '@salutejs/plasma-core';\n\nimport { component, mergeConfig } from '../../engines';\nimport type { RootProps } from '../../engines';\nimport { usePopupContext } from '../Popup';\nimport { Overlay } from '../Overlay';\nimport { DEFAULT_Z_INDEX } from '../Popup/utils';\nimport { panelConfig } from '../Panel';\nimport { getSizeValueFromProp } from '../../utils';\n\nimport { classes, tokens } from './Drawer.tokens';\nimport type { DrawerProps } from './Drawer.types';\nimport { base as viewCSS } from './variations/_view/base';\nimport { base as sizeCSS } from './variations/_size/base';\nimport { base as borderRadiusCSS } from './variations/_borderRadius/base';\nimport { StyledPopup } from './Drawer.styles';\nimport { getIdLastDrawer } from './DrawerContext';\nimport { useDrawer } from './hooks';\n\n// issue #823\nconst mergedPanelConfig = mergeConfig(panelConfig);\nconst Panel = component(mergedPanelConfig);\n\nexport const drawerRoot = (Root: RootProps<HTMLDivElement, DrawerProps>) =>\n forwardRef<HTMLDivElement, DrawerProps>(\n (\n {\n id,\n zIndex,\n popupInfo,\n withBlur,\n children,\n view,\n size,\n width,\n height,\n isOpen,\n initialFocusRef,\n focusAfterRef,\n className,\n onClose,\n onOverlayClick,\n onEscKeyDown,\n offset,\n frame,\n borderRadius = 'none',\n placement = 'right',\n closeOnEsc = true,\n closeOnOverlayClick = true,\n asModal = true,\n ...rest\n },\n outerRef,\n ) => {\n const trapRef = useFocusTrap(true, initialFocusRef, focusAfterRef);\n const popupController = usePopupContext();\n\n const innerRef = useForkRef<HTMLDivElement>(trapRef, outerRef);\n\n const uniqId = safeUseId();\n const innerId = id || uniqId;\n const overlayBackgroundToken = withBlur\n ? `var(${tokens.drawerOverlayWithBlurColor})`\n : `var(${tokens.drawerOverlayColor})`;\n const innerWidth = width ? getSizeValueFromProp(width) : '100%';\n const innerHeight = height ? getSizeValueFromProp(height) : '100%';\n\n const { drawerInfo } = useDrawer({\n id: innerId,\n isOpen,\n closeOnEsc,\n onEscKeyDown,\n onClose,\n popupInfo,\n disableScroll: asModal,\n });\n const transparent = useMemo(() => getIdLastDrawer(popupController.items) !== innerId, [\n innerId,\n popupController.items,\n ]);\n\n const onDrawerOverlayKeyDown = (event: React.MouseEvent<HTMLDivElement>) => {\n if (onOverlayClick) {\n onOverlayClick(event);\n return;\n }\n\n if (onClose) {\n onClose();\n }\n };\n\n return (\n <StyledPopup\n id={innerId}\n ref={asModal ? innerRef : outerRef}\n isOpen={isOpen}\n zIndex={zIndex}\n placement={placement}\n popupInfo={drawerInfo}\n frame={frame}\n width={innerWidth}\n height={innerHeight}\n offset={offset}\n withAnimation\n overlay={\n asModal && (\n <Root view={view}>\n <Overlay\n className={classes.overlay}\n zIndex={zIndex || DEFAULT_Z_INDEX}\n backgroundColorProperty={overlayBackgroundToken}\n withBlur={withBlur}\n transparent={transparent}\n isClickable={closeOnOverlayClick}\n onOverlayClick={onDrawerOverlayKeyDown}\n />\n </Root>\n )\n }\n {...rest}\n >\n <Root\n view={view}\n size={size}\n style={{ width: innerWidth, height: innerHeight }}\n borderRadius={borderRadius}\n >\n <Panel width={innerWidth} height={innerHeight} className={className}>\n {children}\n </Panel>\n </Root>\n </StyledPopup>\n );\n },\n );\n\nexport const drawerConfig = {\n name: 'Drawer',\n tag: 'div',\n layout: drawerRoot,\n base: '',\n variations: {\n view: {\n css: viewCSS,\n },\n size: {\n css: sizeCSS,\n },\n borderRadius: {\n css: borderRadiusCSS,\n },\n },\n defaults: {\n view: 'default',\n size: 'm',\n borderRadius: 'none',\n },\n};\n"],"names":["mergedPanelConfig","mergeConfig","panelConfig","Panel","component","drawerRoot","Root","forwardRef","_ref","outerRef","id","zIndex","popupInfo","withBlur","children","view","size","width","height","isOpen","initialFocusRef","focusAfterRef","className","onClose","onOverlayClick","onEscKeyDown","offset","frame","_ref$borderRadius","borderRadius","_ref$placement","placement","_ref$closeOnEsc","closeOnEsc","_ref$closeOnOverlayCl","closeOnOverlayClick","_ref$asModal","asModal","rest","_objectWithoutProperties","_excluded","trapRef","useFocusTrap","popupController","usePopupContext","innerRef","useForkRef","uniqId","safeUseId","innerId","overlayBackgroundToken","concat","tokens","drawerOverlayWithBlurColor","drawerOverlayColor","innerWidth","getSizeValueFromProp","innerHeight","_useDrawer","useDrawer","disableScroll","drawerInfo","transparent","useMemo","getIdLastDrawer","items","onDrawerOverlayKeyDown","event","React","createElement","StyledPopup","_extends","ref","withAnimation","overlay","Overlay","classes","DEFAULT_Z_INDEX","backgroundColorProperty","isClickable","style","drawerConfig","name","tag","layout","base","variations","css","viewCSS","sizeCSS","borderRadiusCSS","defaults"],"mappings":"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"}
|
1
|
+
{"version":3,"file":"Drawer.js","sources":["../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from 'react';\nimport { useFocusTrap, useForkRef, safeUseId } from '@salutejs/plasma-core';\n\nimport { component, mergeConfig } from '../../engines';\nimport type { RootProps } from '../../engines';\nimport { usePopupContext } from '../Popup';\nimport { Overlay } from '../Overlay';\nimport { DEFAULT_Z_INDEX } from '../Popup/utils';\nimport { panelConfig } from '../Panel';\nimport { getSizeValueFromProp } from '../../utils';\n\nimport { classes, tokens } from './Drawer.tokens';\nimport type { DrawerProps } from './Drawer.types';\nimport { base as viewCSS } from './variations/_view/base';\nimport { base as sizeCSS } from './variations/_size/base';\nimport { base as borderRadiusCSS } from './variations/_borderRadius/base';\nimport { StyledPopup } from './Drawer.styles';\nimport { getIdLastDrawer } from './DrawerContext';\nimport { useDrawer } from './hooks';\n\n// issue #823\nconst mergedPanelConfig = mergeConfig(panelConfig);\nconst Panel = component(mergedPanelConfig);\n\nexport const drawerRoot = (Root: RootProps<HTMLDivElement, DrawerProps>) =>\n forwardRef<HTMLDivElement, DrawerProps>(\n (\n {\n id,\n zIndex,\n popupInfo,\n withBlur,\n children,\n view,\n size,\n width,\n height,\n isOpen,\n initialFocusRef,\n focusAfterRef,\n className,\n onClose,\n onOverlayClick,\n onEscKeyDown,\n offset,\n frame,\n borderRadius = 'none',\n placement = 'right',\n closeOnEsc = true,\n closeOnOverlayClick = true,\n asModal = true,\n ...rest\n },\n outerRef,\n ) => {\n const trapRef = useFocusTrap(true, initialFocusRef, focusAfterRef);\n const popupController = usePopupContext();\n\n const innerRef = useForkRef<HTMLDivElement>(trapRef, outerRef);\n\n const uniqId = safeUseId();\n const innerId = id || uniqId;\n const overlayBackgroundToken = withBlur\n ? `var(${tokens.drawerOverlayWithBlurColor})`\n : `var(${tokens.drawerOverlayColor})`;\n const innerWidth = width ? getSizeValueFromProp(width) : '100%';\n const innerHeight = height ? getSizeValueFromProp(height) : '100%';\n\n const { drawerInfo } = useDrawer({\n id: innerId,\n isOpen,\n closeOnEsc,\n onEscKeyDown,\n onClose,\n popupInfo,\n disableScroll: asModal,\n });\n const transparent = useMemo(() => getIdLastDrawer(popupController.items) !== innerId, [\n innerId,\n popupController.items,\n ]);\n\n const onDrawerOverlayKeyDown = (event: React.MouseEvent<HTMLDivElement>) => {\n if (onOverlayClick) {\n onOverlayClick(event);\n return;\n }\n\n if (onClose) {\n onClose();\n }\n };\n\n return (\n <StyledPopup\n id={innerId}\n ref={asModal ? innerRef : outerRef}\n isOpen={isOpen}\n zIndex={zIndex}\n placement={placement}\n popupInfo={drawerInfo}\n frame={frame}\n width={innerWidth}\n height={innerHeight}\n offset={offset}\n withAnimation\n overlay={\n asModal && (\n <Root view={view}>\n <Overlay\n className={classes.overlay}\n zIndex={zIndex || DEFAULT_Z_INDEX}\n backgroundColorProperty={overlayBackgroundToken}\n withBlur={withBlur}\n transparent={transparent}\n isClickable={closeOnOverlayClick}\n onOverlayClick={onDrawerOverlayKeyDown}\n />\n </Root>\n )\n }\n {...rest}\n >\n <Root\n view={view}\n size={size}\n style={{ width: innerWidth, height: innerHeight }}\n borderRadius={borderRadius}\n >\n <Panel width={innerWidth} height={innerHeight} className={className}>\n {children}\n </Panel>\n </Root>\n </StyledPopup>\n );\n },\n );\n\nexport const drawerConfig = {\n name: 'Drawer',\n tag: 'div',\n layout: drawerRoot,\n base: '',\n variations: {\n view: {\n css: viewCSS,\n },\n size: {\n css: sizeCSS,\n },\n borderRadius: {\n css: borderRadiusCSS,\n },\n },\n defaults: {\n view: 'default',\n size: 'm',\n borderRadius: 'none',\n },\n};\n"],"names":["mergedPanelConfig","mergeConfig","panelConfig","Panel","component","drawerRoot","Root","forwardRef","_ref","outerRef","id","zIndex","popupInfo","withBlur","children","view","size","width","height","isOpen","initialFocusRef","focusAfterRef","className","onClose","onOverlayClick","onEscKeyDown","offset","frame","_ref$borderRadius","borderRadius","_ref$placement","placement","_ref$closeOnEsc","closeOnEsc","_ref$closeOnOverlayCl","closeOnOverlayClick","_ref$asModal","asModal","rest","_objectWithoutProperties","_excluded","trapRef","useFocusTrap","popupController","usePopupContext","innerRef","useForkRef","uniqId","safeUseId","innerId","overlayBackgroundToken","concat","tokens","drawerOverlayWithBlurColor","drawerOverlayColor","innerWidth","getSizeValueFromProp","innerHeight","_useDrawer","useDrawer","disableScroll","drawerInfo","transparent","useMemo","getIdLastDrawer","items","onDrawerOverlayKeyDown","event","React","createElement","StyledPopup","_extends","ref","withAnimation","overlay","Overlay","classes","DEFAULT_Z_INDEX","backgroundColorProperty","isClickable","style","drawerConfig","name","tag","layout","base","variations","css","viewCSS","sizeCSS","borderRadiusCSS","defaults"],"mappings":"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"}
|
@@ -0,0 +1,24 @@
|
|
1
|
+
.base_1gusher_b1chvyq8__76b641f5{color:var(--plasma-spinner-color);}
|
2
|
+
|
3
|
+
.base_ova69f_bw56nfh__55225c7f{width:var(--plasma-spinner-size);height:var(--plasma-spinner-size);}
|
4
|
+
|
5
|
+
.Spinner_styles_13q7ndk_b1hp2dsz__af962114{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;box-sizing:border-box;}
|
6
|
+
.Spinner_styles_13q7ndk_s122r4cn__af962114{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:var(--s122r4cn-0);height:var(--s122r4cn-1);-webkit-animation:Spinner_styles_13q7ndk_rotateS122r4cn__af962114 1s linear infinite;animation:Spinner_styles_13q7ndk_rotateS122r4cn__af962114 1s linear infinite;}@-webkit-keyframes Spinner_styles_13q7ndk_rotateS122r4cn__af962114{from{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);}to{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}@keyframes Spinner_styles_13q7ndk_rotateS122r4cn__af962114{from{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);}to{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}
|
7
|
+
|
8
|
+
.Button_styles_uqvh6u_bzw1898__b7cda4d5{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;box-sizing:border-box;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);--plasma_private-btn-br:var(--plasma_computed-btn-br);border-radius:var(--plasma_private-btn-br);}a.Button_styles_uqvh6u_bzw1898__b7cda4d5{-webkit-text-decoration:none;text-decoration:none;}.Button_styles_uqvh6u_bzw1898__b7cda4d5.Button_styles_uqvh6u_bzw1898__b7cda4d5.Button_styles_uqvh6u_buttonSquare__b7cda4d5{width:var(--plasma-button-height);padding:0;}
|
9
|
+
.Button_styles_uqvh6u_bdfuqwe__b7cda4d5{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.Button_styles_uqvh6u_bdfuqwe__b7cda4d5:not(:last-child){margin-right:0.375rem;}.Button_styles_uqvh6u_bdfuqwe__b7cda4d5:not(:first-child){margin-left:0.375rem;}
|
10
|
+
.Button_styles_uqvh6u_l9ypozh__b7cda4d5{opacity:var(--l9ypozh-0);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;-webkit-align-items:inherit;-webkit-box-align:inherit;-ms-flex-align:inherit;align-items:inherit;-webkit-box-pack:inherit;-webkit-justify-content:inherit;-ms-flex-pack:inherit;justify-content:inherit;height:100%;}
|
11
|
+
.Button_styles_uqvh6u_l4dfhbg__b7cda4d5{position:absolute;}
|
12
|
+
.Button_styles_uqvh6u_srdlazt__b7cda4d5{--plasma-spinner-size:var(--plasma-button-spinner-size);--plasma-spinner-color:var(--plasma-button-spinner-color);}
|
13
|
+
|
14
|
+
.base_x95x4p_b1ty39ru__349bf40b{color:var(--plasma-button-color);background-color:var(--plasma-button-background-color);}.base_x95x4p_b1ty39ru__349bf40b:hover{color:var(--plasma-button-color-hover,var(--plasma-button-color));background-color:var(--plasma-button-background-color-hover,var(--plasma-button-background-color));scale:var(--plasma-button-scale-hover);}.base_x95x4p_b1ty39ru__349bf40b:active{color:var(--plasma-button-color-active,var(--plasma-button-color));background-color:var(--plasma-button-background-color-active,var(--plasma-button-background-color));scale:var(---plasma-button-scale-active);}
|
15
|
+
|
16
|
+
.base_1alzrso_be0ha5g__cdc67255{height:var(--plasma-button-height);padding:0 var(--plasma-button-padding,calc(var(--plasma-button-height) * 1.618 / 4));font-family:var(--plasma-button-font-family);font-size:var(--plasma-button-font-size);font-style:var(--plasma-button-font-style);font-weight:var(--plasma-button-font-weight);-webkit-letter-spacing:var(--plasma-button-letter-spacing);-moz-letter-spacing:var(--plasma-button-letter-spacing);-ms-letter-spacing:var(--plasma-button-letter-spacing);letter-spacing:var(--plasma-button-letter-spacing);line-height:var(--plasma-button-line-height);--plasma_private-btn-outline-size:var(--plasma-button-outline-size,0.0625rem);}
|
17
|
+
|
18
|
+
.base_1t3ywu_b169l30m__aba40ddd[disabled]{opacity:var(--plasma-button-disabled-opacity);cursor:not-allowed;}.base_1t3ywu_b169l30m__aba40ddd[disabled]:hover,.base_1t3ywu_b169l30m__aba40ddd[disabled]:active{scale:none;color:var(--plasma-button-color);background-color:var(--plasma-button-background-color);}
|
19
|
+
|
20
|
+
.base_1kq737e_b187cmzt__d829f64a{position:relative;}.base_1kq737e_b187cmzt__d829f64a:focus{outline:none;}.base_1kq737e_b187cmzt__d829f64a::before{content:'';position:absolute;top:-0.125rem;left:-0.125rem;right:-0.125rem;bottom:-0.125rem;z-index:1;display:block;box-sizing:content-box;border:var(--plasma_private-btn-outline-size) solid transparent;border-radius:calc(0.125rem + var(--plasma_private-btn-br));-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.base_1kq737e_b187cmzt__d829f64a.base_1kq737e_focusVisible__d829f64a:focus::before,.base_1kq737e_b187cmzt__d829f64a[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 var(--plasma_private-btn-outline-size) var(--plasma-button-focus-color);}
|
21
|
+
|
22
|
+
.base_1lx0ute_bdz31nb__16e78f09.base_1lx0ute_buttonStretchingFixed__16e78f09{width:var(--plasma-button-width);}.base_1lx0ute_bdz31nb__16e78f09.base_1lx0ute_buttonStretchingFilled__16e78f09{width:100%;}.base_1lx0ute_bdz31nb__16e78f09.base_1lx0ute_buttonStretchingAuto__16e78f09{width:auto;}
|
23
|
+
|
24
|
+
.IconButton_styles_1hknr37_b1ua728l__f14249fc{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;box-sizing:border-box;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);--plasma_private-btn-br:var(--plasma_computed-btn-br);border-radius:var(--plasma_private-btn-br);color:var(--plasma-button-color);background-color:var(--plasma-button-background-color);height:var(--plasma-button-height);width:var(--plasma-button-width);padding:0 var(--plasma-button-padding,calc(var(--plasma-button-height) * 1.618 / 4));font-family:var(--plasma-button-font-family);font-size:var(--plasma-button-font-size);font-style:var(--plasma-button-font-style);font-weight:var(--plasma-button-font-weight);-webkit-letter-spacing:var(--plasma-button-letter-spacing);-moz-letter-spacing:var(--plasma-button-letter-spacing);-ms-letter-spacing:var(--plasma-button-letter-spacing);letter-spacing:var(--plasma-button-letter-spacing);line-height:var(--plasma-button-line-height);--plasma_private-btn-outline-size:var(--plasma-button-outline-size,0.0625rem);position:relative;--plasma-button-padding:0;--plasma-button-color:var(--plasma-icon-button-color);--plasma-button-background-color:var(--plasma-icon-button-background-color);--plasma-button-color-hover:var(--plasma-icon-button-color-hover);--plasma-button-background-color-hover:var(--plasma-icon-button-background-color-hover);--plasma-button-color-active:var(--plasma-icon-button-color-active);--plasma-button-background-color-active:var(--plasma-icon-button-background-color-active);--plasma-button-font-family:var(--plasma-icon-button-font-family);--plasma-button-font-size:var(--plasma-icon-button-font-size);--plasma-button-font-style:var(--plasma-icon-button-font-style);--plasma-button-font-weight:var(--plasma-icon-button-font-weight);--plasma-button-letter-spacing:var(--plasma-icon-button-letter-spacing);--plasma-button-line-height:var(--plasma-icon-button-line-height);--plasma-button-width:var(--plasma-icon-button-width);--plasma-button-height:var(--plasma-icon-button-height);--plasma-button-radius:var(--plasma-icon-button-radius);--plasma-button-disabled-opacity:var(--plasma-icon-button-disabled-opacity);--plasma-button-focus-color:var(--plasma-icon-button-focus-color);--plasma-button-spinner-size:var(--plasma-icon-button-spinner-size);--plasma-button-spinner-color:var(--plasma-icon-button-spinner-color);}a.IconButton_styles_1hknr37_b1ua728l__f14249fc{-webkit-text-decoration:none;text-decoration:none;}.IconButton_styles_1hknr37_b1ua728l__f14249fc.IconButton_styles_1hknr37_b1ua728l__f14249fc.IconButton_styles_1hknr37_buttonSquare__f14249fc{width:var(--plasma-button-height);padding:0;}.IconButton_styles_1hknr37_b1ua728l__f14249fc:hover{color:var(--plasma-button-color-hover,var(--plasma-button-color));background-color:var(--plasma-button-background-color-hover,var(--plasma-button-background-color));scale:var(--plasma-button-scale-hover);}.IconButton_styles_1hknr37_b1ua728l__f14249fc:active{color:var(--plasma-button-color-active,var(--plasma-button-color));background-color:var(--plasma-button-background-color-active,var(--plasma-button-background-color));scale:var(---plasma-button-scale-active);}.IconButton_styles_1hknr37_b1ua728l__f14249fc:focus{outline:none;}.IconButton_styles_1hknr37_b1ua728l__f14249fc::before{content:'';position:absolute;top:-0.125rem;left:-0.125rem;right:-0.125rem;bottom:-0.125rem;z-index:1;display:block;box-sizing:content-box;border:var(--plasma_private-btn-outline-size) solid transparent;border-radius:calc(0.125rem + var(--plasma_private-btn-br));-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.IconButton_styles_1hknr37_b1ua728l__f14249fc.IconButton_styles_1hknr37_focusVisible__f14249fc:focus::before,.IconButton_styles_1hknr37_b1ua728l__f14249fc[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 var(--plasma_private-btn-outline-size) var(--plasma-button-focus-color);}.IconButton_styles_1hknr37_b1ua728l__f14249fc[disabled]{opacity:var(--plasma-button-disabled-opacity);cursor:not-allowed;}.IconButton_styles_1hknr37_b1ua728l__f14249fc[disabled]:hover,.IconButton_styles_1hknr37_b1ua728l__f14249fc[disabled]:active{scale:none;color:var(--plasma-button-color);background-color:var(--plasma-button-background-color);}.IconButton_styles_1hknr37_b1ua728l__f14249fc.IconButton_styles_1hknr37_buttonStretchingFixed__f14249fc{width:var(--plasma-button-width);}.IconButton_styles_1hknr37_b1ua728l__f14249fc.IconButton_styles_1hknr37_buttonStretchingFilled__f14249fc{width:100%;}.IconButton_styles_1hknr37_b1ua728l__f14249fc.IconButton_styles_1hknr37_buttonStretchingAuto__f14249fc{width:auto;}
|
@@ -0,0 +1,50 @@
|
|
1
|
+
'use strict';
|
2
|
+
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
4
|
+
|
5
|
+
var Button = require('../Button/Button.js');
|
6
|
+
var base = require('../Button/variations/_view/base.js');
|
7
|
+
var base$1 = require('../Button/variations/_size/base.js');
|
8
|
+
var base$2 = require('../Button/variations/_disabled/base.js');
|
9
|
+
var base$3 = require('../Button/variations/_focused/base.js');
|
10
|
+
var base$4 = require('../Button/variations/_blurred/base.js');
|
11
|
+
var base$5 = require('../Button/variations/_stretching/base.js');
|
12
|
+
var IconButton_styles = require('./IconButton.styles.js');
|
13
|
+
|
14
|
+
var iconButtonRoot = Button.buttonRoot;
|
15
|
+
var iconButtonConfig = {
|
16
|
+
name: 'IconButton',
|
17
|
+
tag: 'button',
|
18
|
+
layout: iconButtonRoot,
|
19
|
+
base: IconButton_styles.base,
|
20
|
+
variations: {
|
21
|
+
view: {
|
22
|
+
css: base.base
|
23
|
+
},
|
24
|
+
size: {
|
25
|
+
css: base$1.base
|
26
|
+
},
|
27
|
+
disabled: {
|
28
|
+
css: base$2.base,
|
29
|
+
attrs: true
|
30
|
+
},
|
31
|
+
focused: {
|
32
|
+
css: base$3.base
|
33
|
+
},
|
34
|
+
blurred: {
|
35
|
+
css: base$4.base
|
36
|
+
},
|
37
|
+
stretching: {
|
38
|
+
css: base$5.base
|
39
|
+
}
|
40
|
+
},
|
41
|
+
defaults: {
|
42
|
+
view: 'secondary',
|
43
|
+
size: 'm',
|
44
|
+
stretching: 'fixed'
|
45
|
+
}
|
46
|
+
};
|
47
|
+
|
48
|
+
exports.iconButtonConfig = iconButtonConfig;
|
49
|
+
exports.iconButtonRoot = iconButtonRoot;
|
50
|
+
//# sourceMappingURL=IconButton.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"IconButton.js","sources":["../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import { buttonRoot } from '../Button';\nimport { base as viewCSS } from '../Button/variations/_view/base';\nimport { base as sizeCSS } from '../Button/variations/_size/base';\nimport { base as disabledCSS } from '../Button/variations/_disabled/base';\nimport { base as focusedCSS } from '../Button/variations/_focused/base';\nimport { base as blurredCSS } from '../Button/variations/_blurred/base';\nimport { base as stretchingCSS } from '../Button/variations/_stretching/base';\n\nimport { base } from './IconButton.styles';\n\nexport const iconButtonRoot = buttonRoot;\n\nexport const iconButtonConfig = {\n name: 'IconButton',\n tag: 'button',\n layout: iconButtonRoot,\n base,\n variations: {\n view: {\n css: viewCSS,\n },\n size: {\n css: sizeCSS,\n },\n disabled: {\n css: disabledCSS,\n attrs: true,\n },\n focused: {\n css: focusedCSS,\n },\n blurred: {\n css: blurredCSS,\n },\n stretching: {\n css: stretchingCSS,\n },\n },\n defaults: {\n view: 'secondary',\n size: 'm',\n stretching: 'fixed',\n },\n};\n"],"names":["iconButtonRoot","buttonRoot","iconButtonConfig","name","tag","layout","base","variations","view","css","viewCSS","size","sizeCSS","disabled","disabledCSS","attrs","focused","focusedCSS","blurred","blurredCSS","stretching","stretchingCSS","defaults"],"mappings":";;;;;;;;;;;;;AAUO,IAAMA,cAAc,GAAGC,kBAAU;AAEjC,IAAMC,gBAAgB,GAAG;AAC5BC,EAAAA,IAAI,EAAE,YAAY;AAClBC,EAAAA,GAAG,EAAE,QAAQ;AACbC,EAAAA,MAAM,EAAEL,cAAc;AACtBM,EAAAA,IAAI,EAAJA,sBAAI;AACJC,EAAAA,UAAU,EAAE;AACRC,IAAAA,IAAI,EAAE;AACFC,MAAAA,GAAG,EAAEC,SAAAA;KACR;AACDC,IAAAA,IAAI,EAAE;AACFF,MAAAA,GAAG,EAAEG,WAAAA;KACR;AACDC,IAAAA,QAAQ,EAAE;AACNJ,MAAAA,GAAG,EAAEK,WAAW;AAChBC,MAAAA,KAAK,EAAE,IAAA;KACV;AACDC,IAAAA,OAAO,EAAE;AACLP,MAAAA,GAAG,EAAEQ,WAAAA;KACR;AACDC,IAAAA,OAAO,EAAE;AACLT,MAAAA,GAAG,EAAEU,WAAAA;KACR;AACDC,IAAAA,UAAU,EAAE;AACRX,MAAAA,GAAG,EAAEY,WAAAA;AACT,KAAA;GACH;AACDC,EAAAA,QAAQ,EAAE;AACNd,IAAAA,IAAI,EAAE,WAAW;AACjBG,IAAAA,IAAI,EAAE,GAAG;AACTS,IAAAA,UAAU,EAAE,OAAA;AAChB,GAAA;AACJ;;;;;"}
|
@@ -0,0 +1,16 @@
|
|
1
|
+
import './IconButton.styles_1hknr37.css';
|
2
|
+
'use strict';
|
3
|
+
|
4
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
5
|
+
|
6
|
+
require('react');
|
7
|
+
require('../../utils/react.js');
|
8
|
+
require('@linaria/react');
|
9
|
+
require('focus-visible');
|
10
|
+
require('@linaria/core');
|
11
|
+
require('@salutejs/plasma-core');
|
12
|
+
|
13
|
+
var base = "b1ua728l";
|
14
|
+
|
15
|
+
exports.base = base;
|
16
|
+
//# sourceMappingURL=IconButton.styles.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"IconButton.styles.js","sources":["../../../src/components/IconButton/IconButton.styles.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nimport { buttonTokens } from '../Button';\nimport { baseContent as buttonBase } from '../Button/Button.styles';\n\nimport { tokens } from './IconButton.tokens';\n\n// Переопределние токенов из Button\nexport const mappingOverride = `\n ${buttonTokens.buttonPadding}: 0;\n\n ${buttonTokens.buttonColor}: var(${tokens.iconButtonColor});\n ${buttonTokens.buttonBackgroundColor}: var(${tokens.iconButtonBackgroundColor});\n\n ${buttonTokens.buttonColorHover}: var(${tokens.iconButtonColorHover});\n ${buttonTokens.buttonBackgroundColorHover}: var(${tokens.iconButtonBackgroundColorHover});\n\n ${buttonTokens.buttonColorActive}: var(${tokens.iconButtonColorActive});\n ${buttonTokens.buttonBackgroundColorActive}: var(${tokens.iconButtonBackgroundColorActive});\n\n\n ${buttonTokens.buttonFontFamily}: var(${tokens.iconButtonFontFamily});\n ${buttonTokens.buttonFontSize}: var(${tokens.iconButtonFontSize});\n ${buttonTokens.buttonFontStyle}: var(${tokens.iconButtonFontStyle});\n ${buttonTokens.buttonFontWeight}:var(${tokens.iconButtonFontWeight});\n ${buttonTokens.buttonLetterSpacing}: var(${tokens.iconButtonLetterSpacing});\n ${buttonTokens.buttonLineHeight}: var(${tokens.iconButtonLineHeight});\n\n ${buttonTokens.buttonWidth}: var(${tokens.iconButtonWidth});\n ${buttonTokens.buttonHeight}: var(${tokens.iconButtonHeight});\n ${buttonTokens.buttonRadius}: var(${tokens.iconButtonRadius});\n\n ${buttonTokens.buttonDisabledOpacity}: var(${tokens.iconButtonDisabledOpacity});\n ${buttonTokens.buttonFocusColor}: var(${tokens.iconButtonFocusColor});\n\n ${buttonTokens.buttonSpinnerSize}: var(${tokens.iconButtonSpinnerSize});\n ${buttonTokens.buttonSpinnerColor}: var(${tokens.iconButtonSpinnerColor});\n`;\n\nexport const base = css`\n ${buttonBase};\n ${mappingOverride};\n`;\n"],"names":["base"],"mappings":";;;;;;;;;;;AAuCO,IAAMA,IAAI,GAGhB;;;;"}
|
@@ -0,0 +1 @@
|
|
1
|
+
.b1ua728l{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;box-sizing:border-box;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);--plasma_private-btn-br:var(--plasma_computed-btn-br);border-radius:var(--plasma_private-btn-br);color:var(--plasma-button-color);background-color:var(--plasma-button-background-color);height:var(--plasma-button-height);width:var(--plasma-button-width);padding:0 var(--plasma-button-padding,calc(var(--plasma-button-height) * 1.618 / 4));font-family:var(--plasma-button-font-family);font-size:var(--plasma-button-font-size);font-style:var(--plasma-button-font-style);font-weight:var(--plasma-button-font-weight);-webkit-letter-spacing:var(--plasma-button-letter-spacing);-moz-letter-spacing:var(--plasma-button-letter-spacing);-ms-letter-spacing:var(--plasma-button-letter-spacing);letter-spacing:var(--plasma-button-letter-spacing);line-height:var(--plasma-button-line-height);--plasma_private-btn-outline-size:var(--plasma-button-outline-size,0.0625rem);position:relative;--plasma-button-padding:0;--plasma-button-color:var(--plasma-icon-button-color);--plasma-button-background-color:var(--plasma-icon-button-background-color);--plasma-button-color-hover:var(--plasma-icon-button-color-hover);--plasma-button-background-color-hover:var(--plasma-icon-button-background-color-hover);--plasma-button-color-active:var(--plasma-icon-button-color-active);--plasma-button-background-color-active:var(--plasma-icon-button-background-color-active);--plasma-button-font-family:var(--plasma-icon-button-font-family);--plasma-button-font-size:var(--plasma-icon-button-font-size);--plasma-button-font-style:var(--plasma-icon-button-font-style);--plasma-button-font-weight:var(--plasma-icon-button-font-weight);--plasma-button-letter-spacing:var(--plasma-icon-button-letter-spacing);--plasma-button-line-height:var(--plasma-icon-button-line-height);--plasma-button-width:var(--plasma-icon-button-width);--plasma-button-height:var(--plasma-icon-button-height);--plasma-button-radius:var(--plasma-icon-button-radius);--plasma-button-disabled-opacity:var(--plasma-icon-button-disabled-opacity);--plasma-button-focus-color:var(--plasma-icon-button-focus-color);--plasma-button-spinner-size:var(--plasma-icon-button-spinner-size);--plasma-button-spinner-color:var(--plasma-icon-button-spinner-color);}a.b1ua728l{-webkit-text-decoration:none;text-decoration:none;}.b1ua728l.b1ua728l.button-square{width:var(--plasma-button-height);padding:0;}.b1ua728l:hover{color:var(--plasma-button-color-hover,var(--plasma-button-color));background-color:var(--plasma-button-background-color-hover,var(--plasma-button-background-color));scale:var(--plasma-button-scale-hover);}.b1ua728l:active{color:var(--plasma-button-color-active,var(--plasma-button-color));background-color:var(--plasma-button-background-color-active,var(--plasma-button-background-color));scale:var(---plasma-button-scale-active);}.b1ua728l:focus{outline:none;}.b1ua728l::before{content:'';position:absolute;top:-0.125rem;left:-0.125rem;right:-0.125rem;bottom:-0.125rem;z-index:1;display:block;box-sizing:content-box;border:var(--plasma_private-btn-outline-size) solid transparent;border-radius:calc(0.125rem + var(--plasma_private-btn-br));-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.b1ua728l.focus-visible:focus::before,.b1ua728l[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 var(--plasma_private-btn-outline-size) var(--plasma-button-focus-color);}.b1ua728l[disabled]{opacity:var(--plasma-button-disabled-opacity);cursor:not-allowed;}.b1ua728l[disabled]:hover,.b1ua728l[disabled]:active{scale:none;color:var(--plasma-button-color);background-color:var(--plasma-button-background-color);}.b1ua728l.button-stretching-fixed{width:var(--plasma-button-width);}.b1ua728l.button-stretching-filled{width:100%;}.b1ua728l.button-stretching-auto{width:auto;}
|
@@ -0,0 +1,32 @@
|
|
1
|
+
'use strict';
|
2
|
+
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
4
|
+
|
5
|
+
var tokens = {
|
6
|
+
iconButtonColor: '--plasma-icon-button-color',
|
7
|
+
iconButtonBackgroundColor: '--plasma-icon-button-background-color',
|
8
|
+
iconButtonColorHover: '--plasma-icon-button-color-hover',
|
9
|
+
iconButtonBackgroundColorHover: '--plasma-icon-button-background-color-hover',
|
10
|
+
iconButtonColorActive: '--plasma-icon-button-color-active',
|
11
|
+
iconButtonBackgroundColorActive: '--plasma-icon-button-background-color-active',
|
12
|
+
iconButtonScaleHover: '--plasma-icon-button-scale-hover',
|
13
|
+
iconButtonScaleActive: '---plasma-icon-button-scale-active',
|
14
|
+
iconButtonHeight: '--plasma-icon-button-height',
|
15
|
+
iconButtonWidth: '--plasma-icon-button-width',
|
16
|
+
iconButtonPadding: '--plasma-icon-button-padding',
|
17
|
+
iconButtonRadius: '--plasma-icon-button-radius',
|
18
|
+
iconButtonRadiusCircle: '--plasma-icon-button-radius-circle',
|
19
|
+
iconButtonFontFamily: '--plasma-icon-button-font-family',
|
20
|
+
iconButtonFontSize: '--plasma-icon-button-font-size',
|
21
|
+
iconButtonFontStyle: '--plasma-icon-button-font-style',
|
22
|
+
iconButtonFontWeight: '--plasma-icon-button-font-weight',
|
23
|
+
iconButtonLetterSpacing: '--plasma-icon-button-letter-spacing',
|
24
|
+
iconButtonLineHeight: '--plasma-icon-button-line-height',
|
25
|
+
iconButtonDisabledOpacity: '--plasma-icon-button-disabled-opacity',
|
26
|
+
iconButtonFocusColor: '--plasma-icon-button-focus-color',
|
27
|
+
iconButtonSpinnerColor: '--plasma-icon-button-spinner-color',
|
28
|
+
iconButtonSpinnerSize: '--plasma-icon-button-spinner-size'
|
29
|
+
};
|
30
|
+
|
31
|
+
exports.tokens = tokens;
|
32
|
+
//# sourceMappingURL=IconButton.tokens.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"IconButton.tokens.js","sources":["../../../src/components/IconButton/IconButton.tokens.ts"],"sourcesContent":["export const tokens = {\n iconButtonColor: '--plasma-icon-button-color',\n iconButtonBackgroundColor: '--plasma-icon-button-background-color',\n iconButtonColorHover: '--plasma-icon-button-color-hover',\n iconButtonBackgroundColorHover: '--plasma-icon-button-background-color-hover',\n iconButtonColorActive: '--plasma-icon-button-color-active',\n iconButtonBackgroundColorActive: '--plasma-icon-button-background-color-active',\n\n iconButtonScaleHover: '--plasma-icon-button-scale-hover',\n iconButtonScaleActive: '---plasma-icon-button-scale-active',\n iconButtonHeight: '--plasma-icon-button-height',\n iconButtonWidth: '--plasma-icon-button-width',\n iconButtonPadding: '--plasma-icon-button-padding',\n iconButtonRadius: '--plasma-icon-button-radius',\n iconButtonRadiusCircle: '--plasma-icon-button-radius-circle',\n\n iconButtonFontFamily: '--plasma-icon-button-font-family',\n iconButtonFontSize: '--plasma-icon-button-font-size',\n iconButtonFontStyle: '--plasma-icon-button-font-style',\n iconButtonFontWeight: '--plasma-icon-button-font-weight',\n iconButtonLetterSpacing: '--plasma-icon-button-letter-spacing',\n iconButtonLineHeight: '--plasma-icon-button-line-height',\n\n iconButtonDisabledOpacity: '--plasma-icon-button-disabled-opacity',\n iconButtonFocusColor: '--plasma-icon-button-focus-color',\n\n iconButtonSpinnerColor: '--plasma-icon-button-spinner-color',\n iconButtonSpinnerSize: '--plasma-icon-button-spinner-size',\n};\n"],"names":["tokens","iconButtonColor","iconButtonBackgroundColor","iconButtonColorHover","iconButtonBackgroundColorHover","iconButtonColorActive","iconButtonBackgroundColorActive","iconButtonScaleHover","iconButtonScaleActive","iconButtonHeight","iconButtonWidth","iconButtonPadding","iconButtonRadius","iconButtonRadiusCircle","iconButtonFontFamily","iconButtonFontSize","iconButtonFontStyle","iconButtonFontWeight","iconButtonLetterSpacing","iconButtonLineHeight","iconButtonDisabledOpacity","iconButtonFocusColor","iconButtonSpinnerColor","iconButtonSpinnerSize"],"mappings":";;;;AAAO,IAAMA,MAAM,GAAG;AAClBC,EAAAA,eAAe,EAAE,4BAA4B;AAC7CC,EAAAA,yBAAyB,EAAE,uCAAuC;AAClEC,EAAAA,oBAAoB,EAAE,kCAAkC;AACxDC,EAAAA,8BAA8B,EAAE,6CAA6C;AAC7EC,EAAAA,qBAAqB,EAAE,mCAAmC;AAC1DC,EAAAA,+BAA+B,EAAE,8CAA8C;AAE/EC,EAAAA,oBAAoB,EAAE,kCAAkC;AACxDC,EAAAA,qBAAqB,EAAE,oCAAoC;AAC3DC,EAAAA,gBAAgB,EAAE,6BAA6B;AAC/CC,EAAAA,eAAe,EAAE,4BAA4B;AAC7CC,EAAAA,iBAAiB,EAAE,8BAA8B;AACjDC,EAAAA,gBAAgB,EAAE,6BAA6B;AAC/CC,EAAAA,sBAAsB,EAAE,oCAAoC;AAE5DC,EAAAA,oBAAoB,EAAE,kCAAkC;AACxDC,EAAAA,kBAAkB,EAAE,gCAAgC;AACpDC,EAAAA,mBAAmB,EAAE,iCAAiC;AACtDC,EAAAA,oBAAoB,EAAE,kCAAkC;AACxDC,EAAAA,uBAAuB,EAAE,qCAAqC;AAC9DC,EAAAA,oBAAoB,EAAE,kCAAkC;AAExDC,EAAAA,yBAAyB,EAAE,uCAAuC;AAClEC,EAAAA,oBAAoB,EAAE,kCAAkC;AAExDC,EAAAA,sBAAsB,EAAE,oCAAoC;AAC5DC,EAAAA,qBAAqB,EAAE,mCAAA;AAC3B;;;;"}
|
package/cjs/index.css
CHANGED
@@ -14,6 +14,8 @@
|
|
14
14
|
.Button_styles_uqvh6u_l4dfhbg__b7cda4d5{position:absolute;}
|
15
15
|
.Button_styles_uqvh6u_srdlazt__b7cda4d5{--plasma-spinner-size:var(--plasma-button-spinner-size);--plasma-spinner-color:var(--plasma-button-spinner-color);}
|
16
16
|
|
17
|
+
.IconButton_styles_1hknr37_b1ua728l__f14249fc{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;box-sizing:border-box;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);--plasma_private-btn-br:var(--plasma_computed-btn-br);border-radius:var(--plasma_private-btn-br);color:var(--plasma-button-color);background-color:var(--plasma-button-background-color);height:var(--plasma-button-height);width:var(--plasma-button-width);padding:0 var(--plasma-button-padding,calc(var(--plasma-button-height) * 1.618 / 4));font-family:var(--plasma-button-font-family);font-size:var(--plasma-button-font-size);font-style:var(--plasma-button-font-style);font-weight:var(--plasma-button-font-weight);-webkit-letter-spacing:var(--plasma-button-letter-spacing);-moz-letter-spacing:var(--plasma-button-letter-spacing);-ms-letter-spacing:var(--plasma-button-letter-spacing);letter-spacing:var(--plasma-button-letter-spacing);line-height:var(--plasma-button-line-height);--plasma_private-btn-outline-size:var(--plasma-button-outline-size,0.0625rem);position:relative;--plasma-button-padding:0;--plasma-button-color:var(--plasma-icon-button-color);--plasma-button-background-color:var(--plasma-icon-button-background-color);--plasma-button-color-hover:var(--plasma-icon-button-color-hover);--plasma-button-background-color-hover:var(--plasma-icon-button-background-color-hover);--plasma-button-color-active:var(--plasma-icon-button-color-active);--plasma-button-background-color-active:var(--plasma-icon-button-background-color-active);--plasma-button-font-family:var(--plasma-icon-button-font-family);--plasma-button-font-size:var(--plasma-icon-button-font-size);--plasma-button-font-style:var(--plasma-icon-button-font-style);--plasma-button-font-weight:var(--plasma-icon-button-font-weight);--plasma-button-letter-spacing:var(--plasma-icon-button-letter-spacing);--plasma-button-line-height:var(--plasma-icon-button-line-height);--plasma-button-width:var(--plasma-icon-button-width);--plasma-button-height:var(--plasma-icon-button-height);--plasma-button-radius:var(--plasma-icon-button-radius);--plasma-button-disabled-opacity:var(--plasma-icon-button-disabled-opacity);--plasma-button-focus-color:var(--plasma-icon-button-focus-color);--plasma-button-spinner-size:var(--plasma-icon-button-spinner-size);--plasma-button-spinner-color:var(--plasma-icon-button-spinner-color);}a.IconButton_styles_1hknr37_b1ua728l__f14249fc{-webkit-text-decoration:none;text-decoration:none;}.IconButton_styles_1hknr37_b1ua728l__f14249fc.IconButton_styles_1hknr37_b1ua728l__f14249fc.IconButton_styles_1hknr37_buttonSquare__f14249fc{width:var(--plasma-button-height);padding:0;}.IconButton_styles_1hknr37_b1ua728l__f14249fc:hover{color:var(--plasma-button-color-hover,var(--plasma-button-color));background-color:var(--plasma-button-background-color-hover,var(--plasma-button-background-color));scale:var(--plasma-button-scale-hover);}.IconButton_styles_1hknr37_b1ua728l__f14249fc:active{color:var(--plasma-button-color-active,var(--plasma-button-color));background-color:var(--plasma-button-background-color-active,var(--plasma-button-background-color));scale:var(---plasma-button-scale-active);}.IconButton_styles_1hknr37_b1ua728l__f14249fc:focus{outline:none;}.IconButton_styles_1hknr37_b1ua728l__f14249fc::before{content:'';position:absolute;top:-0.125rem;left:-0.125rem;right:-0.125rem;bottom:-0.125rem;z-index:1;display:block;box-sizing:content-box;border:var(--plasma_private-btn-outline-size) solid transparent;border-radius:calc(0.125rem + var(--plasma_private-btn-br));-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.IconButton_styles_1hknr37_b1ua728l__f14249fc.IconButton_styles_1hknr37_focusVisible__f14249fc:focus::before,.IconButton_styles_1hknr37_b1ua728l__f14249fc[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 var(--plasma_private-btn-outline-size) var(--plasma-button-focus-color);}.IconButton_styles_1hknr37_b1ua728l__f14249fc[disabled]{opacity:var(--plasma-button-disabled-opacity);cursor:not-allowed;}.IconButton_styles_1hknr37_b1ua728l__f14249fc[disabled]:hover,.IconButton_styles_1hknr37_b1ua728l__f14249fc[disabled]:active{scale:none;color:var(--plasma-button-color);background-color:var(--plasma-button-background-color);}.IconButton_styles_1hknr37_b1ua728l__f14249fc.IconButton_styles_1hknr37_buttonStretchingFixed__f14249fc{width:var(--plasma-button-width);}.IconButton_styles_1hknr37_b1ua728l__f14249fc.IconButton_styles_1hknr37_buttonStretchingFilled__f14249fc{width:100%;}.IconButton_styles_1hknr37_b1ua728l__f14249fc.IconButton_styles_1hknr37_buttonStretchingAuto__f14249fc{width:auto;}
|
18
|
+
|
17
19
|
.base_6k3uip_b7jdqtc__e6616a37.base_6k3uip_buttonGroupOverrideStyles__e6616a37 .base_6k3uip_buttonItem__e6616a37{--plasma-button-color:var(--plasma-button-group-item-color);--plasma-button-background-color:var(--plasma-button-group-item-background-color);--plasma-button-color-hover:var(--plasma-button-group-item-color-hover);--plasma-button-background-color-hover:var(--plasma-button-group-item-background-color-hover);--plasma-button-color-active:var(--plasma-button-group-item-color-active);--plasma-button-background-color-active:var(--plasma-button-group-item-background-color-active);}
|
18
20
|
|
19
21
|
.base_xxxewc_bc0nfse__e70323a1.base_xxxewc_buttonGroupOverrideStyles__e70323a1 .base_xxxewc_buttonItem__e70323a1{--plasma-button-height:var(--plasma-button-group-item-height);--plasma-button-padding:var(--plasma-button-group-item-padding);---plasma-button-scale-active:var(--plasma-button-group-item-scale-active);--plasma-button-scale-hover:var(--plasma-button-group-item-scale-hover);--plasma-button-font-family:var(--plasma-button-group-item-font-family);--plasma-button-font-size:var(--plasma-button-group-item-font-size);--plasma-button-font-style:var(--plasma-button-group-item-font-style);--plasma-button-font-weight:var(--plasma-button-group-item-font-weight);--plasma-button-letter-spacing:var(--plasma-button-group-item-letter-spacing);--plasma-button-line-height:var(--plasma-button-group-item-line-height);}
|
package/cjs/index.js
CHANGED
@@ -20,6 +20,8 @@ var useDidMountEffect = require('./hooks/useDidMountEffect.js');
|
|
20
20
|
var index$1 = require('./utils/index.js');
|
21
21
|
var Button = require('./components/Button/Button.js');
|
22
22
|
var Button_tokens = require('./components/Button/Button.tokens.js');
|
23
|
+
var IconButton = require('./components/IconButton/IconButton.js');
|
24
|
+
var IconButton_tokens = require('./components/IconButton/IconButton.tokens.js');
|
23
25
|
var ButtonGroup = require('./components/ButtonGroup/ButtonGroup.js');
|
24
26
|
var ButtonGroup_tokens = require('./components/ButtonGroup/ButtonGroup.tokens.js');
|
25
27
|
var Chip = require('./components/Chip/Chip.js');
|
@@ -257,6 +259,9 @@ exports.buttonConfig = Button.buttonConfig;
|
|
257
259
|
exports.buttonRoot = Button.buttonRoot;
|
258
260
|
exports.buttonClasses = Button_tokens.classes;
|
259
261
|
exports.buttonTokens = Button_tokens.tokens;
|
262
|
+
exports.iconButtonConfig = IconButton.iconButtonConfig;
|
263
|
+
exports.iconButtonRoot = IconButton.iconButtonRoot;
|
264
|
+
exports.iconButtonTokens = IconButton_tokens.tokens;
|
260
265
|
exports.buttonGroupConfig = ButtonGroup.buttonGroupConfig;
|
261
266
|
exports.buttonGroupRoot = ButtonGroup.buttonGroupRoot;
|
262
267
|
exports.buttonGroupClasses = ButtonGroup_tokens.classes;
|
package/cjs/index.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Button.styles.js","sources":["../../../src/components/Button/Button.styles.ts"],"sourcesContent":["import { css } from '@linaria/core';\nimport { styled } from '@linaria/react';\n\nimport { applyEllipsis } from '../../mixins';\nimport { component, mergeConfig } from '../../engines';\nimport { spinnerConfig, spinnerTokens } from '../Spinner';\n\nimport { classes, tokens } from './Button.tokens';\n\n// issue #823\nconst mergedConfig = mergeConfig(spinnerConfig);\nconst Spinner = component(mergedConfig);\n\nexport const base = css`\n position: relative;\n display: inline-flex;\n align-items: center;\n box-sizing: border-box;\n justify-content: center;\n\n appearance: none;\n border: none;\n cursor: pointer;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n\n a& {\n text-decoration: none;\n }\n\n /* NOTE: \n --plasma_computed-btn-br-radius is defined in Button.tsx\n */\n --plasma_private-btn-br: var(--plasma_computed-btn-br);\n border-radius: var(--plasma_private-btn-br);\n\n &&.${String(classes.buttonSquare)} {\n width: var(${tokens.buttonHeight});\n padding: 0;\n }\n`;\n\n// TODO: PLASMA-2164\n// WHY do we need applyEllipsis ??\n// Если внутри кнопки тескт и на нее решили повесить square пропс\nexport const ButtonText = styled.span`\n :not(:last-child) {\n margin-right: 0.375rem;\n }\n\n :not(:first-child) {\n margin-left: 0.375rem;\n }\n\n ${applyEllipsis()}\n`;\n\n// TODO: #720\nexport const LoadWrap = styled.div<{ isLoading?: boolean }>`\n opacity: ${({ isLoading }) => (isLoading ? '0' : '1')};\n display: flex;\n width: 100%;\n align-items: inherit;\n justify-content: inherit;\n height: 100%;\n`;\n\nexport const Loader = styled.div`\n position: absolute;\n`;\n\nexport const StyledSpinner = styled(Spinner)`\n ${spinnerTokens.size}: var(${tokens.buttonSpinnerSize});\n ${spinnerTokens.color}: var(${tokens.buttonSpinnerColor});\n`;\n"],"names":["mergedConfig","mergeConfig","spinnerConfig","Spinner","component","base","ButtonText","styled","name","class","propsAsIs","_exp4","_ref","isLoading","LoadWrap","vars","Loader","_exp5","StyledSpinner"],"mappings":"
|
1
|
+
{"version":3,"file":"Button.styles.js","sources":["../../../src/components/Button/Button.styles.ts"],"sourcesContent":["import { css } from '@linaria/core';\nimport { styled } from '@linaria/react';\n\nimport { applyEllipsis, addFocus } from '../../mixins';\nimport { component, mergeConfig } from '../../engines';\nimport { spinnerConfig, spinnerTokens } from '../Spinner';\n\nimport { classes, tokens } from './Button.tokens';\n\n// issue #823\nconst mergedConfig = mergeConfig(spinnerConfig);\nconst Spinner = component(mergedConfig);\n\nexport const base = css`\n position: relative;\n display: inline-flex;\n align-items: center;\n box-sizing: border-box;\n justify-content: center;\n\n appearance: none;\n border: none;\n cursor: pointer;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n\n a& {\n text-decoration: none;\n }\n\n /* NOTE: \n --plasma_computed-btn-br-radius is defined in Button.tsx\n */\n --plasma_private-btn-br: var(--plasma_computed-btn-br);\n border-radius: var(--plasma_private-btn-br);\n\n &&.${String(classes.buttonSquare)} {\n width: var(${tokens.buttonHeight});\n padding: 0;\n }\n`;\n\n// TODO: PLASMA-2164\n// WHY do we need applyEllipsis ??\n// Если внутри кнопки тескт и на нее решили повесить square пропс\nexport const ButtonText = styled.span`\n :not(:last-child) {\n margin-right: 0.375rem;\n }\n\n :not(:first-child) {\n margin-left: 0.375rem;\n }\n\n ${applyEllipsis()}\n`;\n\n// TODO: #720\nexport const LoadWrap = styled.div<{ isLoading?: boolean }>`\n opacity: ${({ isLoading }) => (isLoading ? '0' : '1')};\n display: flex;\n width: 100%;\n align-items: inherit;\n justify-content: inherit;\n height: 100%;\n`;\n\nexport const Loader = styled.div`\n position: absolute;\n`;\n\nexport const StyledSpinner = styled(Spinner)`\n ${spinnerTokens.size}: var(${tokens.buttonSpinnerSize});\n ${spinnerTokens.color}: var(${tokens.buttonSpinnerColor});\n`;\n\n// INFO: Для возможности переиспользования стилей в других компонентах\nexport const baseContent = `\n position: relative;\n display: inline-flex;\n align-items: center;\n box-sizing: border-box;\n justify-content: center;\n\n appearance: none;\n border: none;\n cursor: pointer;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n\n a& {\n text-decoration: none;\n }\n\n /* NOTE: \n --plasma_computed-btn-br-radius is defined in Button.tsx\n */\n --plasma_private-btn-br: var(--plasma_computed-btn-br);\n border-radius: var(--plasma_private-btn-br);\n\n &&.${String(classes.buttonSquare)} {\n width: var(${tokens.buttonHeight});\n padding: 0;\n }\n\n color: var(${tokens.buttonColor});\n background-color: var(${tokens.buttonBackgroundColor});\n\n :hover {\n color: var(${tokens.buttonColorHover}, var(${tokens.buttonColor}));\n background-color: var(${tokens.buttonBackgroundColorHover}, var(${tokens.buttonBackgroundColor}));\n\n scale: var(${tokens.buttonScaleHover});\n }\n\n :active {\n color: var(${tokens.buttonColorActive}, var(${tokens.buttonColor}));\n background-color: var(${tokens.buttonBackgroundColorActive}, var(${tokens.buttonBackgroundColor}));\n\n scale: var(${tokens.buttonScaleActive});\n }\n\n height: var(${tokens.buttonHeight});\n width: var(${tokens.buttonWidth});\n\n /* TODO: #714 move these calc's to plasma-mapping | ds-generator and add Math.round() */\n padding: 0 var(${tokens.buttonPadding}, calc(var(${tokens.buttonHeight}) * 1.618 / 4));\n\n font-family: var(${tokens.buttonFontFamily});\n font-size: var(${tokens.buttonFontSize});\n font-style: var(${tokens.buttonFontStyle});\n font-weight: var(${tokens.buttonFontWeight});\n letter-spacing: var(${tokens.buttonLetterSpacing});\n line-height: var(${tokens.buttonLineHeight});\n\n /* TODO: #710 make it token API ? */\n --plasma_private-btn-outline-size: var(--plasma-button-outline-size, 0.0625rem);\n\n :focus {\n outline: none;\n }\n\n ${addFocus({\n outlineOffset: '-0.125rem',\n outlineSize: 'var(--plasma_private-btn-outline-size)',\n outlineRadius: 'calc(0.125rem + var(--plasma_private-btn-br))',\n outlineColor: `var(${tokens.buttonFocusColor})`,\n })}\n\n &[disabled] {\n opacity: var(${tokens.buttonDisabledOpacity});\n cursor: not-allowed;\n\n :hover,\n :active {\n scale: none;\n\n color: var(${tokens.buttonColor});\n background-color: var(${tokens.buttonBackgroundColor});\n }\n }\n\n &.${classes.fixedStretching} {\n width: var(${tokens.buttonWidth});\n }\n &.${classes.filledStretching} {\n width: 100%;\n }\n &.${classes.autoStretching} {\n width: auto;\n }\n`;\n"],"names":["mergedConfig","mergeConfig","spinnerConfig","Spinner","component","base","ButtonText","styled","name","class","propsAsIs","_exp4","_ref","isLoading","LoadWrap","vars","Loader","_exp5","StyledSpinner"],"mappings":";;;;;;AASA;AACA,IAAMA,YAAY,gBAAGC,WAAW,CAACC,aAAa,CAAC,CAAA;AAC/C,IAAMC,OAAO,gBAAGC,SAAS,CAACJ,YAAY,CAAC,CAAA;AAEhC,IAAMK,IAAI,GA0BhB,UAAA;;AAED;AACA;AACA;AACO,IAAMC,UAAU,gBAAGC,MAAM,CAAA,MAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,YAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAU/B,EAAA;;AAED;AAAA,IAAAC,KAAA,GAvDkBA,SAuDlBA,KAAAA,GAAA;AAAA,EAAA,OAEe,UAAAC,IAAA,EAAA;AAAA,IAAA,IAAGC,SAAAA,GAAAA,IAAAA,CAAAA,SAAAA,CAAAA;AAAAA,IAAAA,OAAiBA,SAAS,GAAG,GAAG,GAAG,GAAI,CAAA;AAAA,GAAA,CAAA;AAAA,CAAA,CAAA;AADlD,IAAMC,QAAQ,gBAAGP,MAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,UAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAAK,EAAAA,IAAA,EAAA;AAAA,IAAA,WAAA,EAAA,cACfJ,KAA0C,EAAA,CAAA;AAAA,GAAA;AAAA,CAMxD,EAAA;AAEM,IAAMK,MAAM,gBAAGT,MAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,QAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAE3B,EAAA;AAAC,IAAAO,KAAA,GAnEgBA,SAmEhBA,KAAAA,GAAA;AAAA,EAAA,OAEkCd,OAAO,CAAA;AAAA,CAAA,CAAA;AAApC,IAAMe,aAAa,gBAAGX,MAAM,CAAAU,KAAA,EAAA,CAAA,CAAA;AAAAT,EAAAA,IAAA,EAAA,eAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,IAAA;AAAA,CAGlC;;;;"}
|
@@ -11,6 +11,7 @@ import '@linaria/react';
|
|
11
11
|
import { DEFAULT_Z_INDEX } from '../Popup/utils/index.js';
|
12
12
|
import { Overlay } from '../Overlay/Overlay.js';
|
13
13
|
import { panelConfig } from '../Panel/Panel.js';
|
14
|
+
import 'focus-visible';
|
14
15
|
import { classes, tokens } from './Drawer.tokens.js';
|
15
16
|
import { base } from './variations/_view/base.js';
|
16
17
|
import { base as base$1 } from './variations/_size/base.js';
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Drawer.js","sources":["../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from 'react';\nimport { useFocusTrap, useForkRef, safeUseId } from '@salutejs/plasma-core';\n\nimport { component, mergeConfig } from '../../engines';\nimport type { RootProps } from '../../engines';\nimport { usePopupContext } from '../Popup';\nimport { Overlay } from '../Overlay';\nimport { DEFAULT_Z_INDEX } from '../Popup/utils';\nimport { panelConfig } from '../Panel';\nimport { getSizeValueFromProp } from '../../utils';\n\nimport { classes, tokens } from './Drawer.tokens';\nimport type { DrawerProps } from './Drawer.types';\nimport { base as viewCSS } from './variations/_view/base';\nimport { base as sizeCSS } from './variations/_size/base';\nimport { base as borderRadiusCSS } from './variations/_borderRadius/base';\nimport { StyledPopup } from './Drawer.styles';\nimport { getIdLastDrawer } from './DrawerContext';\nimport { useDrawer } from './hooks';\n\n// issue #823\nconst mergedPanelConfig = mergeConfig(panelConfig);\nconst Panel = component(mergedPanelConfig);\n\nexport const drawerRoot = (Root: RootProps<HTMLDivElement, DrawerProps>) =>\n forwardRef<HTMLDivElement, DrawerProps>(\n (\n {\n id,\n zIndex,\n popupInfo,\n withBlur,\n children,\n view,\n size,\n width,\n height,\n isOpen,\n initialFocusRef,\n focusAfterRef,\n className,\n onClose,\n onOverlayClick,\n onEscKeyDown,\n offset,\n frame,\n borderRadius = 'none',\n placement = 'right',\n closeOnEsc = true,\n closeOnOverlayClick = true,\n asModal = true,\n ...rest\n },\n outerRef,\n ) => {\n const trapRef = useFocusTrap(true, initialFocusRef, focusAfterRef);\n const popupController = usePopupContext();\n\n const innerRef = useForkRef<HTMLDivElement>(trapRef, outerRef);\n\n const uniqId = safeUseId();\n const innerId = id || uniqId;\n const overlayBackgroundToken = withBlur\n ? `var(${tokens.drawerOverlayWithBlurColor})`\n : `var(${tokens.drawerOverlayColor})`;\n const innerWidth = width ? getSizeValueFromProp(width) : '100%';\n const innerHeight = height ? getSizeValueFromProp(height) : '100%';\n\n const { drawerInfo } = useDrawer({\n id: innerId,\n isOpen,\n closeOnEsc,\n onEscKeyDown,\n onClose,\n popupInfo,\n disableScroll: asModal,\n });\n const transparent = useMemo(() => getIdLastDrawer(popupController.items) !== innerId, [\n innerId,\n popupController.items,\n ]);\n\n const onDrawerOverlayKeyDown = (event: React.MouseEvent<HTMLDivElement>) => {\n if (onOverlayClick) {\n onOverlayClick(event);\n return;\n }\n\n if (onClose) {\n onClose();\n }\n };\n\n return (\n <StyledPopup\n id={innerId}\n ref={asModal ? innerRef : outerRef}\n isOpen={isOpen}\n zIndex={zIndex}\n placement={placement}\n popupInfo={drawerInfo}\n frame={frame}\n width={innerWidth}\n height={innerHeight}\n offset={offset}\n withAnimation\n overlay={\n asModal && (\n <Root view={view}>\n <Overlay\n className={classes.overlay}\n zIndex={zIndex || DEFAULT_Z_INDEX}\n backgroundColorProperty={overlayBackgroundToken}\n withBlur={withBlur}\n transparent={transparent}\n isClickable={closeOnOverlayClick}\n onOverlayClick={onDrawerOverlayKeyDown}\n />\n </Root>\n )\n }\n {...rest}\n >\n <Root\n view={view}\n size={size}\n style={{ width: innerWidth, height: innerHeight }}\n borderRadius={borderRadius}\n >\n <Panel width={innerWidth} height={innerHeight} className={className}>\n {children}\n </Panel>\n </Root>\n </StyledPopup>\n );\n },\n );\n\nexport const drawerConfig = {\n name: 'Drawer',\n tag: 'div',\n layout: drawerRoot,\n base: '',\n variations: {\n view: {\n css: viewCSS,\n },\n size: {\n css: sizeCSS,\n },\n borderRadius: {\n css: borderRadiusCSS,\n },\n },\n defaults: {\n view: 'default',\n size: 'm',\n borderRadius: 'none',\n },\n};\n"],"names":["mergedPanelConfig","mergeConfig","panelConfig","Panel","component","drawerRoot","Root","forwardRef","_ref","outerRef","id","zIndex","popupInfo","withBlur","children","view","size","width","height","isOpen","initialFocusRef","focusAfterRef","className","onClose","onOverlayClick","onEscKeyDown","offset","frame","_ref$borderRadius","borderRadius","_ref$placement","placement","_ref$closeOnEsc","closeOnEsc","_ref$closeOnOverlayCl","closeOnOverlayClick","_ref$asModal","asModal","rest","_objectWithoutProperties","_excluded","trapRef","useFocusTrap","popupController","usePopupContext","innerRef","useForkRef","uniqId","safeUseId","innerId","overlayBackgroundToken","concat","tokens","drawerOverlayWithBlurColor","drawerOverlayColor","innerWidth","getSizeValueFromProp","innerHeight","_useDrawer","useDrawer","disableScroll","drawerInfo","transparent","useMemo","getIdLastDrawer","items","onDrawerOverlayKeyDown","event","React","createElement","StyledPopup","_extends","ref","withAnimation","overlay","Overlay","classes","DEFAULT_Z_INDEX","backgroundColorProperty","isClickable","style","drawerConfig","name","tag","layout","base","variations","css","viewCSS","sizeCSS","borderRadiusCSS","defaults"],"mappings":"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"}
|
1
|
+
{"version":3,"file":"Drawer.js","sources":["../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from 'react';\nimport { useFocusTrap, useForkRef, safeUseId } from '@salutejs/plasma-core';\n\nimport { component, mergeConfig } from '../../engines';\nimport type { RootProps } from '../../engines';\nimport { usePopupContext } from '../Popup';\nimport { Overlay } from '../Overlay';\nimport { DEFAULT_Z_INDEX } from '../Popup/utils';\nimport { panelConfig } from '../Panel';\nimport { getSizeValueFromProp } from '../../utils';\n\nimport { classes, tokens } from './Drawer.tokens';\nimport type { DrawerProps } from './Drawer.types';\nimport { base as viewCSS } from './variations/_view/base';\nimport { base as sizeCSS } from './variations/_size/base';\nimport { base as borderRadiusCSS } from './variations/_borderRadius/base';\nimport { StyledPopup } from './Drawer.styles';\nimport { getIdLastDrawer } from './DrawerContext';\nimport { useDrawer } from './hooks';\n\n// issue #823\nconst mergedPanelConfig = mergeConfig(panelConfig);\nconst Panel = component(mergedPanelConfig);\n\nexport const drawerRoot = (Root: RootProps<HTMLDivElement, DrawerProps>) =>\n forwardRef<HTMLDivElement, DrawerProps>(\n (\n {\n id,\n zIndex,\n popupInfo,\n withBlur,\n children,\n view,\n size,\n width,\n height,\n isOpen,\n initialFocusRef,\n focusAfterRef,\n className,\n onClose,\n onOverlayClick,\n onEscKeyDown,\n offset,\n frame,\n borderRadius = 'none',\n placement = 'right',\n closeOnEsc = true,\n closeOnOverlayClick = true,\n asModal = true,\n ...rest\n },\n outerRef,\n ) => {\n const trapRef = useFocusTrap(true, initialFocusRef, focusAfterRef);\n const popupController = usePopupContext();\n\n const innerRef = useForkRef<HTMLDivElement>(trapRef, outerRef);\n\n const uniqId = safeUseId();\n const innerId = id || uniqId;\n const overlayBackgroundToken = withBlur\n ? `var(${tokens.drawerOverlayWithBlurColor})`\n : `var(${tokens.drawerOverlayColor})`;\n const innerWidth = width ? getSizeValueFromProp(width) : '100%';\n const innerHeight = height ? getSizeValueFromProp(height) : '100%';\n\n const { drawerInfo } = useDrawer({\n id: innerId,\n isOpen,\n closeOnEsc,\n onEscKeyDown,\n onClose,\n popupInfo,\n disableScroll: asModal,\n });\n const transparent = useMemo(() => getIdLastDrawer(popupController.items) !== innerId, [\n innerId,\n popupController.items,\n ]);\n\n const onDrawerOverlayKeyDown = (event: React.MouseEvent<HTMLDivElement>) => {\n if (onOverlayClick) {\n onOverlayClick(event);\n return;\n }\n\n if (onClose) {\n onClose();\n }\n };\n\n return (\n <StyledPopup\n id={innerId}\n ref={asModal ? innerRef : outerRef}\n isOpen={isOpen}\n zIndex={zIndex}\n placement={placement}\n popupInfo={drawerInfo}\n frame={frame}\n width={innerWidth}\n height={innerHeight}\n offset={offset}\n withAnimation\n overlay={\n asModal && (\n <Root view={view}>\n <Overlay\n className={classes.overlay}\n zIndex={zIndex || DEFAULT_Z_INDEX}\n backgroundColorProperty={overlayBackgroundToken}\n withBlur={withBlur}\n transparent={transparent}\n isClickable={closeOnOverlayClick}\n onOverlayClick={onDrawerOverlayKeyDown}\n />\n </Root>\n )\n }\n {...rest}\n >\n <Root\n view={view}\n size={size}\n style={{ width: innerWidth, height: innerHeight }}\n borderRadius={borderRadius}\n >\n <Panel width={innerWidth} height={innerHeight} className={className}>\n {children}\n </Panel>\n </Root>\n </StyledPopup>\n );\n },\n );\n\nexport const drawerConfig = {\n name: 'Drawer',\n tag: 'div',\n layout: drawerRoot,\n base: '',\n variations: {\n view: {\n css: viewCSS,\n },\n size: {\n css: sizeCSS,\n },\n borderRadius: {\n css: borderRadiusCSS,\n },\n },\n defaults: {\n view: 'default',\n size: 'm',\n borderRadius: 'none',\n },\n};\n"],"names":["mergedPanelConfig","mergeConfig","panelConfig","Panel","component","drawerRoot","Root","forwardRef","_ref","outerRef","id","zIndex","popupInfo","withBlur","children","view","size","width","height","isOpen","initialFocusRef","focusAfterRef","className","onClose","onOverlayClick","onEscKeyDown","offset","frame","_ref$borderRadius","borderRadius","_ref$placement","placement","_ref$closeOnEsc","closeOnEsc","_ref$closeOnOverlayCl","closeOnOverlayClick","_ref$asModal","asModal","rest","_objectWithoutProperties","_excluded","trapRef","useFocusTrap","popupController","usePopupContext","innerRef","useForkRef","uniqId","safeUseId","innerId","overlayBackgroundToken","concat","tokens","drawerOverlayWithBlurColor","drawerOverlayColor","innerWidth","getSizeValueFromProp","innerHeight","_useDrawer","useDrawer","disableScroll","drawerInfo","transparent","useMemo","getIdLastDrawer","items","onDrawerOverlayKeyDown","event","React","createElement","StyledPopup","_extends","ref","withAnimation","overlay","Overlay","classes","DEFAULT_Z_INDEX","backgroundColorProperty","isClickable","style","drawerConfig","name","tag","layout","base","variations","css","viewCSS","sizeCSS","borderRadiusCSS","defaults"],"mappings":"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"}
|
@@ -0,0 +1,24 @@
|
|
1
|
+
.base_1gusher_b1chvyq8__76b641f5{color:var(--plasma-spinner-color);}
|
2
|
+
|
3
|
+
.base_ova69f_bw56nfh__55225c7f{width:var(--plasma-spinner-size);height:var(--plasma-spinner-size);}
|
4
|
+
|
5
|
+
.Spinner_styles_13q7ndk_b1hp2dsz__af962114{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;box-sizing:border-box;}
|
6
|
+
.Spinner_styles_13q7ndk_s122r4cn__af962114{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:var(--s122r4cn-0);height:var(--s122r4cn-1);-webkit-animation:Spinner_styles_13q7ndk_rotateS122r4cn__af962114 1s linear infinite;animation:Spinner_styles_13q7ndk_rotateS122r4cn__af962114 1s linear infinite;}@-webkit-keyframes Spinner_styles_13q7ndk_rotateS122r4cn__af962114{from{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);}to{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}@keyframes Spinner_styles_13q7ndk_rotateS122r4cn__af962114{from{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);}to{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}
|
7
|
+
|
8
|
+
.Button_styles_uqvh6u_bzw1898__b7cda4d5{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;box-sizing:border-box;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);--plasma_private-btn-br:var(--plasma_computed-btn-br);border-radius:var(--plasma_private-btn-br);}a.Button_styles_uqvh6u_bzw1898__b7cda4d5{-webkit-text-decoration:none;text-decoration:none;}.Button_styles_uqvh6u_bzw1898__b7cda4d5.Button_styles_uqvh6u_bzw1898__b7cda4d5.Button_styles_uqvh6u_buttonSquare__b7cda4d5{width:var(--plasma-button-height);padding:0;}
|
9
|
+
.Button_styles_uqvh6u_bdfuqwe__b7cda4d5{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.Button_styles_uqvh6u_bdfuqwe__b7cda4d5:not(:last-child){margin-right:0.375rem;}.Button_styles_uqvh6u_bdfuqwe__b7cda4d5:not(:first-child){margin-left:0.375rem;}
|
10
|
+
.Button_styles_uqvh6u_l9ypozh__b7cda4d5{opacity:var(--l9ypozh-0);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;-webkit-align-items:inherit;-webkit-box-align:inherit;-ms-flex-align:inherit;align-items:inherit;-webkit-box-pack:inherit;-webkit-justify-content:inherit;-ms-flex-pack:inherit;justify-content:inherit;height:100%;}
|
11
|
+
.Button_styles_uqvh6u_l4dfhbg__b7cda4d5{position:absolute;}
|
12
|
+
.Button_styles_uqvh6u_srdlazt__b7cda4d5{--plasma-spinner-size:var(--plasma-button-spinner-size);--plasma-spinner-color:var(--plasma-button-spinner-color);}
|
13
|
+
|
14
|
+
.base_x95x4p_b1ty39ru__349bf40b{color:var(--plasma-button-color);background-color:var(--plasma-button-background-color);}.base_x95x4p_b1ty39ru__349bf40b:hover{color:var(--plasma-button-color-hover,var(--plasma-button-color));background-color:var(--plasma-button-background-color-hover,var(--plasma-button-background-color));scale:var(--plasma-button-scale-hover);}.base_x95x4p_b1ty39ru__349bf40b:active{color:var(--plasma-button-color-active,var(--plasma-button-color));background-color:var(--plasma-button-background-color-active,var(--plasma-button-background-color));scale:var(---plasma-button-scale-active);}
|
15
|
+
|
16
|
+
.base_1alzrso_be0ha5g__cdc67255{height:var(--plasma-button-height);padding:0 var(--plasma-button-padding,calc(var(--plasma-button-height) * 1.618 / 4));font-family:var(--plasma-button-font-family);font-size:var(--plasma-button-font-size);font-style:var(--plasma-button-font-style);font-weight:var(--plasma-button-font-weight);-webkit-letter-spacing:var(--plasma-button-letter-spacing);-moz-letter-spacing:var(--plasma-button-letter-spacing);-ms-letter-spacing:var(--plasma-button-letter-spacing);letter-spacing:var(--plasma-button-letter-spacing);line-height:var(--plasma-button-line-height);--plasma_private-btn-outline-size:var(--plasma-button-outline-size,0.0625rem);}
|
17
|
+
|
18
|
+
.base_1t3ywu_b169l30m__aba40ddd[disabled]{opacity:var(--plasma-button-disabled-opacity);cursor:not-allowed;}.base_1t3ywu_b169l30m__aba40ddd[disabled]:hover,.base_1t3ywu_b169l30m__aba40ddd[disabled]:active{scale:none;color:var(--plasma-button-color);background-color:var(--plasma-button-background-color);}
|
19
|
+
|
20
|
+
.base_1kq737e_b187cmzt__d829f64a{position:relative;}.base_1kq737e_b187cmzt__d829f64a:focus{outline:none;}.base_1kq737e_b187cmzt__d829f64a::before{content:'';position:absolute;top:-0.125rem;left:-0.125rem;right:-0.125rem;bottom:-0.125rem;z-index:1;display:block;box-sizing:content-box;border:var(--plasma_private-btn-outline-size) solid transparent;border-radius:calc(0.125rem + var(--plasma_private-btn-br));-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.base_1kq737e_b187cmzt__d829f64a.base_1kq737e_focusVisible__d829f64a:focus::before,.base_1kq737e_b187cmzt__d829f64a[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 var(--plasma_private-btn-outline-size) var(--plasma-button-focus-color);}
|
21
|
+
|
22
|
+
.base_1lx0ute_bdz31nb__16e78f09.base_1lx0ute_buttonStretchingFixed__16e78f09{width:var(--plasma-button-width);}.base_1lx0ute_bdz31nb__16e78f09.base_1lx0ute_buttonStretchingFilled__16e78f09{width:100%;}.base_1lx0ute_bdz31nb__16e78f09.base_1lx0ute_buttonStretchingAuto__16e78f09{width:auto;}
|
23
|
+
|
24
|
+
.IconButton_styles_1hknr37_b1ua728l__f14249fc{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;box-sizing:border-box;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);--plasma_private-btn-br:var(--plasma_computed-btn-br);border-radius:var(--plasma_private-btn-br);color:var(--plasma-button-color);background-color:var(--plasma-button-background-color);height:var(--plasma-button-height);width:var(--plasma-button-width);padding:0 var(--plasma-button-padding,calc(var(--plasma-button-height) * 1.618 / 4));font-family:var(--plasma-button-font-family);font-size:var(--plasma-button-font-size);font-style:var(--plasma-button-font-style);font-weight:var(--plasma-button-font-weight);-webkit-letter-spacing:var(--plasma-button-letter-spacing);-moz-letter-spacing:var(--plasma-button-letter-spacing);-ms-letter-spacing:var(--plasma-button-letter-spacing);letter-spacing:var(--plasma-button-letter-spacing);line-height:var(--plasma-button-line-height);--plasma_private-btn-outline-size:var(--plasma-button-outline-size,0.0625rem);position:relative;--plasma-button-padding:0;--plasma-button-color:var(--plasma-icon-button-color);--plasma-button-background-color:var(--plasma-icon-button-background-color);--plasma-button-color-hover:var(--plasma-icon-button-color-hover);--plasma-button-background-color-hover:var(--plasma-icon-button-background-color-hover);--plasma-button-color-active:var(--plasma-icon-button-color-active);--plasma-button-background-color-active:var(--plasma-icon-button-background-color-active);--plasma-button-font-family:var(--plasma-icon-button-font-family);--plasma-button-font-size:var(--plasma-icon-button-font-size);--plasma-button-font-style:var(--plasma-icon-button-font-style);--plasma-button-font-weight:var(--plasma-icon-button-font-weight);--plasma-button-letter-spacing:var(--plasma-icon-button-letter-spacing);--plasma-button-line-height:var(--plasma-icon-button-line-height);--plasma-button-width:var(--plasma-icon-button-width);--plasma-button-height:var(--plasma-icon-button-height);--plasma-button-radius:var(--plasma-icon-button-radius);--plasma-button-disabled-opacity:var(--plasma-icon-button-disabled-opacity);--plasma-button-focus-color:var(--plasma-icon-button-focus-color);--plasma-button-spinner-size:var(--plasma-icon-button-spinner-size);--plasma-button-spinner-color:var(--plasma-icon-button-spinner-color);}a.IconButton_styles_1hknr37_b1ua728l__f14249fc{-webkit-text-decoration:none;text-decoration:none;}.IconButton_styles_1hknr37_b1ua728l__f14249fc.IconButton_styles_1hknr37_b1ua728l__f14249fc.IconButton_styles_1hknr37_buttonSquare__f14249fc{width:var(--plasma-button-height);padding:0;}.IconButton_styles_1hknr37_b1ua728l__f14249fc:hover{color:var(--plasma-button-color-hover,var(--plasma-button-color));background-color:var(--plasma-button-background-color-hover,var(--plasma-button-background-color));scale:var(--plasma-button-scale-hover);}.IconButton_styles_1hknr37_b1ua728l__f14249fc:active{color:var(--plasma-button-color-active,var(--plasma-button-color));background-color:var(--plasma-button-background-color-active,var(--plasma-button-background-color));scale:var(---plasma-button-scale-active);}.IconButton_styles_1hknr37_b1ua728l__f14249fc:focus{outline:none;}.IconButton_styles_1hknr37_b1ua728l__f14249fc::before{content:'';position:absolute;top:-0.125rem;left:-0.125rem;right:-0.125rem;bottom:-0.125rem;z-index:1;display:block;box-sizing:content-box;border:var(--plasma_private-btn-outline-size) solid transparent;border-radius:calc(0.125rem + var(--plasma_private-btn-br));-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.IconButton_styles_1hknr37_b1ua728l__f14249fc.IconButton_styles_1hknr37_focusVisible__f14249fc:focus::before,.IconButton_styles_1hknr37_b1ua728l__f14249fc[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 var(--plasma_private-btn-outline-size) var(--plasma-button-focus-color);}.IconButton_styles_1hknr37_b1ua728l__f14249fc[disabled]{opacity:var(--plasma-button-disabled-opacity);cursor:not-allowed;}.IconButton_styles_1hknr37_b1ua728l__f14249fc[disabled]:hover,.IconButton_styles_1hknr37_b1ua728l__f14249fc[disabled]:active{scale:none;color:var(--plasma-button-color);background-color:var(--plasma-button-background-color);}.IconButton_styles_1hknr37_b1ua728l__f14249fc.IconButton_styles_1hknr37_buttonStretchingFixed__f14249fc{width:var(--plasma-button-width);}.IconButton_styles_1hknr37_b1ua728l__f14249fc.IconButton_styles_1hknr37_buttonStretchingFilled__f14249fc{width:100%;}.IconButton_styles_1hknr37_b1ua728l__f14249fc.IconButton_styles_1hknr37_buttonStretchingAuto__f14249fc{width:auto;}
|
@@ -0,0 +1,45 @@
|
|
1
|
+
import { buttonRoot } from '../Button/Button.js';
|
2
|
+
import { base as base$1 } from '../Button/variations/_view/base.js';
|
3
|
+
import { base as base$2 } from '../Button/variations/_size/base.js';
|
4
|
+
import { base as base$3 } from '../Button/variations/_disabled/base.js';
|
5
|
+
import { base as base$4 } from '../Button/variations/_focused/base.js';
|
6
|
+
import { base as base$5 } from '../Button/variations/_blurred/base.js';
|
7
|
+
import { base as base$6 } from '../Button/variations/_stretching/base.js';
|
8
|
+
import { base } from './IconButton.styles.js';
|
9
|
+
|
10
|
+
var iconButtonRoot = buttonRoot;
|
11
|
+
var iconButtonConfig = {
|
12
|
+
name: 'IconButton',
|
13
|
+
tag: 'button',
|
14
|
+
layout: iconButtonRoot,
|
15
|
+
base: base,
|
16
|
+
variations: {
|
17
|
+
view: {
|
18
|
+
css: base$1
|
19
|
+
},
|
20
|
+
size: {
|
21
|
+
css: base$2
|
22
|
+
},
|
23
|
+
disabled: {
|
24
|
+
css: base$3,
|
25
|
+
attrs: true
|
26
|
+
},
|
27
|
+
focused: {
|
28
|
+
css: base$4
|
29
|
+
},
|
30
|
+
blurred: {
|
31
|
+
css: base$5
|
32
|
+
},
|
33
|
+
stretching: {
|
34
|
+
css: base$6
|
35
|
+
}
|
36
|
+
},
|
37
|
+
defaults: {
|
38
|
+
view: 'secondary',
|
39
|
+
size: 'm',
|
40
|
+
stretching: 'fixed'
|
41
|
+
}
|
42
|
+
};
|
43
|
+
|
44
|
+
export { iconButtonConfig, iconButtonRoot };
|
45
|
+
//# sourceMappingURL=IconButton.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"IconButton.js","sources":["../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import { buttonRoot } from '../Button';\nimport { base as viewCSS } from '../Button/variations/_view/base';\nimport { base as sizeCSS } from '../Button/variations/_size/base';\nimport { base as disabledCSS } from '../Button/variations/_disabled/base';\nimport { base as focusedCSS } from '../Button/variations/_focused/base';\nimport { base as blurredCSS } from '../Button/variations/_blurred/base';\nimport { base as stretchingCSS } from '../Button/variations/_stretching/base';\n\nimport { base } from './IconButton.styles';\n\nexport const iconButtonRoot = buttonRoot;\n\nexport const iconButtonConfig = {\n name: 'IconButton',\n tag: 'button',\n layout: iconButtonRoot,\n base,\n variations: {\n view: {\n css: viewCSS,\n },\n size: {\n css: sizeCSS,\n },\n disabled: {\n css: disabledCSS,\n attrs: true,\n },\n focused: {\n css: focusedCSS,\n },\n blurred: {\n css: blurredCSS,\n },\n stretching: {\n css: stretchingCSS,\n },\n },\n defaults: {\n view: 'secondary',\n size: 'm',\n stretching: 'fixed',\n },\n};\n"],"names":["iconButtonRoot","buttonRoot","iconButtonConfig","name","tag","layout","base","variations","view","css","viewCSS","size","sizeCSS","disabled","disabledCSS","attrs","focused","focusedCSS","blurred","blurredCSS","stretching","stretchingCSS","defaults"],"mappings":";;;;;;;;;AAUO,IAAMA,cAAc,GAAGC,WAAU;AAEjC,IAAMC,gBAAgB,GAAG;AAC5BC,EAAAA,IAAI,EAAE,YAAY;AAClBC,EAAAA,GAAG,EAAE,QAAQ;AACbC,EAAAA,MAAM,EAAEL,cAAc;AACtBM,EAAAA,IAAI,EAAJA,IAAI;AACJC,EAAAA,UAAU,EAAE;AACRC,IAAAA,IAAI,EAAE;AACFC,MAAAA,GAAG,EAAEC,MAAAA;KACR;AACDC,IAAAA,IAAI,EAAE;AACFF,MAAAA,GAAG,EAAEG,MAAAA;KACR;AACDC,IAAAA,QAAQ,EAAE;AACNJ,MAAAA,GAAG,EAAEK,MAAW;AAChBC,MAAAA,KAAK,EAAE,IAAA;KACV;AACDC,IAAAA,OAAO,EAAE;AACLP,MAAAA,GAAG,EAAEQ,MAAAA;KACR;AACDC,IAAAA,OAAO,EAAE;AACLT,MAAAA,GAAG,EAAEU,MAAAA;KACR;AACDC,IAAAA,UAAU,EAAE;AACRX,MAAAA,GAAG,EAAEY,MAAAA;AACT,KAAA;GACH;AACDC,EAAAA,QAAQ,EAAE;AACNd,IAAAA,IAAI,EAAE,WAAW;AACjBG,IAAAA,IAAI,EAAE,GAAG;AACTS,IAAAA,UAAU,EAAE,OAAA;AAChB,GAAA;AACJ;;;;"}
|
@@ -0,0 +1,12 @@
|
|
1
|
+
import './IconButton.styles_1hknr37.css';
|
2
|
+
import 'react';
|
3
|
+
import '../../utils/react.js';
|
4
|
+
import '@linaria/react';
|
5
|
+
import 'focus-visible';
|
6
|
+
import '@linaria/core';
|
7
|
+
import '@salutejs/plasma-core';
|
8
|
+
|
9
|
+
var base = "b1ua728l";
|
10
|
+
|
11
|
+
export { base };
|
12
|
+
//# sourceMappingURL=IconButton.styles.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"IconButton.styles.js","sources":["../../../src/components/IconButton/IconButton.styles.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nimport { buttonTokens } from '../Button';\nimport { baseContent as buttonBase } from '../Button/Button.styles';\n\nimport { tokens } from './IconButton.tokens';\n\n// Переопределние токенов из Button\nexport const mappingOverride = `\n ${buttonTokens.buttonPadding}: 0;\n\n ${buttonTokens.buttonColor}: var(${tokens.iconButtonColor});\n ${buttonTokens.buttonBackgroundColor}: var(${tokens.iconButtonBackgroundColor});\n\n ${buttonTokens.buttonColorHover}: var(${tokens.iconButtonColorHover});\n ${buttonTokens.buttonBackgroundColorHover}: var(${tokens.iconButtonBackgroundColorHover});\n\n ${buttonTokens.buttonColorActive}: var(${tokens.iconButtonColorActive});\n ${buttonTokens.buttonBackgroundColorActive}: var(${tokens.iconButtonBackgroundColorActive});\n\n\n ${buttonTokens.buttonFontFamily}: var(${tokens.iconButtonFontFamily});\n ${buttonTokens.buttonFontSize}: var(${tokens.iconButtonFontSize});\n ${buttonTokens.buttonFontStyle}: var(${tokens.iconButtonFontStyle});\n ${buttonTokens.buttonFontWeight}:var(${tokens.iconButtonFontWeight});\n ${buttonTokens.buttonLetterSpacing}: var(${tokens.iconButtonLetterSpacing});\n ${buttonTokens.buttonLineHeight}: var(${tokens.iconButtonLineHeight});\n\n ${buttonTokens.buttonWidth}: var(${tokens.iconButtonWidth});\n ${buttonTokens.buttonHeight}: var(${tokens.iconButtonHeight});\n ${buttonTokens.buttonRadius}: var(${tokens.iconButtonRadius});\n\n ${buttonTokens.buttonDisabledOpacity}: var(${tokens.iconButtonDisabledOpacity});\n ${buttonTokens.buttonFocusColor}: var(${tokens.iconButtonFocusColor});\n\n ${buttonTokens.buttonSpinnerSize}: var(${tokens.iconButtonSpinnerSize});\n ${buttonTokens.buttonSpinnerColor}: var(${tokens.iconButtonSpinnerColor});\n`;\n\nexport const base = css`\n ${buttonBase};\n ${mappingOverride};\n`;\n"],"names":["base"],"mappings":";;;;;;;AAuCO,IAAMA,IAAI,GAGhB;;;;"}
|
@@ -0,0 +1 @@
|
|
1
|
+
.b1ua728l{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;box-sizing:border-box;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);--plasma_private-btn-br:var(--plasma_computed-btn-br);border-radius:var(--plasma_private-btn-br);color:var(--plasma-button-color);background-color:var(--plasma-button-background-color);height:var(--plasma-button-height);width:var(--plasma-button-width);padding:0 var(--plasma-button-padding,calc(var(--plasma-button-height) * 1.618 / 4));font-family:var(--plasma-button-font-family);font-size:var(--plasma-button-font-size);font-style:var(--plasma-button-font-style);font-weight:var(--plasma-button-font-weight);-webkit-letter-spacing:var(--plasma-button-letter-spacing);-moz-letter-spacing:var(--plasma-button-letter-spacing);-ms-letter-spacing:var(--plasma-button-letter-spacing);letter-spacing:var(--plasma-button-letter-spacing);line-height:var(--plasma-button-line-height);--plasma_private-btn-outline-size:var(--plasma-button-outline-size,0.0625rem);position:relative;--plasma-button-padding:0;--plasma-button-color:var(--plasma-icon-button-color);--plasma-button-background-color:var(--plasma-icon-button-background-color);--plasma-button-color-hover:var(--plasma-icon-button-color-hover);--plasma-button-background-color-hover:var(--plasma-icon-button-background-color-hover);--plasma-button-color-active:var(--plasma-icon-button-color-active);--plasma-button-background-color-active:var(--plasma-icon-button-background-color-active);--plasma-button-font-family:var(--plasma-icon-button-font-family);--plasma-button-font-size:var(--plasma-icon-button-font-size);--plasma-button-font-style:var(--plasma-icon-button-font-style);--plasma-button-font-weight:var(--plasma-icon-button-font-weight);--plasma-button-letter-spacing:var(--plasma-icon-button-letter-spacing);--plasma-button-line-height:var(--plasma-icon-button-line-height);--plasma-button-width:var(--plasma-icon-button-width);--plasma-button-height:var(--plasma-icon-button-height);--plasma-button-radius:var(--plasma-icon-button-radius);--plasma-button-disabled-opacity:var(--plasma-icon-button-disabled-opacity);--plasma-button-focus-color:var(--plasma-icon-button-focus-color);--plasma-button-spinner-size:var(--plasma-icon-button-spinner-size);--plasma-button-spinner-color:var(--plasma-icon-button-spinner-color);}a.b1ua728l{-webkit-text-decoration:none;text-decoration:none;}.b1ua728l.b1ua728l.button-square{width:var(--plasma-button-height);padding:0;}.b1ua728l:hover{color:var(--plasma-button-color-hover,var(--plasma-button-color));background-color:var(--plasma-button-background-color-hover,var(--plasma-button-background-color));scale:var(--plasma-button-scale-hover);}.b1ua728l:active{color:var(--plasma-button-color-active,var(--plasma-button-color));background-color:var(--plasma-button-background-color-active,var(--plasma-button-background-color));scale:var(---plasma-button-scale-active);}.b1ua728l:focus{outline:none;}.b1ua728l::before{content:'';position:absolute;top:-0.125rem;left:-0.125rem;right:-0.125rem;bottom:-0.125rem;z-index:1;display:block;box-sizing:content-box;border:var(--plasma_private-btn-outline-size) solid transparent;border-radius:calc(0.125rem + var(--plasma_private-btn-br));-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.b1ua728l.focus-visible:focus::before,.b1ua728l[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 var(--plasma_private-btn-outline-size) var(--plasma-button-focus-color);}.b1ua728l[disabled]{opacity:var(--plasma-button-disabled-opacity);cursor:not-allowed;}.b1ua728l[disabled]:hover,.b1ua728l[disabled]:active{scale:none;color:var(--plasma-button-color);background-color:var(--plasma-button-background-color);}.b1ua728l.button-stretching-fixed{width:var(--plasma-button-width);}.b1ua728l.button-stretching-filled{width:100%;}.b1ua728l.button-stretching-auto{width:auto;}
|