widenarrow-ui 0.1.20 → 0.1.21

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "widenarrow-ui",
-	"version": "0.1.20",
+	"version": "0.1.21",
 	"description": "A storybook 6 typeScript component library used for Wide Narrow by infodesk",
 	"main": "lib/index.js",
 	"module": "lib/index.esm.js",

package/src/components/Button/Button.module.scss

@@ -25,6 +25,7 @@ $button-l-min-width: 48px;
 	/* Corrects inability to style clickable `input` types in iOS */
 	// -webkit-appearance: none;
 	appearance: none;
+	max-width: 100%;
 
 	@include buttonColorBase;
 
@@ -109,6 +110,9 @@ $button-l-min-width: 48px;
 
 .text {
 	display: block;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
 
 	&_withIconLeft {
 		margin-left: 4px;

package/src/components/DropDown/DropDown.stories.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import type { Meta, StoryObj } from '@storybook/react';
 
 import DropDown from 'src/components/DropDown';
@@ -19,7 +20,7 @@ const meta: Meta<typeof DropDown> = {
 	render: ({ ...props }) => (
 		<div style={{ width: '300px', height: '500px', padding: '24px' }}>
 			<DropDown
-				buttonComponent={<MultiActionButton icon={IconTypes.CHEVRON_DOWN} text={'Toggle dropdown'} />}
+				buttonComponent={<MultiActionButton rightIcon={IconTypes.CHEVRON_DOWN} text={'Toggle dropdown'} />}
 				buttonCallbackName={'onRightClickCallback'}
 				title={'Filter on portal status'}
 				{...props}

package/src/components/DropDownItem/DropDownItem.tsx

@@ -4,6 +4,7 @@ import { is } from 'ramda';
 
 import { ColorTypes, IconTypes, SizeTypes, HierarchyTypes } from 'src/constants';
 
+import { Span } from 'src/components/Typography/Typography';
 import Icon from 'src/components/Icon';
 
 import styles from './DropDownItem.module.scss';
@@ -27,6 +28,7 @@ interface Props {
 	rightIcon?: `${IconTypes}`;
 	iconSize?: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE;
 	iconColor?: `${ColorTypes}`;
+	textColor?: `${ColorTypes}`;
 	iconClassName?: string;
 }
 
@@ -39,6 +41,7 @@ const DropDownItem: FC<Props> = ({
 	disabled,
 	className,
 	iconColor,
+	textColor,
 	leftIcon,
 	rightIcon,
 	iconSize,
@@ -86,7 +89,11 @@ const DropDownItem: FC<Props> = ({
 
 	const getContent = () => {
 		if (text) {
-			return <span className={s('text')}>{text}</span>;
+			return (
+				<Span className={s('text')} color={textColor}>
+					{text}
+				</Span>
+			);
 		}
 
 		return null;

package/src/components/FacetButton/FacetButton.module.scss

@@ -82,9 +82,8 @@ $button-s-min-width: 30px;
 
 .icon {
 	margin-left: $base-size;
-	height: $icon-medium-size;
-	width: $icon-medium-size;
-	min-width: $icon-medium-size;
+	min-height: $icon-small-size;
+	min-width: $icon-small-size;
 	transition: transform 150ms ease;
 }