span]:flex [&>span]:items-center' ) }
{ ...props }
>
diff --git a/src/components/pie-chart/pie-chart.stories.tsx b/src/components/pie-chart/pie-chart.stories.tsx
index 01ef34fd..a69481ff 100644
--- a/src/components/pie-chart/pie-chart.stories.tsx
+++ b/src/components/pie-chart/pie-chart.stories.tsx
@@ -69,6 +69,7 @@ export const PieChartCard1: Story1 = ( args ) => (
@@ -108,6 +109,7 @@ export const PieChartCard2: Story1 = ( args ) => (
diff --git a/src/components/pie-chart/pie-chart.tsx b/src/components/pie-chart/pie-chart.tsx
index a1722d47..32cba859 100644
--- a/src/components/pie-chart/pie-chart.tsx
+++ b/src/components/pie-chart/pie-chart.tsx
@@ -66,7 +66,7 @@ const PieChart = ( {
tooltipLabelKey,
label = false,
labelName = '',
- labelNameColor = '#9CA3AF',
+ labelNameColor = '#6B7280',
labelValue,
showLegend = false,
chartWidth = 300,
diff --git a/src/components/progress-bar/progress-bar.tsx b/src/components/progress-bar/progress-bar.tsx
index 892d42a2..6870cbd0 100644
--- a/src/components/progress-bar/progress-bar.tsx
+++ b/src/components/progress-bar/progress-bar.tsx
@@ -37,6 +37,7 @@ export const ProgressBar = ( {
aria-valuenow={ percent }
aria-valuemin={ 0 }
aria-valuemax={ 100 }
+ aria-label="Progress Bar"
>
{
- if ( ! multiSelection ) {
- // Toggle the switch on or off
- onChange( value );
- } else {
- // In multi-selection, toggle the current state
- onChange( value, ! checkedValue );
- }
- } }
- checked={ checkedValue }
- { ...props }
- />
+ <>
+ {
+ if ( ! multiSelection ) {
+ // Toggle the switch on or off
+ onChange( value );
+ } else {
+ // In multi-selection, toggle the current state
+ onChange( value, ! checkedValue );
+ }
+ } }
+ checked={ checkedValue }
+ { ...props }
+ aria-label={ label?.heading ?? 'Switch' }
+ />
+
) : (
;
export type SelectOnChange = (
@@ -82,7 +82,7 @@ export interface SelectPortalProps {
id?: string;
}
-export interface SelectButtonProps {
+export interface SelectButtonProps extends AriaAttributes {
/** Expects the `Select.Button` children of the Select Component. */
children?: MultiTypeChildren;
/** Option Icon to show at the right of the option trigger/button. By default it will show chevron down icon. */
diff --git a/src/components/select/select.tsx b/src/components/select/select.tsx
index 0801e6f8..ca8637d3 100644
--- a/src/components/select/select.tsx
+++ b/src/components/select/select.tsx
@@ -59,6 +59,7 @@ export function SelectButton( {
displayBy = 'name', // Used to display the value. Default is 'name'.
label, // Label for the select component.
className,
+ ...props
}: SelectButtonProps ) {
const {
sizeValue,
@@ -213,7 +214,7 @@ export function SelectButton( {
id={ selectId }
ref={ refs.setReference }
className={ cn(
- 'flex items-center justify-between w-full box-border transition-colors duration-150 bg-white',
+ 'flex items-center justify-between w-full box-border transition-[outline,background-color,color,box-shadow] duration-200 bg-white',
'outline outline-1 outline-field-border border-none cursor-pointer',
! isOpen &&
'focus:ring-2 focus:ring-offset-4 focus:outline-focus-border focus:ring-focus [&:hover:not(:focus):not(:disabled)]:outline-border-strong',
@@ -223,9 +224,9 @@ export function SelectButton( {
disabledClassNames.selectButton,
className
) }
- aria-labelledby="select-label"
tabIndex={ 0 }
disabled={ disabled }
+ { ...props }
{ ...getReferenceProps() }
>
{ /* Input and selected item container */ }
@@ -270,7 +271,7 @@ export function SelectButton( {
export function SelectOptions( {
children,
- searchBy = 'id', // Used to identify searched value using the key. Default is 'id'.
+ searchBy = 'name', // Used to identify searched value using the key. Default is 'id'.
searchPlaceholder = 'Search...', // Placeholder text for search box.
className, // Additional class name for the dropdown.
}: SelectOptionsProps ) {
@@ -381,7 +382,11 @@ export function SelectOptions( {
}
}
- listContentRef.current.push( child.props.value );
+ listContentRef.current.push(
+ typeof child.props.value === 'object'
+ ? child.props.value[ searchBy || by ]
+ : child.props.value
+ );
}
} );
}, [ searchKeyword ] );
diff --git a/src/components/switch/switch.stories.tsx b/src/components/switch/switch.stories.tsx
index 639f86dd..5b350c56 100644
--- a/src/components/switch/switch.stories.tsx
+++ b/src/components/switch/switch.stories.tsx
@@ -33,7 +33,16 @@ const Template: StoryFn = ( { defaultValue, size, ...args } ) => {
};
return (
-
+ <>
+
+
);
};
diff --git a/src/components/textarea/textarea.stories.tsx b/src/components/textarea/textarea.stories.tsx
index b55bc16d..72a344f2 100644
--- a/src/components/textarea/textarea.stories.tsx
+++ b/src/components/textarea/textarea.stories.tsx
@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
import TextArea, { TextAreaProps } from './textarea';
const meta: Meta = {
@@ -17,44 +17,46 @@ const meta: Meta = {
export default meta;
-type Story = StoryObj;
+const Template: StoryFn = ( args ) => {
+ return (
+ <>
+
+
+ );
+};
// Basic TextArea Example
-export const Basic: Story = {
- args: {
- size: 'sm',
- disabled: false,
- error: false,
- defaultValue: 'Basic TextArea',
- },
+export const Basic = Template.bind( {} );
+Basic.args = {
+ size: 'sm',
+ disabled: false,
+ error: false,
+ defaultValue: 'Basic TextArea',
};
// Disabled TextArea Example
-export const Disabled: Story = {
- args: {
- size: 'md',
- disabled: true,
- error: false,
- defaultValue: 'Disabled TextArea',
- },
+export const Disabled = Template.bind( {} );
+Disabled.args = {
+ size: 'md',
+ disabled: true,
+ error: false,
+ defaultValue: 'Disabled TextArea',
};
// TextArea with Error State Example
-export const ErrorState: Story = {
- args: {
- size: 'md',
- disabled: false,
- error: true,
- defaultValue: 'TextArea with Error',
- },
+export const ErrorState = Template.bind( {} );
+ErrorState.args = {
+ size: 'md',
+ disabled: false,
+ error: true,
+ defaultValue: 'TextArea with Error',
};
// Large TextArea Example
-export const Large: Story = {
- args: {
- size: 'lg',
- disabled: false,
- error: false,
- defaultValue: 'Large TextArea',
- },
+export const Large = Template.bind( {} );
+Large.args = {
+ size: 'lg',
+ disabled: false,
+ error: false,
+ defaultValue: 'Large TextArea',
};
diff --git a/src/components/tooltip/tooltip.tsx b/src/components/tooltip/tooltip.tsx
index ace16c5e..e9eda68e 100644
--- a/src/components/tooltip/tooltip.tsx
+++ b/src/components/tooltip/tooltip.tsx
@@ -98,8 +98,8 @@ export const Tooltip = ( {
setOpen,
children,
className,
- tooltipPortalRoot = null, // Root element where the dropdown will be rendered.
- tooltipPortalId = '', // Id of the dropdown portal where the dropdown will be rendered.
+ tooltipPortalRoot, // Root element where the dropdown will be rendered.
+ tooltipPortalId, // Id of the dropdown portal where the dropdown will be rendered.
boundary = 'clippingAncestors',
strategy = 'fixed', // 'fixed' | 'absolute';
offset: offsetValue = 8, // Offset option or number value. Default is 8.
diff --git a/src/templates/admin-settings-Spectra/admin-settings-Spectra.stories.jsx b/src/templates/admin-settings-Spectra/admin-settings-Spectra.stories.jsx
index 0f3716b7..19f4f61a 100644
--- a/src/templates/admin-settings-Spectra/admin-settings-Spectra.stories.jsx
+++ b/src/templates/admin-settings-Spectra/admin-settings-Spectra.stories.jsx
@@ -73,6 +73,7 @@ const Template = ( args ) => {