From d658a3a750dd0195e58c2cdfbca4ce5b9efb495b Mon Sep 17 00:00:00 2001 From: Arianna Chau Date: Fri, 16 Jul 2021 10:06:39 -0700 Subject: [PATCH 01/20] Add new Input Group component and no wrap to button component --- .../input-group/demo/input-group-demo.twig | 13 ++++++++++ src/components/input-group/input-group.scss | 25 +++++++++++++++++++ .../input-group/input-group.stories.mdx | 14 +++++++++++ src/components/input-group/input-group.twig | 3 +++ src/mixins/_button.scss | 1 + 5 files changed, 56 insertions(+) create mode 100644 src/components/input-group/demo/input-group-demo.twig create mode 100644 src/components/input-group/input-group.scss create mode 100644 src/components/input-group/input-group.stories.mdx create mode 100644 src/components/input-group/input-group.twig diff --git a/src/components/input-group/demo/input-group-demo.twig b/src/components/input-group/demo/input-group-demo.twig new file mode 100644 index 000000000..12ac2f3ad --- /dev/null +++ b/src/components/input-group/demo/input-group-demo.twig @@ -0,0 +1,13 @@ +{% embed '@cloudfour/components/input-group/input-group.twig' %} + {% block content %} + {% include '@cloudfour/components/button/button.twig' %} + {% include '@cloudfour/components/input/input.twig' %} + {% endblock %} +{% endembed %} + +{% embed '@cloudfour/components/input-group/input-group.twig' %} + {% block content %} + {% include '@cloudfour/components/input/input.twig' %} + {% include '@cloudfour/components/button/button.twig' %} + {% endblock %} +{% endembed %} diff --git a/src/components/input-group/input-group.scss b/src/components/input-group/input-group.scss new file mode 100644 index 000000000..7c5e310b4 --- /dev/null +++ b/src/components/input-group/input-group.scss @@ -0,0 +1,25 @@ +@use "../../compiled/tokens/scss/size"; + +.c-input-group { + display: flex; + margin: 4em; + + & :first-child { + border-bottom-right-radius: var(--size-border-radius-input-group); + border-top-right-radius: var(--size-border-radius-input-group); + } + + & :last-child { + border-bottom-left-radius: var(--size-border-radius-input-group); + border-top-left-radius: var(--size-border-radius-input-group); + } + +/** + * In the instance where someone would want to include 3 or more elements, + * this ensures that the middle elements will not have a border radius. + */ + + & :not(:first-child):not(:last-child) { + border-radius: 0; + } +} diff --git a/src/components/input-group/input-group.stories.mdx b/src/components/input-group/input-group.stories.mdx new file mode 100644 index 000000000..85818de9c --- /dev/null +++ b/src/components/input-group/input-group.stories.mdx @@ -0,0 +1,14 @@ +import { Story, Canvas, Meta } from '@storybook/addon-docs/blocks'; +import template from './input-group.twig'; +import inputGroupDemo from './demo/input-group-demo.twig'; +import './input-group.scss'; + + + +## Input Group + +The Input Group component combines the Button and Input components. Buttons and inputs can be put in whatever order you choose, and the components will adjust accordingly. + + + {(args) => inputGroupDemo(args)} + diff --git a/src/components/input-group/input-group.twig b/src/components/input-group/input-group.twig new file mode 100644 index 000000000..217b6de9e --- /dev/null +++ b/src/components/input-group/input-group.twig @@ -0,0 +1,3 @@ +
+ {% block content %} {% endblock %} +
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 From 19ee4d61ed0cfa631e7ed3399297987c43c51de4 Mon Sep 17 00:00:00 2001 From: Arianna Chau Date: Fri, 16 Jul 2021 12:02:46 -0700 Subject: [PATCH 02/20] Remove margin from stylesheet and add demo styles --- .../input-group/demo/input-group-demo.twig | 26 ++++++++++--------- src/components/input-group/demo/styles.scss | 6 +++++ src/components/input-group/input-group.scss | 1 - .../input-group/input-group.stories.mdx | 1 + 4 files changed, 21 insertions(+), 13 deletions(-) create mode 100644 src/components/input-group/demo/styles.scss diff --git a/src/components/input-group/demo/input-group-demo.twig b/src/components/input-group/demo/input-group-demo.twig index 12ac2f3ad..61fcabf88 100644 --- a/src/components/input-group/demo/input-group-demo.twig +++ b/src/components/input-group/demo/input-group-demo.twig @@ -1,13 +1,15 @@ -{% embed '@cloudfour/components/input-group/input-group.twig' %} - {% block content %} - {% include '@cloudfour/components/button/button.twig' %} - {% include '@cloudfour/components/input/input.twig' %} - {% endblock %} -{% endembed %} +
+ {% embed '@cloudfour/components/input-group/input-group.twig' %} + {% block content %} + {% include '@cloudfour/components/button/button.twig' %} + {% include '@cloudfour/components/input/input.twig' %} + {% endblock %} + {% endembed %} -{% embed '@cloudfour/components/input-group/input-group.twig' %} - {% block content %} - {% include '@cloudfour/components/input/input.twig' %} - {% include '@cloudfour/components/button/button.twig' %} - {% endblock %} -{% endembed %} + {% embed '@cloudfour/components/input-group/input-group.twig' %} + {% block content %} + {% include '@cloudfour/components/input/input.twig' %} + {% include '@cloudfour/components/button/button.twig' %} + {% endblock %} + {% endembed %} +
diff --git a/src/components/input-group/demo/styles.scss b/src/components/input-group/demo/styles.scss new file mode 100644 index 000000000..c4b12d6f6 --- /dev/null +++ b/src/components/input-group/demo/styles.scss @@ -0,0 +1,6 @@ +@use "../../../mixins/ms"; + +.demo-input-group { + display: grid; + grid-gap: ms.step(1); +} diff --git a/src/components/input-group/input-group.scss b/src/components/input-group/input-group.scss index 7c5e310b4..e63e4337e 100644 --- a/src/components/input-group/input-group.scss +++ b/src/components/input-group/input-group.scss @@ -2,7 +2,6 @@ .c-input-group { display: flex; - margin: 4em; & :first-child { border-bottom-right-radius: var(--size-border-radius-input-group); diff --git a/src/components/input-group/input-group.stories.mdx b/src/components/input-group/input-group.stories.mdx index 85818de9c..021f5db2e 100644 --- a/src/components/input-group/input-group.stories.mdx +++ b/src/components/input-group/input-group.stories.mdx @@ -2,6 +2,7 @@ import { Story, Canvas, Meta } from '@storybook/addon-docs/blocks'; import template from './input-group.twig'; import inputGroupDemo from './demo/input-group-demo.twig'; import './input-group.scss'; +import './demo/styles.scss'; From 6e6ffad6ddb2a202c93eaf9390cbaa430fd815b9 Mon Sep 17 00:00:00 2001 From: Arianna Chau Date: Fri, 16 Jul 2021 12:12:09 -0700 Subject: [PATCH 03/20] Change documentation --- src/components/input-group/input-group.stories.mdx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/input-group/input-group.stories.mdx b/src/components/input-group/input-group.stories.mdx index 021f5db2e..2333625a1 100644 --- a/src/components/input-group/input-group.stories.mdx +++ b/src/components/input-group/input-group.stories.mdx @@ -8,7 +8,9 @@ import './demo/styles.scss'; ## Input Group -The Input Group component combines the Button and Input components. Buttons and inputs can be put in whatever order you choose, and the components will adjust accordingly. +The Input Group combines the [Button](/story/components-button--button-element) and [Input](/story/components-input--text-elements) components. This would work well in creating design elements like search bars. + +Buttons and inputs can be put in whatever order you choose, and the components will adjust accordingly. {(args) => inputGroupDemo(args)} From 20b37be14db8ad5488c4597cf58f003eebab674a Mon Sep 17 00:00:00 2001 From: Arianna Chau Date: Fri, 16 Jul 2021 12:15:20 -0700 Subject: [PATCH 04/20] Add changeset --- .changeset/chatty-papayas-juggle.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/chatty-papayas-juggle.md diff --git a/.changeset/chatty-papayas-juggle.md b/.changeset/chatty-papayas-juggle.md new file mode 100644 index 000000000..7b41b41d6 --- /dev/null +++ b/.changeset/chatty-papayas-juggle.md @@ -0,0 +1,5 @@ +--- +'@cloudfour/patterns': minor +--- + +Add Input Group component From dd18154d89cd522aad094e0fa080de1ce30c76fe Mon Sep 17 00:00:00 2001 From: Arianna Chau Date: Fri, 16 Jul 2021 12:17:33 -0700 Subject: [PATCH 05/20] Lint test --- src/components/input-group/input-group.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/input-group/input-group.scss b/src/components/input-group/input-group.scss index e63e4337e..6a9c510bb 100644 --- a/src/components/input-group/input-group.scss +++ b/src/components/input-group/input-group.scss @@ -13,7 +13,7 @@ border-top-left-radius: var(--size-border-radius-input-group); } -/** + /** * In the instance where someone would want to include 3 or more elements, * this ensures that the middle elements will not have a border radius. */ From 15d87babaa14bdb13250e31b0d8c1426ae758997 Mon Sep 17 00:00:00 2001 From: Arianna Chau Date: Fri, 16 Jul 2021 12:19:37 -0700 Subject: [PATCH 06/20] Remove unused line. --- src/components/input-group/input-group.stories.mdx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/input-group/input-group.stories.mdx b/src/components/input-group/input-group.stories.mdx index 2333625a1..13d13ec18 100644 --- a/src/components/input-group/input-group.stories.mdx +++ b/src/components/input-group/input-group.stories.mdx @@ -1,5 +1,4 @@ import { Story, Canvas, Meta } from '@storybook/addon-docs/blocks'; -import template from './input-group.twig'; import inputGroupDemo from './demo/input-group-demo.twig'; import './input-group.scss'; import './demo/styles.scss'; From 5d7189bf1e52b9588a61a977fcae6a5acfd60841 Mon Sep 17 00:00:00 2001 From: Arianna Chau Date: Fri, 16 Jul 2021 14:21:52 -0700 Subject: [PATCH 07/20] Prevent double borders --- src/components/input-group/input-group.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/input-group/input-group.scss b/src/components/input-group/input-group.scss index 6a9c510bb..9a6c20b41 100644 --- a/src/components/input-group/input-group.scss +++ b/src/components/input-group/input-group.scss @@ -13,6 +13,10 @@ border-top-left-radius: var(--size-border-radius-input-group); } + & :nth-child(n + 2) { + margin-left: -2px; + } + /** * In the instance where someone would want to include 3 or more elements, * this ensures that the middle elements will not have a border radius. From a6019475745c091a440d774a24a573c38c0129d0 Mon Sep 17 00:00:00 2001 From: Arianna Chau Date: Fri, 16 Jul 2021 14:53:01 -0700 Subject: [PATCH 08/20] Update src/components/input-group/demo/input-group-demo.twig Co-authored-by: Tyler Sticka --- .../input-group/demo/input-group-demo.twig | 30 ++++++++++--------- 1 file changed, 16 insertions(+), 14 deletions(-) diff --git a/src/components/input-group/demo/input-group-demo.twig b/src/components/input-group/demo/input-group-demo.twig index 61fcabf88..8cee159c3 100644 --- a/src/components/input-group/demo/input-group-demo.twig +++ b/src/components/input-group/demo/input-group-demo.twig @@ -1,15 +1,17 @@ -
- {% embed '@cloudfour/components/input-group/input-group.twig' %} - {% block content %} - {% include '@cloudfour/components/button/button.twig' %} - {% include '@cloudfour/components/input/input.twig' %} - {% endblock %} - {% endembed %} +{% embed '@cloudfour/objects/rhythm/rhythm.twig' %} + {% block content %} + {% embed '@cloudfour/components/input-group/input-group.twig' %} + {% block content %} + {% include '@cloudfour/components/button/button.twig' %} + {% include '@cloudfour/components/input/input.twig' %} + {% endblock %} + {% endembed %} - {% embed '@cloudfour/components/input-group/input-group.twig' %} - {% block content %} - {% include '@cloudfour/components/input/input.twig' %} - {% include '@cloudfour/components/button/button.twig' %} - {% endblock %} - {% endembed %} -
+ {% embed '@cloudfour/components/input-group/input-group.twig' %} + {% block content %} + {% include '@cloudfour/components/input/input.twig' %} + {% include '@cloudfour/components/button/button.twig' %} + {% endblock %} + {% endembed %} + {% endblock %} +{% endembed %} From 5f5c23d8e97783ba343d205a73465923331f03b6 Mon Sep 17 00:00:00 2001 From: Arianna Chau Date: Fri, 16 Jul 2021 14:53:18 -0700 Subject: [PATCH 09/20] Update src/components/input-group/input-group.scss Co-authored-by: Tyler Sticka --- src/components/input-group/input-group.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/input-group/input-group.scss b/src/components/input-group/input-group.scss index 9a6c20b41..b27833913 100644 --- a/src/components/input-group/input-group.scss +++ b/src/components/input-group/input-group.scss @@ -3,12 +3,12 @@ .c-input-group { display: flex; - & :first-child { + & > :first-child { border-bottom-right-radius: var(--size-border-radius-input-group); border-top-right-radius: var(--size-border-radius-input-group); } - & :last-child { + & > :last-child { border-bottom-left-radius: var(--size-border-radius-input-group); border-top-left-radius: var(--size-border-radius-input-group); } From e1388c48691da1a403c2db10fe5f4cf8612f2790 Mon Sep 17 00:00:00 2001 From: Arianna Chau Date: Fri, 16 Jul 2021 14:56:06 -0700 Subject: [PATCH 10/20] Update src/components/input-group/input-group.scss Co-authored-by: Tyler Sticka --- src/components/input-group/input-group.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/input-group/input-group.scss b/src/components/input-group/input-group.scss index b27833913..b4150760b 100644 --- a/src/components/input-group/input-group.scss +++ b/src/components/input-group/input-group.scss @@ -13,7 +13,7 @@ border-top-left-radius: var(--size-border-radius-input-group); } - & :nth-child(n + 2) { + & > * + * { margin-left: -2px; } From 4d4e1bf12d6ac3cee83366a99b1b521603f223b7 Mon Sep 17 00:00:00 2001 From: Arianna Chau Date: Fri, 16 Jul 2021 14:56:31 -0700 Subject: [PATCH 11/20] Delete unused scss file --- src/components/input-group/demo/styles.scss | 6 ------ src/components/input-group/input-group.stories.mdx | 1 - 2 files changed, 7 deletions(-) delete mode 100644 src/components/input-group/demo/styles.scss diff --git a/src/components/input-group/demo/styles.scss b/src/components/input-group/demo/styles.scss deleted file mode 100644 index c4b12d6f6..000000000 --- a/src/components/input-group/demo/styles.scss +++ /dev/null @@ -1,6 +0,0 @@ -@use "../../../mixins/ms"; - -.demo-input-group { - display: grid; - grid-gap: ms.step(1); -} diff --git a/src/components/input-group/input-group.stories.mdx b/src/components/input-group/input-group.stories.mdx index 13d13ec18..017048ea0 100644 --- a/src/components/input-group/input-group.stories.mdx +++ b/src/components/input-group/input-group.stories.mdx @@ -1,7 +1,6 @@ import { Story, Canvas, Meta } from '@storybook/addon-docs/blocks'; import inputGroupDemo from './demo/input-group-demo.twig'; import './input-group.scss'; -import './demo/styles.scss'; From 3e2175089ec175e36c43588862f04ebb88cdc9a8 Mon Sep 17 00:00:00 2001 From: Arianna Chau Date: Fri, 16 Jul 2021 15:06:19 -0700 Subject: [PATCH 12/20] Refine scss file --- src/components/input-group/input-group.scss | 23 +++++++-------------- 1 file changed, 7 insertions(+), 16 deletions(-) diff --git a/src/components/input-group/input-group.scss b/src/components/input-group/input-group.scss index b4150760b..5f5a4a302 100644 --- a/src/components/input-group/input-group.scss +++ b/src/components/input-group/input-group.scss @@ -3,26 +3,17 @@ .c-input-group { display: flex; - & > :first-child { - border-bottom-right-radius: var(--size-border-radius-input-group); - border-top-right-radius: var(--size-border-radius-input-group); + & > :not(:first-child) { + border-bottom-left-radius: 0; + border-top-left-radius: 0; } - & > :last-child { - border-bottom-left-radius: var(--size-border-radius-input-group); - border-top-left-radius: var(--size-border-radius-input-group); + & > :not(:last-child) { + border-bottom-right-radius: 0; + border-top-right-radius: 0; } & > * + * { - margin-left: -2px; - } - - /** - * In the instance where someone would want to include 3 or more elements, - * this ensures that the middle elements will not have a border radius. - */ - - & :not(:first-child):not(:last-child) { - border-radius: 0; + margin-left: -(size.$edge-medium); } } From 0f0ce3b3e0fbffce8ef94a7e5a0130dd4f1d746b Mon Sep 17 00:00:00 2001 From: Arianna Chau Date: Fri, 16 Jul 2021 15:17:38 -0700 Subject: [PATCH 13/20] Improve code sample --- .../input-group/input-group.stories.mdx | 22 ++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) diff --git a/src/components/input-group/input-group.stories.mdx b/src/components/input-group/input-group.stories.mdx index 017048ea0..482e5fd10 100644 --- a/src/components/input-group/input-group.stories.mdx +++ b/src/components/input-group/input-group.stories.mdx @@ -1,4 +1,13 @@ 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'; @@ -11,5 +20,16 @@ The Input Group combines the [Button](/story/components-button--button-element) Buttons and inputs can be put in whatever order you choose, and the components will adjust accordingly. - {(args) => inputGroupDemo(args)} + + {inputGroupDemo} + From b6b7b9553aa5b0faa847b78720b19829c997a7a3 Mon Sep 17 00:00:00 2001 From: Arianna Chau Date: Mon, 19 Jul 2021 09:42:35 -0700 Subject: [PATCH 14/20] Change input group component to an object --- .../input-group/demo/input-group-demo.twig | 4 ++-- src/{components => objects}/input-group/input-group.scss | 2 +- .../input-group/input-group.stories.mdx | 4 ++-- src/{components => objects}/input-group/input-group.twig | 2 +- 4 files changed, 6 insertions(+), 6 deletions(-) rename src/{components => objects}/input-group/demo/input-group-demo.twig (78%) rename src/{components => objects}/input-group/input-group.scss (94%) rename src/{components => objects}/input-group/input-group.stories.mdx (78%) rename src/{components => objects}/input-group/input-group.twig (61%) diff --git a/src/components/input-group/demo/input-group-demo.twig b/src/objects/input-group/demo/input-group-demo.twig similarity index 78% rename from src/components/input-group/demo/input-group-demo.twig rename to src/objects/input-group/demo/input-group-demo.twig index 8cee159c3..afaaaf7f9 100644 --- a/src/components/input-group/demo/input-group-demo.twig +++ b/src/objects/input-group/demo/input-group-demo.twig @@ -1,13 +1,13 @@ {% embed '@cloudfour/objects/rhythm/rhythm.twig' %} {% block content %} - {% embed '@cloudfour/components/input-group/input-group.twig' %} + {% embed '@cloudfour/objects/input-group/input-group.twig' %} {% block content %} {% include '@cloudfour/components/button/button.twig' %} {% include '@cloudfour/components/input/input.twig' %} {% endblock %} {% endembed %} - {% embed '@cloudfour/components/input-group/input-group.twig' %} + {% embed '@cloudfour/objects/input-group/input-group.twig' %} {% block content %} {% include '@cloudfour/components/input/input.twig' %} {% include '@cloudfour/components/button/button.twig' %} diff --git a/src/components/input-group/input-group.scss b/src/objects/input-group/input-group.scss similarity index 94% rename from src/components/input-group/input-group.scss rename to src/objects/input-group/input-group.scss index 5f5a4a302..8bc654277 100644 --- a/src/components/input-group/input-group.scss +++ b/src/objects/input-group/input-group.scss @@ -1,6 +1,6 @@ @use "../../compiled/tokens/scss/size"; -.c-input-group { +.o-input-group { display: flex; & > :not(:first-child) { diff --git a/src/components/input-group/input-group.stories.mdx b/src/objects/input-group/input-group.stories.mdx similarity index 78% rename from src/components/input-group/input-group.stories.mdx rename to src/objects/input-group/input-group.stories.mdx index 482e5fd10..907f8b03b 100644 --- a/src/components/input-group/input-group.stories.mdx +++ b/src/objects/input-group/input-group.stories.mdx @@ -11,11 +11,11 @@ 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 combines the [Button](/story/components-button--button-element) and [Input](/story/components-input--text-elements) components. This would work well in creating design elements like search bars. +The Input Group layout combines the [Button](/story/components-button--button-element) and [Input](/story/components-input--text-elements) components and places them next to each other with no padding or margin. This would work well in creating design elements like search bars. Buttons and inputs can be put in whatever order you choose, and the components will adjust accordingly. diff --git a/src/components/input-group/input-group.twig b/src/objects/input-group/input-group.twig similarity index 61% rename from src/components/input-group/input-group.twig rename to src/objects/input-group/input-group.twig index 217b6de9e..802652fa8 100644 --- a/src/components/input-group/input-group.twig +++ b/src/objects/input-group/input-group.twig @@ -1,3 +1,3 @@ -
+
{% block content %} {% endblock %}
From 179cc83210545521e86cf969b850e79a2a4d68e7 Mon Sep 17 00:00:00 2001 From: Arianna Chau Date: Mon, 19 Jul 2021 09:45:11 -0700 Subject: [PATCH 15/20] Update .changeset/chatty-papayas-juggle.md Co-authored-by: Gerardo Rodriguez --- .changeset/chatty-papayas-juggle.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/chatty-papayas-juggle.md b/.changeset/chatty-papayas-juggle.md index 7b41b41d6..94bdc0bd0 100644 --- a/.changeset/chatty-papayas-juggle.md +++ b/.changeset/chatty-papayas-juggle.md @@ -2,4 +2,4 @@ '@cloudfour/patterns': minor --- -Add Input Group component +Add Input Group object From d4ab62b2e9994211bad69b885708a95da13c06a9 Mon Sep 17 00:00:00 2001 From: Arianna Chau Date: Mon, 19 Jul 2021 10:03:13 -0700 Subject: [PATCH 16/20] Update src/objects/input-group/demo/input-group-demo.twig Co-authored-by: Tyler Sticka --- src/objects/input-group/demo/input-group-demo.twig | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/objects/input-group/demo/input-group-demo.twig b/src/objects/input-group/demo/input-group-demo.twig index afaaaf7f9..7d8aaeea6 100644 --- a/src/objects/input-group/demo/input-group-demo.twig +++ b/src/objects/input-group/demo/input-group-demo.twig @@ -9,8 +9,8 @@ {% embed '@cloudfour/objects/input-group/input-group.twig' %} {% block content %} - {% include '@cloudfour/components/input/input.twig' %} - {% include '@cloudfour/components/button/button.twig' %} + {% include '@cloudfour/components/input/input.twig' only %} + {% include '@cloudfour/components/button/button.twig' only %} {% endblock %} {% endembed %} {% endblock %} From 66271b47f110a7551ef177ffc5a9b43c94a1b4fb Mon Sep 17 00:00:00 2001 From: Arianna Chau Date: Mon, 19 Jul 2021 10:03:20 -0700 Subject: [PATCH 17/20] Update src/objects/input-group/demo/input-group-demo.twig Co-authored-by: Tyler Sticka --- src/objects/input-group/demo/input-group-demo.twig | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/objects/input-group/demo/input-group-demo.twig b/src/objects/input-group/demo/input-group-demo.twig index 7d8aaeea6..f9c703299 100644 --- a/src/objects/input-group/demo/input-group-demo.twig +++ b/src/objects/input-group/demo/input-group-demo.twig @@ -2,8 +2,8 @@ {% block content %} {% embed '@cloudfour/objects/input-group/input-group.twig' %} {% block content %} - {% include '@cloudfour/components/button/button.twig' %} - {% include '@cloudfour/components/input/input.twig' %} + {% include '@cloudfour/components/button/button.twig' only %} + {% include '@cloudfour/components/input/input.twig' only %} {% endblock %} {% endembed %} From de330881fac9f2c08c87152f06ca02d949d655f8 Mon Sep 17 00:00:00 2001 From: Arianna Chau Date: Mon, 19 Jul 2021 10:55:24 -0700 Subject: [PATCH 18/20] Update src/objects/input-group/input-group.stories.mdx Co-authored-by: Tyler Sticka --- src/objects/input-group/input-group.stories.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/objects/input-group/input-group.stories.mdx b/src/objects/input-group/input-group.stories.mdx index 907f8b03b..ac2d99852 100644 --- a/src/objects/input-group/input-group.stories.mdx +++ b/src/objects/input-group/input-group.stories.mdx @@ -17,7 +17,7 @@ import './input-group.scss'; The Input Group layout combines the [Button](/story/components-button--button-element) and [Input](/story/components-input--text-elements) components and places them next to each other with no padding or margin. This would work well in creating design elements like search bars. -Buttons and inputs can be put in whatever order you choose, and the components will adjust accordingly. +Buttons and inputs can be put in whatever order you choose. Date: Mon, 19 Jul 2021 10:55:34 -0700 Subject: [PATCH 19/20] Update src/objects/input-group/input-group.stories.mdx Co-authored-by: Tyler Sticka --- src/objects/input-group/input-group.stories.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/objects/input-group/input-group.stories.mdx b/src/objects/input-group/input-group.stories.mdx index ac2d99852..de1ff622b 100644 --- a/src/objects/input-group/input-group.stories.mdx +++ b/src/objects/input-group/input-group.stories.mdx @@ -15,7 +15,7 @@ import './input-group.scss'; ## Input Group -The Input Group layout combines the [Button](/story/components-button--button-element) and [Input](/story/components-input--text-elements) components and places them next to each other with no padding or margin. This would work well in creating design elements like search bars. +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. From 569d27204af31be2a38924ff868d1305abdae906 Mon Sep 17 00:00:00 2001 From: Arianna Chau Date: Mon, 19 Jul 2021 11:13:41 -0700 Subject: [PATCH 20/20] Update src/objects/input-group/input-group.stories.mdx Co-authored-by: Tyler Sticka --- src/objects/input-group/input-group.stories.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/objects/input-group/input-group.stories.mdx b/src/objects/input-group/input-group.stories.mdx index de1ff622b..0898006a8 100644 --- a/src/objects/input-group/input-group.stories.mdx +++ b/src/objects/input-group/input-group.stories.mdx @@ -13,7 +13,7 @@ import './input-group.scss'; -## Input Group +# 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.