:global(.buttons) > button { margin: 8px; } :global(.dark) { background: #000; }
import React, {Fragment} from 'react'; import {render} from 'react-dom'; import Button from '@jetbrains/ring-ui/components/button/button'; import {PencilIcon} from '@jetbrains/ring-ui/components/icon'; function renderButtonModifications(theme) { return [ 'active', 'primary', 'danger', 'delayed', 'disabled', 'dropdown' ].map(modifier => ( )); } function renderTextModifications(theme) { return [ 'primary', 'danger', 'disabled', 'loader' ].map(modifier => ( )); } function renderIconWithTextModifications(theme) { return [ {label: 'primary', primary: true}, {label: 'danger', danger: true}, {label: 'disabled', disabled: true}, {label: 'primary-disabled', primary: true, disabled: true}, {label: 'danger-disabled', danger: true, disabled: true} ].map((modifiers, index) => ( )); } function renderIconActionModifications(theme) { return [ {label: 'primary', primary: true}, {label: 'danger', danger: true}, {label: 'disabled', disabled: true}, {label: 'primary-disabled', primary: true, disabled: true}, {label: 'danger-disabled', danger: true, disabled: true} ].map((modifiers, index) => ( {renderButtonModifications()} {renderTextModifications()} {renderIconWithTextModifications()} {renderButtonModifications(Button.Theme.DARK)} {renderTextModifications(Button.Theme.DARK)} {renderIconWithTextModifications(Button.Theme.DARK)}