Merge pull request #853 from vrk-kpa/develop

[Release] 14.0.0

.styleguidist/styleguidist.sections.js

@@ -25,6 +25,7 @@ const singularComponents = [
   ['Form', 'StatusText'],
   ['Form/Select/MultiSelect/', 'MultiSelect'],
   ['Form/Select', 'SingleSelect'],
+  ['Form', 'ErrorSummary'],
 ];
 
 const getComponent = ({ name, underName }) =>
@@ -76,7 +77,7 @@ module.exports = {
       content: './.styleguidist/accessibility.md',
       sections: [() => {}],
       sectiondepth: 0,
-    },    
+    },
     {
       name: 'Foundations',
       content: './.styleguidist/foundations.md',

package.json

@@ -1,6 +1,6 @@
 {
   "name": "suomifi-ui-components",
-  "version": "13.0.1",
+  "version": "14.0.0",
   "description": "Suomi.fi UI component library",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

src/core/ActionMenu/ActionMenu.baseStyles.tsx

@@ -1,21 +1,7 @@
 import { css } from 'styled-components';
-import { SuomifiTheme } from '../theme';
 
-export const baseStyles = (theme: SuomifiTheme) => css`
+export const baseStyles = () => css`
   &.fi-action-menu--full-width {
     width: 100%;
   }
-
-  & .fi-action-menu_button {
-    &--icon-only {
-      & .fi-button_icon--right {
-        & .fi-icon {
-          margin-left: 0; /* Fixes issue on Button margin when there is no text */
-        }
-      }
-
-      min-width: 40px;
-      padding: ${theme.spacing.xs};
-    }
-  }
 `;

src/core/ActionMenu/ActionMenu.test.tsx

@@ -10,6 +10,7 @@ const actionMenuProps: ActionMenuProps = {
   name: 'am-test-name',
   className: 'am-test',
   id: 'test-id',
+  'aria-label': 'am-test',
 };
 
 const TestActionMenu = (props: ActionMenuProps) => (

src/core/ActionMenu/ActionMenu.tsx

@@ -13,7 +13,13 @@ import {
   ActionMenuPopover,
   InitialActiveDescendant,
 } from './ActionMenuPopover';
-import { Button, ButtonProps, ButtonVariant } from '../Button/Button';
+import {
+  Button,
+  ButtonProps,
+  ButtonVariant,
+  ForcedAccessibleNameProps,
+  LoadingProps,
+} from '../Button/Button';
 import { HtmlDiv } from '../../reset';
 import {
   spacingStyles,
@@ -29,8 +35,6 @@ const baseClassName = 'fi-action-menu';
 export const actionMenuClassNames = {
   baseClassName,
   fullWidth: `${baseClassName}--full-width`,
-  button: `${baseClassName}_button`,
-  iconOnly: `${baseClassName}_button--icon-only`,
 };
 
 export type MenuContent =
@@ -40,50 +44,51 @@ export type MenuContent =
   | ReactElement<ActionMenuItemProps>
   | ReactElement<ActionMenuDividerProps>;
 
-export interface ActionMenuProps extends MarginProps, ButtonProps {
-  /** Text content for the menu button */
-  buttonText?: string;
-  /**
-   * `'default'` | `'inverted'` | `'secondary'` | `'secondaryLight'`| `'secondaryNoBorder'`
-   *
-   * Variant for the menu button:
-   * @default secondary
-   */
-  buttonVariant?: ButtonVariant;
-  /**
-   * Define a label if `buttonText` does not indicate the menu button purpose.
-   * In cases where the button has a visible label, make sure the visible text is included in the aria-label.
-   * Alternatively you can define `aria-labelledby` with a label element's id.
-   */
-  'aria-label'?: string;
-  /** Menu items. Use the `<ActionMenuItem>` or  `<ActionMenuDivider>` components as children */
-  children?: MenuContent;
-  /** CSS class for custom styles */
-  className?: string;
-  /** Menu container div CSS class for custom styles. Can be used to modify menu "popover" z-index. */
-  menuClassName?: string;
-  /** Disables the menu button */
-  disabled?: boolean;
-  /** Ref is forwarded to the underlying button element. Alternative for React `ref` attribute. */
-  forwardedRef?: React.RefObject<HTMLButtonElement>;
-  /** Sets component's width to 100% of its parent */
-  fullWidth?: boolean;
-  /**
-   * HTML id attribute.
-   * If no id is specified, one will be generated automatically
-   */
-  id?: string;
-  /** Name used for the menu button */
-  name?: string;
-  /** Callback fired on button onBlur
-   * @param {FocusEvent<HTMLButtonElement>} event FocusEvent
-   */
-  onBlur?: (event: FocusEvent<HTMLButtonElement>) => void;
-  /** Callback fired when menu opens */
-  onClose?: () => void;
-  /** Callback fired when menu closes */
-  onOpen?: () => void;
-}
+export type ActionMenuProps = MarginProps &
+  Omit<ButtonProps, keyof ForcedAccessibleNameProps | keyof LoadingProps> & {
+    /** Text content for the menu button */
+    buttonText?: string;
+    /**
+     * `'default'` | `'inverted'` | `'secondary'` | `'secondaryLight'`| `'secondaryNoBorder'`
+     *
+     * Variant for the menu button:
+     * @default secondary
+     */
+    buttonVariant?: ButtonVariant;
+    /**
+     * Define a label if `buttonText` does not indicate the menu button purpose.
+     * In cases where the button has a visible label, make sure the visible text is included in the aria-label.
+     * Alternatively you can define `aria-labelledby` with a label element's id.
+     */
+    'aria-label'?: string;
+    /** Menu items. Use the `<ActionMenuItem>` or  `<ActionMenuDivider>` components as children */
+    children?: MenuContent;
+    /** CSS class for custom styles */
+    className?: string;
+    /** Menu container div CSS class for custom styles. Can be used to modify menu "popover" z-index. */
+    menuClassName?: string;
+    /** Disables the menu button */
+    disabled?: boolean;
+    /** Ref is forwarded to the underlying button element. Alternative for React `ref` attribute. */
+    forwardedRef?: React.RefObject<HTMLButtonElement>;
+    /** Sets component's width to 100% of its parent */
+    fullWidth?: boolean;
+    /**
+     * HTML id attribute.
+     * If no id is specified, one will be generated automatically
+     */
+    id?: string;
+    /** Name used for the menu button */
+    name?: string;
+    /** Callback fired on button onBlur
+     * @param {FocusEvent<HTMLButtonElement>} event FocusEvent
+     */
+    onBlur?: (event: FocusEvent<HTMLButtonElement>) => void;
+    /** Callback fired when menu opens */
+    onClose?: () => void;
+    /** Callback fired when menu closes */
+    onOpen?: () => void;
+  };
 
 const BaseActionMenu = (props: ActionMenuProps) => {
   const {
@@ -176,9 +181,6 @@ const BaseActionMenu = (props: ActionMenuProps) => {
         aria-haspopup="menu"
         forwardedRef={openButtonRef}
         fullWidth={fullWidth}
-        className={classnames(actionMenuClassNames.button, {
-          [actionMenuClassNames.iconOnly]: !buttonText || buttonText.length < 1,
-        })}
         onClick={handleButtonClick}
         onKeyDown={handleKeyDown}
         onBlur={(event) => {
@@ -211,7 +213,7 @@ const StyledActionMenu = styled(
     <BaseActionMenu {...passProps} />
   ),
 )`
-  ${({ theme }) => baseStyles(theme)}
+  ${() => baseStyles()}
 `;
 
 const ActionMenu = forwardRef<HTMLButtonElement, ActionMenuProps>(