Skip to content

Commit 1ad3384

Browse files
emmenkoemmenko
authored
fix(buttons): leftovers of theme/color renaming (#942)
* fix(buttons): leftovers of theme/color renaming * fix(buttons): leftovers of secondarybutton theme styles
1 parent 11ebfea commit 1ad3384

9 files changed

+33
-33
lines changed

‎src/components/buttons/icon-button/README.md

+12-12
Original file line numberDiff line numberDiff line change
@@ -23,18 +23,18 @@ Icon Buttons are "icon-only" buttons. They trigger an action when clicked
2323

2424
#### Properties
2525

26-
| Props | Type | Required | Values | Default | Description |
27-
| ---------------- | -------- | :------: | --------------------------- | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
28-
| `type` | `string` | - | `submit`, `reset`, `button` | `button` | Used as the HTML `type` attribute. |
29-
| `label` | `string` | ✅ | - | - | Should describe what the button does, for accessibility purposes (screen-reader users) |
30-
| `icon` | `node` | - | - | - | Likely an `Icon` component |
31-
| `isToggleButton` | `bool` | - | - | `false` | If this is active, it means the button will persist in an "active" state when toggled (see `isToggled`), and back to normal state when untoggled |
32-
| `isToggled` | `bool` | - | - | - | Tells when the button should present a toggled state. It does not have any effect when `isToggleButton` is false |
33-
| `isDisabled` | `bool` | - | - | - | Tells when the button should present a disabled state |
34-
| `onClick` | `func` | ✅ | - | - | What the button will trigger when clicked |
35-
| `shape` | `oneOf` | - | `round`, `square` | `round` | The container shape of the button |
36-
| `size` | `oneOf` | - | `big`, `medium`, `small` | `big` | - |
37-
| `theme` | `oneOf` | - | `default` | `blue`, `green` | The component may have a theme only if `isToggleButton` is true |
26+
| Props | Type | Required | Values | Default | Description |
27+
| ---------------- | -------- | :------: | --------------------------- | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
28+
| `type` | `string` | - | `submit`, `reset`, `button` | `button` | Used as the HTML `type` attribute. |
29+
| `label` | `string` | ✅ | - | - | Should describe what the button does, for accessibility purposes (screen-reader users) |
30+
| `icon` | `node` | - | - | - | Likely an `Icon` component |
31+
| `isToggleButton` | `bool` | - | - | `false` | If this is active, it means the button will persist in an "active" state when toggled (see `isToggled`), and back to normal state when untoggled |
32+
| `isToggled` | `bool` | - | - | - | Tells when the button should present a toggled state. It does not have any effect when `isToggleButton` is false |
33+
| `isDisabled` | `bool` | - | - | - | Tells when the button should present a disabled state |
34+
| `onClick` | `func` | ✅ | - | - | What the button will trigger when clicked |
35+
| `shape` | `oneOf` | - | `round`, `square` | `round` | The container shape of the button |
36+
| `size` | `oneOf` | - | `big`, `medium`, `small` | `big` | - |
37+
| `theme` | `oneOf` | - | `default` | `info`, `primary` | The component may have a theme only if `isToggleButton` is true |
3838

3939
The component further forwards all `data-` and `aria-` attributes to the underlying `button` component.
4040

‎src/components/buttons/icon-button/icon-button.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@ IconButton.propTypes = {
107107
`Invalid prop \`${propName}\` supplied to \`${componentName}\`. Only toggle buttons may have a theme.`
108108
);
109109
}
110-
return PropTypes.oneOf(['default', 'green', 'blue'])(
110+
return PropTypes.oneOf(['default', 'primary', 'info'])(
111111
props,
112112
propName,
113113
componentName,

‎src/components/buttons/icon-button/icon-button.story.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ storiesOf('Components|Buttons', module)
2323
type={select('type', ['submit', 'reset', 'button'], 'button')}
2424
shape={select('shape', ['round', 'square'], 'round')}
2525
size={select('size', ['big', 'medium', 'small'], 'big')}
26-
theme={select('theme', ['green', 'blue', 'default'], 'default')}
26+
theme={select('theme', ['primary', 'info', 'default'], 'default')}
2727
icon={React.createElement(
2828
icons[select('icon', iconNames, iconNames[0])]
2929
)}

‎src/components/buttons/icon-button/icon-button.styles.js

+6-6
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ const getStateStyles = (isDisabled, isActive, theme) => {
1717
box-shadow: none;
1818
`;
1919
switch (theme) {
20-
case 'blue':
20+
case 'info':
2121
return [
2222
disabledStyle,
2323
css`
@@ -27,7 +27,7 @@ const getStateStyles = (isDisabled, isActive, theme) => {
2727
}
2828
`,
2929
];
30-
case 'green':
30+
case 'primary':
3131
return [
3232
disabledStyle,
3333
css`
@@ -53,7 +53,7 @@ const getStateStyles = (isDisabled, isActive, theme) => {
5353
}
5454
`;
5555
switch (theme) {
56-
case 'blue':
56+
case 'info':
5757
return [
5858
activeStyle,
5959
isDisabled &&
@@ -75,7 +75,7 @@ const getStateStyles = (isDisabled, isActive, theme) => {
7575
}
7676
`,
7777
];
78-
case 'green':
78+
case 'primary':
7979
return [
8080
activeStyle,
8181
// When the button is active and somehow is disabled it should have
@@ -167,15 +167,15 @@ const getThemeStyles = theme => {
167167
if (theme === 'default') return css``;
168168

169169
switch (theme) {
170-
case 'green':
170+
case 'primary':
171171
return css`
172172
&:hover {
173173
background-color: ${vars.colorPrimary};
174174
border-color: ${vars.colorPrimary};
175175
color: ${vars.colorSurface};
176176
}
177177
`;
178-
case 'blue':
178+
case 'info':
179179
return css`
180180
&:hover {
181181
background-color: ${vars.colorInfo};

‎src/components/buttons/icon-button/icon-button.visualroute.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -123,25 +123,25 @@ export const component = () => (
123123
/>
124124
</Spec>
125125

126-
<Spec label="theme - when green - when toggled">
126+
<Spec label="theme - when primary - when toggled">
127127
<IconButton
128128
icon={<InformationIcon />}
129129
label="A label text"
130130
onClick={() => {}}
131131
isToggleButton={true}
132132
isToggled={true}
133-
theme="green"
133+
theme="primary"
134134
/>
135135
</Spec>
136136

137-
<Spec label="theme - when blue - when toggled">
137+
<Spec label="theme - when info - when toggled">
138138
<IconButton
139139
icon={<InformationIcon />}
140140
label="A label text"
141141
onClick={() => {}}
142142
isToggleButton={true}
143143
isToggled={true}
144-
theme="blue"
144+
theme="info"
145145
/>
146146
</Spec>
147147
</Suite>

‎src/components/buttons/secondary-button/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ accessibility reasons.
3030
| `iconLeft` | `node` | ✅ | - | - | The left icon displayed within the button |
3131
| `isToggleButton` | `bool` | ✅ | - | `false` | If this is active, it means the button will persist in an "active" state when toggled (see `isToggled`), and back to normal state when untoggled |
3232
| `isToggled` | `bool` | - | - | - | Tells when the button should present a toggled state. It does not have any effect when `isToggleButton` is false |
33-
| `theme` | `string` | - | `default`, `blue` | `default` | The component may have a theme only if `isToggleButton` is true |
33+
| `theme` | `string` | - | `default`, `info` | `default` | The component may have a theme only if `isToggleButton` is true |
3434
| `isDisabled` | `bool` | - | - | - | Tells when the button should present a disabled state |
3535
| `buttonAttributes` | `object` | - | - | - | Allows setting custom attributes on the underlying button html element |
3636
| `type` | `string` | - | `submit`, `reset`, `button` | `button` | Used as the HTML `type` attribute. |

‎src/components/buttons/secondary-button/secondary-button.story.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ storiesOf('Components|Buttons', module)
2323
<MemoryRouter>
2424
<SecondaryButton
2525
type={select('type', ['button', 'reset', 'submit'], 'button')}
26-
theme={select('theme', ['blue', 'default'], 'default')}
26+
theme={select('theme', ['info', 'default'], 'default')}
2727
iconLeft={React.createElement(
2828
icons[select('iconLeft', iconNames, iconNames[0])]
2929
)}

‎src/components/buttons/secondary-button/secondary-button.styles.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ const getStateStyles = (isDisabled, isActive, theme) => {
1212
cursor: not-allowed;
1313
`;
1414
switch (theme) {
15-
case 'blue':
15+
case 'info':
1616
return [
1717
baseDisabledStyles,
1818
css`
@@ -42,7 +42,7 @@ const getStateStyles = (isDisabled, isActive, theme) => {
4242
`,
4343
];
4444
switch (theme) {
45-
case 'blue':
45+
case 'info':
4646
return [
4747
baseActiveStyles,
4848
css`
@@ -70,7 +70,7 @@ const getThemeStyles = theme => {
7070
if (theme === 'default') return css``;
7171

7272
switch (theme) {
73-
case 'blue':
73+
case 'info':
7474
return css`
7575
&:hover {
7676
color: ${vars.colorInfo};

‎src/components/buttons/secondary-button/secondary-button.visualroute.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -52,13 +52,13 @@ export const component = () => (
5252
theme="default"
5353
/>
5454
</Spec>
55-
<Spec label='with theme - when toggled with theme "blue"'>
55+
<Spec label='with theme - when toggled with theme "info"'>
5656
<SecondaryButton
5757
label="A label text"
5858
onClick={() => {}}
5959
isToggleButton={true}
6060
isToggled={true}
61-
theme="blue"
61+
theme="info"
6262
/>
6363
</Spec>
6464
<Spec label='with theme - when not toggled with theme "default"'>
@@ -70,13 +70,13 @@ export const component = () => (
7070
theme="default"
7171
/>
7272
</Spec>
73-
<Spec label='with theme - when not toggled with theme "blue"'>
73+
<Spec label='with theme - when not toggled with theme "info"'>
7474
<SecondaryButton
7575
label="A label text"
7676
onClick={() => {}}
7777
isToggleButton={true}
7878
isToggled={false}
79-
theme="blue"
79+
theme="info"
8080
/>
8181
</Spec>
8282

0 commit comments

Comments
 (0)