@react-spectrum/label 3.16.21 → 3.17.0

package/src/HelpText.tsx

@@ -1,71 +0,0 @@
-/*
- * Copyright 2021 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-import AlertMedium from '@spectrum-icons/ui/AlertMedium';
-import {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';
-import {DOMRef, SpectrumFieldValidation, SpectrumHelpTextProps, StyleProps, Validation} from '@react-types/shared';
-import React, {HTMLAttributes, ReactNode} from 'react';
-import styles from '@adobe/spectrum-css-temp/components/helptext/vars.css';
-
-interface HelpTextProps extends Omit<SpectrumHelpTextProps, 'errorMessage'>, Omit<Validation<any>, 'validationState'>, SpectrumFieldValidation<any>, StyleProps {
-  /** Props for the help text description element. */
-  descriptionProps?: HTMLAttributes<HTMLElement>,
-  /** Props for the help text error message element. */
-  errorMessageProps?: HTMLAttributes<HTMLElement>,
-  /** An error message for the field. */
-  errorMessage?: ReactNode
-}
-
-/**
- * Help text provides either an informative description or an error message that gives more context about what a user needs to input. It's commonly used in forms.
- */
-export const HelpText = React.forwardRef(function HelpText(props: HelpTextProps, ref: DOMRef<HTMLDivElement>) {
-  let {
-    description,
-    errorMessage,
-    validationState,
-    isInvalid,
-    isDisabled,
-    showErrorIcon,
-    descriptionProps,
-    errorMessageProps
-  } = props;
-  let domRef = useDOMRef(ref);
-  let isErrorMessage = errorMessage && (isInvalid || validationState === 'invalid');
-  let {styleProps} = useStyleProps(props);
-
-  return (
-    <div
-      {...styleProps}
-      className={classNames(
-        styles,
-        'spectrum-HelpText',
-        `spectrum-HelpText--${isErrorMessage ? 'negative' : 'neutral'}`,
-        {'is-disabled': isDisabled},
-        styleProps.className
-      )}
-      ref={domRef}>
-      {isErrorMessage ? (
-        <>
-          {showErrorIcon && <AlertMedium UNSAFE_className={classNames(styles, 'spectrum-HelpText-validationIcon')} />}
-          <div {...errorMessageProps} className={classNames(styles, 'spectrum-HelpText-text')}>
-            {errorMessage}
-          </div>
-        </>
-      ) : (
-        <div {...descriptionProps} className={classNames(styles, 'spectrum-HelpText-text')}>
-          {description}
-        </div>
-      )}
-    </div>
-  );
-});

package/src/Label.tsx

@@ -1,79 +0,0 @@
-/*
- * Copyright 2020 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-import Asterisk from '@spectrum-icons/ui/Asterisk';
-import {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';
-import {DOMRef} from '@react-types/shared';
-import {filterDOMProps} from '@react-aria/utils';
-// @ts-ignore
-import intlMessages from '../intl/*.json';
-import React from 'react';
-import {SpectrumLabelProps} from '@react-types/label';
-import styles from '@adobe/spectrum-css-temp/components/fieldlabel/vars.css';
-import {useLocalizedStringFormatter} from '@react-aria/i18n';
-import {useProviderProps} from '@react-spectrum/provider';
-
-export const Label = React.forwardRef(function Label(props: SpectrumLabelProps, ref: DOMRef<HTMLLabelElement>) {
-  props = useProviderProps(props);
-  let {
-    children,
-    labelPosition = 'top',
-    labelAlign = labelPosition === 'side' ? 'start' : null,
-    isRequired,
-    necessityIndicator = isRequired != null ? 'icon' : null,
-    includeNecessityIndicatorInAccessibilityName = false,
-    htmlFor,
-    for: labelFor,
-    elementType: ElementType = 'label',
-    onClick,
-    ...otherProps
-  } = props;
-
-  let domRef = useDOMRef(ref);
-  let {styleProps} = useStyleProps(otherProps);
-
-  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/label');
-  let necessityLabel = isRequired ? stringFormatter.format('(required)') : stringFormatter.format('(optional)');
-  let icon = (
-    <Asterisk
-      UNSAFE_className={classNames(styles, 'spectrum-FieldLabel-requiredIcon')}
-      aria-label={includeNecessityIndicatorInAccessibilityName ? stringFormatter.format('(required)') : undefined} />
-  );
-
-  let labelClassNames = classNames(
-    styles,
-    'spectrum-FieldLabel',
-    {
-      'spectrum-FieldLabel--positionSide': labelPosition === 'side',
-      'spectrum-FieldLabel--alignEnd': labelAlign === 'end'
-    },
-    styleProps.className
-  );
-
-  return (
-    <ElementType
-      {...filterDOMProps(otherProps)}
-      {...styleProps}
-      onClick={onClick}
-      ref={domRef}
-      className={labelClassNames}
-      htmlFor={ElementType === 'label' ? labelFor || htmlFor : undefined}>
-      {children}
-      {(necessityIndicator === 'label' || (necessityIndicator === 'icon' && isRequired)) && ' \u200b'}
-      {/* necessityLabel is hidden to screen readers if the field is required because
-        * aria-required is set on the field in that case. That will already be announced,
-        * so no need to duplicate it here. If optional, we do want it to be announced here. */}
-      {necessityIndicator === 'label' && <span aria-hidden={!includeNecessityIndicatorInAccessibilityName ? isRequired : undefined}>{necessityLabel}</span>}
-      {necessityIndicator === 'icon' && isRequired && icon}
-    </ElementType>
-  );
-});