diff --git a/.changeset/chatty-papayas-juggle.md b/.changeset/chatty-papayas-juggle.md new file mode 100644 index 000000000..94bdc0bd0 --- /dev/null +++ b/.changeset/chatty-papayas-juggle.md @@ -0,0 +1,5 @@ +--- +'@cloudfour/patterns': minor +--- + +Add Input Group object diff --git a/src/mixins/_button.scss b/src/mixins/_button.scss index 2b48b38ac..9cceb089b 100644 --- a/src/mixins/_button.scss +++ b/src/mixins/_button.scss @@ -68,6 +68,7 @@ transform transition.$quick ease.$out; user-select: none; vertical-align: middle; + white-space: nowrap; /** * Transform, opacity and filter changes are performant and will work across diff --git a/src/objects/input-group/demo/input-group-demo.twig b/src/objects/input-group/demo/input-group-demo.twig new file mode 100644 index 000000000..f9c703299 --- /dev/null +++ b/src/objects/input-group/demo/input-group-demo.twig @@ -0,0 +1,17 @@ +{% embed '@cloudfour/objects/rhythm/rhythm.twig' %} + {% block content %} + {% embed '@cloudfour/objects/input-group/input-group.twig' %} + {% block content %} + {% include '@cloudfour/components/button/button.twig' only %} + {% include '@cloudfour/components/input/input.twig' only %} + {% endblock %} + {% endembed %} + + {% embed '@cloudfour/objects/input-group/input-group.twig' %} + {% block content %} + {% include '@cloudfour/components/input/input.twig' only %} + {% include '@cloudfour/components/button/button.twig' only %} + {% endblock %} + {% endembed %} + {% endblock %} +{% endembed %} diff --git a/src/objects/input-group/input-group.scss b/src/objects/input-group/input-group.scss new file mode 100644 index 000000000..8bc654277 --- /dev/null +++ b/src/objects/input-group/input-group.scss @@ -0,0 +1,19 @@ +@use "../../compiled/tokens/scss/size"; + +.o-input-group { + display: flex; + + & > :not(:first-child) { + border-bottom-left-radius: 0; + border-top-left-radius: 0; + } + + & > :not(:last-child) { + border-bottom-right-radius: 0; + border-top-right-radius: 0; + } + + & > * + * { + margin-left: -(size.$edge-medium); + } +} diff --git a/src/objects/input-group/input-group.stories.mdx b/src/objects/input-group/input-group.stories.mdx new file mode 100644 index 000000000..0898006a8 --- /dev/null +++ b/src/objects/input-group/input-group.stories.mdx @@ -0,0 +1,35 @@ +import { Story, Canvas, Meta } from '@storybook/addon-docs/blocks'; +// The '!!raw-loader!' syntax is a non-standard, Webpack-specific, syntax. +// See: https://github.com/webpack-contrib/raw-loader#examples +// For now, it seems likely Storybook is pretty tied to Webpack, therefore, we are +// okay with the following Webpack-specific raw loader syntax. It's better to leave +// the ESLint rule enabled globally, and only thoughtfully disable as needed (e.g. +// within a Storybook docs page and not within an actual component). +// This can be revisited in the future if Storybook no longer relies on Webpack. +// eslint-disable-next-line @cloudfour/import/no-webpack-loader-syntax +import inputGroupDemoSource from '!!raw-loader!./demo/input-group-demo.twig'; +import inputGroupDemo from './demo/input-group-demo.twig'; +import './input-group.scss'; + + + +# Input Group + +The Input Group object accepts controls like [Button](/story/components-button--button-element) and [Input](/story/components-input--text-elements), displaying them adjacent to one another with no whitespace between. This is useful for presenting minimal forms, such as search bars. + +Buttons and inputs can be put in whatever order you choose. + + diff --git a/src/objects/input-group/input-group.twig b/src/objects/input-group/input-group.twig new file mode 100644 index 000000000..802652fa8 --- /dev/null +++ b/src/objects/input-group/input-group.twig @@ -0,0 +1,3 @@ +