serikjensen

Updating ActionDialog to match the design:

1. You'll need to update the `Fieldset` component so that it doesn't render the `helperText` when it is not supplied. That means changing the Fieldset component [here](https://github.com/nursefly/nursefly-web/blob/216c134649587c042499d03bd98da1bb29118920/components/inputs/Fieldset/Fieldset.js#L45-L50) as follows:

```js
{helperText && (
  <FieldHelperText
    id={helperTextId}
    withError={withError}
  >

serikjensen

Existing Rating should get you pretty close.

The one thing you'll need to do is update the info prop on Rating to be PropTypes.node instead of PropTypes.oneOfType([PropTypes.number, PropTypes.string]),. That should be a backwards compatible change with no side effects.

import Rating from 'components/base/Rating';
import Text from 'components/base/Text';
import Link from 'components/base/Link';

...

serikjensen

Front End Rebrand Cleanup

.nursefly files

• Remove any files with .nursefly in the extension

SCSS Theme Files

Look for any files with Theme.scss or ThemeVariables.scss

• Move the variables in these files back into the file of the corresponding name
• Delete the theme files
• Remove the now unused theme import in the scss file that was importing the theme

serikjensen

Frontend Brand Update Guidelines

Epic: https://app.clubhouse.io/nursefly/epic/15618/vivian-rebrand-visual-frontend?vc_group_by=day

Style Updates

These are cases where we want different style values for NurseFly and Vivian, but we do not want to duplicate an entire stylesheet or js file.

SCSS

1. Create two new theme files at the same level as the existing .scss file

• One file will be named _Theme.scss (camel casing)

serikjensen

// TaskListItem.js

const TaskListItem = ({
  renderMainRow, isComplete, order, name, renderEnd, children,
}) => {
  const main = (
    <>
      {!isComplete && <div className={styles.order}>{order}</div>}
      {isComplete && <CompleteIcon className={`${styles.order} ${styles.complete}`} />}
      <span className={styles.name}>{name}</span>

serikjensen

// Since this is on a blue background, we'll need to update ExpandableContainer to expose the underlying RowLayout
// `variantColor` property:

/* components/ExpandableContainer/ExpandableContainer.js */
const ExpandableContainer = React.forwardRef(({
  ...
  variantColor,
  ...restProps
}, ref) => {
  ...

serikjensen

// You may have more luck than i did, but to get this to work on click/tap
// I had to completely take over the tooltip state management and event
// handling. I guess that's somewhat consistent with the complexity of
// the exmaple here:
// https://material-ui.com/components/tooltips/#triggers

  const [visibleTooltip, setVisibleTooltip] = useState(null);

  ...

serikjensen

//.js
// Could be in the next js employer card component
// Also, could expose `className` prop on `components/cards/EmployerCard` root element to avoid needing the wrapping div
```
const ResponsiveEmployerCard = ({ layout ...props }) => (
  <>
    <div className={styles.tall}>
      <EmployerCard layout="tall" {...props} />
    </div>
    <div className={styles.wide}>

serikjensen

Exploration for InstUI CSS

TL;DR: Emotion can be used to replace a lot of complexity in how styles are applied in Instructure UI and help get us on something that is well maintained with broad adoption. Our stylesheets will be messier but our DOM output will be much cleaner (and smaller). The difficulty of the migration will depend a lot on the complexity of each component. To stay performant, we will need to consolidate CSS rules. We will also need to provide some workarounds for things PostCSS was doing before. Because of this, we will want to have visual regression testing to catch any CSS issues introduced early. The work can be done in parallel for each package.

Goal

Simplify the process for styling components and runtime theme switching with a library that has large mainstream adoption to help with downstream maintainability of Instructure UI.

Requirements

• Should support runtime theme switching
• Should easily integrate with existing instui configuration/be able to coexist with it so we c

serikjensen

Goal

Create a starter app for instui with all the boilerplate taken care of out of the box (similar to create-react-app) that will be compatible with codesandbox.