Add story + sandbox example for floating labels

ericgio · Jun 3, 2022 · 3b93a26 · 3b93a26
1 parent 40668ba
commit 3b93a26
Show file tree

Hide file tree

Showing 3 changed files with 94 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -78,6 +78,7 @@ You can also try out the following sandbox examples:
 - [Custom loader & clear button](https://codesandbox.io/s/rbt-custom-aux-components-gn3kn)
 - [Multi-select with reorderable drag & drop tokens](https://codesandbox.io/s/rbt-drag-drop-token-example-u43sf)
 - [Keep the menu open during multi-selection](https://codesandbox.io/s/rbt-keep-menu-open-during-multi-select-nr2y4)
+- [Single-select with floating label (BS5)](https://codesandbox.io/s/rbt-floating-labels-8c2j6b)
 
 If you have an example use case that would be useful to others, please create a sandbox and submit a pull request to add it to the list!
 

diff --git a/src/components/Typeahead/Typeahead.stories.tsx b/src/components/Typeahead/Typeahead.stories.tsx
@@ -5,6 +5,7 @@ import React, { useState } from 'react';
 import { Story, Meta } from '@storybook/react';
 
 import Typeahead, { TypeaheadComponentProps } from './Typeahead';
+import Hint from '../Hint';
 import Menu from '../Menu';
 import MenuItem from '../MenuItem';
 
@@ -94,6 +95,27 @@ AllowNew.args = {
   allowNew: true,
 };
 
+export const CustomInput = Template.bind({});
+CustomInput.args = {
+  ...defaultProps,
+  renderInput: ({ inputRef, referenceElementRef, ...inputProps }) => (
+    <Hint>
+      <div className="form-floating">
+        <input
+          {...inputProps}
+          className="form-control"
+          id="floatingInput"
+          ref={(node) => {
+            inputRef(node);
+            referenceElementRef(node);
+          }}
+        />
+        <label htmlFor="floatingInput">{inputProps.placeholder}</label>
+      </div>
+    </Hint>
+  ),
+};
+
 export const CustomMenu = Template.bind({});
 CustomMenu.args = {
   ...defaultProps,

diff --git a/src/components/Typeahead/__snapshots__/Typeahead.test.tsx.snap b/src/components/Typeahead/__snapshots__/Typeahead.test.tsx.snap
@@ -207,6 +207,77 @@ exports[`<Typeahead> Controlled story renders snapshot 1`] = `
 </div>
 `;
 
+exports[`<Typeahead> CustomInput story renders snapshot 1`] = `
+<div
+  className="rbt"
+  style={
+    Object {
+      "outline": "none",
+      "position": "relative",
+    }
+  }
+  tabIndex={-1}
+>
+  <div
+    style={
+      Object {
+        "display": "flex",
+        "flex": 1,
+        "height": "100%",
+        "position": "relative",
+      }
+    }
+  >
+    <div
+      className="form-floating"
+    >
+      <input
+        aria-autocomplete="both"
+        aria-expanded={false}
+        aria-haspopup="listbox"
+        autoComplete="off"
+        className="form-control"
+        id="floatingInput"
+        onBlur={[Function]}
+        onChange={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        placeholder="Choose a state..."
+        role="combobox"
+        type="text"
+        value=""
+      />
+      <label
+        htmlFor="floatingInput"
+      >
+        Choose a state...
+      </label>
+    </div>
+    <input
+      aria-hidden={true}
+      className="rbt-input-hint"
+      readOnly={true}
+      style={
+        Object {
+          "backgroundColor": "transparent",
+          "borderColor": "transparent",
+          "boxShadow": "none",
+          "color": "rgba(0, 0, 0, 0.54)",
+          "left": 0,
+          "pointerEvents": "none",
+          "position": "absolute",
+          "top": 0,
+          "width": "100%",
+        }
+      }
+      tabIndex={-1}
+      value=""
+    />
+  </div>
+</div>
+`;
+
 exports[`<Typeahead> CustomMenu story renders snapshot 1`] = `
 <div
   className="rbt"