mirror of
https://github.com/apache/superset.git
synced 2026-04-25 02:55:07 +00:00
style: Pass at propagating (and enhancing) Button component throughout Superset (#10649)
* getting rid of weird focus/active outline ring
* Buttons... buttons _everywhere_
* linting
* Nixing views/CRUD/dataset/Button component
* fixing 2 typing errors
* fixing more TS errors
* prefer src path for include
* one more real button, one less CSS class
* one more "button" to "Button"
* Published Status is now a proper clickable Label
* nixing the CRUD button again
* touching up stories, with SupersetButton story
* SIP-34 button colors
* adding polished package to mix colors
* updating button colors to match Superset theme
* abstracting away from bootstrap-specific props (might pivot libraries soon!)
* more abstraction from bsStyle/bsSize props
* exchanging styles for a prop
* linting
* restoring feature flag to stock
* using src alias
* last <button> replacement
* this classname would never be applied
* more linting action
* fixing unsupported bsSize 'medium', and cta typing error
* more cta action
* unnecessary styles
* errant bsSize prop
* cleanup
* tweaks to make new New button work
* Linting
* fixing a couple tests
* fixing theme based test failure
* margin tweak for NEW button
* another fixed test
* another fixed test
* fixing two more tests
* fixing last broken tests.
* always be linting
* Adding tertiary/dashed buttons
* cleaning up QueryAndSave buttons
* fixing "link" button styles
* fixing/updating link button styles
* cta buttons on Modal component
* linting.
* exporting button story knobs, making ALL knobs safe for export.
* capitalizing a file... no big whoop
* Basic button tests
* renaming button - temporarily
* renaming file to fix capitalization issue
* passing theme through to a difficult popover.
* fixin' a newly busted unit test
* lint fixin'
* oops, shouldn't have changed this prop!
* adding a dive() to themedShallow, and fixing a cypress/jest test
* addressing lint stuff
* touching up stories, with SupersetButton story
* SIP-34 button colors
* updating button colors to match Superset theme
* abstracting away from bootstrap-specific props (might pivot libraries soon!)
* linting
* restoring feature flag to stock
* cleanup
* Linting
* renaming button - temporarily
* renaming file to fix capitalization issue
* oops, shouldn't have changed this prop!
* adding a dive() to themedShallow, and fixing a cypress/jest test
* addressing lint stuff
* nixing new modal button
* Fixing another popover/button issue that should break cypress
* lint ✨
* passing classNames through to new button (should fix some tests)
* cleaning unused classes, making cypress tests use data attrs
* fixin' the test
* fixing another class-based test with data-test attr
* no longer passing theme as prop to buttons in popovers... themeprovider is better
* outline/border tweaks!
This commit is contained in:
Evan Rusackas
168
superset-frontend/src/components/Button/Button.stories.jsx
Normal file
168
superset-frontend/src/components/Button/Button.stories.jsx
Normal file
@@ -0,0 +1,168 @@
|
||||
/**
|
||||
* Licensed to the Apache Software Foundation (ASF) under one
|
||||
* or more contributor license agreements. See the NOTICE file
|
||||
* distributed with this work for additional information
|
||||
* regarding copyright ownership. The ASF licenses this file
|
||||
* to you under the Apache License, Version 2.0 (the
|
||||
* "License"); you may not use this file except in compliance
|
||||
* with the License. You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing,
|
||||
* software distributed under the License is distributed on an
|
||||
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
* KIND, either express or implied. See the License for the
|
||||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
import React from 'react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { withKnobs, boolean, select, text } from '@storybook/addon-knobs';
|
||||
import Button from './index';
|
||||
|
||||
export default {
|
||||
title: 'Button',
|
||||
component: Button,
|
||||
decorators: [withKnobs],
|
||||
excludeStories: /.*Knob$/,
|
||||
};
|
||||
|
||||
export const buttonStyleKnob = {
|
||||
label: 'Types',
|
||||
options: {
|
||||
Primary: 'primary',
|
||||
Secondary: 'secondary',
|
||||
Tertiary: 'tertiary',
|
||||
Dashed: 'dashed',
|
||||
Danger: 'danger',
|
||||
Warning: 'warning',
|
||||
Success: 'success',
|
||||
Link: 'link',
|
||||
Default: 'default',
|
||||
None: null,
|
||||
},
|
||||
defaultValue: null,
|
||||
// groupId: 'ButtonType',
|
||||
};
|
||||
|
||||
export const buttonSizeKnob = {
|
||||
label: 'Sizes',
|
||||
options: {
|
||||
XS: 'xsmall',
|
||||
S: 'small',
|
||||
Default: null,
|
||||
L: 'large',
|
||||
},
|
||||
defaultValue: null,
|
||||
};
|
||||
|
||||
// TODO remove the use of these in the codebase where they're not necessary
|
||||
// const classKnob = {
|
||||
// label: 'Known Classes',
|
||||
// options: {
|
||||
// Refresh: 'refresh-btn',
|
||||
// Primary: 'btn-primary',
|
||||
// Reset: 'reset',
|
||||
// Fetch: 'fetch',
|
||||
// Query: 'query',
|
||||
// MR3: 'm-r-3',
|
||||
// cancelQuery: 'cancelQuery',
|
||||
// toggleSave: 'toggleSave',
|
||||
// toggleSchedule: 'toggleSchedule',
|
||||
// autocomplete: 'autocomplete',
|
||||
// OK: 'ok',
|
||||
// None: null,
|
||||
// },
|
||||
// defaultValue: null,
|
||||
// };
|
||||
const typeKnob = {
|
||||
label: 'Type',
|
||||
options: {
|
||||
Submit: 'submit',
|
||||
Button: 'button',
|
||||
None: null,
|
||||
},
|
||||
defaultValue: null,
|
||||
};
|
||||
const targetKnob = {
|
||||
label: 'Target',
|
||||
options: {
|
||||
Blank: '_blank',
|
||||
None: null,
|
||||
},
|
||||
defaultValue: null,
|
||||
};
|
||||
const hrefKnob = {
|
||||
label: 'HREF',
|
||||
options: {
|
||||
Superset: 'http://https://superset.incubator.apache.org/',
|
||||
None: null,
|
||||
},
|
||||
defaultValue: null,
|
||||
};
|
||||
|
||||
export const ButtonGallery = () => (
|
||||
<>
|
||||
{Object.entries(buttonSizeKnob.options).map(([name, size]) => (
|
||||
<div key={size}>
|
||||
<h4>{name}</h4>
|
||||
{Object.values(buttonStyleKnob.options)
|
||||
.filter(o => o)
|
||||
.map(style => (
|
||||
<Button
|
||||
disabled={boolean('Disabled', false)}
|
||||
cta={boolean('CTA', false)}
|
||||
buttonStyle={style}
|
||||
buttonSize={size}
|
||||
onClick={action('clicked')}
|
||||
key={`${style}_${size}`}
|
||||
>
|
||||
{style}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
|
||||
export const InteractiveButton = () => (
|
||||
<Button
|
||||
disabled={boolean('Disabled', false)}
|
||||
cta={boolean('CTA', false)}
|
||||
buttonStyle={select(
|
||||
buttonStyleKnob.label,
|
||||
buttonStyleKnob.options,
|
||||
buttonStyleKnob.defaultValue,
|
||||
buttonStyleKnob.groupId,
|
||||
)}
|
||||
size={select(
|
||||
buttonSizeKnob.label,
|
||||
buttonSizeKnob.options,
|
||||
buttonSizeKnob.defaultValue,
|
||||
buttonSizeKnob.groupId,
|
||||
)}
|
||||
onClick={action('clicked')}
|
||||
type={select(
|
||||
typeKnob.label,
|
||||
typeKnob.options,
|
||||
typeKnob.defaultValue,
|
||||
typeKnob.groupId,
|
||||
)}
|
||||
target={select(
|
||||
targetKnob.label,
|
||||
targetKnob.options,
|
||||
targetKnob.defaultValue,
|
||||
targetKnob.groupId,
|
||||
)}
|
||||
href={select(
|
||||
hrefKnob.label,
|
||||
hrefKnob.options,
|
||||
hrefKnob.defaultValue,
|
||||
hrefKnob.groupId,
|
||||
)}
|
||||
tooltip={boolean('Tooltip', false) === true ? 'This is a tooltip!' : null}
|
||||
>
|
||||
{text('Label', 'Button!')}
|
||||
</Button>
|
||||
);
|
||||
Reference in New Issue
Block a user