Skip to content

Commit

Permalink
Added info color in SecondaryIconButton and replaced the `Info.sv…
Browse files Browse the repository at this point in the history 
…g` (#2755)

* chore: adding the info color

* chore: replacing the info icon with new one

* chore: update README

* chore: changeset

* chore: update changeset

* chore: updating tests

* chore: adding the colorInfo60 color
  • Loading branch information
@chloe0592
chloe0592 committed Mar 21, 2024
1 parent e6c7216 commit 5606039
Show file tree
Hide file tree
Showing 14 changed files with 45 additions and 7 deletions.
6 changes: 6 additions & 0 deletions .changeset/spotty-sloths-carry.md
View file
@@ -0,0 +1,6 @@
---
'@commercetools-uikit/secondary-icon-button': patch
'@commercetools-uikit/icons': patch
---

Adding `info` color to `SecondaryIconButton` component and replacing `Info.svg` with new one.
1 change: 1 addition & 0 deletions design-system/materials/custom-properties.css
View file
Expand Up @@ -65,6 +65,7 @@
--color-neutral-98: hsl(232, 18%, 98%);
--color-info: #078cdf;
--color-info-40: hsl(203.05555555555554, 93.9130434783%, 40%);
--color-info-60: hsl(203.05555555555554, 93.9130434783%, 60%);
--color-info-85: hsl(203.05555555555554, 93.9130434783%, 85%);
--color-info-90: #ceebfd;
--color-info-95: hsl(203.05555555555554, 93.9130434783%, 95%);
Expand Down
1 change: 1 addition & 0 deletions design-system/materials/custom-properties.json
View file
Expand Up @@ -58,6 +58,7 @@
"--color-neutral-98": "hsl(232, 18%, 98%)",
"--color-info": "#078cdf",
"--color-info-40": "hsl(203.05555555555554, 93.9130434783%, 40%)",
"--color-info-60": "hsl(203.05555555555554, 93.9130434783%, 60%)",
"--color-info-85": "hsl(203.05555555555554, 93.9130434783%, 85%)",
"--color-info-90": "#CEEBFD",
"--color-info-95": "hsl(203.05555555555554, 93.9130434783%, 95%)",
Expand Down
1 change: 1 addition & 0 deletions design-system/materials/custom-properties_default.css
View file
Expand Up @@ -65,6 +65,7 @@
--color-neutral-98: hsl(232, 18%, 98%);
--color-info: #078cdf;
--color-info-40: hsl(203.05555555555554, 93.9130434783%, 40%);
--color-info-60: hsl(203.05555555555554, 93.9130434783%, 60%);
--color-info-85: hsl(203.05555555555554, 93.9130434783%, 85%);
--color-info-90: #ceebfd;
--color-info-95: hsl(203.05555555555554, 93.9130434783%, 95%);
Expand Down
1 change: 1 addition & 0 deletions design-system/materials/custom-properties_recolouring.css
View file
Expand Up @@ -65,6 +65,7 @@
--color-neutral-98: hsl(232, 18%, 98%);
--color-info: #078cdf;
--color-info-40: hsl(203.05555555555554, 93.9130434783%, 40%);
--color-info-60: hsl(203.05555555555554, 93.9130434783%, 60%);
--color-info-85: hsl(203.05555555555554, 93.9130434783%, 85%);
--color-info-90: #ceebfd;
--color-info-95: hsl(203.05555555555554, 93.9130434783%, 95%);
Expand Down
1 change: 1 addition & 0 deletions design-system/materials/internals/definition.yaml
View file
Expand Up @@ -95,6 +95,7 @@ choiceGroupsByTheme:
color-neutral-98: 'hsl(232, 18%, 98%)'
color-info: '#078cdf'
color-info-40: 'hsl(203.05555555555554, 93.9130434783%, 40%)'
color-info-60: 'hsl(203.05555555555554, 93.9130434783%, 60%)'
color-info-85: 'hsl(203.05555555555554, 93.9130434783%, 85%)'
color-info-90: '#CEEBFD'
color-info-95: 'hsl(203.05555555555554, 93.9130434783%, 95%)'
Expand Down
3 changes: 3 additions & 0 deletions design-system/src/design-tokens.ts
View file
Expand Up @@ -64,6 +64,7 @@ export const themes = {
colorNeutral98: 'hsl(232, 18%, 98%)',
colorInfo: '#078cdf',
colorInfo40: 'hsl(203.05555555555554, 93.9130434783%, 40%)',
colorInfo60: 'hsl(203.05555555555554, 93.9130434783%, 60%)',
colorInfo85: 'hsl(203.05555555555554, 93.9130434783%, 85%)',
colorInfo90: '#CEEBFD',
colorInfo95: 'hsl(203.05555555555554, 93.9130434783%, 95%)',
Expand Down Expand Up @@ -464,6 +465,8 @@ const designTokens = {
colorInfo: 'var(--color-info, #078cdf)',
colorInfo40:
'var(--color-info-40, hsl(203.05555555555554, 93.9130434783%, 40%))',
colorInfo60:
'var(--color-info-60, hsl(203.05555555555554, 93.9130434783%, 60%))',
colorInfo85:
'var(--color-info-85, hsl(203.05555555555554, 93.9130434783%, 85%))',
colorInfo90: 'var(--color-info-90, #CEEBFD)',
Expand Down
2 changes: 1 addition & 1 deletion packages/components/buttons/secondary-icon-button/README.md
View file
Expand Up @@ -51,7 +51,7 @@ export default Example;
| `as` | `TStringOrComponent` | | | You may pass in a string like "a" to have the button element render an anchor tag, or&#xA;you could pass in a React Component, like a `Link`.&#xA;<br />&#xA;The `<SecondaryIconButton>` additionally accepts any props or attributes specific to the given element or component. |
| `type` | `union`<br/>Possible values:<br/>`'submit' , 'reset' , 'button'` | | `'button'` | Used as the HTML type attribute. |
| `icon` | `ReactElement` | | | An <Icon /> component. |
| `color` | `union`<br/>Possible values:<br/>`'solid' , 'primary'` | | `'solid'` | Indicates the color scheme of the button. |
| `color` | `union`<br/>Possible values:<br/>`'solid' , 'primary' , 'info'` | | `'solid'` | Indicates the color scheme of the button. |
| `label` | `string` | ✅ | | Should describe what the button does, for accessibility purposes (screen-reader users) |
| `isDisabled` | `boolean` | | `false` | Tells when the button should present a disabled state. |
| `size` | `union`<br/>Possible values:<br/>`'small' , 'medium' , 'big'` | | `'big'` | Indicates the size of the icon. |
Expand Down
2 changes: 1 addition & 1 deletion packages/components/buttons/secondary-icon-button/src/secondary-icon-button.story.js
View file
Expand Up @@ -22,7 +22,7 @@ storiesOf('Components|Buttons', module)
<SecondaryIconButton
icon={createElement(icons[select('icon', iconNames, iconNames[0])])}
label={text('label', 'Accessibility text')}
color={select('color', ['solid', 'primary'], 'solid')}
color={select('color', ['solid', 'primary', 'info'], 'solid')}
size={select('size', ['big', 'medium', 'small'], 'big')}
onClick={action('onClick')}
isDisabled={boolean('isDisabled', false)}
Expand Down
10 changes: 10 additions & 0 deletions packages/components/buttons/secondary-icon-button/src/secondary-icon-button.styles.ts
View file
Expand Up @@ -34,6 +34,16 @@ const getColorStyle = (props: Pick<TSecondaryButtonIconProps, 'color'>) => {
fill: ${designTokens.colorPrimary};
}
`;
case 'info':
return css`
& svg {
fill: ${designTokens.colorInfo};
}
&:focus,
&:hover svg {
fill: ${designTokens.colorInfo60};
}
`;
default:
return css`
svg {
Expand Down
2 changes: 1 addition & 1 deletion packages/components/buttons/secondary-icon-button/src/secondary-icon-button.tsx
View file
Expand Up @@ -34,7 +34,7 @@ export type TSecondaryButtonIconProps<
/**
* Indicates the color scheme of the button.
*/
color?: 'solid' | 'primary';
color?: 'solid' | 'primary' | 'info';
/**
* Should describe what the button does, for accessibility purposes (screen-reader users)
*/
Expand Down
8 changes: 8 additions & 0 deletions packages/components/buttons/secondary-icon-button/src/secondary-icon-button.visualroute.jsx
View file
Expand Up @@ -39,6 +39,14 @@ export const component = () => (
color="primary"
/>
</Spec>
<Spec label="color - info">
<SecondaryIconButton
icon={<InformationIcon />}
label="A label text"
onClick={() => {}}
color="info"
/>
</Spec>
<Spec label="with small Icon">
<SecondaryIconButton
icon={<InformationIcon size="small" />}
Expand Down
8 changes: 7 additions & 1 deletion packages/components/icons/src/generated/InfoReact.tsx
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 3 additions & 3 deletions packages/components/icons/src/svg/info.react.svg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 5606039

Please sign in to comment.