Skip to content
Permalink
Browse files

fix: update destructive button styles to be filled (#189)

* chore: get storybook serving colfax correctly

* fix: change teh destructive buttons to be filled

* test: snapshots for buttons update

* fix: move the static assets to a copy in storybook
  • Loading branch information
SiTaggart committed Nov 16, 2019
1 parent 98d70cc commit c29b7cae1e4999ddcee75ba1897e3cf09c17e6df
@@ -1,9 +1,34 @@
/* This file contains the code for the addon's decorator that wraps each story */
import * as React from 'react';
import {css, Global} from '@emotion/core';
import {Theme, ThemeVariants} from '@twilio-paste/theme';
import {Box} from '@twilio-paste/box';
import addonsAPI, {makeDecorator} from '@storybook/addons';
import {Events, THEME_STORAGE_KEY} from './constants';

const globalStyles = css`
@font-face {
font-family: Colfax;
font-style: normal;
font-weight: 300;
src: url(/fonts/colfax-light.woff2) format('woff2'), url(/fonts/colfax-light.woff) format('woff');
}
@font-face {
font-family: Colfax;
font-style: normal;
font-weight: 400;
src: url(/fonts/colfax-regular.woff2) format('woff2'), url(/fonts/colfax-regular.woff) format('woff');
}
@font-face {
font-family: Colfax;
font-style: normal;
font-weight: 600;
src: url(/fonts/colfax-medium.woff2) format('woff2'), url(/fonts/colfax-medium.woff) format('woff');
}
`;

class ThemeWrapper extends React.Component {
state = {
theme: localStorage.getItem(THEME_STORAGE_KEY) || ThemeVariants.CONSOLE,
@@ -26,7 +51,12 @@ class ThemeWrapper extends React.Component {
};

render() {
return <Theme.Provider theme={this.state.theme}>{this.props.children}</Theme.Provider>;
return (
<Theme.Provider theme={this.state.theme}>
<Global styles={globalStyles} />
<Box padding="space40">{this.props.children}</Box>
</Theme.Provider>
);
}
}

Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -14,7 +14,7 @@
"prestart": "yarn prebuild",
"start": "yarn build:tokens && concurrently \"yarn:start:tokens\" \"yarn:start:storybook\"",
"start:all": "yarn build:tokens && concurrently \"yarn:start:tokens\" \"yarn:start:storybook\" \"yarn:start:website\"",
"start:storybook": "start-storybook",
"start:storybook": "start-storybook -s ./.storybook/static -p 9001",
"start:tokens": "yarn workspace @twilio-paste/design-tokens build:dev",
"start:website": "yarn workspace @twilio-paste/website develop",
"watch:icons": "yarn workspace @twilio-paste/icons watch",
@@ -119,9 +119,10 @@ exports[`Button States Has a disabled state 1`] = `
cursor: not-allowed;
border-width: 2px;
border-style: solid;
background-color: #ffffff;
color: #ecb6b6;
background-color: #e22525;
color: #ffffff;
border-color: #ecb6b6;
background-color: #ecb6b6;
width: auto;
}

@@ -466,10 +467,10 @@ exports[`Button States Has a loading state 1`] = `
cursor: wait;
border-width: 2px;
border-style: solid;
background-color: #ffffff;
color: #921200;
border-color: #f5dddd;
background-color: #f5dddd;
background-color: #e22525;
color: #ffffff;
border-color: #600101;
background-color: #600101;
width: auto;
}

@@ -888,10 +889,9 @@ exports[`Button Variants Has a destructive variant 1`] = `
cursor: pointer;
border-width: 2px;
border-style: solid;
background-color: #ffffff;
color: #e22525;
background-color: #e22525;
color: #ffffff;
border-color: #e22525;
background-color: #ffffff;
width: auto;
}

@@ -905,21 +905,18 @@ exports[`Button Variants Has a destructive variant 1`] = `
}

.emotion-2:hover {
color: #921200;
border-color: #600101;
background-color: #ffe9e7;
background-color: #600101;
}

.emotion-2:focus {
color: #e22525;
border-color: #e22525;
background-color: #ffe9e7;
border-color: #600101;
background-color: #e22525;
}

.emotion-2:active {
color: #921200;
border-color: #600101;
background-color: #f5dddd;
background-color: #921200;
}

<div
@@ -199,34 +199,30 @@ const variantSecondaryDisabled = (props: ButtonWrapperProps): SerializedStyles =
const variantDestructiveBase = (props: ButtonWrapperProps): SerializedStyles => css`
border-width: ${themeGet('borderWidths.borderWidth20')(props)};
border-style: solid;
background-color: ${themeGet('backgroundColors.colorBackgroundBody')(props)};
background-color: ${themeGet('backgroundColors.colorBackgroundDestructive')(props)};
color: ${themeGet('textColors.colorTextInverse')(props)};
`;

const variantDestructiveEnabled = (props: ButtonWrapperProps): SerializedStyles =>
css([
baseEnabled(props),
variantDestructiveBase(props),
css`
color: ${themeGet('textColors.colorTextLinkDestructive')(props)};
border-color: ${themeGet('borderColors.colorBorderDestructive')(props)};
background-color: ${themeGet('backgroundColors.colorBackgroundBody')(props)};
&:hover {
color: ${themeGet('textColors.colorTextLinkDestructiveDarker')(props)};
border-color: ${themeGet('borderColors.colorBorderDestructiveDarker')(props)};
background-color: ${themeGet('backgroundColors.colorBackgroundDestructiveLightest')(props)};
background-color: ${themeGet('backgroundColors.colorBackgroundDestructiveDarker')(props)};
}
&:focus {
color: ${themeGet('textColors.colorTextLinkDestructive')(props)};
border-color: ${themeGet('borderColors.colorBorderDestructive')(props)};
background-color: ${themeGet('backgroundColors.colorBackgroundDestructiveLightest')(props)};
border-color: ${themeGet('borderColors.colorBorderDestructiveDarker')(props)};
background-color: ${themeGet('backgroundColors.colorBackgroundDestructive')(props)};
}
&:active {
color: ${themeGet('textColors.colorTextLinkDestructiveDarker')(props)};
border-color: ${themeGet('borderColors.colorBorderDestructiveDarker')(props)};
background-color: ${themeGet('backgroundColors.colorBackgroundDestructiveLighter')(props)};
background-color: ${themeGet('backgroundColors.colorBackgroundDestructiveDark')(props)};
}
`,
]);
@@ -235,18 +231,17 @@ const variantDestructiveLoading = (props: ButtonWrapperProps): SerializedStyles
baseLoading(props),
variantDestructiveBase(props),
css`
color: ${themeGet('textColors.colorTextLinkDestructiveDarker')(props)};
border-color: ${themeGet('borderColors.colorBorderDestructiveLighter')(props)};
background-color: ${themeGet('backgroundColors.colorBackgroundDestructiveLighter')(props)};
border-color: ${themeGet('borderColors.colorBorderDestructiveDarker')(props)};
background-color: ${themeGet('backgroundColors.colorBackgroundDestructiveDarker')(props)};
`,
]);
const variantDestructiveDisabled = (props: ButtonWrapperProps): SerializedStyles =>
css([
baseDisabled(props),
variantDestructiveBase(props),
css`
color: ${themeGet('textColors.colorTextLinkDestructiveLight')(props)};
border-color: ${themeGet('borderColors.colorBorderDestructiveLight')(props)};
background-color: ${themeGet('backgroundColors.colorBackgroundDestructiveLight')(props)};
`,
]);

1 comment on commit c29b7ca

@now

This comment has been minimized.

Please sign in to comment.
You can’t perform that action at this time.