feat(Slug): Add `slug` prop to `TextInput`, `TextArea`, `NumberInput`, and `DatePicker`, add revert functionality to `Slug` #15115

tw15egan · 2023-11-06T18:40:17Z

Adds in a slug prop for TextInput, TextArea, DatePickerInput, and NumberInput

General usage would look like the following:

const slug = (
  <Slug>
    <SlugContent>
      <div>
        <p className="secondary">AI Explained</p>
        <h1>84%</h1>
        <p className="secondary bold">Confidence score</p>
        <p className="secondary">
          Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.
        </p>
        <hr />
        <p className="secondary">Model type</p>
        <p className="bold">Foundation model</p>
      </div>
      <SlugActions>
        <IconButton kind="ghost" label="View">
          <View />
        </IconButton>
        <IconButton kind="ghost" label="Open Folder">
          <FolderOpen />
        </IconButton>
        <IconButton kind="ghost" label="Folders">
          <Folders />
        </IconButton>
        <Button>View literature</Button>
      </SlugActions>
    </SlugContent>
  </Slug>
);

<TextInput {...TextInputProps} slug={slug} />

Changelog

New

slug prop added so a user can pass down a Slug component to be rendered inside a form element
<Slug> has been updated to include two new props, revertActive and onRevertClick
- revertActive props is to toggle the state of the Slug
- onRevertClick is a callback function so that a user can restore the state of the edited input to whatever the stored AI content is

Example usage:

const textInputRef = useRef();
const aiValue = 'Generated AI content';
const [isEdited, setIsEdited] = useState(false);

const handleRevertClick = (evt) => {
 setIsEdited(false);
 textInputRef.current.focus();
 textInputRef.current.value = aiValue;
};

const handleChange = (evt) => {
 setIsTextInputEdited(true);
}

const slug = (
 <Slug revertActive={isTextInputEdited} onRevertClick={handleRevertClick}>
   {/* Slug content here */}
</Slug>
);


return (<TextInput ref={textInputRef slug={slug} defaultValue={aiValue} onChange={handleChange} />);

Changed

Refactored TextArea .tsx file to match the general file structure found in other component files.
Reduced default gradient to 33%
Added a useEffect to NumberInput.tsx to trigger an update when the revert button is clicked to set the value back to the defaultValue that was passed in.

Removed

Removed outdated Slug.js file (replaced with index.js)
Removed outdated redo.svg and undo.svg at 16, 20, 24 that were being displayed rather than the correct asset, the 32 one.

Testing / Reviewing

Go to Form --> AI Form to see an example of the Slug rendered inside the form inputs. This seems like a clean approach that will not expand the surface area too much across the repo and can be achieved with minimal new styles per component. Form --> Revert Test is a sandbox to test the onRevertClick functionality.

netlify · 2023-11-06T18:45:11Z

✅ Deploy Preview for v11-carbon-react ready!

Name	Link
🔨 Latest commit	`75ee611`
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-react/deploys/655514025f496c00088db835
😎 Deploy Preview	https://deploy-preview-15115--v11-carbon-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify · 2023-11-06T18:46:38Z

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	`1ff3829`
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/654d2d6f41abed000840d746
😎 Deploy Preview	https://deploy-preview-15115--carbon-elements.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

packages/react/src/components/Slug/Slug.js

packages/styles/scss/components/fluid-number-input/_fluid-number-input.scss

packages/styles/scss/components/number-input/_number-input.scss

tw15egan · 2023-11-09T16:58:30Z

packages/react/src/components/TextArea/TextArea.tsx

@@ -164,12 +170,26 @@ const TextArea = React.forwardRef((props: TextAreaProps, forwardRef) => {
  );
  const { current: textAreaInstanceId } = useRef(getInstanceId());

+  const textareaRef = useRef<HTMLTextAreaElement>(null);


Refactored this file a bit since it was quite scattered. I've basically moved all refs to the top, followed by effects, then class variable declarations, then normalized JSX elements. The only net new code is L222, L320, and L345

tw15egan · 2023-11-09T21:36:29Z

@tay1orjones this PR is in a good spot to take a look and see if we should keep going down this route

aagonzales · 2023-11-10T20:37:07Z

@tw15egan I've noticed the formatting inside the callout is off.

aagonzales · 2023-11-10T20:56:09Z

Will AI-populated form input ever be in an invalid state? Warning state? If so, where does the Slug go? Is it hidden, or is it moved over?

I still don't know if an AI populated input could be invalid but if it does then I think this way would be the correct error states with both the slug and error icon.

aagonzales · 2023-11-10T21:22:02Z

How will the "Revert to AI Input" functionality work?

I am thinking of the "revert" as another state essentially. I drew up a little user flow of how I think it would work.

aagonzales

The revert icon looks like there's an extra 1px of padding on top of it. Can that be removed? The icon seems a little off centered.

Also can we move the revert button 8px to the right so the AI icon and revert icon line up. This is how they align at the moment.

Everything else looks good though!

tw15egan · 2023-11-14T21:21:25Z

@aagonzales fixed 👍🏻

aagonzales

Everything looks good to me now 👍 🎉

alisonjoseph

This looks great in Chrome, seeing z-index and positioning issues in firefox.

tw15egan · 2023-11-15T16:11:34Z

Of course, Firefox doesn't support the :has selector 🙃

layout.css.has-selector.enabled set to true in about:config fixes it. Let me see if I can change the logic a bit

No positioning was touched for Slug, it's just using autoAlign by default, but you can pass in whatever specific align you need to slug to override. Seems like that may be an issue with the Popover in general, I can see the same issues in Chrome at specific screensizes. I can also turn off autoAlign by default if that is a smoother solution, but will require positioning to be set.

tw15egan · 2023-11-15T16:26:17Z

@alisonjoseph doing a bit of digging, there isn't an alternative selector to :has that would make this easy to fix. However, it seems like support will be added in Firefox v121. Looking at their release notes, it seems like they release a new minor each month. Stable (v119.0) was released 10/24, v118.0 was released on 9/26, and v117.0 on 8/29. Given this seemingly monthly cadence, this means the :has support should land in Firefox stable at the end of December.

Do you think this is fine, given:

the experimental nature of these components
it can work behind a feature flag
Firefox usage is ~2% globally

v121.0a1 release notes

alisonjoseph

Yes, I think that's fine @tw15egan

…, and `DatePicker`, add revert functionality to `Slug` (carbon-design-system#15115) * feat(TextInput): support slug prop * fix(TextInput): add types for slug prop * refactor(Slug): remove old file, move demo to form story * docs(Storybook): update form story * feat(NumberInput): add slug to NumberInput * refactor(NumberInput): remove pseudo elements and use box-shadow * style(NumberInput): fix issue with z-index, add invalid styles * feat(DatePicker): add slug prop to DatePickerInput * feat(TextArea): add slug prop to TextArea * test(snapshot): update snapshots * fix(TextArea): remove console warning * style(Fluid): adjust styles for fluid inputs * docs(Storybook): fix ids * fix(Slug): adjust positioning, add storybook controls * fix(Storybook): add story styles to form example * fix(Slug): adjust positioning when invalid, warning state * style(Slug): adjust padding when slug is present * docs(Storybook): add examples with revert functionality * fix(NumberInput): fix type error * refactor(storybook): adjust stories * feat(Slug): add revertLabel prop * fix(Undo): replace undo, redo with coreect asset * fix(Slug): adjust revert positioning, remove margin * fix(NumberInput): don't set defaultValue if not provided, remove console * chore(files): add ai-gradient to react package * test(snapshot): update snapshots

tw15egan added 3 commits November 7, 2023 08:47

feat(TextInput): support slug prop

1f503f4

fix(TextInput): add types for slug prop

cfe410d

Merge branch 'main' into slug-implementation-exploration

1544cf9

tw15egan force-pushed the slug-implementation-exploration branch from d6ad6f6 to f5515ca Compare November 7, 2023 18:57

refactor(Slug): remove old file, move demo to form story

b3959d3

tw15egan force-pushed the slug-implementation-exploration branch from f5515ca to b3959d3 Compare November 7, 2023 19:03

tw15egan added 4 commits November 8, 2023 10:15

docs(Storybook): update form story

d2f3de5

Merge branch 'main' into slug-implementation-exploration

4a726e3

feat(NumberInput): add slug to NumberInput

616915f

refactor(NumberInput): remove pseudo elements and use box-shadow

6b7efa4

tw15egan mentioned this pull request Nov 8, 2023

refactor(NumberInput): remove pseudo elements and use box-shadow #15128

Merged

style(NumberInput): fix issue with z-index, add invalid styles

2120c22

tw15egan commented Nov 9, 2023

View reviewed changes

packages/react/src/components/Slug/Slug.js Outdated Show resolved Hide resolved

tw15egan commented Nov 9, 2023

View reviewed changes

packages/styles/scss/components/fluid-number-input/_fluid-number-input.scss Outdated Show resolved Hide resolved

tw15egan commented Nov 9, 2023

View reviewed changes

packages/styles/scss/components/number-input/_number-input.scss Outdated Show resolved Hide resolved

tw15egan added 2 commits November 9, 2023 11:30

feat(DatePicker): add slug prop to DatePickerInput

bb8fec4

feat(TextArea): add slug prop to TextArea

995f6cc

tw15egan commented Nov 9, 2023

View reviewed changes

tw15egan added 5 commits November 9, 2023 11:59

test(snapshot): update snapshots

ae1aec4

fix(TextArea): remove console warning

4c826be

style(Fluid): adjust styles for fluid inputs

1ff3829

Merge branch 'main' into slug-implementation-exploration

577f9c9

docs(Storybook): fix ids

8376fb5

fix(Slug): adjust positioning, add storybook controls

367c646

tw15egan added the status: visual review 🔍 label Nov 14, 2023

tw15egan added 2 commits November 14, 2023 11:10

Merge branch 'main' into slug-implementation-exploration

4ac3bf2

fix(Undo): replace undo, redo with coreect asset

27e0387

tw15egan requested review from laurenmrice and a team as code owners November 14, 2023 17:15

aagonzales requested changes Nov 14, 2023

View reviewed changes

tw15egan mentioned this pull request Nov 14, 2023

feat(ListBox): add slug prop to Dropdown, MultiSelect, ComboBox, and Select #15206

Merged

tw15egan added 2 commits November 14, 2023 15:45

Merge branch 'main' into slug-implementation-exploration

0032999

fix(Slug): adjust revert positioning, remove margin

e5d04c9

tw15egan added 2 commits November 15, 2023 09:39

Merge branch 'main' into slug-implementation-exploration

b8bb396

fix(NumberInput): don't set defaultValue if not provided, remove console

aeab814

aagonzales approved these changes Nov 15, 2023

View reviewed changes

alisonjoseph requested changes Nov 15, 2023

View reviewed changes

tw15egan requested a review from alisonjoseph November 15, 2023 17:05

alisonjoseph approved these changes Nov 15, 2023

View reviewed changes

tw15egan added 2 commits November 15, 2023 13:29

chore(files): add ai-gradient to react package

b82a701

test(snapshot): update snapshots

75ee611

tay1orjones approved these changes Nov 15, 2023

View reviewed changes

tay1orjones added this pull request to the merge queue Nov 15, 2023

tay1orjones added status: ready to merge 🎉 and removed status: ready for review 👀 status: visual review 🔍 labels Nov 15, 2023

Merged via the queue into carbon-design-system:main with commit 26831fe Nov 15, 2023
19 checks passed

tay1orjones mentioned this pull request Nov 16, 2023

Release v11.42.2 #15220

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(Slug): Add `slug` prop to `TextInput`, `TextArea`, `NumberInput`, and `DatePicker`, add revert functionality to `Slug` #15115

feat(Slug): Add `slug` prop to `TextInput`, `TextArea`, `NumberInput`, and `DatePicker`, add revert functionality to `Slug` #15115

tw15egan commented Nov 6, 2023 •

edited

Loading

netlify bot commented Nov 6, 2023 •

edited

Loading

netlify bot commented Nov 6, 2023 •

edited

Loading

tw15egan Nov 9, 2023

tw15egan commented Nov 9, 2023

aagonzales commented Nov 10, 2023

aagonzales commented Nov 10, 2023 •

edited

Loading

aagonzales commented Nov 10, 2023 •

edited

Loading

aagonzales left a comment

tw15egan commented Nov 14, 2023

aagonzales left a comment

alisonjoseph left a comment •

edited

Loading

tw15egan commented Nov 15, 2023 •

edited

Loading

tw15egan commented Nov 15, 2023

alisonjoseph left a comment

feat(Slug): Add slug prop to TextInput, TextArea, NumberInput, and DatePicker, add revert functionality to Slug #15115

feat(Slug): Add slug prop to TextInput, TextArea, NumberInput, and DatePicker, add revert functionality to Slug #15115

Conversation

tw15egan commented Nov 6, 2023 • edited Loading

Changelog

Testing / Reviewing

netlify bot commented Nov 6, 2023 • edited Loading

✅ Deploy Preview for v11-carbon-react ready!

netlify bot commented Nov 6, 2023 • edited Loading

✅ Deploy Preview for carbon-elements ready!

tw15egan Nov 9, 2023

Choose a reason for hiding this comment

tw15egan commented Nov 9, 2023

aagonzales commented Nov 10, 2023

aagonzales commented Nov 10, 2023 • edited Loading

aagonzales commented Nov 10, 2023 • edited Loading

aagonzales left a comment

Choose a reason for hiding this comment

tw15egan commented Nov 14, 2023

aagonzales left a comment

Choose a reason for hiding this comment

alisonjoseph left a comment • edited Loading

Choose a reason for hiding this comment

tw15egan commented Nov 15, 2023 • edited Loading

tw15egan commented Nov 15, 2023

alisonjoseph left a comment

Choose a reason for hiding this comment

feat(Slug): Add `slug` prop to `TextInput`, `TextArea`, `NumberInput`, and `DatePicker`, add revert functionality to `Slug` #15115

feat(Slug): Add `slug` prop to `TextInput`, `TextArea`, `NumberInput`, and `DatePicker`, add revert functionality to `Slug` #15115

tw15egan commented Nov 6, 2023 •

edited

Loading

netlify bot commented Nov 6, 2023 •

edited

Loading

netlify bot commented Nov 6, 2023 •

edited

Loading

aagonzales commented Nov 10, 2023 •

edited

Loading

aagonzales commented Nov 10, 2023 •

edited

Loading

alisonjoseph left a comment •

edited

Loading

tw15egan commented Nov 15, 2023 •

edited

Loading