fix(my-joy-beta): fix section-list scrolling

fixes #1266
2018-02-27 13:24:36 +00:00 · 2018-02-27 13:24:36 +00:00 · 84f6faf693
parent e405d47cea
commit 84f6faf693
15 changed files with 29 additions and 37 deletions
--- a/packages/my-joy-beta/src/components/create-instance/package.js
+++ b/packages/my-joy-beta/src/components/create-instance/package.js
@ -130,7 +130,7 @@ export const Package = ({
  sortBy,
  onRowClick
 }) => (
-  <TableTrActionable onClick={() => onRowClick({ id, selected })}>
+  <TableTrActionable onClick={() => onRowClick(id)}>
    <TableTd right selected={selected}>
      <FormGroup name="package" value={id} type="radio" field={Field} fluid>
        <Radio onBlur={null} noMargin>
--- a/packages/my-joy-beta/src/components/instances/tests/snapshots.spec.js
+++ b/packages/my-joy-beta/src/components/instances/tests/snapshots.spec.js
@ -25,8 +25,8 @@ it('renders <Item mutating /> without throwing', () => {
        <Theme>
          <Table>
            <TableTbody>
-              <Item mutating='start' />
-              <Item mutating='remove' />
+              <Item mutating="start" />
+              <Item mutating="remove" />
            </TableTbody>
          </Table>
        </Theme>
--- a/packages/my-joy-beta/src/components/instances/tests/snapshots.ui.js
+++ b/packages/my-joy-beta/src/components/instances/tests/snapshots.ui.js
@ -26,8 +26,8 @@ it('<Item mutating />', async () => {
      <Theme ss>
        <Table>
          <TableTbody>
-            <Item mutating='start' />
-            <Item mutating='remove' />
+            <Item mutating="start" />
+            <Item mutating="remove" />
          </TableTbody>
        </Table>
      </Theme>
--- a/packages/my-joy-beta/src/components/instances/snapshots.js
+++ b/packages/my-joy-beta/src/components/instances/snapshots.js
@ -35,14 +35,7 @@ const loadingState = {
  remove: 'Removing...'
 };

-export const Item = ({
-  name,
-  state,
-  created,
-  onStart,
-  onRemove,
-  mutating
-}) => (
+export const Item = ({ name, state, created, onStart, onRemove, mutating }) => (
  <TableTr>
    {!mutating ? (
      <Fragment>
--- a/packages/my-joy-beta/src/components/navigation/tests/snapshots/menu.spec.js.snap
+++ b/packages/my-joy-beta/src/components/navigation/tests/snapshots/menu.spec.js.snap
@ -75,7 +75,8 @@ exports[`renders <Menu links /> without throwing 1`] = `
  padding: 0.8125rem 0rem;
  margin: 1.125rem 0 0 0;
  max-height: 50px;
-  overflow-x: scroll;
+  overflow-x: auto;
+  overflow-y: hidden;
  box-sizing: border-box;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
--- a/packages/my-joy-beta/src/containers/create-instance/tests/snapshots/metadata.spec.js.snap
+++ b/packages/my-joy-beta/src/containers/create-instance/tests/snapshots/metadata.spec.js.snap
@ -3394,7 +3394,7 @@ Array [
                            className="c7"
                        >
                            <span>
-                                hello—
+                                hello: 
                            </span>
                            <span>
                                world
@ -4563,7 +4563,7 @@ Array [
                            className="c7"
                        >
                            <span>
-                                hello2—
+                                hello2: 
                            </span>
                            <span>
                                world2
@ -6003,7 +6003,7 @@ Array [
                            className="c7"
                        >
                            <span>
-                                hello—
+                                hello: 
                            </span>
                            <span>
                                world
@ -7191,7 +7191,7 @@ Array [
                            className="c7"
                        >
                            <span>
-                                hello2—
+                                hello2: 
                            </span>
                            <span>
                                world2
--- a/packages/my-joy-beta/src/containers/create-instance/affinity.js
+++ b/packages/my-joy-beta/src/containers/create-instance/affinity.js
@ -20,7 +20,7 @@ const FORM_NAME_EDIT = i => `CREATE-INSTANCE-AFFINITY-EDIT-${i}`;

 const RULE_DEFAULTS = {
  'rule-instance-name': '',
-  'rule-instance-conditional': 'must',
+  'rule-instance-conditional': 'should',
  'rule-instance-placement': 'same',
  'rule-instance-tag-key-pattern': 'equalling',
  'rule-instance-tag-value-pattern': 'equalling',
--- a/packages/my-joy-beta/src/containers/create-instance/index.js
+++ b/packages/my-joy-beta/src/containers/create-instance/index.js
@ -160,7 +160,7 @@ export default compose(
    const error = get(form, `${CREATE_FORM}.error`, null);
    const name = get(form, `${FORM_NAME}.values.name`, '');
    const image = get(form, 'create-instance-image.values.image', '');
-    const pkg = get(form, 'create-instance-package.values.package', '');
+    const pkg = get(values, 'selected-package', '');
    const networks = get(form, 'CREATE-INSTANCE-NETWORKS.values', {});

    const enabled =
--- a/packages/my-joy-beta/src/containers/create-instance/package.js
+++ b/packages/my-joy-beta/src/containers/create-instance/package.js
@ -239,8 +239,8 @@ export default compose(
      handleResetFilters: () => {
        dispatch(destroy(`${FORM_NAME}-filters`));
      },
-      handleRowClick: ({ id, selected }) => {
-        dispatch(change(FORM_NAME, id, !selected));
+      handleRowClick: id => {
+        dispatch(change(FORM_NAME, 'package', id));
      },
      handleSortBy: (newSortBy, sortOrder) => {
        dispatch([
--- a/packages/my-joy-beta/src/containers/instances/tests/snapshots/metadata.spec.js.snap
+++ b/packages/my-joy-beta/src/containers/instances/tests/snapshots/metadata.spec.js.snap
@ -453,7 +453,7 @@ exports[`renders <Metadata /> without throwing 1`] = `
      className="c17"
    >
      0
-       key:value pair
+       key-value pair
      s
    </h3>
  </div>
@ -1895,7 +1895,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
      className="c40"
    >
      0
-       key:value pair
+       key-value pair
      s
    </h3>
  </div>
@ -2423,7 +2423,7 @@ exports[`renders <Metadata error /> without throwing 1`] = `
      className="c22"
    >
      0
-       key:value pair
+       key-value pair
      s
    </h3>
  </div>
@ -4422,7 +4422,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
      className="c17"
    >
      3
-       key:value pair
+       key-value pair
      s
    </h3>
  </div>
--- a/packages/my-joy-beta/src/containers/instances/tests/snapshots/tags.spec.js.snap
+++ b/packages/my-joy-beta/src/containers/instances/tests/snapshots/tags.spec.js.snap
@ -3624,7 +3624,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
                className="c23"
              >
                <span>
-                  name1:
+                  name1: 
                </span>
                <span>
                  value1
@ -5159,7 +5159,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
                className="c23"
              >
                <span>
-                  name1:
+                  name1: 
                </span>
                <span>
                  value1
--- a/packages/my-joy-beta/src/containers/instances/metadata.js
+++ b/packages/my-joy-beta/src/containers/instances/metadata.js
@ -79,7 +79,7 @@ export const Metadata = ({
  const _count = !_loading ? (
    <Margin bottom={4} top={addOpen && 4}>
      <H3>
-        {metadata.length} key:value pair{metadata.length === 1 ? '' : 's'}
+        {metadata.length} key-value pair{metadata.length === 1 ? '' : 's'}
      </H3>
    </Margin>
  ) : null;
--- a/packages/ui-toolkit/src/key-value/index.js
+++ b/packages/ui-toolkit/src/key-value/index.js
@ -213,13 +213,9 @@ export const KeyValue = ({
                  {initialValues.name ? (
                    <Fragment>
                      {expanded ? (
-                        <span>{`${initialValues.name}${
-                          type === 'metadata' ? '—' : ':'
-                        }`}</span>
+                        <span>{`${initialValues.name}${': '}`}</span>
                      ) : (
-                        <Bold>{`${initialValues.name}${
-                          type === 'metadata' ? '—' : ':'
-                        }`}</Bold>
+                        <Bold>{`${initialValues.name}${': '}`}</Bold>
                      )}
                      <span>{initialValues.value}</span>
                    </Fragment>
--- a/packages/ui-toolkit/src/section-list/tests/snapshots/section.spec.js.snap
+++ b/packages/ui-toolkit/src/section-list/tests/snapshots/section.spec.js.snap
@ -276,7 +276,8 @@ exports[`SectionList SectionList 1`] = `
  padding: 0.8125rem 0rem;
  margin: 1.125rem 0 0 0;
  max-height: 50px;
-  overflow-x: scroll;
+  overflow-x: auto;
+  overflow-y: hidden;
  box-sizing: border-box;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
--- a/packages/ui-toolkit/src/section-list/index.js
+++ b/packages/ui-toolkit/src/section-list/index.js
@ -10,7 +10,8 @@ const UnorderedList = styled.ul`
  padding: ${remcalc(13)} ${remcalc(0)};
  margin: ${remcalc(18)} 0 0 0;
  max-height: 50px;
-  overflow-x: scroll;
+  overflow-x: auto;
+  overflow-y: hidden;
  box-sizing: border-box;
  display: inline-flex;
  position: relative;