@salutejs/plasma-new-hope 0.83.0-canary.1194.9157747369.0 → 0.83.0-canary.1213.9161680667.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/components/Button/Button.css +9 -6
- package/cjs/components/Button/Button.js +16 -2
- package/cjs/components/Button/Button.js.map +1 -1
- package/cjs/components/Button/Button.styles.js +31 -10
- package/cjs/components/Button/Button.styles.js.map +1 -1
- package/cjs/components/Button/Button.styles_nedem1.css +8 -0
- package/cjs/components/Button/Button.tokens.js +5 -0
- package/cjs/components/Button/Button.tokens.js.map +1 -1
- package/cjs/components/Button/variations/_stretching/base.js +1 -1
- package/cjs/components/Button/variations/_stretching/base.js.map +1 -1
- package/{es/components/Button/variations/_stretching/base_1lx0ute.css → cjs/components/Button/variations/_stretching/base_hy8dc.css} +1 -1
- package/cjs/components/ButtonGroup/ButtonGroup.css +2 -2
- package/cjs/components/ButtonGroup/ButtonGroup.tokens.js +1 -0
- package/cjs/components/ButtonGroup/ButtonGroup.tokens.js.map +1 -1
- package/cjs/components/ButtonGroup/variations/_orientation/base.js +1 -1
- package/cjs/components/ButtonGroup/variations/_orientation/base.js.map +1 -1
- package/{es/components/ButtonGroup/variations/_orientation/base_p85v51.css → cjs/components/ButtonGroup/variations/_orientation/base_y7z7cs.css} +1 -1
- package/cjs/components/ButtonGroup/variations/_view/base.js +1 -1
- package/cjs/components/ButtonGroup/variations/_view/base.js.map +1 -1
- package/cjs/components/ButtonGroup/variations/_view/base_1n9gznw.css +1 -0
- package/cjs/components/Combobox/hooks/useFocusController.js +0 -1
- package/cjs/components/Combobox/hooks/useFocusController.js.map +1 -1
- package/cjs/components/Drawer/Drawer.css +9 -6
- package/cjs/components/Drawer/ui/DrawerContent/DrawerContent.css +9 -6
- package/cjs/components/Header/ui/HeaderArrow/HeaderArrow.css +9 -6
- package/cjs/components/Header/ui/HeaderArrow/HeaderArrow.js +4 -2
- package/cjs/components/Header/ui/HeaderArrow/HeaderArrow.js.map +1 -1
- package/cjs/components/IconButton/IconButton.css +10 -7
- package/cjs/components/IconButton/IconButton.styles.js +1 -1
- package/cjs/components/IconButton/{IconButton.styles_1hknr37.css → IconButton.styles_7v8g0e.css} +1 -1
- package/cjs/components/Notification/Notification.css +9 -6
- package/cjs/components/Notification/NotificationsProvider.css +9 -6
- package/cjs/components/Pagination/Pagination.css +11 -8
- package/cjs/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +9 -6
- package/cjs/components/Panel/ui/PanelHeader/PanelHeader.css +9 -6
- package/cjs/components/Select/Select.css +9 -6
- package/cjs/components/Select/ui/SelectTarget/SelectTarget.css +9 -6
- package/cjs/components/TextField/TextField.js +3 -12
- package/cjs/components/TextField/TextField.js.map +1 -1
- package/cjs/components/Toast/Toast.css +9 -6
- package/cjs/components/Toast/ToastController.css +9 -6
- package/cjs/engines/common.js +0 -4
- package/cjs/engines/common.js.map +1 -1
- package/cjs/engines/index.js.map +1 -1
- package/cjs/index.css +12 -34
- package/cjs/index.js +0 -14
- package/cjs/index.js.map +1 -1
- package/cjs/utils/index.js.map +1 -1
- package/es/components/Button/Button.css +9 -6
- package/es/components/Button/Button.js +17 -3
- package/es/components/Button/Button.js.map +1 -1
- package/es/components/Button/Button.styles.js +29 -11
- package/es/components/Button/Button.styles.js.map +1 -1
- package/es/components/Button/Button.styles_nedem1.css +8 -0
- package/es/components/Button/Button.tokens.js +5 -0
- package/es/components/Button/Button.tokens.js.map +1 -1
- package/es/components/Button/variations/_stretching/base.js +1 -1
- package/es/components/Button/variations/_stretching/base.js.map +1 -1
- package/{cjs/components/Button/variations/_stretching/base_1lx0ute.css → es/components/Button/variations/_stretching/base_hy8dc.css} +1 -1
- package/es/components/ButtonGroup/ButtonGroup.css +2 -2
- package/es/components/ButtonGroup/ButtonGroup.tokens.js +1 -0
- package/es/components/ButtonGroup/ButtonGroup.tokens.js.map +1 -1
- package/es/components/ButtonGroup/variations/_orientation/base.js +1 -1
- package/es/components/ButtonGroup/variations/_orientation/base.js.map +1 -1
- package/{cjs/components/ButtonGroup/variations/_orientation/base_p85v51.css → es/components/ButtonGroup/variations/_orientation/base_y7z7cs.css} +1 -1
- package/es/components/ButtonGroup/variations/_view/base.js +1 -1
- package/es/components/ButtonGroup/variations/_view/base.js.map +1 -1
- package/es/components/ButtonGroup/variations/_view/base_1n9gznw.css +1 -0
- package/es/components/Combobox/hooks/useFocusController.js +0 -1
- package/es/components/Combobox/hooks/useFocusController.js.map +1 -1
- package/es/components/Drawer/Drawer.css +9 -6
- package/es/components/Drawer/ui/DrawerContent/DrawerContent.css +9 -6
- package/es/components/Header/ui/HeaderArrow/HeaderArrow.css +9 -6
- package/es/components/Header/ui/HeaderArrow/HeaderArrow.js +4 -2
- package/es/components/Header/ui/HeaderArrow/HeaderArrow.js.map +1 -1
- package/es/components/IconButton/IconButton.css +10 -7
- package/es/components/IconButton/IconButton.styles.js +1 -1
- package/es/components/IconButton/{IconButton.styles_1hknr37.css → IconButton.styles_7v8g0e.css} +1 -1
- package/es/components/Notification/Notification.css +9 -6
- package/es/components/Notification/NotificationsProvider.css +9 -6
- package/es/components/Pagination/Pagination.css +11 -8
- package/es/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +9 -6
- package/es/components/Panel/ui/PanelHeader/PanelHeader.css +9 -6
- package/es/components/Select/Select.css +9 -6
- package/es/components/Select/ui/SelectTarget/SelectTarget.css +9 -6
- package/es/components/TextField/TextField.js +3 -12
- package/es/components/TextField/TextField.js.map +1 -1
- package/es/components/Toast/Toast.css +9 -6
- package/es/components/Toast/ToastController.css +9 -6
- package/es/engines/common.js +0 -4
- package/es/engines/common.js.map +1 -1
- package/es/engines/index.js.map +1 -1
- package/es/index.css +12 -34
- package/es/index.js +0 -8
- package/es/index.js.map +1 -1
- package/es/utils/index.js.map +1 -1
- package/package.json +2 -3
- package/styled-components/cjs/components/Button/Button.js +16 -2
- package/styled-components/cjs/components/Button/Button.styles.js +20 -12
- package/styled-components/cjs/components/Button/Button.template-doc.mdx +42 -0
- package/styled-components/cjs/components/Button/Button.tokens.js +5 -0
- package/styled-components/cjs/components/Button/variations/_stretching/base.js +1 -1
- package/styled-components/cjs/components/ButtonGroup/ButtonGroup.tokens.js +1 -0
- package/styled-components/cjs/components/ButtonGroup/variations/_orientation/base.js +2 -1
- package/styled-components/cjs/components/ButtonGroup/variations/_view/base.js +1 -1
- package/styled-components/cjs/components/Header/ui/HeaderArrow/HeaderArrow.js +4 -2
- package/styled-components/cjs/components/TextField/TextField.js +3 -12
- package/styled-components/cjs/engines/common.js +0 -4
- package/styled-components/cjs/examples/plasma_b2c/components/Button/Button.config.js +19 -19
- package/styled-components/cjs/examples/plasma_b2c/components/Button/Button.stories.tsx +67 -21
- package/styled-components/cjs/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.config.js +10 -10
- package/styled-components/cjs/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.stories.tsx +1 -1
- package/styled-components/cjs/examples/plasma_web/components/Button/Button.config.js +19 -19
- package/styled-components/cjs/examples/plasma_web/components/Button/Button.stories.tsx +90 -28
- package/styled-components/cjs/examples/plasma_web/components/ButtonGroup/ButtonGroup.config.js +10 -10
- package/styled-components/cjs/examples/plasma_web/components/ButtonGroup/ButtonGroup.stories.tsx +1 -1
- package/styled-components/cjs/examples/sds_engineer/components/Button/Button.config.js +19 -19
- package/styled-components/cjs/examples/sds_engineer/components/Button/Button.stories.tsx +90 -28
- package/styled-components/cjs/examples/sds_engineer/components/ButtonGroup/ButtonGroup.config.js +10 -10
- package/styled-components/cjs/examples/sds_engineer/components/ButtonGroup/ButtonGroup.stories.tsx +1 -1
- package/styled-components/cjs/hooks/index.js +1 -8
- package/styled-components/cjs/index.js +0 -11
- package/styled-components/cjs/utils/index.js +0 -7
- package/styled-components/es/components/Button/Button.js +17 -3
- package/styled-components/es/components/Button/Button.styles.js +19 -11
- package/styled-components/es/components/Button/Button.template-doc.mdx +42 -0
- package/styled-components/es/components/Button/Button.tokens.js +5 -0
- package/styled-components/es/components/Button/variations/_stretching/base.js +1 -1
- package/styled-components/es/components/ButtonGroup/ButtonGroup.tokens.js +1 -0
- package/styled-components/es/components/ButtonGroup/variations/_orientation/base.js +3 -2
- package/styled-components/es/components/ButtonGroup/variations/_view/base.js +1 -1
- package/styled-components/es/components/Header/ui/HeaderArrow/HeaderArrow.js +4 -2
- package/styled-components/es/components/TextField/TextField.js +3 -12
- package/styled-components/es/engines/common.js +0 -4
- package/styled-components/es/examples/plasma_b2c/components/Button/Button.config.js +19 -19
- package/styled-components/es/examples/plasma_b2c/components/Button/Button.stories.tsx +67 -21
- package/styled-components/es/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.config.js +10 -10
- package/styled-components/es/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.stories.tsx +1 -1
- package/styled-components/es/examples/plasma_web/components/Button/Button.config.js +19 -19
- package/styled-components/es/examples/plasma_web/components/Button/Button.stories.tsx +90 -28
- package/styled-components/es/examples/plasma_web/components/ButtonGroup/ButtonGroup.config.js +10 -10
- package/styled-components/es/examples/plasma_web/components/ButtonGroup/ButtonGroup.stories.tsx +1 -1
- package/styled-components/es/examples/sds_engineer/components/Button/Button.config.js +19 -19
- package/styled-components/es/examples/sds_engineer/components/Button/Button.stories.tsx +90 -28
- package/styled-components/es/examples/sds_engineer/components/ButtonGroup/ButtonGroup.config.js +10 -10
- package/styled-components/es/examples/sds_engineer/components/ButtonGroup/ButtonGroup.stories.tsx +1 -1
- package/styled-components/es/hooks/index.js +1 -2
- package/styled-components/es/index.js +1 -2
- package/styled-components/es/utils/index.js +0 -1
- package/types/components/Button/Button.d.ts.map +1 -1
- package/types/components/Button/Button.styles.d.ts +5 -1
- package/types/components/Button/Button.styles.d.ts.map +1 -1
- package/types/components/Button/Button.tokens.d.ts +5 -0
- package/types/components/Button/Button.tokens.d.ts.map +1 -1
- package/types/components/Button/Button.types.d.ts +16 -4
- package/types/components/Button/Button.types.d.ts.map +1 -1
- package/types/components/ButtonGroup/ButtonGroup.tokens.d.ts +1 -0
- package/types/components/ButtonGroup/ButtonGroup.tokens.d.ts.map +1 -1
- package/types/components/ButtonGroup/variations/_orientation/base.d.ts.map +1 -1
- package/types/components/ButtonGroup/variations/_view/base.d.ts.map +1 -1
- package/types/components/Header/ui/HeaderArrow/HeaderArrow.d.ts.map +1 -1
- package/types/components/Notification/Notification.styles.d.ts +43 -1
- package/types/components/Notification/Notification.styles.d.ts.map +1 -1
- package/types/components/Pagination/Pagination.styles.d.ts +86 -2
- package/types/components/Pagination/Pagination.styles.d.ts.map +1 -1
- package/types/components/Panel/ui/PanelHeader/PanelHeader.styles.d.ts +43 -1
- package/types/components/Panel/ui/PanelHeader/PanelHeader.styles.d.ts.map +1 -1
- package/types/components/Select/ui/SelectTarget/SelectTarget.styles.d.ts +43 -1
- package/types/components/Select/ui/SelectTarget/SelectTarget.styles.d.ts.map +1 -1
- package/types/components/TextField/TextField.d.ts.map +1 -1
- package/types/components/Toast/Toast.styles.d.ts +43 -1
- package/types/components/Toast/Toast.styles.d.ts.map +1 -1
- package/types/components/Toast/utils.d.ts +43 -1
- package/types/components/Toast/utils.d.ts.map +1 -1
- package/types/engines/common.d.ts +3 -3
- package/types/engines/common.d.ts.map +1 -1
- package/types/engines/index.d.ts +1 -1
- package/types/engines/index.d.ts.map +1 -1
- package/types/engines/types.d.ts +0 -4
- package/types/engines/types.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Button/Button.config.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Button/Button.d.ts +43 -1
- package/types/examples/plasma_b2c/components/Button/Button.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.config.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/IconButton/IconButton.d.ts +43 -1
- package/types/examples/plasma_b2c/components/IconButton/IconButton.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Button/Button.config.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Button/Button.d.ts +43 -1
- package/types/examples/plasma_web/components/Button/Button.d.ts.map +1 -1
- package/types/examples/plasma_web/components/ButtonGroup/ButtonGroup.config.d.ts.map +1 -1
- package/types/examples/plasma_web/components/IconButton/IconButton.d.ts +43 -1
- package/types/examples/plasma_web/components/IconButton/IconButton.d.ts.map +1 -1
- package/types/examples/sds_engineer/components/Button/Button.config.d.ts.map +1 -1
- package/types/examples/sds_engineer/components/Button/Button.d.ts +43 -1
- package/types/examples/sds_engineer/components/Button/Button.d.ts.map +1 -1
- package/types/examples/sds_engineer/components/ButtonGroup/ButtonGroup.config.d.ts.map +1 -1
- package/types/hooks/index.d.ts +0 -1
- package/types/hooks/index.d.ts.map +1 -1
- package/types/index.d.ts +0 -1
- package/types/index.d.ts.map +1 -1
- package/types/utils/index.d.ts +0 -1
- package/types/utils/index.d.ts.map +1 -1
- package/cjs/components/Button/Button.styles_uqvh6u.css +0 -5
- package/cjs/components/ButtonGroup/variations/_view/base_6k3uip.css +0 -1
- package/cjs/components/Slider/Slider.css +0 -69
- package/cjs/components/Slider/Slider.js +0 -48
- package/cjs/components/Slider/Slider.js.map +0 -1
- package/cjs/components/Slider/Slider.tokens.js +0 -79
- package/cjs/components/Slider/Slider.tokens.js.map +0 -1
- package/cjs/components/Slider/components/Double/Double.css +0 -62
- package/cjs/components/Slider/components/Double/Double.js +0 -288
- package/cjs/components/Slider/components/Double/Double.js.map +0 -1
- package/cjs/components/Slider/components/Double/Double.styles.js +0 -61
- package/cjs/components/Slider/components/Double/Double.styles.js.map +0 -1
- package/cjs/components/Slider/components/Double/Double.styles_1jhda4u.css +0 -7
- package/cjs/components/Slider/components/Single/Single.css +0 -16
- package/cjs/components/Slider/components/Single/Single.js +0 -164
- package/cjs/components/Slider/components/Single/Single.js.map +0 -1
- package/cjs/components/Slider/components/Single/Single.styles.js +0 -45
- package/cjs/components/Slider/components/Single/Single.styles.js.map +0 -1
- package/cjs/components/Slider/components/Single/Single.styles_1r9f1e0.css +0 -6
- package/cjs/components/Slider/components/SliderBase/SliderBase.css +0 -4
- package/cjs/components/Slider/components/SliderBase/SliderBase.js +0 -82
- package/cjs/components/Slider/components/SliderBase/SliderBase.js.map +0 -1
- package/cjs/components/Slider/components/SliderBase/SliderBase.styles.js +0 -33
- package/cjs/components/Slider/components/SliderBase/SliderBase.styles.js.map +0 -1
- package/cjs/components/Slider/components/SliderBase/SliderBase.styles_7is2ll.css +0 -4
- package/cjs/components/Slider/ui/Handler/Handler.css +0 -4
- package/cjs/components/Slider/ui/Handler/Handler.js +0 -174
- package/cjs/components/Slider/ui/Handler/Handler.js.map +0 -1
- package/cjs/components/Slider/ui/Handler/Handler.styles.js +0 -21
- package/cjs/components/Slider/ui/Handler/Handler.styles.js.map +0 -1
- package/cjs/components/Slider/ui/Handler/Handler.styles_8crx5z.css +0 -2
- package/cjs/components/Slider/ui/Thumb/Thumb.css +0 -1
- package/cjs/components/Slider/ui/Thumb/Thumb.js +0 -31
- package/cjs/components/Slider/ui/Thumb/Thumb.js.map +0 -1
- package/cjs/components/Slider/ui/Thumb/Thumb.styles.js +0 -15
- package/cjs/components/Slider/ui/Thumb/Thumb.styles.js.map +0 -1
- package/cjs/components/Slider/ui/Thumb/Thumb.styles_4w4gzn.css +0 -1
- package/cjs/components/Slider/utils/index.js +0 -56
- package/cjs/components/Slider/utils/index.js.map +0 -1
- package/cjs/components/Slider/variations/_disabled/base.js +0 -9
- package/cjs/components/Slider/variations/_disabled/base.js.map +0 -1
- package/cjs/components/Slider/variations/_disabled/base_x642ct.css +0 -1
- package/cjs/components/Slider/variations/_size/base.js +0 -9
- package/cjs/components/Slider/variations/_size/base.js.map +0 -1
- package/cjs/components/Slider/variations/_size/base_x642ct.css +0 -1
- package/cjs/components/Slider/variations/_view/base.js +0 -9
- package/cjs/components/Slider/variations/_view/base.js.map +0 -1
- package/cjs/components/Slider/variations/_view/base_x642ct.css +0 -1
- package/cjs/hooks/useIsomorphicLayoutEffect.js +0 -15
- package/cjs/hooks/useIsomorphicLayoutEffect.js.map +0 -1
- package/cjs/utils/canUseDOM.js +0 -12
- package/cjs/utils/canUseDOM.js.map +0 -1
- package/es/components/Button/Button.styles_uqvh6u.css +0 -5
- package/es/components/ButtonGroup/variations/_view/base_6k3uip.css +0 -1
- package/es/components/Slider/Slider.css +0 -69
- package/es/components/Slider/Slider.js +0 -43
- package/es/components/Slider/Slider.js.map +0 -1
- package/es/components/Slider/Slider.tokens.js +0 -74
- package/es/components/Slider/Slider.tokens.js.map +0 -1
- package/es/components/Slider/components/Double/Double.css +0 -62
- package/es/components/Slider/components/Double/Double.js +0 -284
- package/es/components/Slider/components/Double/Double.js.map +0 -1
- package/es/components/Slider/components/Double/Double.styles.js +0 -51
- package/es/components/Slider/components/Double/Double.styles.js.map +0 -1
- package/es/components/Slider/components/Double/Double.styles_1jhda4u.css +0 -7
- package/es/components/Slider/components/Single/Single.css +0 -16
- package/es/components/Slider/components/Single/Single.js +0 -160
- package/es/components/Slider/components/Single/Single.js.map +0 -1
- package/es/components/Slider/components/Single/Single.styles.js +0 -36
- package/es/components/Slider/components/Single/Single.styles.js.map +0 -1
- package/es/components/Slider/components/Single/Single.styles_1r9f1e0.css +0 -6
- package/es/components/Slider/components/SliderBase/SliderBase.css +0 -4
- package/es/components/Slider/components/SliderBase/SliderBase.js +0 -78
- package/es/components/Slider/components/SliderBase/SliderBase.js.map +0 -1
- package/es/components/Slider/components/SliderBase/SliderBase.styles.js +0 -26
- package/es/components/Slider/components/SliderBase/SliderBase.styles.js.map +0 -1
- package/es/components/Slider/components/SliderBase/SliderBase.styles_7is2ll.css +0 -4
- package/es/components/Slider/ui/Handler/Handler.css +0 -4
- package/es/components/Slider/ui/Handler/Handler.js +0 -170
- package/es/components/Slider/ui/Handler/Handler.js.map +0 -1
- package/es/components/Slider/ui/Handler/Handler.styles.js +0 -16
- package/es/components/Slider/ui/Handler/Handler.styles.js.map +0 -1
- package/es/components/Slider/ui/Handler/Handler.styles_8crx5z.css +0 -2
- package/es/components/Slider/ui/Thumb/Thumb.css +0 -1
- package/es/components/Slider/ui/Thumb/Thumb.js +0 -27
- package/es/components/Slider/ui/Thumb/Thumb.js.map +0 -1
- package/es/components/Slider/ui/Thumb/Thumb.styles.js +0 -11
- package/es/components/Slider/ui/Thumb/Thumb.styles.js.map +0 -1
- package/es/components/Slider/ui/Thumb/Thumb.styles_4w4gzn.css +0 -1
- package/es/components/Slider/utils/index.js +0 -50
- package/es/components/Slider/utils/index.js.map +0 -1
- package/es/components/Slider/variations/_disabled/base.js +0 -5
- package/es/components/Slider/variations/_disabled/base.js.map +0 -1
- package/es/components/Slider/variations/_disabled/base_x642ct.css +0 -1
- package/es/components/Slider/variations/_size/base.js +0 -5
- package/es/components/Slider/variations/_size/base.js.map +0 -1
- package/es/components/Slider/variations/_size/base_x642ct.css +0 -1
- package/es/components/Slider/variations/_view/base.js +0 -5
- package/es/components/Slider/variations/_view/base.js.map +0 -1
- package/es/components/Slider/variations/_view/base_x642ct.css +0 -1
- package/es/hooks/useIsomorphicLayoutEffect.js +0 -11
- package/es/hooks/useIsomorphicLayoutEffect.js.map +0 -1
- package/es/utils/canUseDOM.js +0 -8
- package/es/utils/canUseDOM.js.map +0 -1
- package/styled-components/cjs/components/Slider/Slider.js +0 -47
- package/styled-components/cjs/components/Slider/Slider.tokens.js +0 -77
- package/styled-components/cjs/components/Slider/Slider.types.js +0 -5
- package/styled-components/cjs/components/Slider/components/Double/Double.js +0 -300
- package/styled-components/cjs/components/Slider/components/Double/Double.styles.js +0 -36
- package/styled-components/cjs/components/Slider/components/Double/Double.types.js +0 -5
- package/styled-components/cjs/components/Slider/components/Single/Single.js +0 -176
- package/styled-components/cjs/components/Slider/components/Single/Single.styles.js +0 -27
- package/styled-components/cjs/components/Slider/components/Single/Single.types.js +0 -5
- package/styled-components/cjs/components/Slider/components/SliderBase/SliderBase.js +0 -83
- package/styled-components/cjs/components/Slider/components/SliderBase/SliderBase.styles.js +0 -21
- package/styled-components/cjs/components/Slider/components/SliderBase/SliderBase.types.js +0 -5
- package/styled-components/cjs/components/Slider/components/index.js +0 -27
- package/styled-components/cjs/components/Slider/index.js +0 -32
- package/styled-components/cjs/components/Slider/ui/Handler/Handler.js +0 -183
- package/styled-components/cjs/components/Slider/ui/Handler/Handler.styles.js +0 -15
- package/styled-components/cjs/components/Slider/ui/Handler/Handler.types.js +0 -5
- package/styled-components/cjs/components/Slider/ui/Thumb/Thumb.js +0 -32
- package/styled-components/cjs/components/Slider/ui/Thumb/Thumb.styles.js +0 -18
- package/styled-components/cjs/components/Slider/ui/Thumb/Thumb.types.js +0 -5
- package/styled-components/cjs/components/Slider/ui/index.js +0 -63
- package/styled-components/cjs/components/Slider/utils/index.js +0 -55
- package/styled-components/cjs/components/Slider/variations/_disabled/base.js +0 -8
- package/styled-components/cjs/components/Slider/variations/_disabled/tokens.json +0 -4
- package/styled-components/cjs/components/Slider/variations/_size/base.js +0 -8
- package/styled-components/cjs/components/Slider/variations/_size/tokens.json +0 -0
- package/styled-components/cjs/components/Slider/variations/_view/base.js +0 -8
- package/styled-components/cjs/components/Slider/variations/_view/tokens.json +0 -0
- package/styled-components/cjs/examples/plasma_b2c/components/Slider/Slider.config.js +0 -29
- package/styled-components/cjs/examples/plasma_b2c/components/Slider/Slider.js +0 -16
- package/styled-components/cjs/examples/plasma_b2c/components/Slider/Slider.stories.tsx +0 -164
- package/styled-components/cjs/examples/plasma_web/components/Slider/Slider.config.js +0 -29
- package/styled-components/cjs/examples/plasma_web/components/Slider/Slider.js +0 -16
- package/styled-components/cjs/examples/plasma_web/components/Slider/Slider.stories.tsx +0 -163
- package/styled-components/cjs/hooks/useIsomorphicLayoutEffect.js +0 -12
- package/styled-components/cjs/utils/canUseDOM.js +0 -11
- package/styled-components/es/components/Slider/Slider.js +0 -38
- package/styled-components/es/components/Slider/Slider.tokens.js +0 -71
- package/styled-components/es/components/Slider/Slider.types.js +0 -1
- package/styled-components/es/components/Slider/components/Double/Double.js +0 -292
- package/styled-components/es/components/Slider/components/Double/Double.styles.js +0 -29
- package/styled-components/es/components/Slider/components/Double/Double.types.js +0 -1
- package/styled-components/es/components/Slider/components/Single/Single.js +0 -168
- package/styled-components/es/components/Slider/components/Single/Single.styles.js +0 -20
- package/styled-components/es/components/Slider/components/Single/Single.types.js +0 -1
- package/styled-components/es/components/Slider/components/SliderBase/SliderBase.js +0 -74
- package/styled-components/es/components/Slider/components/SliderBase/SliderBase.styles.js +0 -14
- package/styled-components/es/components/Slider/components/SliderBase/SliderBase.types.js +0 -1
- package/styled-components/es/components/Slider/components/index.js +0 -3
- package/styled-components/es/components/Slider/index.js +0 -3
- package/styled-components/es/components/Slider/ui/Handler/Handler.js +0 -174
- package/styled-components/es/components/Slider/ui/Handler/Handler.styles.js +0 -8
- package/styled-components/es/components/Slider/ui/Handler/Handler.types.js +0 -1
- package/styled-components/es/components/Slider/ui/Thumb/Thumb.js +0 -25
- package/styled-components/es/components/Slider/ui/Thumb/Thumb.styles.js +0 -11
- package/styled-components/es/components/Slider/ui/Thumb/Thumb.types.js +0 -1
- package/styled-components/es/components/Slider/ui/index.js +0 -5
- package/styled-components/es/components/Slider/utils/index.js +0 -47
- package/styled-components/es/components/Slider/variations/_disabled/base.js +0 -2
- package/styled-components/es/components/Slider/variations/_disabled/tokens.json +0 -4
- package/styled-components/es/components/Slider/variations/_size/base.js +0 -2
- package/styled-components/es/components/Slider/variations/_size/tokens.json +0 -0
- package/styled-components/es/components/Slider/variations/_view/base.js +0 -2
- package/styled-components/es/components/Slider/variations/_view/tokens.json +0 -0
- package/styled-components/es/examples/plasma_b2c/components/Slider/Slider.config.js +0 -23
- package/styled-components/es/examples/plasma_b2c/components/Slider/Slider.js +0 -10
- package/styled-components/es/examples/plasma_b2c/components/Slider/Slider.stories.tsx +0 -164
- package/styled-components/es/examples/plasma_web/components/Slider/Slider.config.js +0 -23
- package/styled-components/es/examples/plasma_web/components/Slider/Slider.js +0 -10
- package/styled-components/es/examples/plasma_web/components/Slider/Slider.stories.tsx +0 -163
- package/styled-components/es/hooks/useIsomorphicLayoutEffect.js +0 -7
- package/styled-components/es/utils/canUseDOM.js +0 -5
- package/types/components/Slider/Slider.d.ts +0 -27
- package/types/components/Slider/Slider.d.ts.map +0 -1
- package/types/components/Slider/Slider.tokens.d.ts +0 -72
- package/types/components/Slider/Slider.tokens.d.ts.map +0 -1
- package/types/components/Slider/Slider.types.d.ts +0 -3
- package/types/components/Slider/Slider.types.d.ts.map +0 -1
- package/types/components/Slider/components/Double/Double.d.ts +0 -4
- package/types/components/Slider/components/Double/Double.d.ts.map +0 -1
- package/types/components/Slider/components/Double/Double.styles.d.ts +0 -43
- package/types/components/Slider/components/Double/Double.styles.d.ts.map +0 -1
- package/types/components/Slider/components/Double/Double.types.d.ts +0 -65
- package/types/components/Slider/components/Double/Double.types.d.ts.map +0 -1
- package/types/components/Slider/components/Single/Single.d.ts +0 -4
- package/types/components/Slider/components/Single/Single.d.ts.map +0 -1
- package/types/components/Slider/components/Single/Single.styles.d.ts +0 -8
- package/types/components/Slider/components/Single/Single.styles.d.ts.map +0 -1
- package/types/components/Slider/components/Single/Single.types.d.ts +0 -55
- package/types/components/Slider/components/Single/Single.types.d.ts.map +0 -1
- package/types/components/Slider/components/SliderBase/SliderBase.d.ts +0 -4
- package/types/components/Slider/components/SliderBase/SliderBase.d.ts.map +0 -1
- package/types/components/Slider/components/SliderBase/SliderBase.styles.d.ts +0 -6
- package/types/components/Slider/components/SliderBase/SliderBase.styles.d.ts.map +0 -1
- package/types/components/Slider/components/SliderBase/SliderBase.types.d.ts +0 -45
- package/types/components/Slider/components/SliderBase/SliderBase.types.d.ts.map +0 -1
- package/types/components/Slider/components/index.d.ts +0 -6
- package/types/components/Slider/components/index.d.ts.map +0 -1
- package/types/components/Slider/index.d.ts +0 -6
- package/types/components/Slider/index.d.ts.map +0 -1
- package/types/components/Slider/ui/Handler/Handler.d.ts +0 -9
- package/types/components/Slider/ui/Handler/Handler.d.ts.map +0 -1
- package/types/components/Slider/ui/Handler/Handler.styles.d.ts +0 -4
- package/types/components/Slider/ui/Handler/Handler.styles.d.ts.map +0 -1
- package/types/components/Slider/ui/Handler/Handler.types.d.ts +0 -24
- package/types/components/Slider/ui/Handler/Handler.types.d.ts.map +0 -1
- package/types/components/Slider/ui/Thumb/Thumb.d.ts +0 -4
- package/types/components/Slider/ui/Thumb/Thumb.d.ts.map +0 -1
- package/types/components/Slider/ui/Thumb/Thumb.styles.d.ts +0 -5
- package/types/components/Slider/ui/Thumb/Thumb.styles.d.ts.map +0 -1
- package/types/components/Slider/ui/Thumb/Thumb.types.d.ts +0 -12
- package/types/components/Slider/ui/Thumb/Thumb.types.d.ts.map +0 -1
- package/types/components/Slider/ui/index.d.ts +0 -6
- package/types/components/Slider/ui/index.d.ts.map +0 -1
- package/types/components/Slider/utils/index.d.ts +0 -33
- package/types/components/Slider/utils/index.d.ts.map +0 -1
- package/types/components/Slider/variations/_disabled/base.d.ts +0 -2
- package/types/components/Slider/variations/_disabled/base.d.ts.map +0 -1
- package/types/components/Slider/variations/_size/base.d.ts +0 -2
- package/types/components/Slider/variations/_size/base.d.ts.map +0 -1
- package/types/components/Slider/variations/_view/base.d.ts +0 -2
- package/types/components/Slider/variations/_view/base.d.ts.map +0 -1
- package/types/examples/plasma_b2c/components/Slider/Slider.config.d.ts +0 -22
- package/types/examples/plasma_b2c/components/Slider/Slider.config.d.ts.map +0 -1
- package/types/examples/plasma_b2c/components/Slider/Slider.d.ts +0 -21
- package/types/examples/plasma_b2c/components/Slider/Slider.d.ts.map +0 -1
- package/types/examples/plasma_web/components/Slider/Slider.config.d.ts +0 -22
- package/types/examples/plasma_web/components/Slider/Slider.config.d.ts.map +0 -1
- package/types/examples/plasma_web/components/Slider/Slider.d.ts +0 -21
- package/types/examples/plasma_web/components/Slider/Slider.d.ts.map +0 -1
- package/types/hooks/useIsomorphicLayoutEffect.d.ts +0 -6
- package/types/hooks/useIsomorphicLayoutEffect.d.ts.map +0 -1
- package/types/utils/canUseDOM.d.ts +0 -6
- package/types/utils/canUseDOM.d.ts.map +0 -1
@@ -1,55 +1,117 @@
|
|
1
|
-
import
|
1
|
+
import * as React from 'react';
|
2
|
+
import type { ComponentProps } from 'react';
|
2
3
|
import type { StoryObj, Meta } from '@storybook/react';
|
4
|
+
import { disableProps } from '@salutejs/plasma-sb-utils';
|
3
5
|
|
4
|
-
import {
|
5
|
-
import {
|
6
|
-
import { WithTheme, argTypesFromConfig } from '../../../_helpers';
|
6
|
+
import { IconMic } from '../../../../components/_Icon';
|
7
|
+
import { WithTheme } from '../../../_helpers';
|
7
8
|
|
8
|
-
import { config } from './Button.config';
|
9
9
|
import { Button } from './Button';
|
10
10
|
|
11
|
+
const views = ['default', 'accent', 'positive', 'warning', 'negative', 'dark', 'light'];
|
12
|
+
const sizes = ['l', 'm', 's', 'xs', 'xxs'];
|
13
|
+
const stretchingValues = ['auto', 'filled', 'fixed'];
|
14
|
+
const pinValues = [
|
15
|
+
'',
|
16
|
+
'square-square',
|
17
|
+
'square-clear',
|
18
|
+
'clear-square',
|
19
|
+
'clear-clear',
|
20
|
+
'clear-circle',
|
21
|
+
'circle-clear',
|
22
|
+
'circle-circle',
|
23
|
+
];
|
24
|
+
const contentPlacinValues = ['default', 'relaxed'];
|
25
|
+
|
11
26
|
const meta: Meta<typeof Button> = {
|
12
27
|
title: 'sds_engineer/Button',
|
13
28
|
decorators: [WithTheme],
|
14
29
|
component: Button,
|
30
|
+
args: {
|
31
|
+
view: 'default',
|
32
|
+
size: 'm',
|
33
|
+
contentPlacing: 'default',
|
34
|
+
stretching: 'auto',
|
35
|
+
text: 'Hello',
|
36
|
+
value: 'Value',
|
37
|
+
disabled: false,
|
38
|
+
focused: true,
|
39
|
+
square: false,
|
40
|
+
isLoading: false,
|
41
|
+
},
|
15
42
|
argTypes: {
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
'
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
'
|
26
|
-
|
27
|
-
|
43
|
+
view: {
|
44
|
+
options: views,
|
45
|
+
control: {
|
46
|
+
type: 'select',
|
47
|
+
},
|
48
|
+
},
|
49
|
+
size: {
|
50
|
+
options: sizes,
|
51
|
+
control: {
|
52
|
+
type: 'select',
|
53
|
+
},
|
54
|
+
},
|
55
|
+
contentPlacing: {
|
56
|
+
options: contentPlacinValues,
|
28
57
|
control: {
|
29
58
|
type: 'select',
|
30
59
|
},
|
31
|
-
table: { defaultValue: { summary: 'bottom' } },
|
32
60
|
},
|
33
61
|
stretching: {
|
34
|
-
options:
|
62
|
+
options: stretchingValues,
|
63
|
+
control: {
|
64
|
+
type: 'select',
|
65
|
+
},
|
66
|
+
},
|
67
|
+
pin: {
|
68
|
+
options: pinValues,
|
35
69
|
control: {
|
36
70
|
type: 'select',
|
37
71
|
},
|
72
|
+
table: { defaultValue: { summary: 'bottom' } },
|
38
73
|
},
|
39
74
|
},
|
40
75
|
};
|
41
76
|
|
42
77
|
export default meta;
|
43
78
|
|
44
|
-
|
79
|
+
type StoryPropsDefault = ComponentProps<typeof Button> & {
|
80
|
+
enableContentLeft: boolean;
|
81
|
+
enableContentRight: boolean;
|
82
|
+
};
|
83
|
+
|
84
|
+
const StoryDefault = ({ enableContentLeft, enableContentRight, size, ...rest }: StoryPropsDefault) => {
|
85
|
+
const iconSize = size === 'xs' ? 'xs' : 's';
|
86
|
+
|
87
|
+
return (
|
88
|
+
<Button
|
89
|
+
contentLeft={enableContentLeft ? <IconMic size={iconSize} color="inherit" /> : undefined}
|
90
|
+
contentRight={enableContentRight ? <IconMic size={iconSize} color="inherit" /> : undefined}
|
91
|
+
size={size}
|
92
|
+
{...rest}
|
93
|
+
/>
|
94
|
+
);
|
95
|
+
};
|
96
|
+
|
97
|
+
export const Default: StoryObj<StoryPropsDefault> = {
|
45
98
|
args: {
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
99
|
+
enableContentLeft: false,
|
100
|
+
enableContentRight: false,
|
101
|
+
},
|
102
|
+
render: (args) => <StoryDefault {...args} />,
|
103
|
+
};
|
104
|
+
|
105
|
+
export const AccessibilityWithChildren: StoryObj<ComponentProps<typeof Button>> = {
|
106
|
+
argTypes: { ...disableProps(['text']) },
|
107
|
+
render: (props: ComponentProps<typeof Button>) => {
|
108
|
+
const args = { ...props, text: undefined };
|
109
|
+
|
110
|
+
return (
|
111
|
+
<Button {...args}>
|
112
|
+
<IconMic color="inherit" />
|
113
|
+
<span>Включить микрофон</span>
|
114
|
+
</Button>
|
115
|
+
);
|
54
116
|
},
|
55
117
|
};
|
package/styled-components/cjs/examples/sds_engineer/components/ButtonGroup/ButtonGroup.config.js
CHANGED
@@ -13,16 +13,16 @@ var config = exports.config = {
|
|
13
13
|
},
|
14
14
|
variations: {
|
15
15
|
view: {
|
16
|
-
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-hover);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-active);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
|
17
|
-
accent: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-accent);", ":var(--on-dark-text-primary);", ":var(--surface-accent-hover);", ":var(--on-dark-text-primary);", ":var(--surface-accent-active);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
|
18
|
-
secondary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
|
19
|
-
clear: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-primary-hover);", ":var(--surface-clear);", ":var(--text-primary-active);", ":var(--surface-clear);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
|
20
|
-
positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--on-dark-text-primary);", ":var(--surface-positive-hover);", ":var(--on-dark-text-primary);", ":var(--surface-positive-active);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
|
21
|
-
warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-warning);", ":var(--on-dark-text-primary);", ":var(--surface-warning-hover);", ":var(--on-dark-text-primary);", ":var(--surface-warning-active);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
|
22
|
-
negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-negative);", ":var(--on-dark-text-primary);", ":var(--surface-negative-hover);", ":var(--on-dark-text-primary);", ":var(--surface-negative-active);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
|
23
|
-
dark: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep-hover);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep-active);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
|
24
|
-
black: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default-hover);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default-active);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
|
25
|
-
white: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default);", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default-hover);", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default-active);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive)
|
16
|
+
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--inverse-text-primary);", ":var(--inverse-text-secondary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-hover);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-active);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonValueColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
|
17
|
+
accent: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--surface-accent);", ":var(--on-dark-text-primary);", ":var(--surface-accent-hover);", ":var(--on-dark-text-primary);", ":var(--surface-accent-active);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonValueColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
|
18
|
+
secondary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonValueColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
|
19
|
+
clear: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-clear);", ":var(--text-primary-hover);", ":var(--surface-clear);", ":var(--text-primary-active);", ":var(--surface-clear);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonValueColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
|
20
|
+
positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--surface-positive);", ":var(--on-dark-text-primary);", ":var(--surface-positive-hover);", ":var(--on-dark-text-primary);", ":var(--surface-positive-active);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonValueColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
|
21
|
+
warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--surface-warning);", ":var(--on-dark-text-primary);", ":var(--surface-warning-hover);", ":var(--on-dark-text-primary);", ":var(--surface-warning-active);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonValueColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
|
22
|
+
negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--surface-negative);", ":var(--on-dark-text-primary);", ":var(--surface-negative-hover);", ":var(--on-dark-text-primary);", ":var(--surface-negative-active);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonValueColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
|
23
|
+
dark: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--on-light-surface-transparent-deep);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep-hover);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep-active);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonValueColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
|
24
|
+
black: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--on-light-surface-solid-default);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default-hover);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default-active);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonValueColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
|
25
|
+
white: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-light-text-primary);", ":var(--on-light-text-secondary);", ":var(--on-dark-surface-solid-default);", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default-hover);", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default-active);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonValueColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive)
|
26
26
|
},
|
27
27
|
size: {
|
28
28
|
l: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.875rem;", ":0.375rem;", ":0.875rem;", ":3.5rem;", ":1.5rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-bold-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], _ButtonGroup.buttonGroupTokens.buttonDefaultRadius, _ButtonGroup.buttonGroupTokens.buttonSegmentedRadius, _ButtonGroup.buttonGroupTokens.buttonSideRadius, _ButtonGroup.buttonGroupTokens.buttonHeight, _ButtonGroup.buttonGroupTokens.buttonPadding, _ButtonGroup.buttonGroupTokens.buttonFontFamily, _ButtonGroup.buttonGroupTokens.buttonFontSize, _ButtonGroup.buttonGroupTokens.buttonFontStyle, _ButtonGroup.buttonGroupTokens.buttonFontWeight, _ButtonGroup.buttonGroupTokens.buttonLetterSpacing, _ButtonGroup.buttonGroupTokens.buttonLineHeight),
|
package/styled-components/cjs/examples/sds_engineer/components/ButtonGroup/ButtonGroup.stories.tsx
CHANGED
@@ -11,7 +11,7 @@ import { ButtonGroup } from './ButtonGroup';
|
|
11
11
|
type StoryProps = ComponentProps<typeof ButtonGroup> & { itemsCount?: number };
|
12
12
|
type Story = StoryObj<StoryProps>;
|
13
13
|
|
14
|
-
const views = ['accent', 'default', 'secondary', '
|
14
|
+
const views = ['accent', 'default', 'secondary', 'positive', 'warning', 'negative', 'clear'];
|
15
15
|
const sizes = ['l', 'm', 's', 'xs', 'xxs'];
|
16
16
|
const orientationValues = ['horizontal', 'vertical'];
|
17
17
|
const gapValues = ['none', 'dense', 'wide'];
|
@@ -15,12 +15,6 @@ Object.defineProperty(exports, "useForceUpdate", {
|
|
15
15
|
return _useForceUpdate.useForceUpdate;
|
16
16
|
}
|
17
17
|
});
|
18
|
-
Object.defineProperty(exports, "useIsomorphicLayoutEffect", {
|
19
|
-
enumerable: true,
|
20
|
-
get: function get() {
|
21
|
-
return _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect;
|
22
|
-
}
|
23
|
-
});
|
24
18
|
Object.defineProperty(exports, "usePreviousValue", {
|
25
19
|
enumerable: true,
|
26
20
|
get: function get() {
|
@@ -36,5 +30,4 @@ Object.defineProperty(exports, "useUniqId", {
|
|
36
30
|
var _useUniqId = /*#__PURE__*/require("./useUniqId");
|
37
31
|
var _usePreviousValue = /*#__PURE__*/require("./usePreviousValue");
|
38
32
|
var _useForceUpdate = /*#__PURE__*/require("./useForceUpdate");
|
39
|
-
var _useDidMountEffect = /*#__PURE__*/require("./useDidMountEffect");
|
40
|
-
var _useIsomorphicLayoutEffect = /*#__PURE__*/require("./useIsomorphicLayoutEffect");
|
33
|
+
var _useDidMountEffect = /*#__PURE__*/require("./useDidMountEffect");
|
@@ -508,15 +508,4 @@ Object.keys(_Toolbar).forEach(function (key) {
|
|
508
508
|
return _Toolbar[key];
|
509
509
|
}
|
510
510
|
});
|
511
|
-
});
|
512
|
-
var _Slider = /*#__PURE__*/require("./components/Slider");
|
513
|
-
Object.keys(_Slider).forEach(function (key) {
|
514
|
-
if (key === "default" || key === "__esModule") return;
|
515
|
-
if (key in exports && exports[key] === _Slider[key]) return;
|
516
|
-
Object.defineProperty(exports, key, {
|
517
|
-
enumerable: true,
|
518
|
-
get: function get() {
|
519
|
-
return _Slider[key];
|
520
|
-
}
|
521
|
-
});
|
522
511
|
});
|
@@ -9,12 +9,6 @@ Object.defineProperty(exports, "IS_REACT_18", {
|
|
9
9
|
return _react.IS_REACT_18;
|
10
10
|
}
|
11
11
|
});
|
12
|
-
Object.defineProperty(exports, "canUseDOM", {
|
13
|
-
enumerable: true,
|
14
|
-
get: function get() {
|
15
|
-
return _canUseDOM.canUseDOM;
|
16
|
-
}
|
17
|
-
});
|
18
12
|
exports.cx = exports.composableStyle = void 0;
|
19
13
|
Object.defineProperty(exports, "extractTextFrom", {
|
20
14
|
enumerable: true,
|
@@ -40,7 +34,6 @@ Object.defineProperty(exports, "safeUseId", {
|
|
40
34
|
return _react.safeUseId;
|
41
35
|
}
|
42
36
|
});
|
43
|
-
var _canUseDOM = /*#__PURE__*/require("./canUseDOM");
|
44
37
|
var _extractTextFrom = /*#__PURE__*/require("./extractTextFrom");
|
45
38
|
var _getSizeValueFromProp = /*#__PURE__*/require("./getSizeValueFromProp");
|
46
39
|
var _react = /*#__PURE__*/require("./react");
|
@@ -1,6 +1,6 @@
|
|
1
1
|
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
2
2
|
var _StyledSpinner;
|
3
|
-
var _excluded = ["children", "view", "size", "text", "contentLeft", "contentRight", "isLoading", "loader", "stretch", "square", "pin", "disabled", "focused", "outlined", "className", "blur", "style", "stretching"];
|
3
|
+
var _excluded = ["children", "view", "size", "text", "value", "contentLeft", "contentRight", "contentPlacing", "isLoading", "loader", "stretch", "square", "pin", "disabled", "focused", "outlined", "className", "blur", "style", "stretching"];
|
4
4
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
5
5
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
6
6
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
@@ -18,7 +18,7 @@ import { base as disabledCSS } from './variations/_disabled/base';
|
|
18
18
|
import { base as focusedCSS } from './variations/_focused/base';
|
19
19
|
import { base as stretchingCSS } from './variations/_stretching/base';
|
20
20
|
import { base as blurredCSS } from './variations/_blurred/base';
|
21
|
-
import { base, ButtonText, Loader, LoadWrap, StyledSpinner } from './Button.styles';
|
21
|
+
import { base, ButtonText, ButtonValue, Loader, LoadWrap, StyledContentLeft, StyledContentRight, StyledSpinner } from './Button.styles';
|
22
22
|
import { classes, tokens } from './Button.tokens';
|
23
23
|
export var buttonRoot = function buttonRoot(Root) {
|
24
24
|
return /*#__PURE__*/forwardRef(function (props, ref) {
|
@@ -26,8 +26,11 @@ export var buttonRoot = function buttonRoot(Root) {
|
|
26
26
|
view = props.view,
|
27
27
|
size = props.size,
|
28
28
|
text = props.text,
|
29
|
+
value = props.value,
|
29
30
|
contentLeft = props.contentLeft,
|
30
31
|
contentRight = props.contentRight,
|
32
|
+
_props$contentPlacing = props.contentPlacing,
|
33
|
+
contentPlacing = _props$contentPlacing === void 0 ? 'default' : _props$contentPlacing,
|
31
34
|
isLoading = props.isLoading,
|
32
35
|
loader = props.loader,
|
33
36
|
stretch = props.stretch,
|
@@ -44,23 +47,34 @@ export var buttonRoot = function buttonRoot(Root) {
|
|
44
47
|
rest = _objectWithoutProperties(props, _excluded);
|
45
48
|
var txt = typeof children === 'string' ? children : text;
|
46
49
|
var stretchingClass = stretch ? classes.filledStretching : classes["".concat(stretching, "Stretching")];
|
50
|
+
var contentRelaxedClass = contentPlacing === 'relaxed' ? classes.contentRelaxed : undefined;
|
47
51
|
var squareClass = square ? classes.buttonSquare : undefined;
|
48
52
|
var buttonBorderRadius = pin ? convertRoundnessMatrix(pin, "var(".concat(tokens.buttonRadius, ")"), "var(".concat(tokens.buttonHeight, ")")) : "var(".concat(tokens.buttonRadius, ", calc(var(").concat(tokens.buttonHeight, ") / 4))");
|
53
|
+
var contentPlacingMapper = {
|
54
|
+
"default": 'center',
|
55
|
+
relaxed: 'space-between'
|
56
|
+
};
|
57
|
+
var contentPlacementValue = contentPlacing ? contentPlacingMapper[contentPlacing] : 'center';
|
49
58
|
return /*#__PURE__*/React.createElement(Root, _extends({
|
50
59
|
type: "button",
|
51
60
|
ref: ref,
|
52
61
|
view: view,
|
53
62
|
size: size,
|
63
|
+
value: value,
|
54
64
|
disabled: disabled,
|
55
65
|
focused: focused || outlined,
|
66
|
+
contentPlacing: contentPlacing,
|
56
67
|
className: cx(squareClass, stretchingClass, classes.buttonItem, className),
|
57
68
|
style: _objectSpread(_objectSpread({}, style), {}, {
|
58
69
|
'--plasma_computed-btn-br': buttonBorderRadius,
|
59
70
|
'--plasma_private-blur': blur
|
60
71
|
})
|
61
72
|
}, rest), /*#__PURE__*/React.createElement(LoadWrap, {
|
73
|
+
contentPlacing: contentPlacementValue,
|
62
74
|
isLoading: isLoading
|
63
|
-
}, contentLeft
|
75
|
+
}, contentLeft && /*#__PURE__*/React.createElement(StyledContentLeft, null, contentLeft), txt ? /*#__PURE__*/React.createElement(ButtonText, {
|
76
|
+
className: contentRelaxedClass
|
77
|
+
}, txt) : children, value && /*#__PURE__*/React.createElement(ButtonValue, null, value), contentRight && /*#__PURE__*/React.createElement(StyledContentRight, null, contentRight)), isLoading && /*#__PURE__*/React.createElement(Loader, null, loader || _StyledSpinner || (_StyledSpinner = /*#__PURE__*/React.createElement(StyledSpinner, null))));
|
64
78
|
});
|
65
79
|
};
|
66
80
|
export var buttonConfig = {
|
@@ -10,28 +10,36 @@ import { classes, tokens } from './Button.tokens';
|
|
10
10
|
// issue #823
|
11
11
|
var mergedConfig = /*#__PURE__*/mergeConfig(spinnerConfig);
|
12
12
|
var Spinner = /*#__PURE__*/component(mergedConfig);
|
13
|
-
export var base = /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\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 &&.", " {\n width: var(", ");\n padding: 0;\n }\n"])), /*#__PURE__*/String(classes.buttonSquare), tokens.buttonHeight);
|
14
|
-
|
15
|
-
// TODO: PLASMA-2164
|
16
|
-
// WHY do we need applyEllipsis ??
|
17
|
-
// Если внутри кнопки тескт и на нее решили повесить square пропс
|
18
13
|
export var ButtonText = /*#__PURE__*/styled.span.withConfig({
|
19
14
|
componentId: "plasma-new-hope__sc-9d9bqj-0"
|
20
|
-
})([":
|
15
|
+
})(["min-width:4ch;flex-shrink:2;", " &.", "{text-align:start;flex-grow:2;}"], /*#__PURE__*/applyEllipsis(), /*#__PURE__*/String(classes.contentRelaxed));
|
16
|
+
export var ButtonValue = /*#__PURE__*/styled.span.withConfig({
|
17
|
+
componentId: "plasma-new-hope__sc-9d9bqj-1"
|
18
|
+
})(["color:var(", ");margin:var(", ");min-width:4ch;", ""], tokens.buttonValueColor, tokens.buttonValueMargin, /*#__PURE__*/applyEllipsis());
|
21
19
|
|
22
20
|
// TODO: #720
|
23
21
|
export var LoadWrap = /*#__PURE__*/styled.div.withConfig({
|
24
|
-
componentId: "plasma-new-hope__sc-9d9bqj-
|
25
|
-
})(["opacity:", ";display:flex;
|
22
|
+
componentId: "plasma-new-hope__sc-9d9bqj-2"
|
23
|
+
})(["opacity:", ";display:flex;align-items:inherit;justify-content:", ";height:100%;width:100%;"], function (_ref) {
|
26
24
|
var isLoading = _ref.isLoading;
|
27
25
|
return isLoading ? '0' : '1';
|
26
|
+
}, function (_ref2) {
|
27
|
+
var contentPlacing = _ref2.contentPlacing;
|
28
|
+
return contentPlacing;
|
28
29
|
});
|
29
30
|
export var Loader = /*#__PURE__*/styled.div.withConfig({
|
30
|
-
componentId: "plasma-new-hope__sc-9d9bqj-
|
31
|
+
componentId: "plasma-new-hope__sc-9d9bqj-3"
|
31
32
|
})(["position:absolute;"]);
|
32
33
|
export var StyledSpinner = /*#__PURE__*/styled(Spinner).withConfig({
|
33
|
-
componentId: "plasma-new-hope__sc-9d9bqj-
|
34
|
+
componentId: "plasma-new-hope__sc-9d9bqj-4"
|
34
35
|
})(["", ":var(", ");", ":var(", ");"], spinnerTokens.size, tokens.buttonSpinnerSize, spinnerTokens.color, tokens.buttonSpinnerColor);
|
36
|
+
export var StyledContentLeft = /*#__PURE__*/styled.div.withConfig({
|
37
|
+
componentId: "plasma-new-hope__sc-9d9bqj-5"
|
38
|
+
})(["margin:var(", ");"], tokens.buttonLeftContentMargin);
|
39
|
+
export var StyledContentRight = /*#__PURE__*/styled.div.withConfig({
|
40
|
+
componentId: "plasma-new-hope__sc-9d9bqj-6"
|
41
|
+
})(["margin:var(", ");"], tokens.buttonRightContentMargin);
|
42
|
+
export var base = /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\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 &&.", " {\n width: var(", ");\n padding: 0;\n }\n"])), /*#__PURE__*/String(classes.buttonSquare), tokens.buttonHeight);
|
35
43
|
|
36
44
|
// INFO: Для возможности переиспользования стилей в других компонентах
|
37
45
|
export var baseContent = /*#__PURE__*/"\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 &&.".concat(String(classes.buttonSquare), " {\n width: var(").concat(tokens.buttonHeight, ");\n padding: 0;\n }\n\n color: var(").concat(tokens.buttonColor, ");\n background-color: var(").concat(tokens.buttonBackgroundColor, ");\n\n :hover {\n color: var(").concat(tokens.buttonColorHover, ", var(").concat(tokens.buttonColor, "));\n background-color: var(").concat(tokens.buttonBackgroundColorHover, ", var(").concat(tokens.buttonBackgroundColor, "));\n\n scale: var(").concat(tokens.buttonScaleHover, ");\n }\n\n :active {\n color: var(").concat(tokens.buttonColorActive, ", var(").concat(tokens.buttonColor, "));\n background-color: var(").concat(tokens.buttonBackgroundColorActive, ", var(").concat(tokens.buttonBackgroundColor, "));\n\n scale: var(").concat(tokens.buttonScaleActive, ");\n }\n\n height: var(").concat(tokens.buttonHeight, ");\n width: var(").concat(tokens.buttonWidth, ");\n\n /* TODO: #714 move these calc's to plasma-mapping | ds-generator and add Math.round() */\n padding: 0 var(").concat(tokens.buttonPadding, ", calc(var(").concat(tokens.buttonHeight, ") * 1.618 / 4));\n\n font-family: var(").concat(tokens.buttonFontFamily, ");\n font-size: var(").concat(tokens.buttonFontSize, ");\n font-style: var(").concat(tokens.buttonFontStyle, ");\n font-weight: var(").concat(tokens.buttonFontWeight, ");\n letter-spacing: var(").concat(tokens.buttonLetterSpacing, ");\n line-height: var(").concat(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 ").concat(addFocus({
|
@@ -39,4 +47,4 @@ export var baseContent = /*#__PURE__*/"\n position: relative;\n display: i
|
|
39
47
|
outlineSize: 'var(--plasma_private-btn-outline-size)',
|
40
48
|
outlineRadius: 'calc(0.125rem + var(--plasma_private-btn-br))',
|
41
49
|
outlineColor: "var(".concat(tokens.buttonFocusColor, ")")
|
42
|
-
}), "\n\n &[disabled] {\n opacity: var(").concat(tokens.buttonDisabledOpacity, ");\n cursor: not-allowed;\n\n :hover,\n :active {\n scale: none;\n\n color: var(").concat(tokens.buttonColor, ");\n background-color: var(").concat(tokens.buttonBackgroundColor, ");\n }\n }\n\n &.").concat(classes.fixedStretching, " {\n width: var(").concat(tokens.buttonWidth, ");\n }\n &.").concat(classes.filledStretching, " {\n width: 100%;\n }\n &.").concat(classes.autoStretching, " {\n width:
|
50
|
+
}), "\n\n &[disabled] {\n opacity: var(").concat(tokens.buttonDisabledOpacity, ");\n cursor: not-allowed;\n\n :hover,\n :active {\n scale: none;\n\n color: var(").concat(tokens.buttonColor, ");\n background-color: var(").concat(tokens.buttonBackgroundColor, ");\n }\n }\n\n &.").concat(classes.fixedStretching, " {\n width: var(").concat(tokens.buttonWidth, ");\n }\n &.").concat(classes.filledStretching, " {\n width: 100%;\n }\n &.").concat(classes.autoStretching, " {\n width: fit-content;\n }\n");
|
@@ -68,6 +68,48 @@ export function App() {
|
|
68
68
|
}
|
69
69
|
```
|
70
70
|
|
71
|
+
### Ширина кнопки
|
72
|
+
Ширина кнопки регулируется с помощью свойства `stretching`.
|
73
|
+
Возможные значения свойства `contentPlacing`:
|
74
|
+
+ `auto` – ширина подстраивается под контент;
|
75
|
+
+ `filled` – кнопка растягивается на всю доступную ширину;
|
76
|
+
+ `fixed` – кнопка фиксированной ширины.
|
77
|
+
|
78
|
+
```tsx live
|
79
|
+
import React from 'react';
|
80
|
+
import { Button } from '@salutejs/{{package}}';
|
81
|
+
|
82
|
+
export function App() {
|
83
|
+
return (
|
84
|
+
<div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
|
85
|
+
<Button text="Button" stretching="fixed" />
|
86
|
+
<Button text="Button" stretching="auto" />
|
87
|
+
<Button text="Button" stretching="filled" />
|
88
|
+
</div>
|
89
|
+
);
|
90
|
+
}
|
91
|
+
```
|
92
|
+
|
93
|
+
### Позиционирование контента внутри
|
94
|
+
Позиционирование контента внутри кнопки регулируется с помощью свойства `contentPlacing`.
|
95
|
+
Возможные значения свойства `contentPlacing`:
|
96
|
+
+ `default` – контент центрируется;
|
97
|
+
+ `relaxed` – контент распологается по краям.
|
98
|
+
|
99
|
+
```tsx live
|
100
|
+
import React from 'react';
|
101
|
+
import { Button } from '@salutejs/{{package}}';
|
102
|
+
|
103
|
+
export function App() {
|
104
|
+
return (
|
105
|
+
<div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
|
106
|
+
<Button text="Hello" value="Plasma" stretching="filled" contentPlacing="default" />
|
107
|
+
<Button text="Hello" value="Plasma" stretching="filled" contentPlacing="relaxed" />
|
108
|
+
</div>
|
109
|
+
);
|
110
|
+
}
|
111
|
+
```
|
112
|
+
|
71
113
|
### Вид кнопки
|
72
114
|
Вид кнопки задается с помощью свойства `view`. Возможные значения свойства `view`:
|
73
115
|
+ `"primary"` – основная;
|
@@ -3,11 +3,13 @@ export var classes = {
|
|
3
3
|
autoStretching: 'button-stretching-auto',
|
4
4
|
filledStretching: 'button-stretching-filled',
|
5
5
|
fixedStretching: 'button-stretching-fixed',
|
6
|
+
contentRelaxed: 'button-content-relaxed',
|
6
7
|
buttonSquare: 'button-square',
|
7
8
|
buttonItem: 'button-item'
|
8
9
|
};
|
9
10
|
export var tokens = {
|
10
11
|
buttonColor: '--plasma-button-color',
|
12
|
+
buttonValueColor: '--plasma-button-value-color',
|
11
13
|
buttonBackgroundColor: '--plasma-button-background-color',
|
12
14
|
buttonColorHover: '--plasma-button-color-hover',
|
13
15
|
buttonBackgroundColorHover: '--plasma-button-background-color-hover',
|
@@ -26,6 +28,9 @@ export var tokens = {
|
|
26
28
|
buttonFontWeight: '--plasma-button-font-weight',
|
27
29
|
buttonLetterSpacing: '--plasma-button-letter-spacing',
|
28
30
|
buttonLineHeight: '--plasma-button-line-height',
|
31
|
+
buttonLeftContentMargin: '--plasma-button-left-content-margin',
|
32
|
+
buttonRightContentMargin: '--plasma-button-right-content-margin',
|
33
|
+
buttonValueMargin: '--plasma-button-value-margin',
|
29
34
|
buttonDisabledOpacity: '--plasma-button-disabled-opacity',
|
30
35
|
buttonFocusColor: '--plasma-button-focus-color',
|
31
36
|
buttonSpinnerColor: '--plasma-button-spinner-color',
|
@@ -1,3 +1,3 @@
|
|
1
1
|
import { css } from 'styled-components';
|
2
2
|
import { classes, tokens } from '../../Button.tokens';
|
3
|
-
export var base = /*#__PURE__*/css(["&.", "{width:var(", ");}&.", "{width:100%;}&.", "{width:
|
3
|
+
export var base = /*#__PURE__*/css(["&.", "{width:var(", ");}&.", "{width:100%;}&.", "{width:fit-content;}"], classes.fixedStretching, tokens.buttonWidth, classes.filledStretching, classes.autoStretching);
|
@@ -14,6 +14,7 @@ export var classes = {
|
|
14
14
|
export var tokens = {
|
15
15
|
buttonGroupOrientation: '--plasma-button-group-orientation',
|
16
16
|
buttonColor: '--plasma-button-group-item-color',
|
17
|
+
buttonValueColor: '--plasma-button-group-item-value-color',
|
17
18
|
buttonBackgroundColor: '--plasma-button-group-item-background-color',
|
18
19
|
buttonColorHover: '--plasma-button-group-item-color-hover',
|
19
20
|
buttonBackgroundColorHover: '--plasma-button-group-item-background-color-hover',
|
@@ -1,3 +1,4 @@
|
|
1
1
|
import { css } from 'styled-components';
|
2
|
-
import { tokens } from '../../ButtonGroup.tokens';
|
3
|
-
|
2
|
+
import { classes, tokens } from '../../ButtonGroup.tokens';
|
3
|
+
import { buttonClasses } from '../../../Button';
|
4
|
+
export var base = /*#__PURE__*/css(["flex-direction:var(", ");&.", " .", "{width:auto;}"], tokens.buttonGroupOrientation, classes.vertical, buttonClasses.buttonItem);
|
@@ -1,4 +1,4 @@
|
|
1
1
|
import { css } from 'styled-components';
|
2
2
|
import { classes, tokens } from '../../ButtonGroup.tokens';
|
3
3
|
import { buttonClasses, buttonTokens } from '../../../Button';
|
4
|
-
export var base = /*#__PURE__*/css(["&.", " .", "{", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");}"], classes.buttonGroupOverrideStyles, buttonClasses.buttonItem, buttonTokens.buttonColor, tokens.buttonColor, buttonTokens.buttonBackgroundColor, tokens.buttonBackgroundColor, buttonTokens.buttonColorHover, tokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, tokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, tokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive, tokens.buttonBackgroundColorActive);
|
4
|
+
export var base = /*#__PURE__*/css(["&.", " .", "{", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");}"], classes.buttonGroupOverrideStyles, buttonClasses.buttonItem, buttonTokens.buttonColor, tokens.buttonColor, buttonTokens.buttonValueColor, tokens.buttonValueColor, buttonTokens.buttonBackgroundColor, tokens.buttonBackgroundColor, buttonTokens.buttonColorHover, tokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, tokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, tokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive, tokens.buttonBackgroundColorActive);
|
@@ -1,4 +1,4 @@
|
|
1
|
-
var _excluded = ["arrow", "iconSize"];
|
1
|
+
var _excluded = ["arrow", "iconSize", "value"];
|
2
2
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
3
3
|
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
4
4
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
@@ -22,6 +22,7 @@ export var headerArrowRoot = function headerArrowRoot(Root) {
|
|
22
22
|
var arrow = props.arrow,
|
23
23
|
_props$iconSize = props.iconSize,
|
24
24
|
iconSize = _props$iconSize === void 0 ? 's' : _props$iconSize,
|
25
|
+
value = props.value,
|
25
26
|
rest = _objectWithoutProperties(props, _excluded);
|
26
27
|
var minimizeClass = arrow === 'minimize' ? classes.headerArrowIconMinimize : undefined;
|
27
28
|
return /*#__PURE__*/React.createElement(Root, {
|
@@ -30,7 +31,8 @@ export var headerArrowRoot = function headerArrowRoot(Root) {
|
|
30
31
|
view: "clear",
|
31
32
|
size: "s",
|
32
33
|
tabIndex: -1,
|
33
|
-
className: classes.headerArrow
|
34
|
+
className: classes.headerArrow,
|
35
|
+
value: String(value)
|
34
36
|
}, rest), /*#__PURE__*/React.createElement(IconChevronLeft, _extends({
|
35
37
|
size: iconSize,
|
36
38
|
sizeCustomProperty: tokens.headerArrowIconSize,
|
@@ -1,4 +1,4 @@
|
|
1
|
-
var _excluded = ["id", "
|
1
|
+
var _excluded = ["id", "contentLeft", "contentRight", "label", "labelPlacement", "placeholder", "leftHelper", "enumerationType", "view", "size", "readOnly", "disabled", "chips", "onChange", "onChangeChips", "onSearch"];
|
2
2
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
3
3
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
4
4
|
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
@@ -25,8 +25,6 @@ export var base = /*#__PURE__*/css(["display:block;overflow:hidden;"]);
|
|
25
25
|
export var textFieldRoot = function textFieldRoot(Root) {
|
26
26
|
return /*#__PURE__*/forwardRef(function (_ref, ref) {
|
27
27
|
var id = _ref.id,
|
28
|
-
className = _ref.className,
|
29
|
-
style = _ref.style,
|
30
28
|
contentLeft = _ref.contentLeft,
|
31
29
|
contentRight = _ref.contentRight,
|
32
30
|
label = _ref.label,
|
@@ -45,7 +43,6 @@ export var textFieldRoot = function textFieldRoot(Root) {
|
|
45
43
|
onChange = _ref.onChange,
|
46
44
|
onChangeChips = _ref.onChangeChips,
|
47
45
|
onSearch = _ref.onSearch,
|
48
|
-
onKeyDown = _ref.onKeyDown,
|
49
46
|
rest = _objectWithoutProperties(_ref, _excluded);
|
50
47
|
var contentRef = useRef(null);
|
51
48
|
var inputRef = useRef(null);
|
@@ -125,10 +122,6 @@ export var textFieldRoot = function textFieldRoot(Root) {
|
|
125
122
|
chipsRefs.current[index] = element;
|
126
123
|
}
|
127
124
|
};
|
128
|
-
var handleOnKeyDown = function handleOnKeyDown(event) {
|
129
|
-
handleInputKeydown(event);
|
130
|
-
onKeyDown && onKeyDown(event);
|
131
|
-
};
|
132
125
|
useEffect(function () {
|
133
126
|
if (!isChipEnumeration && !(values !== null && values !== void 0 && values.length)) {
|
134
127
|
return;
|
@@ -147,9 +140,7 @@ export var textFieldRoot = function textFieldRoot(Root) {
|
|
147
140
|
disabled: disabled,
|
148
141
|
readOnly: !disabled && readOnly,
|
149
142
|
labelPlacement: innerLabelPlacementValue,
|
150
|
-
onClick: handleInputFocus
|
151
|
-
className: className,
|
152
|
-
style: style
|
143
|
+
onClick: handleInputFocus
|
153
144
|
}, labelInside || innerLabelValue && /*#__PURE__*/React.createElement(Label, {
|
154
145
|
id: labelId,
|
155
146
|
htmlFor: id
|
@@ -190,7 +181,7 @@ export var textFieldRoot = function textFieldRoot(Root) {
|
|
190
181
|
disabled: disabled,
|
191
182
|
readOnly: !disabled && readOnly,
|
192
183
|
onChange: handleChange,
|
193
|
-
onKeyDown:
|
184
|
+
onKeyDown: handleInputKeydown
|
194
185
|
})), labelInside && /*#__PURE__*/React.createElement(Label, {
|
195
186
|
id: labelId,
|
196
187
|
htmlFor: innerId
|
@@ -13,10 +13,6 @@ function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToAr
|
|
13
13
|
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
14
14
|
import React from 'react';
|
15
15
|
import { _component } from './styled-components';
|
16
|
-
//
|
17
|
-
// Тип HTMLAttributesOmitOnChange требуется чтобы использовать компонент с кастомным пропсом onChange
|
18
|
-
//
|
19
|
-
|
20
16
|
export var getStaticVariants = function getStaticVariants(config) {
|
21
17
|
if (!config.variations) {
|
22
18
|
return [];
|