Rename normal to neutral.

src/docs/Docs.tsx

@@ -48,7 +48,7 @@ const Page = ({ name, examples }: { name: string; examples: ExampleType[] }) =>
                     <BiLeftArrowAlt />
                   </VuiIcon>
                 }
-                color="normal"
+                color="neutral"
                 onClick={() => navigateToPreviousPage()}
               />
             </VuiFlexItem>
@@ -61,7 +61,7 @@ const Page = ({ name, examples }: { name: string; examples: ExampleType[] }) =>
                     <BiRightArrowAlt />
                   </VuiIcon>
                 }
-                color="normal"
+                color="neutral"
                 onClick={() => navigateToNextPage()}
               />
             </VuiFlexItem>
@@ -111,7 +111,7 @@ export const Docs = () => {
           <VuiIconButton
             href="https://github.com/vectara/vectara-ui"
             target="_blank"
-            color="normal"
+            color="neutral"
             icon={
               <VuiIcon>
                 <BiLogoGithub />

src/docs/pages/flex/Wrap.tsx

@@ -3,23 +3,23 @@ import { VuiBadge, VuiFlexContainer, VuiFlexItem } from "../../../lib";
 export const Wrap = () => (
   <VuiFlexContainer spacing="xxs" className="flexExampleWrap" wrap>
     <VuiFlexItem grow={false}>
-      <VuiBadge color="normal">当たり</VuiBadge>
+      <VuiBadge color="neutral">当たり</VuiBadge>
     </VuiFlexItem>
 
     <VuiFlexItem grow={false}>
-      <VuiBadge color="normal">先手</VuiBadge>
+      <VuiBadge color="neutral">先手</VuiBadge>
     </VuiFlexItem>
 
     <VuiFlexItem grow={false}>
-      <VuiBadge color="normal">気合い</VuiBadge>
+      <VuiBadge color="neutral">気合い</VuiBadge>
     </VuiFlexItem>
 
     <VuiFlexItem grow={false}>
-      <VuiBadge color="normal">模様</VuiBadge>
+      <VuiBadge color="neutral">模様</VuiBadge>
     </VuiFlexItem>
 
     <VuiFlexItem grow={false}>
-      <VuiBadge color="normal">利かし</VuiBadge>
+      <VuiBadge color="neutral">利かし</VuiBadge>
     </VuiFlexItem>
   </VuiFlexContainer>
 );

src/docs/pages/popover/Popover.tsx

@@ -18,7 +18,7 @@ export const Popover = () => {
       setIsOpen={() => setIsOpen(!isOpen)}
       button={
         <VuiButtonSecondary
-          color="normal"
+          color="neutral"
           size="s"
           icon={
             <VuiIcon size="m">

src/docs/pages/searchResult/SearchResults.tsx

@@ -54,7 +54,7 @@ export const SearchResults = () => {
 
   return (
     <>
-      <VuiButtonSecondary color="normal" onClick={() => setIsSelectionEnabled(!isSelectionEnabled)}>
+      <VuiButtonSecondary color="neutral" onClick={() => setIsSelectionEnabled(!isSelectionEnabled)}>
         Toggle selection
       </VuiButtonSecondary>
 

src/lib/components/app/AppSideNav.tsx

@@ -56,7 +56,7 @@ export const VuiAppSideNav = ({ items = [], content }: Props) => {
           <VuiIconButton
             onClick={() => setIsCollapsed(false)}
             className="appSideNavExpandButton"
-            color="normal"
+            color="neutral"
             icon={
               <VuiIcon>
                 <BiChevronRight />

src/lib/components/badge/Badge.tsx

@@ -4,7 +4,7 @@ import { Link } from "react-router-dom";
 import { Props as LinkProps } from "../link/Link";
 import { getTrackingProps } from "../../utils/getTrackingProps";
 
-export const BADGE_COLOR = ["accent", "primary", "danger", "success", "normal"] as const;
+export const BADGE_COLOR = ["accent", "primary", "danger", "success", "neutral"] as const;
 
 type Props = {
   children: React.ReactNode;

src/lib/components/badge/_index.scss

@@ -37,7 +37,7 @@ $color: (
     "background-color": transparentize($colorDanger, 0.9),
     "border-color": transparentize($colorDanger, 0.9)
   ),
-  normal: (
+  neutral: (
     "color": $colorText,
     "background-color": $colorLightShade,
     "border-color": transparentize($colorText, 0.9)

src/lib/components/button/ButtonPrimary.tsx

@@ -26,7 +26,7 @@ const colorToIconColorMap = {
   success: "empty",
   danger: "empty",
   warning: "empty",
-  normal: "normal"
+  neutral: "neutral"
 };
 
 export const VuiButtonPrimary = forwardRef<HTMLButtonElement | null, Props>(

src/lib/components/button/ButtonSecondary.tsx

@@ -26,7 +26,7 @@ const colorToIconColorMap = {
   success: "success",
   danger: "danger",
   warning: "warning",
-  normal: "normal"
+  neutral: "neutral"
 };
 
 export const VuiButtonSecondary = forwardRef<HTMLButtonElement | null, Props>(

src/lib/components/button/ButtonTertiary.tsx

@@ -24,7 +24,7 @@ const colorToIconColorMap = {
   success: "success",
   danger: "danger",
   warning: "warning",
-  normal: "normal"
+  neutral: "neutral"
 };
 
 export const VuiButtonTertiary = forwardRef<HTMLButtonElement | null, Props>(

src/lib/components/button/buttonPrimary.scss

@@ -28,7 +28,7 @@ $color: (
     "color": #ffffff,
     "background-color": $colorWarning
   ),
-  normal: (
+  neutral: (
     "color": $colorText,
     "background-color": transparentize($colorText, 0.9)
   )

src/lib/components/button/buttonSecondary.scss

@@ -28,7 +28,7 @@ $color: (
     "border-color": transparentize($colorWarning, 0.5),
     "color": $colorWarning
   ),
-  normal: (
+  neutral: (
     "border-color": $borderColor,
     "color": $colorText
   )

src/lib/components/button/buttonTertiary.scss

@@ -26,7 +26,7 @@ $color: (
   warning: (
     "color": $colorWarning
   ),
-  normal: (
+  neutral: (
     "color": $colorText
   )
 );

src/lib/components/button/iconButton.scss

@@ -12,7 +12,7 @@ $color: (
   success: $colorSuccess,
   warning: $colorWarning,
   danger: $colorDanger,
-  normal: $colorText
+  neutral: $colorText
 );
 
 @each $colorName, $colorValue in $color {

src/lib/components/button/types.ts

@@ -1,3 +1,3 @@
 export const BUTTON_SIZE = ["xs", "s", "m"] as const;
-export const BUTTON_COLOR = ["accent", "primary", "success", "danger", "warning", "normal"] as const;
+export const BUTTON_COLOR = ["accent", "primary", "success", "danger", "warning", "neutral"] as const;
 export type ButtonColor = (typeof BUTTON_COLOR)[number];

src/lib/components/callout/_index.scss

@@ -29,7 +29,7 @@ $color: (
   danger: (
     "background-color": $colorDangerLight
   ),
-  normal: (
+  neutral: (
     "background-color": $colorLightShade
   )
 );

src/lib/components/code/Code.tsx

@@ -38,7 +38,7 @@ export const VuiCode = ({ onCopy, language = "none", fullHeight, children = "" }
       </pre>
 
       <VuiIconButton
-        color="normal"
+        color="neutral"
         icon={
           <VuiIcon>
             <BiClipboard size={20} />

src/lib/components/copyButton/CopyButton.tsx

@@ -37,7 +37,7 @@ export const VuiCopyButton = ({ value, options, size = "s" }: Props) => {
       type="secondary"
       isOpen={isOpen}
       setIsOpen={setIsOpen}
-      color="normal"
+      color="neutral"
       size={size}
       onClick={() => {
         navigator.clipboard.writeText(value);

src/lib/components/drawer/Drawer.tsx

@@ -64,9 +64,9 @@ export const VuiDrawer = ({ className, color = "primary", title, children, isOpe
                     <VuiFlexItem>
                       <VuiIconButton
                         onClick={onCloseDelayed}
-                        color="normal"
+                        color="neutral"
                         icon={
-                          <VuiIcon size="m" color="normal">
+                          <VuiIcon size="m" color="neutral">
                             <BiX />
                           </VuiIcon>
                         }

src/lib/components/icon/_index.scss

@@ -10,7 +10,7 @@ $colors: (
   warning: $colorWarning,
   danger: $colorDanger,
   subdued: $colorSubdued,
-  normal: $colorText,
+  neutral: $colorText,
   empty: #ffffff
 );
 

src/lib/components/icon/types.ts

@@ -6,7 +6,7 @@ export const ICON_COLOR = [
   "warning",
   "danger",
   "subdued",
-  "normal",
+  "neutral",
   "empty"
 ] as const;
 

src/lib/components/modal/Modal.tsx

@@ -65,9 +65,9 @@ export const VuiModal = ({ className, color = "primary", title, children, isOpen
                       <VuiFlexItem>
                         <VuiIconButton
                           onClick={onCloseDelayed}
-                          color="normal"
+                          color="neutral"
                           icon={
-                            <VuiIcon size="m" color="normal">
+                            <VuiIcon size="m" color="neutral">
                               <BiX />
                             </VuiIcon>
                           }

src/lib/components/optionsButton/_index.scss

@@ -17,7 +17,7 @@ $colorPrimaryButton: (
   success: transparentize($colorEmptyShade, 0.5),
   danger: transparentize($colorEmptyShade, 0.5),
   warning: transparentize($colorEmptyShade, 0.5),
-  normal: transparentize($colorText, 0.8)
+  neutral: transparentize($colorText, 0.8)
 );
 
 @each $colorName, $colorValue in $colorPrimaryButton {
@@ -32,7 +32,7 @@ $coloSecondaryButton: (
   success: transparentize($colorSuccess, 0.7),
   danger: transparentize($colorDanger, 0.7),
   warning: transparentize($colorWarning, 0.7),
-  normal: transparentize($colorText, 0.8)
+  neutral: transparentize($colorText, 0.8)
 );
 
 @each $colorName, $colorValue in $coloSecondaryButton {

src/lib/components/optionsList/OptionsListItem.tsx

@@ -16,7 +16,7 @@ type Props = OptionListItem & {
 export const VuiOptionsListItem = ({
   value,
   label,
-  color = "normal",
+  color = "neutral",
   href,
   onClick,
   isSelectable,

src/lib/components/prompt/Prompt.tsx

@@ -1,7 +1,7 @@
 import classNames from "classnames";
 import { ReactNode } from "react";
 
-const COLOR = ["danger", "normal"] as const;
+const COLOR = ["danger", "neutral"] as const;
 
 const paddingToClassNameMap = {
   xs: "vuiPrompt--paddingXs",
@@ -21,7 +21,14 @@ type Props = {
   isSpeechBubble?: boolean;
 };
 
-export const VuiPrompt = ({ children, className, onClick, color = "normal", padding = "l", isSpeechBubble }: Props) => {
+export const VuiPrompt = ({
+  children,
+  className,
+  onClick,
+  color = "neutral",
+  padding = "l",
+  isSpeechBubble
+}: Props) => {
   const Component = onClick ? "button" : "div";
   const classes = classNames(className, "vuiPrompt", `vuiPrompt--${color}`, paddingToClassNameMap[padding], {
     "vuiPrompt--interactive": onClick !== undefined,

src/lib/components/prompt/_index.scss

@@ -40,7 +40,7 @@ $color: (
     "color": $colorDanger,
     "background-color": $colorDangerLightShade
   ),
-  normal: (
+  neutral: (
     "color": $colorDarkShade,
     "background-color": $colorLightShade
   )

src/lib/components/setting/Setting.tsx

@@ -42,7 +42,7 @@ export const VuiSetting = ({
 
             {badge && (
               <VuiFlexItem grow={false}>
-                <VuiBadge color="normal">{badge}</VuiBadge>
+                <VuiBadge color="neutral">{badge}</VuiBadge>
               </VuiFlexItem>
             )}
           </VuiFlexContainer>

src/lib/components/table/TableActions.tsx

@@ -0,0 +1,53 @@
+import { useState } from "react";
+import { BiChevronDown } from "react-icons/bi";
+import { VuiOptionsList } from "../optionsList/OptionsList";
+import { VuiPopover } from "../popover/Popover";
+import { VuiIcon } from "../icon/Icon";
+import { VuiButtonSecondary } from "../button/ButtonSecondary";
+
+type Action = {
+  label: string;
+  onClick: (row: any) => void;
+};
+
+export type Props = {
+  row: any;
+  actions: Action[];
+};
+
+export const VuiTableActions = ({ row, actions }: Props) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  if (actions.length === 1) {
+    return (
+      <VuiButtonSecondary color="neutral" onClick={() => actions[0].onClick(row)}>
+        {actions[0].label}
+      </VuiButtonSecondary>
+    );
+  }
+
+  return (
+    <VuiPopover
+      isOpen={isOpen}
+      setIsOpen={() => setIsOpen(!isOpen)}
+      button={
+        <VuiButtonSecondary
+          color="neutral"
+          size="xs"
+          icon={
+            <VuiIcon size="m">
+              <BiChevronDown />
+            </VuiIcon>
+          }
+        />
+      }
+    >
+      <VuiOptionsList
+        onSelectOption={() => {
+          setIsOpen(false);
+        }}
+        options={actions.map((action) => ({ ...action, value: row }))}
+      />
+    </VuiPopover>
+  );
+};

src/lib/components/typography/_textColor.scss

@@ -5,7 +5,7 @@ $color: (
   warning: $colorWarning,
   danger: $colorDanger,
   subdued: $colorSubdued,
-  normal: $colorText
+  neutral: $colorText
 );
 
 @each $colorName, $colorValue in $color {

src/lib/components/typography/types.ts

@@ -1,4 +1,4 @@
 export const TITLE_SIZE = ["xxs", "xs", "s", "m", "l", "xl", "xxl"] as const;
 
-export const TEXT_COLOR = ["accent", "primary", "success", "warning", "danger", "subdued", "normal"] as const;
+export const TEXT_COLOR = ["accent", "primary", "success", "warning", "danger", "subdued", "neutral"] as const;
 export type TextColor = (typeof TEXT_COLOR)[number];