Skip to content

Commit

Permalink
feat(toast): add icon size prop (#581)
Browse files Browse the repository at this point in the history 
chore(toast): add icon size prop to toast component
  • Loading branch information
@mattmewton
mattmewton committed Jul 9, 2024
1 parent c30f147 commit 1ecda79
Show file tree
Hide file tree
Showing 5 changed files with 35 additions and 18 deletions.
9 changes: 1 addition & 8 deletions src/components/Icon/src/Icon.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,14 +13,7 @@ import cssValidator from '@square/maker/utils/css-validator';
import assert from '@square/maker/utils/assert';
import { MThemeKey, defaultTheme, resolveThemeableProps } from '@square/maker/components/Theme';
import RenderFn from '@square/maker/utils/RenderFn';
const ICON_SIZES = {
small: '16px',
medium: '24px',
large: '32px',
xlarge: '40px',
xxlarge: '48px',
};
import { ICON_SIZES } from '@square/maker/utils/constants';
// width & height css props accept same set of values
const sizeValidator = cssValidator('width');
Expand Down
21 changes: 11 additions & 10 deletions src/components/Image/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -247,16 +247,17 @@ Supports attributes from [`<img>`](https://developer.mozilla.org/en-US/docs/Web/

Themable props* can be configured via the [Theme](#/Theme) component using the key `image`.

| Prop | Type | Default | Possible values | Description |
| ------------------------- | --------- | ---------- | ----------------------------------------------------------- | ----------------------------------------------------------------------------------- |
| src | `string` | — | - | - |
| srcset | `string` | — | - | - |
| sizes | `string` | — | - | - |
| shape* | `string` | — | `'original'`, `'square'`, `'circle'`, `'arch'`, `'hexagon'` | Original applies theme's border radius, square applies border radius of 0 |
| lazyload | `boolean` | `false` | - | - |
| object-fit | `string` | `'cover'` | - | [Object fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) |
| object-position | `string` | `'center'` | - | [Object position](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position) |
| should-disable-transition | `boolean` | `false` | - | - |
| Prop | Type | Default | Possible values | Description |
| ----------------------------- | --------- | ---------- | ----------------------------------------------------------- | ----------------------------------------------------------------------------------- |
| src | `string` | — | - | - |
| srcset | `string` | — | - | - |
| sizes | `string` | — | - | - |
| shape* | `string` | — | `'original'`, `'square'`, `'circle'`, `'arch'`, `'hexagon'` | Original applies theme's border radius, square applies border radius of 0 |
| lazyload | `boolean` | `false` | - | - |
| object-fit | `string` | `'cover'` | - | [Object fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) |
| object-position | `string` | `'center'` | - | [Object position](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position) |
| should-disable-transition | `boolean` | `false` | - | - |
| should-use-static-size-styles | `boolean` | `false` | - | - |


## Events
Expand Down
1 change: 1 addition & 0 deletions src/components/Toast/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -936,6 +936,7 @@ Themable props* can be configured via the [Theme](#/Theme) component using the k
| dismiss-after* | `number` | `5000` | - | auto-dismiss after x milliseconds (ignored if persistent) |
| icon-name* | `string` | `'info'` | - | name of icon to show |
| show-icon* | `boolean` | `false` | - | shows icon |
| icon-size | `string` | `'small'` | - | changes icon size |
| text | `string` | `''` | - | toast text content |
| progress | `number` | — | - | optional toast progress (0 - 100) |
| color* | `string` | `'#000000'` | - | toast text & button color |
Expand Down
14 changes: 14 additions & 0 deletions src/components/Toast/src/Toast.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
<slot name="icon">
<m-icon
:name="resolvedIconName"
:size="iconSize"
/>
</slot>
</div>
Expand Down Expand Up @@ -59,6 +60,7 @@
>
<m-icon
:class="$s.CloseIcon"
:size="iconSize"
name="close"
/>
</div>
Expand All @@ -81,10 +83,14 @@ import { MProgressBar } from '@square/maker/components/ProgressBar';
import { MTextButton } from '@square/maker/components/TextButton';
import { MIcon } from '@square/maker/components/Icon';
import { MText } from '@square/maker/components/Text';
import { ICON_SIZES } from '@square/maker/utils/constants';
import cssValidator from '@square/maker/utils/css-validator';
import MBread from './Bread.vue';
import toastApi from './toast-api';
// width & height css props accept same set of values
const sizeValidator = cssValidator('width');
const MIN_PROGRESS = 0;
const MAX_PROGRESS = 100;
Expand Down Expand Up @@ -148,6 +154,14 @@ export default {
type: Boolean,
default: undefined,
},
/**
* changes icon size
*/
iconSize: {
type: String,
default: 'small',
validator: (size) => ICON_SIZES[size] || sizeValidator(size),
},
/**
* toast text content
*/
Expand Down
8 changes: 8 additions & 0 deletions src/utils/constants.js
View file
Original file line number Diff line number Diff line change
@@ -1 +1,9 @@
export const BASE_TEN = 10;

export const ICON_SIZES = {
small: '16px',
medium: '24px',
large: '32px',
xlarge: '40px',
xxlarge: '48px',
};

0 comments on commit 1ecda79

Please sign in to comment.