@indico-data/design-system 2.17.2 → 2.19.0

package/src/components/forms/textarea/Textarea.stories.tsx

@@ -1,6 +1,7 @@
+import { useEffect, useState } from 'react';
 import { Meta, StoryObj } from '@storybook/react';
-import { Textarea, TextareaProps } from './Textarea';
-import { SetStateAction, useEffect, useState } from 'react';
+import labelArgTypes from '@/storybook/labelArgTypes';
+import { Textarea } from './Textarea';
 
 const meta: Meta = {
   title: 'Forms/Textarea',
@@ -17,28 +18,6 @@ const meta: Meta = {
       },
       action: 'onChange',
     },
-    label: {
-      control: 'text',
-      description: 'The label for the textarea field',
-      table: {
-        category: 'Props',
-        type: {
-          summary: 'string',
-        },
-      },
-      defaultValue: { summary: '' },
-    },
-    name: {
-      control: 'text',
-      description: 'The name for the textarea field',
-      table: {
-        category: 'Props',
-        type: {
-          summary: 'string',
-        },
-      },
-      defaultValue: { summary: '' },
-    },
     placeholder: {
       control: 'text',
       description: 'The placeholder for the textarea field',
@@ -61,17 +40,6 @@ const meta: Meta = {
       },
       defaultValue: { summary: '' },
     },
-    isRequired: {
-      control: 'boolean',
-      description: 'Toggles the required astherisc on the label',
-      table: {
-        category: 'Props',
-        type: {
-          summary: 'boolean',
-        },
-      },
-      defaultValue: { summary: 'false' },
-    },
     isDisabled: {
       control: 'boolean',
       description: 'Toggles the disabled state of the textarea field',
@@ -105,17 +73,6 @@ const meta: Meta = {
       },
       defaultValue: { summary: '' },
     },
-    hasHiddenLabel: {
-      control: 'boolean',
-      description: 'Hides the label visually (retains it for screen readers)',
-      table: {
-        category: 'Props',
-        type: {
-          summary: 'boolean',
-        },
-      },
-      defaultValue: { summary: 'false' },
-    },
     autofocus: {
       control: 'boolean',
       description: '	Specifies that a text area should automatically get focus when the page loads',
@@ -198,6 +155,7 @@ const meta: Meta = {
         disable: true,
       },
     },
+    ...labelArgTypes,
   },
 };
 

package/src/components/forms/textarea/Textarea.tsx

@@ -1,19 +1,17 @@
 import React from 'react';
-import { Label } from '../subcomponents/Label';
+import classNames from 'classnames';
+
+import { withLabel, LabelProps, WithLabelProps } from '../subcomponents/Label';
 import { DisplayFormError } from '../subcomponents/DisplayFormError';
 
-export interface TextareaProps {
+export interface TextareaProps extends WithLabelProps {
   ref?: React.LegacyRef<HTMLTextAreaElement>;
-  label: string;
-  name: string;
-  placeholder: string;
+  placeholder?: string;
   value?: string | undefined;
   onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
-  isRequired?: boolean;
   isDisabled?: boolean;
   errorMessage?: string | undefined;
   helpText?: string;
-  hasHiddenLabel?: boolean;
   rows?: number;
   cols?: number;
   readonly?: boolean;
@@ -23,7 +21,7 @@ export interface TextareaProps {
   autofocus?: boolean;
   defaultValue?: string;
 }
-export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
   (
     {
       label,
@@ -49,9 +47,10 @@ export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
   ) => {
     const hasErrors = errorMessage && errorMessage.length > 0;
 
+    const textareaClasses = classNames('textarea', { error: hasErrors });
+
     return (
-      <div className="form-control">
-        <Label label={label} name={name} isRequired={isRequired} hasHiddenLabel={hasHiddenLabel} />
+      <>
         <div className="textarea-wrapper">
           <textarea
             ref={ref}
@@ -67,11 +66,10 @@ export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
             disabled={isDisabled}
             placeholder={placeholder}
             onChange={onChange}
-            className={`textarea ${hasErrors ? 'error' : ''}`}
+            className={textareaClasses}
             aria-invalid={hasErrors ? true : undefined}
             aria-describedby={hasErrors || helpText ? `${name}-helper` : undefined}
             aria-required={isRequired}
-            aria-label={label}
             {...rest}
           />
         </div>
@@ -81,7 +79,11 @@ export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
             {helpText}
           </div>
         )}
-      </div>
+      </>
     );
   },
 );
+
+const LabeledTextarea = withLabel(Textarea);
+
+export { LabeledTextarea as Textarea };

package/src/components/forms/textarea/styles/Textarea.scss

@@ -4,12 +4,11 @@
 :root [data-theme='dark'] {
   // Typography
   --pf-textarea-background-color: var(--pf-white-color);
-  --pf-textarea-border-color: var(--pf-gray-color);
   --pf-textarea-text-color: var(--pf-gray-color);
   --pf-textarea-placeholder-text-color: var(--pf-gray-color-300);
   --pf-textarea-help-text-color: var(--pf-gray-color-400);
   --pf-textarea-disabled-background-color: var(--pf-gray-color-100);
-  --pf-textarea-border-color: var(--pf-gray-color);
+  --pf-textarea-border-color: var(--pf-form-input-border-color);
   --pf-textarea-disabled-color: var(--pf-gray-color-400);
 
   // textarea Radius
@@ -19,7 +18,7 @@
 // Dark Theme Specific Variables
 :root [data-theme='dark'] {
   --pf-textarea-background-color: var(--pf-primary-color);
-  --pf-textarea-border-color: var(--pf-gray-color-100);
+  --pf-textarea-border-color: var(--pf-form-input-border-color);
   --pf-textarea-text-color: var(--pf-gray-color-100);
   --pf-textarea-placeholder-text-color: var(--pf-gray-color);
   --pf-textarea-help-text-color: var(--pf-gray-color-200);
@@ -85,17 +84,6 @@
     color: var(--pf-textarea-help-text-color);
     font-size: var(--pf-font-size-subtitle2);
   }
-  .is-visually-hidden {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border: 0;
-  }
   .form-label {
     margin-bottom: var(--pf-margin-2);
   }

package/src/components/forms/toggle/styles/Toggle.scss

@@ -4,7 +4,7 @@
 :root [data-theme='dark'] {
   --pf-toggle-background-color: var(--pf-gray-color-200);
   --pf-toggle-circle-color: var(--pf-primary-color);
-  --pf-toggle-border-color: var(--pf-gray-color);
+  --pf-toggle-border-color: var(--pf-form-input-border-color);
   --pf-toggle-disabled-background-color: var(--pf-gray-color-400);
   --pf-toggle-disabled-circle-color: var(--pf-gray-color-300);
   --pf-toggle-checked-background-color: var(--pf-primary-color-200);
@@ -14,7 +14,7 @@
 :root [data-theme='dark'] {
   --pf-toggle-background-color: var(--pf-primary-color-100);
   --pf-toggle-circle-color: var(--pf-white-color);
-  --pf-toggle-border-color: var(--pf-white-color);
+  --pf-toggle-border-color: var(--pf-form-input-border-color);
   --pf-toggle-disabled-background-color: var(--pf-gray-color-600);
   --pf-toggle-disabled-circle-color: var(--pf-gray-color-900);
   --pf-toggle-checked-background-color: var(--pf-secondary-color-400);

package/src/legacy/components/inputs/NoInputDatePicker/NoInputDatePicker.scss

@@ -0,0 +1,441 @@
+.rdp {
+  --rdp-cell-size: 40px;
+  --rdp-accent-color: #6833d0;
+  --rdp-background-color: #ffffff;
+  --rdp-accent-color-dark: #3003e1;
+  --rdp-background-color-dark: #180270;
+  --rdp-outline: 2px solid var(--rdp-accent-color); /* Outline border for focused elements */
+  --rdp-outline-selected: 3px solid var(--rdp-accent-color); /* Outline border for focused _and_ selected elements */
+
+  margin: 1em;
+}
+
+/* Hide elements for devices that are not screen readers */
+.rdp-vhidden {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  border: 0;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+  position: absolute !important;
+  top: 0;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  overflow: hidden !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  border: 0 !important;
+}
+
+/* Buttons */
+.rdp-button_reset {
+  appearance: none;
+  position: relative;
+  margin: 0;
+  padding: 0;
+  cursor: default;
+  color: inherit;
+  background: none;
+  font: inherit;
+
+  -moz-appearance: none;
+  -webkit-appearance: none;
+}
+
+.rdp-button_reset:focus-visible {
+  /* Make sure to reset outline only when :focus-visible is supported */
+  outline: none;
+}
+
+.rdp-button {
+  border: 2px solid transparent;
+}
+
+.rdp-button[disabled]:not(.rdp-day_selected) {
+  opacity: 0.25;
+}
+
+.rdp-button:not([disabled]) {
+  cursor: pointer;
+}
+
+.rdp-button:focus-visible:not([disabled]) {
+  color: inherit;
+  background-color: var(--rdp-background-color);
+  border: var(--rdp-outline);
+}
+
+.rdp-months {
+  display: flex;
+}
+
+.rdp-month {
+  margin: 0 1em;
+}
+
+.rdp-month:first-child {
+  margin-left: 0;
+}
+
+.rdp-month:last-child {
+  margin-right: 0;
+}
+
+.rdp-table {
+  margin: 0;
+  max-width: calc(var(--rdp-cell-size) * 7);
+  border-collapse: collapse;
+}
+
+.rdp-with_weeknumber .rdp-table {
+  max-width: calc(var(--rdp-cell-size) * 8);
+  border-collapse: collapse;
+}
+
+.rdp-caption {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0;
+  text-align: left;
+}
+
+.rdp-multiple_months .rdp-caption {
+  position: relative;
+  display: block;
+  text-align: center;
+}
+
+.rdp-caption_dropdowns {
+  position: relative;
+  display: inline-flex;
+}
+
+.rdp-caption_label {
+  position: relative;
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  margin: 0;
+  padding: 0 0.25em;
+  white-space: nowrap;
+  color: currentColor;
+  border: 0;
+  border: 2px solid transparent;
+  font-family: inherit;
+  font-size: 140%;
+  font-weight: bold;
+}
+
+.rdp-nav {
+  white-space: nowrap;
+}
+
+.rdp-multiple_months .rdp-caption_start .rdp-nav {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  transform: translateY(-50%);
+}
+
+.rdp-multiple_months .rdp-caption_end .rdp-nav {
+  position: absolute;
+  top: 50%;
+  right: 0;
+  transform: translateY(-50%);
+}
+
+.rdp-nav_button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--rdp-cell-size);
+  height: var(--rdp-cell-size);
+  padding: 0.25em;
+  border-radius: 100%;
+}
+
+/* ---------- */
+/* Dropdowns  */
+/* ---------- */
+
+.rdp-dropdown_year,
+.rdp-dropdown_month {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+
+.rdp-dropdown {
+  appearance: none;
+  position: absolute;
+  z-index: 2;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  cursor: inherit;
+  opacity: 0;
+  border: none;
+  background-color: transparent;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+.rdp-dropdown[disabled] {
+  opacity: unset;
+  color: unset;
+}
+
+.rdp-dropdown:focus-visible:not([disabled]) + .rdp-caption_label {
+  background-color: var(--rdp-background-color);
+  border: var(--rdp-outline);
+  border-radius: 6px;
+}
+
+.rdp-dropdown_icon {
+  margin: 0 0 0 5px;
+}
+
+.rdp-head {
+  border: 0;
+}
+
+.rdp-head_row,
+.rdp-row {
+  height: 100%;
+}
+
+.rdp-head_cell {
+  vertical-align: middle;
+  font-size: 0.75em;
+  font-weight: 700;
+  text-align: center;
+  height: 100%;
+  height: var(--rdp-cell-size);
+  padding: 0;
+}
+
+.rdp-tbody {
+  border: 0;
+}
+
+.rdp-tfoot {
+  margin: 0.5em;
+}
+
+.rdp-cell {
+  width: var(--rdp-cell-size);
+  height: 100%;
+  height: var(--rdp-cell-size);
+  padding: 0;
+  text-align: center;
+}
+
+.rdp-weeknumber {
+  font-size: 0.75em;
+}
+
+.rdp-weeknumber,
+.rdp-day {
+  display: flex;
+  overflow: hidden;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: var(--rdp-cell-size);
+  max-width: var(--rdp-cell-size);
+  height: var(--rdp-cell-size);
+  margin: 0;
+  border: 2px solid transparent;
+  border-radius: 100%;
+}
+
+.rdp-day_today:not(.rdp-day_outside) {
+  font-weight: bold;
+}
+
+.rdp-day_selected,
+.rdp-day_selected:focus-visible,
+.rdp-day_selected:hover {
+  color: white;
+  opacity: 1;
+  background-color: var(--rdp-accent-color);
+}
+
+.rdp-day_outside {
+  opacity: 0.5;
+}
+
+.rdp-day_selected:focus-visible {
+  /* Since the background is the same use again the outline */
+  outline: var(--rdp-outline);
+  outline-offset: 2px;
+  z-index: 1;
+}
+
+.rdp:not([dir='rtl']) .rdp-day_range_start:not(.rdp-day_range_end) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.rdp:not([dir='rtl']) .rdp-day_range_end:not(.rdp-day_range_start) {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.rdp[dir='rtl'] .rdp-day_range_start:not(.rdp-day_range_end) {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.rdp[dir='rtl'] .rdp-day_range_end:not(.rdp-day_range_start) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.rdp-day_range_end.rdp-day_range_start {
+  border-radius: 100%;
+}
+
+.rdp-day_range_middle {
+  border-radius: 0;
+}
+
+/*# sourceMappingURL=style.css.map */
+
+/******************************
+  *   Indico Custom Styling For Insights
+  *******************************/
+.rdp-button:hover:not([disabled]):not(.rdp-day_selected) {
+  background-color: #976cec;
+}
+.rdp-button,
+.rdp-day {
+  box-shadow: none;
+  color: #000000;
+  &:hover {
+    background-color: #6833d0;
+    color: white;
+  }
+}
+
+.rdp-head_cell,
+.rdp-cell {
+  border: none;
+}
+
+.DayPickerInput-Overlay {
+  border-radius: 4px;
+  z-index: 999;
+  .rdp {
+    background: white;
+    z-index: 999;
+    border: solid 1px #000000;
+    border-radius: 4px;
+    box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.4);
+  }
+}
+
+.rdp-caption_label {
+  font-weight: 400;
+  font-size: 14px;
+  color: #000000;
+}
+
+.rdp-day_today {
+  background-color: #dbd5e6;
+  color: #ffffff;
+  font-weight: 400;
+}
+
+.rdp-button_reset {
+  &.rdp-button {
+    &.rdp-day {
+      &.rdp-day_selected {
+        background-color: #6833d0;
+        color: white;
+
+        &:focus {
+          color: white;
+        }
+        &:active {
+          color: white;
+        }
+      }
+    }
+  }
+}
+
+.rdp-head_cell {
+  color: #6833d0;
+  font-weight: 400;
+}
+
+.date__picker__trigger {
+  color: #000000;
+  cursor: pointer;
+}
+
+.custom__caption {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 15px 5px 15px 5px;
+
+  .custom__caption__text {
+    font-size: 14px;
+    color: #000000;
+    margin: 0;
+  }
+
+  .custom__caption__action__button {
+    background: none;
+    border: none;
+    cursor: pointer;
+    box-shadow: none;
+    padding: 0 5px 0 5px;
+
+    border-radius: 60px;
+    color: #6833d0;
+    height: 20px;
+    width: 20px;
+
+    &:hover {
+      background-color: #6833d0;
+      color: #ffffff;
+      border-radius: 20px;
+
+      .rdp-nav_icon {
+        color: #ffffff;
+      }
+    }
+
+    .rdp-nav_icon {
+      color: #6833d0;
+    }
+  }
+}
+
+.visually-hidden,
+.visually-hidden-focusable:not(:focus):not(:focus-within) {
+  border: 0 !important;
+  clip: rect(0, 0, 0, 0) !important;
+  height: 1px !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  padding: 0 !important;
+  white-space: nowrap !important;
+  width: 1px !important;
+}
+
+.visually-hidden:not(caption),
+.visually-hidden-focusable:not(:focus):not(:focus-within):not(caption) {
+  position: absolute !important;
+}

package/src/legacy/components/inputs/NoInputDatePicker/NoInputDatePicker.tsx

@@ -14,8 +14,6 @@ import { usePopper } from 'react-popper';
 import { IconName, IconSizes, PermafrostComponent } from '@/types';
 import { Icon } from '@/components';
 
-import { StyledNoInputDatePicker } from './NoInputDatePicker.styles';
-
 type Props = PermafrostComponent & {
   ariaLabel?: string;
   disableBeforeDate?: Date;
@@ -163,8 +161,9 @@ export const NoInputDatePicker = (props: Props) => {
       onChange(range);
     }
   };
+
   return (
-    <StyledNoInputDatePicker
+    <div
       className={className}
       aria-label={ariaLabel || 'date select'}
       aria-describedby={`picker-label--${id}`}
@@ -241,6 +240,6 @@ export const NoInputDatePicker = (props: Props) => {
           </div>
         </FocusTrap>
       )}
-    </StyledNoInputDatePicker>
+    </div>
   );
 };

package/src/legacy/components/modals/ModalBase/ModalBase.tsx

@@ -10,7 +10,6 @@ export type ModalBaseProps = PermafrostComponent & {
   children: React.ReactNode | React.ReactNode[];
   clickToDismiss?(): void;
   describedBy?: string;
-  /** a selector representing the desired parent; defaults to `#root` */
   node?: string;
   open: boolean;
   preventEscDismiss?: boolean;
@@ -51,6 +50,10 @@ export function ModalBase(props: ModalBaseProps) {
     ariaProps['describedby'] = describedBy;
   }
 
+  // Try to render modal within the theme-root, otherwise attach to the root
+  const parentSelector = () =>
+    document.getElementById('theme-root') || document.getElementById('root');
+
   return (
     <StyledModalBase
       ariaHideApp={false}
@@ -62,6 +65,7 @@ export function ModalBase(props: ModalBaseProps) {
       isOpen={open}
       node={node}
       onRequestClose={clickToDismiss}
+      parentSelector={parentSelector}
       shouldCloseOnEsc={!preventEscDismiss}
       shouldReturnFocusAfterClose={!preventReturnFocus}
       maxWidth={maxWidth}