5.0: Adds CaretIcon component (#40320)

app/javascript/mastodon/components/button/redesign.module.scss

@@ -184,6 +184,11 @@ a.base {
   height: var(--fs-xl);
 }
 
+.iconCustom {
+  width: inherit;
+  height: inherit;
+}
+
 .iconOnly {
   aspect-ratio: 1;
   padding: 0;

app/javascript/mastodon/components/button/redesign.tsx

@@ -6,6 +6,8 @@ import classNames from 'classnames';
 import { Link } from 'react-router-dom';
 import type { LinkProps } from 'react-router-dom';
 
+import { CaretDownIcon } from '@phosphor-icons/react';
+
 import { CircularProgress } from '../circular_progress';
 import type { IconProp } from '../icon';
 import { Icon } from '../icon';
@@ -130,6 +132,17 @@ export const IconButton: React.FC<BaseButtonProps & { icon: IconProp }> = ({
   </BaseButton>
 );
 
+export const CaretIcon = (
+  props: React.SVGProps<SVGSVGElement> & { title?: string },
+) => (
+  <CaretDownIcon
+    {...props}
+    className={classNames(props.className, classes.iconCustom)}
+    weight='fill'
+    size={12}
+  />
+);
+
 const LoadingIcon: React.FC = () => (
   <CircularProgress
     size={10}

app/javascript/mastodon/features/compose/redesign/language.tsx

@@ -3,9 +3,10 @@ import { useCallback } from 'react';
 
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import { CaretDownIcon, MagnifyingGlassIcon } from '@phosphor-icons/react';
+import { MagnifyingGlassIcon } from '@phosphor-icons/react';
 
 import { changeComposeLanguage } from '@/mastodon/actions/compose';
+import { CaretIcon } from '@/mastodon/components/button/redesign';
 import { TextInput } from '@/mastodon/components/form_fields/redesign';
 import {
   Menu,
@@ -32,7 +33,7 @@ export const LanguageButton: React.FC = () => {
 
   return (
     <Menu>
-      <MenuTrigger size='sm' trailingIcon={CaretDownIcon}>
+      <MenuTrigger size='sm' trailingIcon={CaretIcon}>
         {langCode.toLocaleUpperCase()}
       </MenuTrigger>
 

app/javascript/mastodon/features/compose/redesign/visibility.tsx

@@ -4,7 +4,6 @@ import { useCallback } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import {
-  CaretDownIcon,
   ChatCircleIcon,
   MagnifyingGlassIcon,
   NewspaperIcon,
@@ -18,6 +17,7 @@ import {
 import { openModal } from '@/mastodon/actions/modal';
 import type { ApiQuotePolicy } from '@/mastodon/api_types/quotes';
 import type { StatusVisibility } from '@/mastodon/api_types/statuses';
+import { CaretIcon } from '@/mastodon/components/button/redesign';
 import { DisplayNameSimple } from '@/mastodon/components/display_name/simple';
 import {
   Menu,
@@ -47,7 +47,7 @@ export const ComposeVisibility: React.FC<{ className?: string }> = ({
         description='Before button that indicates who a post is for (Public, Followers, mentioned people)'
       />
       <Menu>
-        <MenuTrigger size='sm' trailingIcon={CaretDownIcon}>
+        <MenuTrigger size='sm' trailingIcon={CaretIcon}>
           <ComposeVisibilityButtonText privacy={privacy} />
         </MenuTrigger>